:root {
    --bg: #07080a;
    --fg: #f4f5f7;
    /* Bumped a second time for readability. Previous values still felt
       washed-out per user. --muted serves description text (#b4bac4 reads
       comfortably without losing hierarchy); --dim serves tertiary labels
       (#8b929e is the floor that stays under --muted but stays legible). */
    --muted: #b4bac4;
    --dim: #8b929e;
    --accent: #6cd99a;
    --accent-hover: #7ee5a8;
    --accent-ink: #06210f;
    --field-bg: rgba(255, 255, 255, 0.04);
    --field-bg-strong: rgba(255, 255, 255, 0.075);
    /* Card edges need to read at a glance. 0.18 looks like a real edge
       on dark backgrounds without becoming a hard outline. */
    --border: rgba(255, 255, 255, 0.18);
    --border-strong: rgba(255, 255, 255, 0.28);
    --danger: #ff6b6b;
    --radius: 16px;
    --radius-md: 10px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --serif: 'Newsreader', 'Iowan Old Style', 'Charter', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(108, 217, 154, 0.045), transparent 60%),
        radial-gradient(ellipse 1400px 800px at 50% 110%, rgba(91, 125, 209, 0.045), transparent 60%),
        var(--bg);
}

a { color: inherit; }

/* ── auth pages (centered hero) ──────────────────────────────────── */

body.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

body.auth::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(800px, 120vw);
    height: min(800px, 120vw);
    transform: translate(-50%, -55%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 217, 154, 0.10) 0%, rgba(108, 217, 154, 0.035) 30%, transparent 60%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
    animation: breathe 9s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -55%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -55%) scale(1.08); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.signup, .notice {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 48px 24px;
    text-align: center;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.brand {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: var(--muted);
    /* Was uppercase, which suited a three-letter name. "EXHALE" is not the
       brand; the wordmark keeps the letter-spacing treatment but the casing
       comes from the markup. Matches the inline .brandmark rules in
       login.html, login_sent.html and landing.html. */
    text-transform: none;
    margin-bottom: 56px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(108, 217, 154, 0.55);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(108, 217, 154, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 0 18px rgba(108, 217, 154, 0.75); transform: scale(1.15); }
}

h1 {
    font-family: var(--serif);
    font-size: clamp(36px, 6vw, 48px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 14px;
    animation: rise 0.9s cubic-bezier(.2,.7,.2,1) both;
}

h1 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}

.sub {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 36px;
    animation: rise 1s cubic-bezier(.2,.7,.2,1) 0.1s both;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: rise 1s cubic-bezier(.2,.7,.2,1) 0.2s both;
}

input[type="tel"], input[type="text"], input[type="email"], input[type="password"] {
    width: 100%;
    padding: 16px 20px;
    background: var(--field-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 17px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
input:focus {
    border-color: var(--border-strong);
    background: var(--field-bg-strong);
}

/* OTP code input — big, centered, monospaced for legibility */
input.otp {
    text-align: center;
    font-size: clamp(28px, 7vw, 38px);
    font-weight: 500;
    letter-spacing: 0.5em;
    padding: 22px 18px 22px 28px; /* compensate for letter-spacing right edge */
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Menlo', 'Roboto Mono', monospace;
}

.consent {
    color: var(--dim);
    font-size: 11.5px;
    line-height: 1.55;
    margin: 6px 4px 8px;
    text-align: left;
}
.consent a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

button, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 22px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}
button:hover, a.btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -10px rgba(108, 217, 154, 0.55);
}
button:active, a.btn:active { transform: translateY(0); }

button.ghost, a.btn.ghost {
    background: var(--field-bg);
    color: var(--fg);
    /* P4: bumped border from --border (rgba 0.08) to --border-strong
       (rgba 0.16) so dark-on-dark ghost buttons are actually visible. */
    border: 1px solid var(--border-strong);
}
button.ghost:hover, a.btn.ghost:hover {
    background: var(--field-bg-strong);
    border-color: var(--muted);
    box-shadow: none;
}

/* Personalize button — sits between ghost (too quiet) and primary (too loud).
   Accent-tinted text + border + soft outer glow so users notice they can
   tune a workflow without it competing with the primary on/off action. */
button.personalize, a.btn.personalize {
    background: rgba(108, 217, 154, 0.08);
    color: var(--accent);
    border: 1px solid rgba(108, 217, 154, 0.45);
    box-shadow: 0 6px 22px -12px rgba(108, 217, 154, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button.personalize:hover, a.btn.personalize:hover {
    background: rgba(108, 217, 154, 0.14);
    border-color: rgba(108, 217, 154, 0.7);
    color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(108, 217, 154, 0.16), 0 10px 30px -10px rgba(108, 217, 154, 0.6);
    transform: translateY(-1px);
}
button.personalize:active, a.btn.personalize:active { transform: translateY(0); }

button.danger, a.btn.danger {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}
button.danger:hover {
    color: var(--danger);
    border-color: rgba(255, 107, 107, 0.35);
    background: rgba(255, 107, 107, 0.05);
    box-shadow: none;
}

button.small, a.btn.small {
    width: auto;
    padding: 9px 16px;
    font-size: 13px;
    border-radius: var(--radius-pill);
}

button.pill, a.btn.pill { border-radius: var(--radius-pill); width: auto; padding: 11px 22px; font-size: 14px; }

.notice h1 { margin-bottom: 18px; }
.notice p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.notice .instructions {
    text-align: left;
    border: 1px solid var(--border);
    background: var(--field-bg);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin: 28px 0 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.error {
    color: var(--danger);
    font-size: 13.5px;
    margin: 2px 2px 0;
}

.hint {
    color: var(--muted);
    font-size: 13.5px;
    margin-top: 28px;
    text-align: center;
}
.muted-link { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.muted-link:hover { color: var(--fg); }

/* ── one-tap start page (start.html): iMessage-style tone picker ──── */

.chat-demo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 30px;
    text-align: left;
}

.bubble {
    width: fit-content;
    max-width: 82%;
    padding: 12px 17px;
    border-radius: 20px;
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.4;
}

.bubble.them {
    align-self: flex-start;
    background: var(--field-bg-strong);
    color: var(--fg);
    border-bottom-left-radius: 6px;
}

/* The two pickable "you" bubbles are <button>s - reset the global
   full-width primary-button styling back down to a chat bubble. */
button.bubble.choice {
    align-self: flex-end;
    display: inline-flex;
    width: fit-content;
    gap: 10px;
    background: var(--field-bg);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 20px;
    border-bottom-right-radius: 6px;
    font-weight: 400;
    letter-spacing: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button.bubble.choice:hover {
    transform: none;
    box-shadow: none;
    background: var(--field-bg-strong);
    color: var(--fg);
}
button.bubble.choice .tick {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    flex: none;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}
button.bubble.choice.selected {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    font-weight: 500;
}
button.bubble.choice.selected .tick {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
button.bubble.choice.selected .tick::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2.5px;
    width: 4px;
    height: 8px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Bubbles land a beat apart, like a real thread. */
.rise-1 { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.05s both; }
.rise-2 { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.35s both; }
.rise-3 { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 0.65s both; }
.rise-4 { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 1.0s both; }
.rise-5 { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 1.2s both; }

.small-note {
    font-size: 13.5px;
    margin: 12px 0 0;
}
.start .instructions { text-align: left; }
.start .consent { margin-top: 26px; }

/* Plain "you" bubble (the landing vignette) - accent, right-aligned. Not
   a button like the tone picker's, so it needs its own rule. */
.bubble.me {
    align-self: flex-end;
    background: var(--accent);
    color: var(--accent-ink);
    border-bottom-right-radius: 6px;
}

/* ── landing hero (landing.html) ─────────────────────────────────── */

.landing { width: 100%; max-width: 460px; padding: 48px 24px; text-align: center; }
.landing .chat-demo { margin: 30px 0 34px; }
.landing .btn { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) 1.0s both; }

/* ── password gate (gate.html) ───────────────────────────────────── */

.gate-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 22px;
    color: var(--accent);
    background: rgba(108, 217, 154, 0.08);
    border: 1px solid rgba(108, 217, 154, 0.3);
    box-shadow: 0 0 0 6px rgba(108, 217, 154, 0.05), 0 10px 40px -14px rgba(108, 217, 154, 0.5);
    animation: rise 0.9s cubic-bezier(.2,.7,.2,1) both;
}
.gate-lock svg { animation: pulse 3s ease-in-out infinite; }

/* ── console layout ──────────────────────────────────────────────── */

body.console-body { display: block; }

.console-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(14px, 4vw, 32px);
    border-bottom: 1px solid var(--border);
    background: rgba(7, 8, 10, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.console-nav .brand {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--fg);
    flex-shrink: 0;
}
.console-nav .brand .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    margin-right: 6px;
    vertical-align: 1px;
}
.console-nav nav {
    display: flex;
    gap: 2px;
    align-items: center;
    /* P4: mobile-safe horizontal scroll instead of wrap-overflow. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.console-nav nav::-webkit-scrollbar { display: none; }
.console-nav nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    padding: 9px 13px;
    border-radius: var(--radius-pill);
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    scroll-snap-align: end;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
.console-nav nav a:hover { color: var(--fg); background: var(--field-bg); }
.console-nav nav a.active { color: var(--fg); background: var(--field-bg-strong); }
.console-nav nav span.dim {
    color: var(--dim);
    font-size: 13.5px;
    padding: 9px 13px;
    text-decoration: line-through;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Mobile nav: stack brand above the nav so the nav gets full width
   for a clean horizontal scroll. Side-by-side layout broke at phone
   widths (brand + 5 links don't fit, links wrapped or scroll was
   invisible). Breakpoint matches the rest of the mobile sheet (640px)
   AND there's a second rule at 1422 - keep both in sync.
   Marked !important on flex-direction so a future rule added below
   can't quietly clobber the stack again. */
@media (max-width: 640px) {
    .console-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 14px;
        gap: 8px;
    }
    /* Brand row takes full width + centers the wordmark.
       The previous version set width: 100% on an <a> (inline element by
       default) - inline elements ignore explicit width, which is why the
       text kept sitting at the left edge. display: block is what
       actually makes width + text-align: center take effect. */
    .console-nav .brand {
        font-size: 13px;
        display: block;
        width: 100%;
        text-align: center;
    }
    .console-nav nav {
        width: 100%;
        justify-content: center;
        gap: 4px;
    }
    .console-nav nav a, .console-nav nav span.dim {
        padding: 7px 11px;
        font-size: 13px;
    }
}

.console {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px clamp(16px, 4vw, 28px) 96px;
    display: block;
}

.console .hero { margin-bottom: 32px; }
.console .hero h1 {
    font-family: var(--serif);
    font-size: clamp(30px, 4.5vw, 40px);
    font-weight: 400;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both;
}
.console .hero p { margin: 4px 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.console .muted { color: var(--muted); }
.console .dim { color: var(--dim); }

/* Cards */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin: 16px 0;
    background: var(--field-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;  /* anchor for popovers inside the card */
}

/* `.card` creates its own stacking context via backdrop-filter, so a
   popover inside one card can't paint over a sibling card by raising
   z-index alone. Cards containing a combo / dropdown get elevated above
   neighbours so the dropdown surfaces correctly. */
.card:has(.combo),
.card:has(.combo-list),
.card.elevated {
    z-index: 5;
}
.card h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.card h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 12px;
}

/* Steps (home) */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
    counter-increment: step;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 18px;
    align-items: start;
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
    content: counter(step);
    font-family: var(--serif);
    font-size: 22px;
    font-style: italic;
    color: var(--accent);
    line-height: 1;
    padding-top: 2px;
}
.steps li strong { display: block; font-weight: 500; font-size: 16px; margin-bottom: 4px; }
.steps li p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* Sectioned workflow catalog: one .wf-section per cadence group, each
   with a serif title + small count + a leading italic tagline. Matches
   the spec mock (one-top12-workflows.html) but folded into our existing
   dark-mode console look rather than the spec's light surface. */
.wf-section { margin-top: 40px; }
.wf-section:first-of-type { margin-top: 8px; }
.wf-section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.wf-section-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
}
.wf-section-count {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim);
    font-weight: 600;
}
.wf-section-tag {
    font-size: 13.5px;
    color: var(--muted);
    font-style: italic;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* Provider / workflow list */
.tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 640px) {
    .tiles.two { grid-template-columns: 1fr 1fr; }
}

.tile {
    display: flex;
    align-items: center;
    /* Belt-and-suspenders against horizontal overflow on mobile. */
    min-width: 0;
    max-width: 100%;
    gap: 14px;
    /* Slimmer vertical padding so tiles read as a compact list, not
       a stack of cards. */
    padding: 12px 16px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.tile:hover {
    border-color: var(--border-strong);
    background: var(--field-bg-strong);
    transform: translateY(-1px);
}

.tile .avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--field-bg-strong);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--fg);
    flex-shrink: 0;
}
.tile .avatar.accent { color: var(--accent); border-color: rgba(108, 217, 154, 0.25); }

/* Logo avatars: hold a brand mark on a soft light surface so multi-color
   PNGs (Google, Slack) and silhouettes (Notion) all read well on the dark
   background. `invert` flips dark monochrome marks so they read on light. */
.tile .avatar.logo {
    background: #f4f5f7;
    border-color: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    padding: 6px;
}
.tile .avatar.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tile .avatar.logo.accent {
    background: #f4f5f7;
    box-shadow: 0 0 0 1px rgba(108, 217, 154, 0.4), 0 0 18px -6px rgba(108, 217, 154, 0.5);
}
/* When the logo already has its own colored card (Granola, Todoist),
   drop the white tile and let the image bleed to the edges. */
.tile .avatar.logo.bleed {
    background: transparent;
    border-color: transparent;
    padding: 0;
}
.tile .avatar.logo.bleed img { border-radius: inherit; }
.tile .avatar.logo.bleed.accent {
    background: transparent;
    box-shadow: 0 0 0 1px rgba(108, 217, 154, 0.5), 0 0 18px -6px rgba(108, 217, 154, 0.5);
}
/* For PNGs with a baked-in opaque background (e.g. Todoist is RGB, not
   RGBA), scale the image so the unwanted border sits outside the
   `overflow: hidden` avatar clip. */
.tile .avatar.logo.zoom img { transform: scale(1.22); transform-origin: center; }

.tile .body { flex: 1; min-width: 0; }
.tile .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 3px;
}
.tile .desc {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
}
.tile .meta {
    color: var(--dim);
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.tile .action {
    flex-shrink: 0;
    align-self: center;
    /* Stack add-context above disconnect (or any other button) as a
       tight column right-aligned. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 92px;
}
.tile .action form { margin: 0; }
.tile .action .ghost { text-align: center; }
/* "edit/add context" button: lower-key than disconnect since it's an
   optional enhancement, not a destructive action. Dotted underline
   feel via subtle accent border on hover. */
.tile .action .ghost-context {
    color: var(--muted);
}
.tile .action .ghost-context:hover {
    color: var(--accent);
    border-color: rgba(108, 217, 154, 0.35);
    background: rgba(108, 217, 154, 0.06);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--field-bg);
}
.badge.on {
    color: var(--accent);
    border-color: rgba(108, 217, 154, 0.35);
    background: rgba(108, 217, 154, 0.07);
}
.badge.on::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(108, 217, 154, 0.6);
}
.badge.soon { color: var(--dim); }
.badge.off { color: var(--muted); }

/* Reveal toggle (eye icon next to phone) */
.reveal { display: inline-flex; align-items: center; gap: 10px; }
.reveal-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.reveal.shown .reveal-value { color: var(--fg); }
.icon-btn {
    width: 30px; height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.icon-btn:hover {
    color: var(--fg);
    border-color: var(--border-strong);
    background: var(--field-bg);
    transform: none;
    box-shadow: none;
}
.icon-btn .ico { width: 16px; height: 16px; display: block; }
.icon-btn .ico-off { display: none; }
.icon-btn[aria-pressed="true"] { color: var(--accent); border-color: rgba(108, 217, 154, 0.35); }
.icon-btn[aria-pressed="true"] .ico-open { display: none; }
.icon-btn[aria-pressed="true"] .ico-off { display: block; }

/* ── Account: profile rows ─────────────────────────────────────────── */
.profile { display: flex; flex-direction: column; gap: 4px; }
.profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
}
.profile-row:last-child { border-bottom: none; }
.profile-label {
    font-size: 12px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.profile-row .badge { margin-left: 8px; }

/* ── Account: timezone card ────────────────────────────────────────── */
.tz-card { display: flex; flex-direction: column; gap: 20px; }
.tz-current-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 4px 4px;
}
.tz-clock-big {
    font-family: var(--serif);
    font-size: clamp(40px, 7vw, 56px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tz-current-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tz-current-name {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 14px;
    color: var(--fg);
    word-break: break-all;
}
.tz-current-hint {
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    min-height: 14px;
}

.tz-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.tz-form .combo { position: relative; flex: 1; min-width: 220px; }
.tz-form input {
    width: 100%;
    padding: 12px 16px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 14.5px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tz-form input:focus {
    border-color: var(--border-strong);
    background: var(--field-bg-strong);
    box-shadow: 0 0 0 3px rgba(108, 217, 154, 0.08);
}
.tz-form button.accent {
    width: auto;
    padding: 0 22px;
    height: auto;
    font-size: 14px;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: var(--accent);
    color: var(--accent-ink);
}
.tz-form button.accent:hover { background: var(--accent-hover); }

/* Language picker: a native <select> restyled to match the tz field so
   the two cards read as one family. appearance:none + the chevron SVG
   handle the closed control; color-scheme:dark makes the OPEN option
   list render dark instead of the default white popup. */
.tz-form select {
    flex: 1;
    min-width: 220px;
    padding: 12px 42px 12px 16px;
    background-color: var(--field-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b929e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    color-scheme: dark;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.2;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.tz-form select:hover { border-color: var(--border-strong); }
.tz-form select:focus {
    border-color: var(--border-strong);
    background-color: var(--field-bg-strong);
    box-shadow: 0 0 0 3px rgba(108, 217, 154, 0.08);
}

/* Combo dropdown: anchored under the input, same width, scrollable.
   z-index is high but only meaningful within the card's stacking context;
   the parent .card is elevated via .card:has(.combo) above to escape sibling
   cards entirely. */
.combo-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #0f1115;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: rise 0.18s ease both;
}
.combo-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--fg);
    transition: background 0.1s ease;
}
.combo-opt:hover, .combo-opt.active {
    background: rgba(108, 217, 154, 0.10);
    color: var(--fg);
}
.combo-opt.active { box-shadow: inset 0 0 0 1px rgba(108, 217, 154, 0.35); }
.combo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-off {
    color: var(--dim);
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.tz-flash {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
}
.tz-flash.ok {
    color: var(--accent);
    background: rgba(108, 217, 154, 0.07);
    border: 1px solid rgba(108, 217, 154, 0.25);
}
.tz-flash.err {
    color: var(--danger);
    background: rgba(255, 107, 107, 0.06);
    border: 1px solid rgba(255, 107, 107, 0.25);
}

/* Key-value list */
.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 12px 22px;
    margin: 0;
    align-items: baseline;
}
.kv dt {
    color: var(--dim);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.kv dd { margin: 0; font-size: 15.5px; }

.section-title {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    margin: 32px 0 14px;
    letter-spacing: -0.01em;
}

hr.thin {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

/* Workflow detail (japanese-minimalist) */
.detail {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px clamp(16px, 4vw, 28px) 96px;
}
.detail .crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}
.detail .crumb:hover { color: var(--fg); }
.detail h1 {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.detail .lede {
    font-family: var(--serif);
    font-style: italic;
    color: var(--accent);
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 36px;
    max-width: 540px;
}
.detail .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.prose {
    color: var(--fg);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    font-family: 'SF Mono', 'Menlo', 'Roboto Mono', monospace;
    font-size: 13px;
    color: var(--muted);
    max-height: 320px;
    overflow-y: auto;
}

/* ── Account: billing plan cards ────────────────────────────────────── */

.plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .plans { grid-template-columns: 1fr 1fr; }
}

.plan {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    background: var(--field-bg);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.plan:hover { border-color: var(--border-strong); }
.plan.current {
    border-color: rgba(108, 217, 154, 0.45);
    background: linear-gradient(
        180deg,
        rgba(108, 217, 154, 0.05) 0%,
        rgba(108, 217, 154, 0.01) 100%
    );
}

.plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.plan-name {
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: -0.01em;
    font-weight: 500;
}
.plan-badge {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.plan-badge.recommended {
    color: var(--accent);
    background: rgba(108, 217, 154, 0.12);
    border: 1px solid rgba(108, 217, 154, 0.30);
}
.plan-badge.current {
    color: var(--accent-ink);
    background: var(--accent);
    border: 1px solid var(--accent);
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 4px 0 8px;
}
.plan-price .amount {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
}
.plan-price .period {
    color: var(--muted);
    font-size: 14px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.plan-features li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg);
    padding-left: 22px;
    position: relative;
}
.plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 12px;
    height: 8px;
    border-left: 1.6px solid var(--accent);
    border-bottom: 1.6px solid var(--accent);
    transform: rotate(-50deg);
}
.plan-features li strong { color: var(--fg); font-weight: 600; }

.plan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--field-bg-strong);
    color: var(--fg);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    margin-top: 4px;
}
.plan-cta:hover {
    background: var(--field-bg);
    border-color: var(--border-strong);
}
.plan-cta.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.plan-cta.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -10px rgba(108, 217, 154, 0.55);
}
.plan-cta:disabled, .plan-cta[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    background: transparent;
}
.plan-cta:disabled:hover { transform: none; box-shadow: none; }

/* ── workflow detail action row ──────────────────────────────────── */
.action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.action-row form { margin: 0; }

/* ── chat messages (used inside the drawer) ──────────────────────── */
.chat-log {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.chat-empty {
    color: var(--dim);
    font-style: italic;
    font-family: var(--serif);
    text-align: center;
    margin: auto;
    padding: 40px 12px;
    font-size: 15px;
}
.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 90%;
    animation: rise 0.25s ease both;
}
.chat-msg .who {
    font-size: 10.5px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.chat-msg .who .via {
    color: var(--accent);
    font-weight: 600;
    font-style: italic;
    margin-left: 4px;
}
.chat-msg .bubble {
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.user .bubble {
    background: rgba(108, 217, 154, 0.10);
    border: 1px solid rgba(108, 217, 154, 0.25);
    color: var(--fg);
}
.chat-msg.assistant .bubble {
    background: var(--field-bg-strong);
    border: 1px solid var(--border);
    color: var(--fg);
}
.chat-msg.change .bubble {
    background: rgba(108, 217, 154, 0.04);
    border: 1px dashed rgba(108, 217, 154, 0.35);
    color: var(--accent);
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12.5px;
}

/* ── slide-in chat drawer ────────────────────────────────────────── */
.drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 90;
}
.drawer-scrim.open { opacity: 1; }

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(520px, 100vw);
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.drawer.open { transform: translateX(0); }

body.drawer-open { overflow: hidden; }

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 12px;
    border-bottom: 1px solid var(--border);
}
.drawer-eyebrow {
    font-size: 11px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 4px;
}
.drawer-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.01em;
}
.drawer-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.drawer-close:hover { color: var(--fg); border-color: var(--border-strong); background: var(--field-bg-strong); }

.drawer-hint {
    font-size: 13px;
    line-height: 1.55;
    margin: 14px 22px 4px;
}

.drawer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.drawer-input {
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.input-row input {
    flex: 1;
    padding: 12px 16px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--fg);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
}
.input-row input:focus { border-color: var(--border-strong); background: var(--field-bg-strong); }
.input-row input:disabled { opacity: 0.6; }

.send-btn {
    width: auto;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    flex-shrink: 0;
    /* Stable: the spec is the send button NEVER moves, even while thinking. */
    transition: background 0.15s ease;
}
.send-btn:hover, .send-btn:active {
    transform: none !important;
    box-shadow: none !important;
}

/* ── mic button + recording banner ───────────────────────────────── */
.mic-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
    cursor: pointer;
}
.mic-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--border-strong); transform: none; }
.mic-btn:disabled { opacity: 0.5; cursor: wait; }
.mic-btn .ico { width: 18px; height: 18px; display: block; }
.mic-btn .ico-stop { display: none; }
.mic-btn[aria-pressed="true"] {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.45);
    color: var(--danger);
    animation: micPulse 1.6s ease-in-out infinite;
}
.mic-btn[aria-pressed="true"] .ico-mic { display: none; }
.mic-btn[aria-pressed="true"] .ico-stop { display: block; }
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0); }
}

/* Recording banner sits ABOVE the input row. Hidden by default; .open is
   toggled by JS when actually recording. We deliberately base on
   `display: none` instead of relying on the [hidden] attribute alone —
   `display: flex` would otherwise outrank [hidden] and leave the banner
   stuck visible. */
.mic-banner {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    background: linear-gradient(
        90deg,
        rgba(255, 107, 107, 0.14) 0%,
        rgba(255, 107, 107, 0.08) 100%
    );
    border: 1px solid rgba(255, 107, 107, 0.32);
    border-radius: 14px;
    color: var(--danger);
    font-size: 13px;
    animation: rec-fade-in 180ms ease both;
}
.mic-banner.open { display: flex; }
.mic-banner[hidden] { display: none !important; }

@keyframes rec-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Live waveform — 22 thin bars whose heights are driven by the Web Audio
   AnalyserNode in workflow_detail.html. Heights are set inline; CSS gives
   each bar its baseline shape + a subtle vertical gradient. */
.rec-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    height: 26px;
    min-width: 0;
}
.rec-wave span {
    flex: 1;
    min-width: 2px;
    min-height: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        rgba(255, 138, 138, 0.95) 0%,
        rgba(255, 107, 107, 0.85) 100%
    );
    transition: height 70ms ease;
}

.rec-time {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--danger);
    opacity: 0.85;
    flex-shrink: 0;
}
.rec-cancel {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 107, 107, 0.45);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.rec-cancel:hover {
    background: rgba(255, 107, 107, 0.18);
    border-color: rgba(255, 107, 107, 0.65);
    color: var(--danger);
    transform: none;
    box-shadow: none;
}

/* ── "thinking" indicator: stable position, 3 bouncing dots ────── */
.thinking {
    padding: 4px 20px 14px;
    display: none;
}
.thinking.htmx-request, .thinking.busy {
    display: block;
}
.thinking-bubble {
    display: inline-flex;
    gap: 4px;
    padding: 10px 14px;
    background: var(--field-bg-strong);
    border: 1px solid var(--border);
    border-radius: 14px;
    align-items: center;
}
.thinking-bubble span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: dotBounce 1.2s ease-in-out infinite;
}
.thinking-bubble span:nth-child(2) { animation-delay: 0.15s; }
.thinking-bubble span:nth-child(3) { animation-delay: 0.30s; }
@keyframes dotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* htmx default indicator class — keep generic rule but our specific
   .thinking rule above wins for the drawer. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }
.htmx-request.htmx-indicator { display: block; }

/* Mobile tweaks. NOTE: .console-nav rules live in the canonical
   block near the top of the file (around line 360) - keep them there,
   not here, to prevent the cascade fight that hid the brand-stacks-
   above-nav fix for several iterations. */
@media (max-width: 640px) {
    .console { padding: 28px 16px 80px; }
    .console .hero { margin-bottom: 24px; }
    .card { padding: 18px; border-radius: 18px; }
    /* Keep tile as a row on mobile but make every child shrink-aware,
       and make the action button compact (text becomes icon-feel rather
       than a full-width chunk). Previous flex-wrap version made tiles
       comically tall. */
    .tile {
        padding: 10px 12px; gap: 10px; border-radius: 14px;
        /* Center-align on mobile so the icon sits in the middle of the
           tile (was top-aligned, which looked off when desc is hidden). */
        align-items: center;
    }
    .tile .avatar { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
    .tile .title { font-size: 14.5px; row-gap: 4px; gap: 6px; }
    .tile .body { min-width: 0; flex: 1 1 auto; }
    .tile .desc { font-size: 13px; }
    /* Action column: small button only - never the full pill that ate
       a third of the row width on phones. */
    .tile .action { flex-shrink: 0; align-self: center; }
    .tile .action .btn, .tile .action .ghost {
        padding: 6px 10px;
        font-size: 12px;
    }
    /* Long descriptions and titles must break instead of forcing the
       parent wider than the viewport. */
    .tile .desc, .tile .title a { overflow-wrap: anywhere; word-break: break-word; }

    /* Chips on mobile: tighter padding to fit more per row. */
    .cat-chip { padding: 4px 9px; font-size: 10.5px; }
    .cat-dd-btn { width: 22px; height: 22px; border-radius: 7px; }
    /* Dropdown menu: align to right edge on mobile so it can't run off
       the screen on right-side tiles. */
    .cat-dd-menu { min-width: 170px; left: auto; right: 0; }
    /* Hide the description on phones - the tile title + category
       chips already convey what the integration does. Keeps cards
       compact + scannable. */
    .tile .desc { display: none; }
    .detail { padding: 24px 16px 80px; }
    .drawer { width: 100vw; border-left: none; }
    .drawer-input { padding: 10px; }
    .input-row input { padding: 11px 14px; font-size: 14px; }
    .drawer-head { padding: 18px 18px 10px; }
    .drawer-hint { margin: 12px 18px 4px; font-size: 12.5px; }
    .signup, .notice { padding: 32px 16px; }
}

/* ── memory views (v0.1) ──────────────────────────────────────────── */
.memory-page .hero { margin-bottom: 24px; }

.memory-search-card { margin-bottom: 28px; }
.memory-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.memory-search input[type="search"] {
    flex: 1; min-width: 260px;
    background: var(--field-bg); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 10px 16px; font: inherit; font-size: 14px;
}
.memory-search input[type="search"]:focus { outline: none; border-color: var(--accent); }
.memory-search button {
    background: var(--accent); color: var(--accent-ink);
    border: none; border-radius: var(--radius-pill);
    padding: 9px 18px; font: inherit; font-weight: 500; font-size: 13.5px;
    cursor: pointer;
}
.memory-search button:hover { background: var(--accent-hover); }

.memory-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}
@media (max-width: 720px) { .memory-grid { grid-template-columns: 1fr; } }

.memory-side-block { margin-bottom: 22px; }
.memory-side-block h4 {
    font-family: var(--sans); font-weight: 500; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--dim); margin: 0 0 8px;
}
.memory-tag-list { list-style: none; padding: 0; margin: 0; }
.memory-tag-list li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 5px 0; font-size: 13px;
}
.memory-tag-list li a { color: var(--muted); }

.memory-list { display: flex; flex-direction: column; gap: 8px; }
.memory-list .small { font-size: 12px; margin: 0 0 6px; }

.memory-node {
    display: block;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: inherit; text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.memory-node:hover { border-color: var(--border-strong); background: var(--field-bg-strong); }
.memory-node-top {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.memory-node-title { font-weight: 500; font-size: 14.5px; color: var(--fg); flex: 1; }
.memory-node-confidence {
    font-family: 'SF Mono', 'Menlo', monospace; font-size: 11px;
    color: var(--muted);
}
.memory-node-body { font-size: 13px; color: var(--muted); margin: 4px 0 8px; line-height: 1.5; }
.memory-node-meta { font-size: 11.5px; display: flex; gap: 6px; flex-wrap: wrap; }
.memory-trust-warn { color: var(--danger); font-size: 11px; }

.memory-empty { text-align: center; color: var(--muted); padding: 28px 16px; }

/* Type chips - one swatch per node type, matching designs/one-memory-spec.html */
.chip {
    display: inline-flex; align-items: center;
    font-size: 10.5px; padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--field-bg-strong);
    color: var(--fg);
    letter-spacing: 0.04em;
}
.chip.type-entity      { background: rgba(136, 135, 128, 0.22); color: #cdc8b8; }
.chip.type-event       { background: rgba(216,  90, 48, 0.20); color: #f0a085; }
.chip.type-playbook    { background: rgba( 29, 158,117, 0.18); color: #7cd9b2; }
.chip.type-commitment  { background: rgba(186, 117, 23, 0.20); color: #e5b06a; }
.chip.type-pattern     { background: rgba(127, 119,221, 0.20); color: #b4adf0; }
.chip.type-signal      { background: rgba(212,  83,126, 0.20); color: #ec9bb6; }
.chip.type-identity    { background: rgba( 55,138,221, 0.20); color: #92baee; }
.chip.type-norm        { background: rgba( 99,153, 34, 0.22); color: #b9d57b; }
.chip.type-reflection  { background: rgba(180,180,180, 0.14); color: var(--muted); }

/* Diary */
.memory-day { margin-bottom: 14px; }
.memory-day h3 {
    font-family: var(--serif); font-weight: 500; font-size: 17px;
    margin: 0 0 10px; color: var(--fg);
}
.memory-diary-list { list-style: none; padding: 0; margin: 0; }
.memory-diary-list li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 0; font-size: 13px;
    border-top: 1px solid var(--border);
}
.memory-diary-list li:first-child { border-top: none; }

.memory-op {
    font-family: 'SF Mono', 'Menlo', monospace; font-size: 10.5px;
    padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em;
    background: var(--field-bg-strong); color: var(--muted);
}
.memory-op.op-created           { background: rgba(108,217,154, 0.16); color: var(--accent); }
.memory-op.op-confidence_bumped { background: rgba(186,117, 23, 0.16); color: #e5b06a; }
.memory-op.op-superseded        { background: rgba(212, 83,126, 0.16); color: #ec9bb6; }
.memory-op.op-user_confirmed    { background: rgba(108,217,154, 0.20); color: var(--accent); }

/* Source page */
.memory-source-title {
    font-family: var(--serif); font-weight: 500; font-size: 28px;
    margin: 0 0 4px; flex: 1; line-height: 1.15;
}
.memory-source-body {
    font-size: 15px; color: var(--muted); line-height: 1.55;
    margin: 10px 0 16px;
}
.memory-source-meta {
    display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px;
    font-size: 13px; margin: 0;
}
.memory-source-meta dt { color: var(--dim); }
.memory-source-meta dd { margin: 0; color: var(--muted); font-family: 'SF Mono', 'Menlo', monospace; font-size: 12px; }

.memory-edge-list { list-style: none; padding: 0; margin: 0 0 14px; }
.memory-edge-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 13.5px;
    border-top: 1px solid var(--border);
}
.memory-edge-list li:first-child { border-top: none; }

.memory-danger { border-color: rgba(255, 107, 107, 0.20); }
.memory-danger-h { font-family: var(--serif); font-size: 16px; margin: 0 0 6px; color: var(--danger); }
.memory-danger-btn {
    background: transparent; color: var(--danger);
    border: 1px solid rgba(255, 107, 107, 0.4); border-radius: var(--radius-pill);
    padding: 8px 16px; font: inherit; font-size: 13px; cursor: pointer;
    transition: background 0.15s;
}
.memory-danger-btn:hover { background: rgba(255, 107, 107, 0.10); }

.muted-link { color: var(--muted); }
.muted-link:hover { color: var(--fg); }
.small { font-size: 12px; }
.mono { font-family: 'SF Mono', 'Menlo', monospace; }

/* ── workflow recommended integrations (F1) ──────────────────────── */
.int-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 14px;
}
.int-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
}
.int-chip.on  { border-color: rgba(108, 217, 154, 0.35); background: rgba(108, 217, 154, 0.08); }
.int-chip.off { color: var(--muted); }
.int-chip-logo {
    width: 16px; height: 16px;
    object-fit: contain; flex-shrink: 0;
}
.int-chip-label { color: var(--fg); font-weight: 500; }
.int-chip-state {
    font-family: 'SF Mono', 'Menlo', monospace; font-size: 11px;
    padding-left: 4px; color: var(--accent);
}
.int-chip.off .int-chip-state { color: var(--muted); }
.int-chip-state.link {
    color: var(--accent); text-decoration: underline;
}
.int-chip-state.link:hover { color: var(--accent-hover); }

/* ── F2: Running vs Explore separation ─────────────────────────── */
.wf-running { margin-bottom: 40px; }
.wf-empty {
    padding: 18px 20px;
    background: var(--field-bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 14px; line-height: 1.55;
}
.wf-explore-wrap {
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.wf-explore-head { margin-bottom: 4px; }
.wf-explore-section { margin-top: 22px; }
.wf-subsection-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.wf-subsection-title {
    font-family: var(--serif); font-weight: 500;
    font-size: 18px; margin: 0;
    color: var(--fg);
}
.wf-section-tag-sub { font-size: 13px; }

/* ── F4: custom workflows ──────────────────────────────────────── */
.wf-cw-cta {
    margin: 24px 0 32px;
    padding: 18px 20px;
    background: var(--field-bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
}
.wf-cw-cta p { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.wf-cw-cta p:last-child { margin: 0; }
.cw-cta-link { color: var(--accent); text-decoration: underline; font-weight: 500; }
.cw-cta-link:hover { color: var(--accent-hover); }

.cw-form { display: flex; flex-direction: column; gap: 16px; }
.cw-label { display: flex; flex-direction: column; gap: 6px; }
.cw-label-text {
    font-family: var(--sans); font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.cw-form input[type="text"],
.cw-form textarea,
.cw-form select {
    background: var(--field-bg); color: var(--fg);
    border: 1px solid var(--border-strong); border-radius: 10px;
    padding: 11px 14px; font: inherit; font-size: 14px;
}
.cw-form textarea { font-family: var(--sans); resize: vertical; line-height: 1.5; }
.cw-form input:focus, .cw-form textarea:focus, .cw-form select:focus {
    outline: none; border-color: var(--accent);
}
.cw-hint { font-size: 12px; color: var(--dim); }
.cw-row { display: flex; gap: 14px; }
.cw-half { flex: 1; }
@media (max-width: 600px) { .cw-row { flex-direction: column; gap: 16px; } }
.cw-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.cw-cats {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0;
}
.cw-cats legend {
    padding: 0 8px;
    font-size: 13px;
    color: var(--fg);
    font-weight: 500;
}
.cw-cat-grid {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    margin-top: 4px;
}
.cw-cat-option {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 13.5px;
    user-select: none;
}
.cw-cat-option:has(input:checked) {
    background: var(--field-bg-strong);
    border-color: var(--accent);
}
.cw-cat-option input { margin: 0; }
.cw-primary {
    background: var(--accent); color: var(--accent-ink);
    border: none; border-radius: var(--radius-pill);
    padding: 11px 22px; font: inherit; font-weight: 500; font-size: 14px;
    cursor: pointer;
}
.cw-primary:hover { background: var(--accent-hover); }
.cw-tips { margin-top: 18px; }
.cw-tips h3 { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 6px; }
.badge.dim { background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.badge.danger-ghost {
    background: transparent;
    color: var(--danger);
    border: 1px solid rgba(255, 107, 107, 0.4);
    cursor: pointer;
}
.badge.danger-ghost:hover { background: rgba(255, 107, 107, 0.10); }
.error {
    background: rgba(255, 107, 107, 0.10); color: var(--danger);
    border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 8px;
    padding: 10px 14px; font-size: 13px;
}

/* ── F5: integration context ──────────────────────────────────── */
.int-tile-note {
    margin-top: 8px; padding: 6px 10px;
    background: var(--field-bg-strong);
    border-radius: 8px;
    font-size: 12.5px; color: var(--muted);
    line-height: 1.4;
}
.int-tile-add-note {
    display: inline-block; margin-top: 8px;
    font-size: 12px;
}

/* Category chips on integration tiles. Only assigned categories
   render as chips; unassigned ones live behind the + dropdown. The +
   trigger is a real button (rounded, has bg, has icon) and sits
   inline at the end of the chip row. The dropdown is positioned
   absolutely so it OVERLAYS rather than expanding the card. Single-
   instance behavior is JS-driven from base.html. */
.cat-chips {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.cat-chip-form { margin: 0; padding: 0; display: inline-flex; }
.cat-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid var(--border-strong);
    background: var(--field-bg-strong);
    color: var(--fg);
}
button.cat-chip {
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button.cat-chip:hover {
    background: rgba(255, 107, 107, 0.10);
    border-color: rgba(255, 107, 107, 0.30);
    color: var(--danger);
}
.cat-chip-x { font-size: 13px; line-height: 1; opacity: 0.55; }
button.cat-chip:hover .cat-chip-x { opacity: 1; }

/* The "+" trigger button. Rounded square (not pill) so it reads as
   an action, not another tag. Subtle by default; brightens on hover. */
.cat-dd { position: relative; display: inline-flex; }
.cat-dd-btn {
    list-style: none;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--field-bg);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cat-dd-btn::-webkit-details-marker { display: none; }
.cat-dd[open] .cat-dd-btn,
.cat-dd-btn:hover {
    background: var(--field-bg-strong);
    border-color: var(--accent);
    color: var(--accent);
}

/* The dropdown menu itself. Absolute - overlays rather than pushing
   tile content. Pretty: rounded, shadowed, padded items. */
.cat-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #0e1015;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
    z-index: 50;
    animation: cat-dd-in 0.12s ease-out;
}
@keyframes cat-dd-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.cat-dd-head {
    padding: 6px 12px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.cat-dd-item {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 12px;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--fg);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    /* One item per line, no wrapping (was wrapping "meeting recorder"
       into 2 lines on the narrow mobile menu). */
    white-space: nowrap;
}
/* The form wrapper inside the menu must stack vertically, not sit
   inline (.cat-chip-form is inline-flex everywhere else - selected
   chips). Override inside the menu only. */
.cat-dd-menu .cat-chip-form { display: block; }
.cat-dd-item:hover {
    background: var(--field-bg-strong);
    color: var(--accent);
}

.int-detail-head {
    display: flex; align-items: flex-start; gap: 18px;
    margin-bottom: 18px;
}
.int-detail-logo { width: 48px; height: 48px; object-fit: contain; }
.int-detail-title {
    font-family: var(--serif); font-weight: 500; font-size: 28px;
    margin: 0 0 4px;
}
.int-detail-desc { color: var(--muted); margin: 0 0 10px; font-size: 14.5px; }
.int-detail-status { display: flex; align-items: center; gap: 10px; }
.inline-form { display: inline; }
.badge.accent-ghost {
    background: transparent; color: var(--accent);
    border: 1px solid rgba(108,217,154,0.4);
    cursor: pointer; text-decoration: none;
}
.badge.accent-ghost:hover { background: rgba(108,217,154,0.10); }
.section-title {
    font-family: var(--serif); font-weight: 500;
    font-size: 18px; margin: 14px 0 8px;
}

/* ── F6: memory redesign + mobile-first ───────────────────────── */

/* "what i know about you" hero */
.mem-summary { margin-bottom: 16px; }
.mem-summary-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
}
.mem-summary-title {
    font-family: var(--serif); font-weight: 500; font-size: 19px;
    margin: 0; color: var(--fg);
}
.mem-summary-list { list-style: none; padding: 0; margin: 0; }
.mem-summary-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; color: inherit;
    border-top: 1px solid var(--border);
}
.mem-summary-list li:first-child .mem-summary-row { border-top: none; }
.mem-summary-row:hover { background: var(--field-bg); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.mem-summary-text { font-size: 14.5px; flex: 1; color: var(--fg); }

/* Big search */
.mem-search-card { margin-bottom: 16px; }
.mem-search {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.mem-search input[type="search"] {
    flex: 1; min-width: 0;
    background: var(--field-bg); color: var(--fg);
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    padding: 12px 18px; font: inherit; font-size: 15px;
}
.mem-search input[type="search"]:focus { outline: none; border-color: var(--accent); }
.mem-search-go {
    background: var(--accent); color: var(--accent-ink);
    border: none; border-radius: var(--radius-pill);
    padding: 11px 22px; font: inherit; font-weight: 500; font-size: 14px;
    cursor: pointer; min-height: 44px;
}
.mem-search-go:hover { background: var(--accent-hover); }

/* Mini-diary */
.mem-mini-diary { margin-bottom: 24px; }
.mem-mini-diary-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
}
.mem-mini-diary-title {
    font-family: var(--serif); font-weight: 500; font-size: 17px;
    margin: 0; color: var(--fg);
}

/* All-nodes header */
.mem-all { margin-top: 12px; }
.mem-all-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
}
.mem-all-head h3 {
    font-family: var(--serif); font-weight: 500; font-size: 16px;
    margin: 0; color: var(--muted);
}

/* Grid with sidebar */
.mem-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

/* Inline-edit form */
.mem-edit-form { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.mem-edit-form.open { display: flex; }
.memory-source.editing > .memory-source-body { opacity: 0.4; }

/* Mobile (< 720px) - everything single column, bigger touch targets */
@media (max-width: 720px) {
    .mem-grid { grid-template-columns: 1fr; gap: 20px; }
    .memory-side {
        display: flex; flex-wrap: wrap; gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
    }
    .memory-side-block { flex: 1 1 140px; margin-bottom: 0; }
    .memory-node { padding: 16px; }
    .memory-node-title { font-size: 15.5px; }
    .memory-node-body { font-size: 13.5px; }
    .mem-summary-text { font-size: 14px; }
    .mem-search input[type="search"] { font-size: 16px; /* iOS no-zoom */ }
    .console-nav nav { gap: 8px; }
    .console-nav nav a { padding: 8px 10px; font-size: 13px; }
}

/* Larger phones - keep the sidebar visible but narrow */
@media (min-width: 480px) and (max-width: 720px) {
    .memory-side { flex-direction: row; }
}

/* Console nav on phones uses horizontal scroll-snap (see .console-nav nav
   above). The old `flex-wrap: wrap` rule that lived here caused the nav
   to break onto multiple rows, which looked broken. Removed in fixes-a-ux. */

/* ── F7: memory import flow ──────────────────────────────────── */
.mi-step { margin-bottom: 16px; }
.mi-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    margin-right: 8px; vertical-align: 1px;
}
.mi-prompt-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 8px 0 14px;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12.5px; line-height: 1.55;
    color: var(--muted);
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 360px; overflow-y: auto;
}
.mi-copy-btn { margin-top: 4px; }
.mi-result {
    border: 1px solid rgba(108,217,154, 0.35);
    background: rgba(108,217,154, 0.06);
}
.mi-result-list { list-style: none; padding: 0; margin: 0 0 12px; }
.mi-result-list li { padding: 4px 0; color: var(--fg); }
.mi-result-list li b { color: var(--accent); font-weight: 500; font-size: 18px; }
.mi-tips-list { padding-left: 18px; line-height: 1.7; margin: 0; }

/* File input cleanup */
input[type="file"] {
    background: var(--field-bg); color: var(--muted);
    border: 1px solid var(--border-strong); border-radius: 10px;
    padding: 8px 10px; font: inherit; font-size: 13px;
}

/* ── P2: flash messages ──────────────────────────────────────── */
.flash-ok {
    background: rgba(108, 217, 154, 0.10);
    border: 1px solid rgba(108, 217, 154, 0.35);
    color: var(--accent);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    margin: 0 0 14px;
    font-weight: 500;
}

/* ── P4: memory sidebar action buttons (import / export) ───────── */
.memory-side-actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 16px;
}
.mem-side-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    font-size: 12.5px;
    padding: 9px 14px !important;
    border-radius: var(--radius-pill);
}
.mem-side-btn span:first-child {
    color: var(--accent);
    font-family: 'SF Mono', 'Menlo', monospace;
}

/* P4: integration tile polish - sleeker hover + cleaner notes preview */
.tile {
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tile:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.int-tile-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--field-bg-strong);
    border-left: 2px solid var(--accent);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
    font-style: italic;
}
.int-tile-add-note {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--accent);
    border: 1px dashed rgba(108, 217, 154, 0.35);
    border-radius: var(--radius-pill);
}
.int-tile-add-note:hover {
    background: rgba(108, 217, 154, 0.08);
    border-style: solid;
}

/* P4: subtle improvement for connect buttons on integration tile action */
.tile .action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* P4: cancel link styling (in forms) - make it look like a tertiary button */
.muted-link {
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    transition: color 0.15s, background 0.15s;
}
.muted-link:hover { color: var(--fg); background: var(--field-bg); }


/* ── P5: workflow data-source categories ──────────────────────── */
.wf-cat {
    margin: 0 0 18px;
}
.wf-cat-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 8px;
    flex-wrap: wrap;
}
.wf-cat-title {
    font-family: var(--sans); font-weight: 500; font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.wf-cat-options {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.wf-cat-option { margin: 0; }
.wf-cat-form { display: inline; margin: 0; }
.wf-cat-pick {
    display: inline-flex; align-items: center; gap: 8px;
    width: auto; padding: 8px 14px;
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--fg);
    font-family: inherit; font-size: 13px; font-weight: 400;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
    line-height: 1.2;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}
.wf-cat-pick:hover {
    border-color: var(--muted);
    background: var(--field-bg-strong);
    transform: none;
    box-shadow: none;
}
.wf-cat-pick.picked {
    border-color: rgba(108, 217, 154, 0.5);
    background: rgba(108, 217, 154, 0.10);
    color: var(--fg);
}
.wf-cat-logo {
    width: 16px; height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.wf-cat-tick {
    color: var(--accent);
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12px;
}
.wf-cat-connect {
    border-style: dashed;
    color: var(--muted);
}
.wf-cat-connect-tag {
    color: var(--accent);
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 11px;
    padding-left: 4px;
}
.wf-cat-cat {
    font-size: 11px;
    padding-left: 4px;
}
.wf-cat-additional {
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

/* Toggle switch (account: proactive on/off). Tokens match the page. */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    position: relative; width: 46px; height: 27px; border-radius: 999px;
    background: var(--field-bg-strong); border: 1px solid var(--border);
    transition: background .15s ease, border-color .15s ease; flex: none;
}
.switch .knob {
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 21px; height: 21px; border-radius: 50%; background: var(--muted);
    transition: transform .15s ease, background .15s ease;
}
.switch > input:checked + .track { background: rgba(108, 217, 154, 0.30); border-color: var(--accent); }
.switch > input:checked + .track .knob { transform: translateY(-50%) translateX(19px); background: var(--accent); }
.switch > input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(108, 217, 154, 0.25); }
.switch-text { font-size: 15px; color: var(--fg); }

/* ───────────────────────── admin console ─────────────────────────
   Shared styles for /admin (allowlist · costs · tier caps). Lives here
   (the one CSS file) instead of duplicated <style> blocks per template. */
.admin .hero .eyebrow { letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.admin .hero { margin-bottom: 22px; }

/* sub-nav (allowlist / costs / tier caps) + the period pills share a look */
.admin-subnav { display: flex; gap: 8px; margin: 0 0 26px; flex-wrap: wrap; }
.admin-subnav a,
.ud-period {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-subnav a:hover,
.ud-period:hover { color: var(--fg); border-color: var(--border-strong); }
.admin-subnav a.active,
.ud-period.active {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
}

.admin-flash {
    padding: 12px 16px; margin: 0 0 20px; border-radius: var(--radius-md);
    background: var(--field-bg); border: 1px solid var(--border); color: var(--fg); font-size: 14.5px;
}
.admin-flash.err { color: #ffb4ad; border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); }

.admin-list { margin: 22px 0 8px; }
.admin-list-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin: 0 0 14px; flex-wrap: wrap;
}

/* ── shared inputs / selects ── */
.admin input[type="tel"],
.admin input[type="text"],
.admin input[type="search"],
.admin input[type="number"],
.admin select {
    background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--fg); font: inherit; font-size: 14px; min-height: 40px; padding: 9px 13px; outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.admin input:focus, .admin select:focus { border-color: var(--border-strong); background: var(--field-bg-strong); }
.admin input::placeholder { color: var(--dim); }
.admin select { cursor: pointer; padding-right: 10px; }

/* ── tables (cost by channel, top users, line items) ── */
.cost-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; flex-wrap: wrap; }
.ud-periods { display: flex; gap: 8px; }
.user-search { min-width: 240px; }

.cost-table-wrap {
    overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.012);
}
.cost-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cost-table th, .cost-table td { padding: 13px 16px; text-align: left; white-space: nowrap; }
.cost-table thead th {
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim);
    border-bottom: 1px solid var(--border); font-weight: 600;
}
.cost-table thead th.num, .cost-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cost-table tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cost-table tbody tr:hover { background: var(--field-bg); }
.cost-table .strong { color: var(--fg); font-weight: 600; }
.cost-table .mono { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12.5px; }
.cost-table a.muted-link { color: var(--fg); }
.cost-table a.muted-link:hover { color: var(--accent); }

/* share bar in the cost-by-channel table */
.chan-bar {
    display: inline-block; width: 84px; height: 7px; background: var(--field-bg-strong);
    border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: 9px;
}
.chan-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* ── allowlist ── */
.admin-add { margin: 22px 0 30px; }
.admin-add-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.admin-add-form button { justify-self: stretch; }
@media (min-width: 520px) {
    .admin-add-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
    .admin-add-form button { justify-self: end; }
}
.admin-field-label { display: block; font-size: 12px; color: var(--dim); margin: 0 0 5px; }

.admin-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-entry {
    display: grid; grid-template-columns: minmax(200px, 1fr) max-content; align-items: center; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03); transition: border-color .15s ease;
}
.admin-entry:hover { border-color: var(--border-strong); }
.admin-entry.env { background: transparent; border-style: dashed; }
.admin-entry-main { min-width: 0; }
.admin-entry-phone {
    font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 15px; color: var(--fg); margin: 0 0 5px; letter-spacing: 0.01em;
}
.admin-entry-phone a { color: var(--fg); }
.admin-entry-phone a:hover { color: var(--accent); }
.admin-entry-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-entry-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-plan-form { display: flex; align-items: center; gap: 6px; }
.admin-plan-form select { min-height: 36px; font-size: 13px; }
.admin-plan-form button, .admin-entry-remove button { min-height: 36px; padding: 8px 14px; font-size: 13px; }
@media (max-width: 600px) {
    .admin-entry { grid-template-columns: 1fr; }
    .admin-entry-actions { width: 100%; justify-content: space-between; }
    .admin-plan-form { flex: 1; }
    .admin-plan-form select { flex: 1; }
}

/* ── user cost detail ── */
.ud-plan-form { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.ud-plan-form select { min-height: 36px; font-size: 13px; }
.ud-stats { display: flex; align-items: center; gap: 30px; margin: 10px 0 24px; flex-wrap: wrap; }
.ud-stat-num { font-size: 32px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.ud-ceiling { min-width: 230px; }
.ud-ceiling-bar { height: 8px; background: var(--field-bg-strong); border-radius: 99px; overflow: hidden; margin: 7px 0; }
.ud-ceiling-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; min-width: 3px; }
.ud-ceiling-bar > span.over { background: var(--danger); }
.ud-stats .ud-periods { margin-left: auto; }
.ud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 720px) { .ud-grid { grid-template-columns: 1fr; } .ud-stats .ud-periods { margin-left: 0; } }
.ud-card h3 { margin: 0 0 16px; }
.ud-row { display: grid; grid-template-columns: 130px 1fr auto 36px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.ud-key { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-key.mono { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12.5px; }
.bg-tag {
    font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim);
    border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; vertical-align: middle;
}
.ud-bar { height: 7px; background: var(--field-bg-strong); border-radius: 99px; overflow: hidden; }
.ud-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; min-width: 2px; }
.ud-cost { font-variant-numeric: tabular-nums; text-align: right; }
.ud-n { text-align: right; }
.ud-split { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ud-spark { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.ud-spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ud-spark-bar { width: 70%; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }
.ud-spark-x { font-size: 9px; margin-top: 4px; transform: rotate(-45deg); white-space: nowrap; }

/* ── tier caps ── */
.tiers-hint { color: var(--dim); font-size: 13px; margin: 0 0 12px; }
.tiers-table .th-unit { display: block; margin-top: 2px; color: var(--dim); font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tiers-table td:first-child, .tiers-table th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.tier-input { width: 100%; max-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.tier-input::placeholder { color: var(--dim); opacity: 0.85; }
.tiers-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 2px 0; flex-wrap: wrap; }
.system-caps { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.system-caps h2 { margin: 4px 0 6px; }
.caps-group { margin-top: 20px; }
.caps-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 6px; flex-wrap: wrap; }
.caps-group-name { font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em; }
.badge.danger { color: var(--danger); border-color: rgba(255, 107, 107, 0.40); }
.ud-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ── dispatches (console-hosted offload results) ──────────────────────── */
.dispatch-search { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.dispatch-search input[type="search"] {
    flex: 1 1 240px; min-width: 0;
    background: var(--field-bg); border: 1px solid var(--border);
    border-radius: var(--radius-pill); color: var(--fg);
    padding: 10px 16px; font-size: 15px; font-family: var(--sans);
}
.dispatch-search input[type="search"]:focus {
    outline: none; border-color: var(--border-strong); background: var(--field-bg-strong);
}
.dispatch-search button { width: auto; padding: 10px 20px; border-radius: var(--radius-pill); }

a.dispatch-row {
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
a.dispatch-row:hover { border-color: var(--border-strong); background: var(--field-bg-strong); transform: translateY(-1px); }
.dispatch-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dispatch-title { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.dispatch-row-meta { display: flex; align-items: center; gap: 8px; }
.chip.shared { background: rgba(108, 217, 154, 0.18); color: var(--accent); }

/* detail header: title on the left, a compact share control on the right */
.dispatch-detail-page .hint { margin: 0 0 10px; }
.dispatch-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.dispatch-head-text h1 { margin: 0 0 4px; }
.dispatch-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dispatch-actions form { margin: 0; }
.btn-share {
    width: auto; padding: 7px 15px; font-size: 13px; gap: 6px; border-radius: var(--radius-pill);
}
.btn-share svg { opacity: 0.9; }
.btn-link {
    width: auto; padding: 6px 4px; background: none; border: none; box-shadow: none;
    color: var(--dim); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:hover { color: var(--fg); background: none; transform: none; }
.dispatch-actions .share-url {
    width: 230px; max-width: 52vw; background: var(--field-bg); border: 1px solid var(--border);
    border-radius: var(--radius-pill); color: var(--muted);
    padding: 8px 14px; font-family: ui-monospace, monospace; font-size: 12.5px;
}

/* rendered (sanitised) result markdown */
.dispatch-doc-wrap { padding: 28px 30px; }
.dispatch-doc { color: var(--fg); font-size: 16px; line-height: 1.62; overflow-wrap: anywhere; }
.dispatch-doc h1, .dispatch-doc h2, .dispatch-doc h3 {
    font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em;
    line-height: 1.25; margin: 1.4em 0 0.5em;
}
.dispatch-doc h1 { font-size: 26px; }
.dispatch-doc h2 { font-size: 21px; }
.dispatch-doc h3 { font-size: 17px; color: var(--fg); text-transform: none; letter-spacing: -0.01em; }
.dispatch-doc p { margin: 0.7em 0; color: var(--muted); }
.dispatch-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dispatch-doc a:hover { color: var(--accent-hover); }
.dispatch-doc ul, .dispatch-doc ol { margin: 0.6em 0; padding-left: 1.4em; color: var(--muted); }
.dispatch-doc li { margin: 0.3em 0; }
.dispatch-doc strong { color: var(--fg); font-weight: 600; }
.dispatch-doc code {
    background: var(--field-bg-strong); border-radius: 6px; padding: 1px 6px;
    font-family: ui-monospace, monospace; font-size: 0.88em;
}
.dispatch-doc pre {
    background: var(--field-bg-strong); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; overflow-x: auto;
}
.dispatch-doc pre code { background: none; padding: 0; }
.dispatch-doc blockquote {
    margin: 0.8em 0; padding-left: 14px; border-left: 3px solid var(--border-strong); color: var(--dim);
}
.dispatch-doc hr { border: none; border-top: 1px solid var(--border); margin: 1.6em 0; }
.dispatch-doc table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14.5px; }
.dispatch-doc th, .dispatch-doc td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.dispatch-doc th { background: var(--field-bg-strong); color: var(--fg); font-weight: 600; }
.dispatch-doc td { color: var(--muted); }
.dispatch-shared-page { max-width: 820px; margin: 0 auto; padding: 32px 20px; }