/* ==========================================================================
   Replim base layer
   --------------------------------------------------------------------------
   Reset, typography and the primitives that appear on more than one surface:
   buttons, tags, platform badges, fields, alerts, icons.

   Requires tokens.css. Nothing here may contain a colour literal; if a value
   is missing from the token layer, add it there rather than hard coding here.
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "ss03" 1;  /* Inter: single storey l, curved r */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
h1, h2 { font-family: var(--font-display); }
h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
img, video { display: block; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* Focus. One ring everywhere, always the accent, never removed. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Scrollbars follow the theme rather than staying stock white. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* Motion is only ever used to explain a state change, so removing it costs
   no meaning. Everything settles into its final state. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.u-vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--sp-3); top: -60px; z-index: var(--z-overlay);
    background: var(--ink); color: var(--canvas);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-weight: 600;
    transition: top var(--t-ui) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

.icon { flex: 0 0 auto; vertical-align: -0.15em; }
.icon--brand { vertical-align: -0.2em; }

.eyebrow {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

/* A link out to the author's own profile on the platform. The trailing glyph
   marks it as leaving the product, and every use pairs it with screen reader
   text saying the link opens in a new tab. */
.author-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.author-link:hover { color: var(--accent-text); text-decoration: underline; }
.author-link__out { opacity: 0.55; }

/* Numerals in tables, counts and metrics line up in columns. */
.tnum { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   BUTTONS
   One set for the whole product. The app used to carry .btn--ember and the
   landing .btn--primary for the same thing.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px 18px;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--t-body);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--t-hover) var(--ease),
        border-color var(--t-hover) var(--ease),
        color var(--t-hover) var(--ease),
        transform var(--t-hover) var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

.btn--lg { padding: 14px 26px; min-height: 52px; font-size: 1rem; }
.btn--sm { padding: 7px 14px; min-height: 34px; font-size: var(--t-sm); }
.btn--block { width: 100%; }
.btn--square { padding: 0; width: 38px; min-height: 38px; border-radius: var(--r-sm); }

.btn--primary { background: var(--accent-fill); color: var(--on-accent); }
.btn--primary:not(:disabled):hover { background: var(--accent-fill-hover); }

.btn--secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--secondary:not(:disabled):hover { border-color: var(--ink-3); }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:not(:disabled):hover { border-color: var(--ink-3); background: var(--surface); }

.btn--quiet { background: transparent; color: var(--ink-2); }
.btn--quiet:not(:disabled):hover { color: var(--ink); background: var(--tint); }

.btn--danger { background: transparent; border-color: var(--line); color: var(--neg); }
.btn--danger:not(:disabled):hover { background: var(--neg-bg); border-color: var(--neg); }

/* On an inverted band the neutral buttons have to flip too. */
.on-invert .btn--secondary,
.on-invert .btn--ghost { background: transparent; border-color: var(--invert-line); color: var(--invert-ink); }
.on-invert .btn--secondary:hover,
.on-invert .btn--ghost:hover { border-color: var(--invert-ink); }
.on-invert .btn--quiet { color: var(--invert-ink-2); }
.on-invert .btn--quiet:hover { color: var(--invert-ink); background: transparent; }

/* Inline loading state for submit buttons. */
.btn .spinner {
    display: none;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: 0.9;
    animation: spin 0.7s linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   TAGS AND BADGES
   Sentiment and intent are always a label plus a colour, never colour alone.
   ========================================================================== */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-2xs);
    font-weight: 600;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.tag--positive,
.tag--done { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 22%, transparent); }
.tag--negative { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 22%, transparent); }
.tag--warn,
.tag--attention { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.tag--accent,
.tag--buying { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft-line); }
.tag--neutral,
.tag--question,
.tag--repeat,
.tag--low { background: var(--tint); color: var(--ink-2); border-color: var(--line); }

.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Platform badge. Was .pbadge on the landing and .platform-badge in the app. */
.pbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-2xs);
    font-weight: 600;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.pbadge--instagram { background: var(--tint-instagram); color: var(--ink-instagram); }
.pbadge--facebook  { background: var(--tint-facebook);  color: var(--ink-facebook); }
.pbadge--linkedin  { background: var(--tint-linkedin);  color: var(--ink-linkedin); }
.pbadge--youtube   { background: var(--tint-youtube);   color: var(--ink-youtube); }

/* Filter chip. Used by the inbox filters and by the landing demos, so it lives
   here rather than being defined twice with slightly different padding. */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--t-sm); font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    transition: background var(--t-hover) var(--ease),
                border-color var(--t-hover) var(--ease),
                color var(--t-hover) var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--canvas); font-weight: 600; }
.chip__count { font-size: var(--t-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip.is-active .chip__count { color: var(--canvas); opacity: 0.7; }

/* Keyboard hint, used by the inbox shortcuts. */
kbd.key {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; padding: 2px 6px;
    background: var(--tint); border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: var(--r-xs);
    font-family: var(--font-sans); font-size: var(--t-2xs); font-weight: 600;
    color: var(--ink-2);
}

/* ==========================================================================
   AVATARS
   Initials on a warm tint. No generated gradients: the previous purple
   gradient avatars fought the accent on every screen they appeared.
   ========================================================================== */

.avatar {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tint);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    overflow: hidden;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--t-2xs); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--t-sm); }
.avatar--square { border-radius: var(--r-sm); }
.avatar--accent { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); }

/* ==========================================================================
   FIELDS
   Shared by auth, settings and the inbox composer.
   ========================================================================== */

.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.field > label,
.field__label {
    display: block;
    font-size: var(--t-sm);
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink);
}

.input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
    width: 100%;
    padding: 10px 13px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: var(--t-body);
    font-family: inherit;
    color: var(--ink);
    transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

.input::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input.is-invalid,
.field textarea.is-invalid { border-color: var(--neg); }
.field input.is-invalid:focus { box-shadow: 0 0 0 3px var(--neg-bg); }

.field__hint { font-size: var(--t-xs); color: var(--ink-3); margin-top: 6px; }
.field__error {
    display: block; min-height: 16px; margin-top: 5px;
    font-size: var(--t-xs); color: var(--neg); font-weight: 500;
}
.field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.field__check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-sm); color: var(--ink-2); }
.field__check input { width: auto; accent-color: var(--accent-fill); }

/* Toggle switch */
.switch {
    position: relative;
    width: 40px; height: 23px;
    flex: 0 0 auto;
    border-radius: var(--r-pill);
    background: var(--line-strong);
    transition: background var(--t-hover) var(--ease);
}
.switch__knob {
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--w-0);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-hover) var(--ease);
}
.switch.is-on { background: var(--accent-fill); }
.switch.is-on .switch__knob { transform: translateX(17px); }

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
    display: none;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 11px 14px;
    margin-bottom: var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 500;
    background: var(--neg-bg);
    color: var(--neg);
    border-color: color-mix(in srgb, var(--neg) 25%, transparent);
}
.alert.is-visible { display: flex; }
.alert--success { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 25%, transparent); }
.alert--notice { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.alert--static { display: flex; }

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-16) var(--sp-5);
    color: var(--ink-2);
}
.empty__mark {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--tint);
    border: 1px solid var(--line);
    color: var(--ink-3);
}
.empty h3 { font-size: var(--t-head); color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: var(--measure-narrow); font-size: var(--t-sm); }
.empty .btn { margin-top: var(--sp-5); }

/* ==========================================================================
   THEME TOGGLE
   Three states: follow the system, force light, force dark. A two state
   toggle cannot express "follow the system", which is the default and the
   one most people want.
   ========================================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.theme-toggle__btn {
    display: grid; place-items: center;
    width: 28px; height: 26px;
    border-radius: var(--r-pill);
    color: var(--ink-3);
    transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.theme-toggle__btn:hover { color: var(--ink); }
.theme-toggle__btn[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}