/* ============================================================
       Second Brain — Journal edition
       Editorial / serif-forward · warm paper · terracotta accent
       Light + dark via html[data-theme]. Variable names kept
       backward-compatible so inline styles keep resolving.
       ============================================================ */

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

      :root {
        /* surfaces */
        --bg: #ffffff;
        --bg-card: #fcfbf7;
        --bg-tag: #ece8dd;
        --bg-secondary: #fcfbf7;
        --bg-confirm: rgba(253, 84, 10, 0.1);
        --bg-tag-confirmed: #fd540a;
        --surface-2: #f2efec;
        --surface-3: #e8e3df;

        /* ink */
        --text-primary: #161616;
        --text-secondary: #68635f;
        --text-tertiary: #96908b;
        --text-tag: #68635f;
        --text-tag-confirmed: #161616;

        /* lines */
        --border: rgba(22, 22, 22, 0.09);
        --border-card: rgba(22, 22, 22, 0.075);
        --border-input: rgba(22, 22, 22, 0.11);
        --line-soft: rgba(22, 22, 22, 0.06);

        /* accent — brand orange */
        --accent: #fd540a;
        --accent-press: #a83200;
        --accent-soft: rgba(253, 84, 10, 0.09);
        --accent-ink: #c43d00;
        --good: #18794e;
        --warn: #b45309;
        --danger: #b42318;
        --danger-soft: rgba(180, 35, 24, 0.08);
        --on-accent: #161616;

        /* type */
        --font-serif: 'Lora', Georgia, serif;
        --font-sans: 'Geist', 'Inter', system-ui, sans-serif;

        /* radii */
        --radius-card: 14px;
        --radius-pill: 999px;
        --radius-tag: 999px;
        --radius-bubble: 18px;

        /* elevation */
        --shadow-card: 0 1px 2px rgba(22, 22, 22, 0.05), 0 4px 14px rgba(22, 22, 22, 0.06);
        --shadow-float: 0 2px 6px rgba(22, 22, 22, 0.07), 0 14px 34px rgba(22, 22, 22, 0.12);
        --shadow-sheet: 0 -10px 44px rgba(22, 22, 22, 0.16);

        /* brand mark (S-ribbon), used to replace the brain glyph in identity spots */
        --sb-mark: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAtNTMuMzUgMjcwLjI3IDI3MC4yNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZDU0MGE7fS5jbHMtMntmaWxsOiNmZDZmMTI7fTwvc3R5bGU+PC9kZWZzPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTS4wNCwxMDUuODNjLS4wMi40MS0uMDQuODQtLjA0LDEuMjZsLjAyLTEuMjZoLjAyWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTI2OC43NCwxNjMuNThsLTIxNS44Ny0zLjI0Yy0yOS4xNi0uNDMtNTIuNTYtMjQuMTYtNTIuODctNTMuMjJ2LS4wMmw5NS4wMywxLjQyLDE0Mi45NSw1LjY5YzUuODcsMi43MiwxMS4xMyw2LjUxLDE1LjU4LDExLjE1LDkuNiw5Ljg1LDE1LjQsMjMuMzcsMTUuMTcsMzguMjFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjcwLjI2LDU3LjVsLTExOS4yNS0xLjc5LTExNC41MS00LjUxQzE1Ljg1LDQzLjQ1LDEuMjYsMjMuMzksMS42MSwwbDIxNS44MSwzLjI0YzE0Ljg0LjIzLDI4LjE3LDYuNDEsMzcuNzIsMTYuMyw5LjUsOS43OSwxNS4yOSwyMy4yNSwxNS4xMywzNy45NloiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0yNzAuMjYsNTcuNXYuMjVjLS4yOSwxNC43LTYuNDcsMjcuOTctMTYuMjQsMzcuNDctNS40LDUuMjMtMTEuOTMsOS4zNi0xOS4xMSwxMS45M2gtLjA2bC04Ny44Ljg5aC0uMzFsLTUxLjU5LjQ5aC0uMTJMMCwxMDcuMTF2LS4wMmMwLS40MS4wMi0uODQuMDQtMS4yNi44Ny0yMi40NCwxNS41Mi00MS4zNiwzNS42NC00OC40OGwxMjUuMjEtMS4yNi05Ljg3LS4zOSwxMTkuMjUsMS43OVoiLz48L2c+PC9zdmc+Cg==');

        /* motion */
        --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
      }

      html[data-theme='dark'] {
        --bg: #161616;
        --bg-card: #221f17;
        --bg-tag: #2c2820;
        --bg-secondary: #221f17;
        --bg-confirm: rgba(253, 111, 18, 0.15);
        --bg-tag-confirmed: #fd6f12;
        --surface-2: #2c2820;
        --surface-3: #38332a;

        --text-primary: #f2efec;
        --text-secondary: #c9c5c1;
        --text-tertiary: #8a857f;
        --text-tag: #c9c5c1;
        --text-tag-confirmed: #161616;

        --border: rgba(255, 255, 255, 0.085);
        --border-card: rgba(255, 255, 255, 0.075);
        --border-input: rgba(255, 255, 255, 0.11);
        --line-soft: rgba(255, 255, 255, 0.055);

        --accent: #fd6f12;
        --accent-press: #ff8a3d;
        --accent-soft: rgba(253, 111, 18, 0.16);
        --accent-ink: #ffab6e;
        --good: #7bae8a;
        --warn: #d9a15c;
        --danger: #d9806b;
        --danger-soft: rgba(217, 128, 107, 0.14);
        --on-accent: #161616;

        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 6px 18px rgba(0, 0, 0, 0.28);
        --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.5);
        --shadow-sheet: 0 -10px 44px rgba(0, 0, 0, 0.55);
      }

      html,
      body {
        height: 100%;
        background: var(--bg);
        font-family: var(--font-sans);
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow: hidden;
      }

      body {
        transition: background 0.45s var(--ease);
      }

      i.ti {
        line-height: 1;
      }

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

      #app {
        display: flex;
        flex-direction: column;
        height: 100svh;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        background: var(--bg);
        position: relative;
      }

      #sidebar {
        display: none;
      }

      #main-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
      }

      /* ============ AUTH ============ */
      #auth-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        animation: fade-in 0.5s var(--ease);
      }

      @keyframes fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .auth-card {
        width: 100%;
        max-width: 400px;
        padding: 40px 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #auth-overlay .brain-logo {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        position: relative;
      }

      #auth-overlay .brain-logo i {
        font-size: 33px;
      }

      #auth-overlay .brain-logo::after {
        content: '';
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px solid var(--accent-soft);
      }

      #auth-overlay h1 {
        font-family: var(--font-serif);
        font-size: 29px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 9px;
        letter-spacing: -0.015em;
      }

      #auth-overlay p {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 34px;
        text-align: center;
        line-height: 1.6;
        max-width: 300px;
      }

      #auth-overlay .field-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 11px;
        margin-bottom: 14px;
      }

      #auth-overlay input {
        width: 100%;
        padding: 14px 16px;
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 15px;
        color: var(--text-primary);
        outline: none;
        transition:
          border-color 0.18s,
          box-shadow 0.18s;
      }

      #auth-overlay input::placeholder {
        color: var(--text-tertiary);
      }

      #auth-overlay input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      #auth-connect {
        width: 100%;
        padding: 15px;
        background: var(--accent);
        color: var(--on-accent);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition:
          background 0.18s,
          transform 0.12s var(--ease);
      }

      #auth-connect:hover {
        background: var(--accent-press);
      }

      #auth-connect:active {
        transform: scale(0.985);
      }

      #auth-error {
        font-size: 13px;
        color: var(--danger);
        text-align: center;
        margin-top: 10px;
        min-height: 18px;
      }

      /* ============ TOP BAR ============ */
      #topbar {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px 18px 12px;
        background: var(--bg);
        flex-shrink: 0;
        position: relative;
        z-index: 10;
      }

      .brain-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .brain-avatar i {
        font-size: 20px;
      }

      /* identity spots render the brand mark instead of the icon-font glyph */
      .brain-avatar i.ti-brain,
      #auth-overlay .brain-logo i.ti-brain {
        font-size: 0;
        width: 62%;
        height: 62%;
        background-color: var(--accent);
        mask: var(--sb-mark) center / contain no-repeat;
        -webkit-mask: var(--sb-mark) center / contain no-repeat;
      }
      .brain-avatar i.ti-brain::before,
      #auth-overlay .brain-logo i.ti-brain::before {
        content: none;
      }

      .topbar-info {
        flex: 1;
        min-width: 0;
      }

      .topbar-name {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.15;
        letter-spacing: -0.01em;
      }

      .topbar-status {
        font-size: 11.5px;
        color: var(--text-secondary);
        line-height: 1.3;
        margin-top: 1px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .topbar-status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--good);
        flex-shrink: 0;
      }

      .topbar-menu {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .topbar-menu i {
        font-size: 22px;
      }

      .topbar-menu:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      /* ============ SCREENS ============ */
      #screens {
        flex: 1;
        overflow: hidden;
        position: relative;
      }

      .screen {
        display: none;
        flex-direction: column;
        height: 100%;
        position: absolute;
        inset: 0;
      }

      .screen.active {
        display: flex;
        animation: screen-in 0.34s var(--ease);
      }

      @keyframes screen-in {
        from {
          transform: translateY(8px);
        }
        to {
          transform: none;
        }
      }

      #recall-messages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px 18px 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
      }

      /* ============ BOTTOM NAV ============ */
      #navbar {
        display: flex;
        border-top: 0.5px solid var(--border);
        background: var(--bg);
        flex-shrink: 0;
        padding: 9px 8px calc(16px + env(safe-area-inset-bottom));
      }

      .nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 0;
        color: var(--text-tertiary);
        transition: color 0.2s var(--ease);
      }

      .nav-tab i {
        font-size: 22px;
        transition: transform 0.32s var(--ease-spring);
      }

      .nav-tab span {
        font-family: var(--font-serif);
        font-size: 11.5px;
        letter-spacing: 0.005em;
      }

      .nav-tab.active {
        color: var(--accent);
      }

      .nav-tab.active i {
        transform: translateY(-1px);
      }

      .nav-tab:active i {
        transform: scale(0.84);
      }

      /* ============ CHAT BUBBLES ============ */
      .bubble-row {
        display: flex;
        animation: bubble-in 0.36s var(--ease) both;
      }

      .bubble-row.user {
        justify-content: flex-end;
      }

      .bubble-row.brain {
        justify-content: flex-start;
      }

      @keyframes bubble-in {
        from {
          transform: translateY(9px);
        }
        to {
          transform: none;
        }
      }

      .bubble {
        max-width: 84%;
        padding: 11px 15px;
        border-radius: var(--radius-bubble);
        font-size: 14px;
        line-height: 1.5;
        word-wrap: break-word;
      }

      .bubble.user {
        background: var(--text-primary);
        color: var(--bg);
        border-bottom-right-radius: 6px;
      }

      .bubble.user .hashtag {
        color: color-mix(in srgb, var(--bg) 68%, var(--accent));
      }

      .bubble.brain {
        background: var(--bg-card);
        color: var(--text-primary);
        border: 0.5px solid var(--border-card);
        border-bottom-left-radius: 6px;
        box-shadow: var(--shadow-card);
      }

      /* Journal serif voice — AI answers + welcome lines */
      .bubble.brain.answer,
      .bubble.brain.voice {
        font-family: var(--font-serif);
        font-size: 16.5px;
        line-height: 1.6;
        letter-spacing: -0.003em;
        padding: 14px 17px;
        max-width: 90%;
      }

      .bubble.brain.answer strong,
      .bubble.brain.voice strong {
        color: var(--accent-ink);
        font-weight: 600;
      }

      .bubble.brain.answer em {
        color: var(--accent-ink);
      }

      .hashtag {
        color: var(--accent);
        font-weight: 500;
      }

      .bubble-time {
        font-size: 11px;
        color: var(--text-tertiary);
        padding: 0 6px;
        margin-top: 4px;
        text-align: right;
      }

      .bubble-row.user > div {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 84%;
      }

      /* loading dots */
      .loading-dots {
        display: flex;
        gap: 6px;
        padding: 16px 2px;
        background: transparent;
        border: none;
        border-radius: 0;
        width: fit-content;
        box-shadow: none;
      }

      .loading-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--text-tertiary);
        animation: bounce 1.3s infinite ease-in-out;
      }

      .loading-dots span:nth-child(2) {
        animation-delay: 0.16s;
      }
      .loading-dots span:nth-child(3) {
        animation-delay: 0.32s;
      }

      @keyframes bounce {
        0%,
        80%,
        100% {
          transform: scale(0.7);
          opacity: 0.4;
        }
        40% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .brain-cards-wrapper {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

      #recall-welcome {
        gap: 10px;
      }

      /* ============================================================
       JOURNAL EDITORIAL — the conversation reads as prose
       ============================================================ */
      #recall-messages {
        gap: 0;
        padding: 20px 20px 10px;
      }

      /* opening hero */
      .recall-hero {
        padding: 6px 0 2px;
        animation: bubble-in 0.4s var(--ease) both;
      }

      .recall-hero .eyebrow {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent-ink);
        margin-bottom: 13px;
      }

      .recall-hero .hero-line {
        font-family: var(--font-serif);
        font-size: 23px;
        line-height: 1.42;
        letter-spacing: -0.012em;
        color: var(--text-primary);
        max-width: 22em;
      }

      .recall-hero .hero-line .hashtag {
        color: var(--accent-ink);
      }

      /* a recall exchange: uppercase question label + large serif answer */
      .ex-q {
        display: flex;
        gap: 8px;
        align-items: baseline;
        flex-wrap: wrap;
        font-size: 11px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--accent-ink);
        padding: 24px 0 13px;
        border-top: 0.5px solid var(--line-soft);
        animation: bubble-in 0.36s var(--ease) both;
      }

      #recall-messages > .ex-q:first-child {
        border-top: none;
        padding-top: 6px;
      }

      .ex-q .q-dash {
        opacity: 0.5;
      }

      .ex-q .q-text {
        color: var(--text-secondary);
        letter-spacing: 0.03em;
        font-weight: 500;
      }

      .ex-a {
        font-family: var(--font-serif);
        font-size: 19px;
        line-height: 1.58;
        letter-spacing: -0.004em;
        color: var(--text-primary);
        animation: bubble-in 0.36s var(--ease) both;
      }

      .ex-a strong {
        color: var(--accent-ink);
        font-weight: 600;
      }
      .ex-a em {
        color: var(--accent-ink);
        font-style: italic;
      }

      .ex-a > *:first-child {
        margin-top: 0;
      }
      .ex-a > *:last-child {
        margin-bottom: 0;
      }
      .ex-a p {
        margin: 0 0 0.7em;
      }
      .ex-a p:last-child {
        margin-bottom: 0;
      }

      .ex-a h3,
      .ex-a h4 {
        font-family: var(--font-serif);
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: -0.01em;
        line-height: 1.3;
        margin: 1.1em 0 0.45em;
      }
      .ex-a h3 {
        font-size: 0.92em;
      }
      .ex-a h4 {
        font-size: 0.66em;
        font-weight: 600;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--accent-ink);
        font-family: var(--font-sans);
      }

      .ex-a ul,
      .ex-a ol {
        margin: 0.55em 0 0.8em;
        padding: 0;
        list-style: none;
        counter-reset: exli;
      }
      .ex-a li {
        position: relative;
        padding-left: 1.3em;
        margin-bottom: 0.42em;
        line-height: 1.5;
      }
      .ex-a li:last-child {
        margin-bottom: 0;
      }
      .ex-a ul > li::before {
        content: '';
        position: absolute;
        left: 0.15em;
        top: 0.62em;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
      }
      .ex-a ol > li {
        counter-increment: exli;
      }
      .ex-a ol > li::before {
        content: counter(exli);
        position: absolute;
        left: 0;
        top: 0.04em;
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 0.82em;
        color: var(--accent-ink);
        font-variant-numeric: tabular-nums;
      }
      .ex-a code {
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 0.82em;
        background: var(--surface-2);
        padding: 0.1em 0.4em;
        border-radius: 5px;
      }

      /* system note (no result / error) */
      .recall-sys {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 18px;
        line-height: 1.55;
        color: var(--text-secondary);
        padding: 24px 0 0;
        border-top: 0.5px solid var(--line-soft);
        animation: bubble-in 0.36s var(--ease) both;
      }

      /* sources, sitting under an answer */
      .ex-a + .sources-toggle,
      .sources-toggle {
        margin-top: 16px;
      }

      /* ---- Remember: editorial capture notes ---- */
      .capture-note {
        position: relative;
        font-family: var(--font-serif);
        font-size: 18px;
        line-height: 1.5;
        color: var(--text-primary);
        padding: 22px 0 4px 16px;
        border-top: 0.5px solid var(--line-soft);
        animation: bubble-in 0.36s var(--ease) both;
      }

      .capture-note::before {
        content: '';
        position: absolute;
        left: 0;
        top: 24px;
        bottom: 11px;
        width: 2px;
        background: var(--accent);
        border-radius: 2px;
      }

      .capture-note .hashtag {
        font-family: var(--font-sans);
        font-size: 13.5px;
        vertical-align: 1px;
      }

      .sys-note {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13px;
        color: var(--text-tertiary);
        padding: 8px 0 4px 16px;
        animation: bubble-in 0.36s var(--ease) both;
      }

      /* ---- underline "writing" input ---- */
      #screen-home .input-inner {
        background: transparent;
        border: none;
        border-bottom: 1.5px solid var(--accent);
        border-radius: 0;
        padding: 4px 2px 9px;
        margin: 0 4px;
        box-shadow: none;
        align-items: flex-end;
        gap: 10px;
      }

      #screen-home .input-inner:focus-within {
        box-shadow: none;
        border-bottom-color: var(--accent-press);
      }

      #screen-home .input-field {
        font-family: var(--font-serif);
        font-size: 16.5px;
        padding: 6px 0;
      }

      #screen-home .input-field::placeholder {
        font-style: italic;
        color: var(--text-tertiary);
      }

      #screen-home .send-btn {
        background: transparent;
        width: auto;
        height: auto;
        padding: 4px;
      }

      #screen-home .send-btn:hover {
        background: transparent;
        transform: translateY(-1px);
      }

      #screen-home .send-btn i {
        font-size: 23px;
        color: var(--accent);
      }

      #screen-home .send-btn:disabled {
        opacity: 0.4;
      }

      /* sources toggle */
      .sources-toggle {
        display: flex;
        flex-direction: column;
        gap: 9px;
        animation: bubble-in 0.36s var(--ease) both;
      }

      .sources-toggle > button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        align-self: flex-start;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-family: var(--font-sans);
        font-size: 12px;
        padding: 3px 2px;
        transition: color 0.15s;
      }

      .sources-toggle > button i {
        font-size: 15px;
        color: var(--accent);
      }

      .sources-toggle > button:hover {
        color: var(--text-primary);
      }

      /* ============ MEMORY CARD (recall sources) ============ */
      .memory-card {
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: var(--radius-card);
        padding: 12px 14px;
        box-shadow: var(--shadow-card);
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          opacity 0.3s;
        animation: card-in 0.42s var(--ease) both;
      }

      @keyframes card-in {
        from {
          transform: translateY(8px);
        }
        to {
          transform: none;
        }
      }

      .memory-card:hover {
        box-shadow: var(--shadow-float);
      }

      .memory-card.card--rolled-up {
        opacity: 0.65;
      }

      /* Dashed rather than tinted, so it reads as provisional next to card--synthesized
         without touching the card background. --text-tertiary is already below WCAG AA
         on --bg-card — 4.4987 in dark, 3.0457 in light — so there is no headroom to
         spend: a lightening tint pushes dark further down, and a darkening tint (which
         would raise dark to ~4.58) pushes light further down instead. A border changes
         neither, and matches how the other card modifiers signal state. */
      .memory-card.card--stale {
        border-left: 3px dashed var(--warn);
      }

      .memory-card.card--synthesized {
        border-left: 3px solid var(--accent);
      }

      .tag-chip.tag-chip--synthesized {
        background: var(--accent);
        color: var(--on-accent);
        font-weight: 500;
      }

      .vec-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        padding: 3px 8px;
        border-radius: var(--radius-tag);
        white-space: nowrap;
      }
      .vec-chip--on {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }
      .vec-chip--pending {
        background: var(--surface-2);
        color: var(--text-tag);
      }
      .vec-chip--off {
        background: color-mix(in srgb, var(--danger) 15%, transparent);
        color: var(--danger);
        font-weight: 500;
      }

      .match-line {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 9px;
      }

      .match-pct {
        font-size: 10.5px;
        color: var(--accent-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
      }

      .match-bar-bg {
        flex: 1;
        height: 3px;
        background: var(--surface-2);
        border-radius: 2px;
        overflow: hidden;
      }

      .match-bar-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 2px;
        transform-origin: left;
        animation: bar-grow 0.65s var(--ease) both;
      }

      @keyframes bar-grow {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }

      .card-content {
        font-size: 14px;
        color: var(--text-primary);
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 11px;
      }

      .card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
      }

      .tag-chip {
        background: var(--surface-2);
        color: var(--text-tag);
        font-size: 11px;
        padding: 3px 10px;
        border-radius: var(--radius-tag);
        white-space: nowrap;
        font-family: var(--font-sans);
      }

      .card-tags .tag-chip:first-child {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }

      .card-actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
      }

      .card-action-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 11px;
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 7px;
        border-radius: 8px;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .card-action-btn:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      .card-action-btn i {
        font-size: 14px;
      }

      /* ============ RECENT — numbered editorial list ============ */
      #recent-list {
        flex: 1;
        overflow-y: auto;
        /* The last row used to stop 8px above whatever follows — the tab bar on
           a phone, the panel edge on a desktop — which reads as the list being
           cut off rather than ended. */
        padding: 14px 18px 22px;
        counter-reset: memo;
        -webkit-overflow-scrolling: touch;
      }

      .date-group {
        margin-bottom: 22px;
      }

      .date-label {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        font-size: 15px;
        color: var(--text-secondary);
        margin: 0 2px 6px;
        letter-spacing: 0;
      }

      #recent-list .recent-cards {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* recent rows: strip the card chrome, become editorial entries */
      #recent-list .memory-card {
        background: transparent;
        border: none;
        border-top: 0.5px solid var(--line-soft);
        border-radius: 0;
        box-shadow: none;
        padding: 14px 2px 14px 34px;
        position: relative;
        counter-increment: memo;
      }

      #recent-list .memory-card:first-child {
        border-top: none;
      }

      #recent-list .memory-card::before {
        content: counter(memo, decimal-leading-zero);
        position: absolute;
        left: 2px;
        top: 15px;
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13px;
        color: var(--accent-ink);
        font-variant-numeric: tabular-nums;
      }

      #recent-list .memory-card:hover {
        box-shadow: none;
      }

      #recent-list .card-content {
        font-size: 14.5px;
        line-height: 1.5;
      }

      #recent-list .card-footer {
        margin-top: 8px;
      }

      #recent-list .card-action-btn {
        padding: 4px 6px;
        font-size: 10.5px;
        color: var(--text-tertiary);
      }

      #recent-list .card-action-btn:hover {
        color: var(--text-primary);
      }

      /* ============ FILTER BAR ============ */
      .filter-bar {
        padding: 8px 18px 10px;
        flex-shrink: 0;
        background: var(--bg);
      }

      /* ── v2.3 Memories: one corpus, two projections ──────────────────────
         Filters sit above the list they narrow. They used to be pinned to the
         bottom, so scanning top-down and deciding to narrow meant travelling to
         the far end of the screen and back. */
      .mem-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        flex-shrink: 0;
        background: var(--bg);
        border-bottom: 0.5px solid var(--border);
      }

      /* Grows to fill a phone, stops well short of it on a wide window — two
         dropdowns stretched across 1,300px read as a form, not a filter. */
      .mem-filters {
        flex: 1;
        min-width: 0;
        max-width: 420px;
      }

      .mem-filters[hidden],
      #mem-legend[hidden] {
        display: none;
      }

      #mem-legend {
        flex: 1;
        min-width: 0;
      }

      .mem-caption {
        font-size: 12.5px;
        color: var(--text-tertiary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .view-toggle {
        display: flex;
        gap: 2px;
        padding: 2px;
        background: var(--surface-2);
        border-radius: var(--radius-pill);
        flex-shrink: 0;
        /* Pinned right in both views. Capping the filters at 420px stopped them
           filling the bar, which left the toggle stranded mid-row in list view
           while graph view — whose caption does stretch — kept it at the edge. */
        margin-left: auto;
      }

      .view-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border: none;
        background: none;
        border-radius: var(--radius-pill);
        cursor: pointer;
        color: var(--text-secondary);
        font-family: var(--font-sans);
        font-size: 13px;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .view-toggle-btn i {
        font-size: 16px;
      }

      .view-toggle-btn.active {
        background: var(--bg-card);
        color: var(--text-primary);
        box-shadow: var(--shadow-card);
      }

      #recent-list[hidden] {
        display: none;
      }

      .filter-inner {
        display: flex;
        align-items: center;
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: var(--radius-pill);
        padding: 7px 8px 7px 14px;
        gap: 8px;
        box-shadow: var(--shadow-card);
      }

      .filter-field {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-sans);
        font-size: 13px;
        color: var(--text-secondary);
        min-width: 0;
      }

      .filter-field::placeholder {
        color: var(--text-tertiary);
      }

      select.filter-field {
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
      }

      select.filter-field option {
        color: #161616;
        background: #fcfbf7;
      }

      .refresh-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--surface-2);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--text-secondary);
        transition:
          background 0.15s,
          color 0.15s;
      }

      .refresh-btn i {
        font-size: 15px;
      }

      .refresh-btn:hover {
        background: var(--surface-3);
        color: var(--text-primary);
      }

      .refresh-btn.spinning i,
      .refresh-now.spinning i {
        animation: spin 0.7s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* ============ SUGGESTIONS ============ */
      .suggestions-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 6px 18px 6px;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .suggestions-row::-webkit-scrollbar {
        display: none;
      }

      .suggestion-pill {
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        color: var(--text-secondary);
        font-size: 12.5px;
        padding: 7px 14px;
        border-radius: var(--radius-pill);
        white-space: nowrap;
        cursor: pointer;
        font-family: var(--font-sans);
        flex-shrink: 0;
        transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s;
      }

      .suggestion-pill:hover {
        background: var(--accent-soft);
        border-color: transparent;
        color: var(--accent-ink);
      }

      /* ============ INPUT BAR ============ */
      .input-bar {
        padding: 8px 18px calc(12px + env(safe-area-inset-bottom));
        flex-shrink: 0;
        background: var(--bg);
      }

      .input-inner {
        display: flex;
        align-items: flex-end;
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: 24px;
        padding: 6px 6px 6px 16px;
        gap: 8px;
        box-shadow: var(--shadow-card);
        transition:
          border-color 0.18s,
          box-shadow 0.18s;
      }

      .input-inner:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      .input-field {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-sans);
        font-size: 14.5px;
        color: var(--text-primary);
        resize: none;
        line-height: 1.45;
        padding: 7px 0;
        max-height: 80px;
        overflow-y: auto;
      }

      .input-field::placeholder {
        color: var(--text-tertiary);
      }

      .send-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--accent);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          background 0.18s,
          transform 0.14s var(--ease-spring);
      }

      .send-btn:hover {
        background: var(--accent-press);
      }

      .send-btn:active {
        transform: scale(0.88);
      }

      .send-btn i {
        font-size: 18px;
        color: var(--on-accent);
      }

      .send-btn:disabled {
        opacity: 0.45;
        cursor: default;
      }

      .input-hint {
        font-size: 11.5px;
        color: var(--text-tertiary);
        padding: 0 4px 8px;
      }

      .input-hint .hint-tags {
        color: var(--accent-ink);
        font-weight: 500;
      }

      /* ============ CONFIRM BLOCK (remember) ============ */
      .confirm-block {
        background: var(--bg-confirm);
        border-radius: var(--radius-card);
        padding: 11px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-self: flex-start;
        max-width: 84%;
        animation: bubble-in 0.36s var(--ease) both;
      }

      .confirm-line {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        color: var(--accent-ink);
        font-weight: 500;
      }

      .confirm-line i {
        font-size: 16px;
        color: var(--accent);
      }

      .confirm-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .confirm-tag {
        background: var(--bg-tag-confirmed);
        color: var(--text-tag-confirmed);
        font-size: 11px;
        padding: 3px 10px;
        border-radius: var(--radius-tag);
        font-family: var(--font-sans);
      }

      /* ============ EMPTY STATE ============ */
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 56px 32px;
        gap: 10px;
        color: var(--text-tertiary);
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        height: 100%;
      }

      .empty-state i {
        font-size: 34px;
        margin-bottom: 4px;
        font-style: normal;
        color: var(--text-tertiary);
      }

      .first-run-steps {
        margin: 14px 0 0;
        padding-left: 20px;
        text-align: left;
        font-family: var(--font-sans);
        font-style: normal;
        font-size: 14px;
        line-height: 1.65;
        color: var(--text-secondary);
        max-width: 460px;
      }

      .first-run-steps li {
        margin-bottom: 8px;
      }

      /* ============ BOTTOM SHEETS ============ */
      #confirm-dialog,
      #append-sheet,
      #edit-sheet,
      #menu-sheet,
      #integrations-sheet,
      #patterns-sheet,
      #stale-sheet,
      #view-sheet {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(20, 18, 13, 0.42);
        align-items: flex-end;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.28s var(--ease);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }

      /* Action modals paint above the surface that launched them.
         Everything above shares one z-index, so which overlay wins was decided
         by document order — fine while no sheet could open another. The
         out-of-date queue is the first that can: Edit, Append and Forget all
         launch from inside it and all three are declared earlier in index.html,
         so they opened BEHIND it. On a phone that is indistinguishable from the
         tap doing nothing — the sheet does not move, no dialog appears, and the
         confirm is found waiting underneath only after closing the queue.
         Reordering the markup would fix this instance and break on the next
         sheet added below them; the layer is what is actually meant. */
      #confirm-dialog,
      #append-sheet,
      #edit-sheet {
        z-index: 60;
      }

      #confirm-dialog.open,
      #append-sheet.open,
      #edit-sheet.open,
      #menu-sheet.open,
      #integrations-sheet.open,
      #patterns-sheet.open,
      #stale-sheet.open,
      #view-sheet.open {
        display: flex;
        opacity: 1;
      }

      .confirm-sheet,
      .append-inner,
      .edit-inner,
      .menu-inner,
      .view-inner {
        background: var(--bg);
        border-radius: 24px 24px 0 0;
        width: 100%;
        max-width: 440px;
        box-shadow: var(--shadow-sheet);
        transform: translateY(100%);
        transition: transform 0.34s var(--ease);
      }

      .open .confirm-sheet,
      .open .append-inner,
      .open .edit-inner,
      .open .menu-inner,
      .open .view-inner {
        transform: translateY(0);
      }

      .confirm-sheet {
        padding: 26px 24px calc(34px + env(safe-area-inset-bottom));
      }
      .append-inner {
        padding: 24px 22px calc(34px + env(safe-area-inset-bottom));
      }
      .edit-inner {
        padding: 24px 22px calc(34px + env(safe-area-inset-bottom));
      }
      .menu-inner {
        padding: 24px 22px calc(34px + env(safe-area-inset-bottom));
        max-height: 80vh;
        overflow-y: auto;
      }

      .view-inner {
        padding: 22px 22px calc(34px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        max-height: 90vh;
      }

      .confirm-sheet h3,
      .append-inner h3,
      .edit-inner h3,
      .menu-inner h3,
      .view-header h3 {
        font-family: var(--font-serif);
        font-size: 21px;
        font-weight: 500;
        margin-bottom: 9px;
        letter-spacing: -0.01em;
        color: var(--text-primary);
      }

      .confirm-sheet p {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 22px;
        line-height: 1.55;
      }

      .view-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        flex-shrink: 0;
      }

      .btn-close-icon {
        background: var(--surface-2);
        border: none;
        color: var(--text-secondary);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
      }

      .btn-close-icon i {
        font-size: 18px;
      }
      .btn-close-icon:hover {
        background: var(--surface-3);
      }

      .view-content {
        font-family: var(--font-serif);
        font-size: 17px;
        color: var(--text-primary);
        line-height: 1.62;
        overflow-y: auto;
        margin-bottom: 18px;
        white-space: pre-wrap;
        /* pre-wrap wraps at spaces but will not break a long unbroken token, so
           one file path or URL pushed the whole sheet sideways and the text
           scrolled off the left edge on a phone. */
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .view-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 22px;
        flex-shrink: 0;
      }

      .view-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        /* Separated from the scrolling region above rather than pushed down by
           margin-top:auto, which did nothing once the content overflowed. The
           rule is not decoration: a long memory scrolls underneath this row, and
           without it the text simply stopped mid-sentence at the buttons with
           nothing saying the rest was still there. */
        padding-top: 14px;
        border-top: 0.5px solid var(--border);
      }

      .btn-view-append,
      .btn-view-edit,
      .btn-view-forget {
        flex: 1;
        padding: 13px;
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--surface-2);
        color: var(--text-primary);
        transition:
          background 0.15s,
          color 0.15s;
      }

      .btn-view-append i,
      .btn-view-edit i,
      .btn-view-forget i {
        font-size: 16px;
      }

      .btn-view-append:hover,
      .btn-view-edit:hover {
        background: var(--surface-3);
      }

      .btn-view-forget {
        color: var(--danger);
      }
      .btn-view-forget:hover {
        background: var(--danger);
        color: #fff;
      }

      .confirm-actions,
      .append-actions {
        display: flex;
        gap: 10px;
      }

      .btn-cancel,
      .btn-append-cancel {
        flex: 1;
        padding: 14px;
        background: var(--surface-2);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 14.5px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.15s;
      }

      .btn-cancel:hover,
      .btn-append-cancel:hover {
        background: var(--surface-3);
      }

      .btn-delete {
        flex: 1;
        padding: 14px;
        background: var(--danger);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 14.5px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        transition: opacity 0.15s;
      }

      .btn-delete:hover {
        opacity: 0.92;
      }

      .btn-append-save {
        flex: 1;
        padding: 14px;
        background: var(--accent);
        border: none;
        border-radius: 13px;
        font-family: var(--font-sans);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--on-accent);
        cursor: pointer;
        transition: background 0.15s;
      }

      .btn-append-save:hover {
        background: var(--accent-press);
      }

      .btn-append-save:disabled {
        opacity: 0.55;
        cursor: default;
      }

      .append-context {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13.5px;
        color: var(--text-secondary);
        margin-bottom: 16px;
        line-height: 1.5;
        padding: 12px 14px;
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .append-input-wrap {
        background: var(--bg-card);
        border: 0.5px solid var(--border-input);
        border-radius: 13px;
        padding: 13px 15px;
        margin-bottom: 14px;
        transition:
          border-color 0.18s,
          box-shadow 0.18s;
      }

      .append-input-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
      }

      .append-input-wrap textarea {
        width: 100%;
        background: none;
        border: none;
        outline: none;
        font-family: var(--font-sans);
        font-size: 14.5px;
        color: var(--text-primary);
        resize: none;
        line-height: 1.5;
        min-height: 60px;
      }

      .append-input-wrap textarea::placeholder {
        color: var(--text-tertiary);
      }

      .edit-existing-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
      }

      .edit-hint {
        font-size: 12px;
        color: var(--text-tertiary);
        margin-bottom: 14px;
      }

      .edit-hint span {
        color: var(--accent-ink);
      }

      /* ── v2.3: the editor claims the height it needs ──────────────────────
         This is the only sheet whose whole job is a long piece of text, so it
         takes the screen rather than being sized to fit around its own
         furniture. It used to read the textarea's scrollHeight while the sheet
         was still display:none — which is 0 — and cap the result at 200px, so a
         two-thousand-character memory was edited through about three visible
         lines. Height is CSS's job now and nothing measures anything. */
      /* A definite height, not a max-height, and that is the whole trick.
         flex-grow only hands out *free* space, and a container sized by its own
         content has none — so `flex: 1 1 auto` on the editor below did nothing
         and the textarea fell back to a 60px floor on a 20,000-character
         memory. Fixed rather than content-sized is also the right shape for a
         work surface: the box should not jump size between memories.

         overflow:hidden so nothing can escape the padding box. Without it a
         sheet whose children declare more height than it has renders them over
         its own padding, flush to the card's edge. */
      .edit-inner {
        display: flex;
        flex-direction: column;
        height: 82vh;
        max-height: 82vh;
        overflow: hidden;
      }

      .edit-header {
        flex-shrink: 0;
      }

      .edit-inner .edit-header h3 {
        margin-bottom: 3px;
      }

      /* Which memory this is, since the sheet is otherwise identical whichever
         row opened it. */
      .edit-sub {
        font-size: 12.5px;
        color: var(--text-tertiary);
        margin-bottom: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Takes everything the tags, hint and buttons do not. The min-height is
         only a floor for a very short window; the height comes from the grow. */
      .edit-input-wrap {
        flex: 1 1 auto;
        min-height: 120px;
        display: flex;
        overflow: hidden;
      }

      .edit-input-wrap textarea {
        flex: 1 1 auto;
        /* `height: 100%` resolved against the wrapper in a way that left the
           textarea at its own 60px minimum; plain stretch fills it. */
        height: auto;
        align-self: stretch;
        overflow-y: auto;
        overflow-wrap: anywhere;
      }

      /* Sized to its contents, with a safety valve rather than a tight cap. A
         fixed 62px clipped the third row of chips halfway through, which reads
         as a broken layout rather than as something that scrolls — and the
         editor above is protected by its own min-height either way. */
      .edit-existing-tags {
        flex-shrink: 0;
        max-height: 20vh;
        overflow-y: auto;
        margin-top: 14px;
      }

      .edit-hint,
      .edit-inner .append-actions {
        flex-shrink: 0;
      }

      /* Tags could be added but never removed anywhere in the product, while
         these chips sat next to a hint about adding them — so they looked like
         a control and were not one. */
      .tag-chip--removable {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 0.5px solid var(--border);
        cursor: pointer;
        font-family: var(--font-sans);
        transition:
          background 0.15s,
          color 0.15s;
      }

      .tag-chip--removable i {
        font-size: 12px;
        opacity: 0.5;
      }

      .tag-chip--removable:hover {
        background: var(--danger-soft);
        color: var(--danger);
      }

      .tag-chip--removable:hover i {
        opacity: 1;
      }

      /* ============ MENU SHEET ============ */
      .menu-inner h3 {
        margin-bottom: 18px;
      }

      .theme-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0 16px;
        margin-bottom: 4px;
      }

      .theme-row-label {
        font-size: 14px;
        color: var(--text-secondary);
      }

      .theme-toggle {
        display: flex;
        gap: 3px;
        background: var(--surface-2);
        border-radius: var(--radius-pill);
        padding: 3px;
      }

      .theme-toggle button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 7px 13px;
        border-radius: var(--radius-pill);
        font-family: var(--font-sans);
        font-size: 12.5px;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 5px;
        transition:
          background 0.18s,
          color 0.18s;
      }

      .theme-toggle button i {
        font-size: 16px;
      }

      .theme-toggle button.active {
        background: var(--bg-card);
        color: var(--accent-ink);
        box-shadow: var(--shadow-card);
      }

      .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 0;
        border-top: 0.5px solid var(--border);
        cursor: pointer;
        color: var(--text-primary);
        font-size: 15px;
        background: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
        width: 100%;
        font-family: var(--font-sans);
        text-align: left;
        transition: color 0.15s;
      }

      .menu-item:hover {
        color: var(--text-secondary);
      }

      .menu-item i {
        font-size: 20px;
        color: var(--text-secondary);
      }

      .menu-item.danger {
        color: var(--danger);
      }
      .menu-item.danger i {
        color: var(--danger);
      }

      .about-credits {
        margin: 18px 0 14px;
        padding: 14px 16px;
        background: var(--bg-card);
        border: 0.5px solid var(--border-card);
        border-radius: var(--radius-card);
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      .about-credits-label {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 10px;
      }

      .about-credits-kicker {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
        color: var(--text-tertiary);
        margin: 0 0 6px;
      }

      .about-credits-line {
        margin: 0 0 12px;
      }

      .about-credits-list {
        margin: 0;
        padding-left: 18px;
      }

      .about-credits-list li {
        margin-bottom: 4px;
      }

      .about-credits a {
        color: var(--accent-ink);
        text-decoration: none;
      }

      .about-credits a:hover {
        text-decoration: underline;
      }

      /* ── v2.3 settings sheet: grouped by what the thing is ───────────────
         It was fourteen items in one stack — a stats panel, five chore panels, a
         theme toggle, three data actions and an about block — with nothing
         saying which was which. The Tauri Advanced Settings window groups by
         what a control affects; this borrows that and nothing else, because its
         staged Save/Cancel model would be wrong for a sheet whose controls are
         all immediate verbs. The stats panel is gone entirely: home shows the
         count, the week, the sources and the tags. */
      .menu-group {
        margin-bottom: 18px;
      }

      .menu-group[hidden] {
        display: none;
      }

      /* Deliberately unlike .digest-section-label, which is the 11px uppercase
         tertiary style used *inside* a group. Two identically-styled labels
         stacked ("UPKEEP" over "READY TO COMPRESS") read as two peers rather
         than as a heading and its contents. */
      .menu-group-label {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 10px;
        padding-bottom: 7px;
        border-bottom: 0.5px solid var(--border);
      }

      .digest-section {
        margin-bottom: 6px;
      }

      .digest-section-label {
        font-size: 11px;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
        margin-bottom: 9px;
      }

      /* ── v2.3 pattern review queue ────────────────────────────────────────
         Home shows two patterns as a daily nudge; this is the backlog, which on
         a brain that has been running a while is hundreds long. It is its own
         sheet rather than a panel inside settings for that reason. */
      .patterns-inner {
        display: flex;
        flex-direction: column;
        max-height: 88vh;
      }

      .patterns-bulkbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
        padding: 10px 0;
        margin-bottom: 4px;
        border-top: 0.5px solid var(--border);
        border-bottom: 0.5px solid var(--border);
        position: sticky;
        top: 0;
        background: var(--bg);
        z-index: 1;
      }

      .patterns-bulkbar[hidden] {
        display: none;
      }

      .patterns-selectall {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 13.5px;
        color: var(--text-secondary);
        cursor: pointer;
        min-width: 0;
      }

      .patterns-bulk-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
      }

      #patterns-list {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        padding-bottom: 6px;
      }

      /* The whole row is the label, so tapping anywhere on a pattern ticks it —
         a checkbox-sized target is the wrong size for a phone. */

      /* One flagged memory, with the three ways out of the flag. Mirrors
         .pattern-row's rhythm; no checkbox, because ruling on staleness is a
         per-memory judgement rather than a bulk one. */
      .stale-row {
        padding: 12px 2px;
        border-bottom: 0.5px solid var(--border);
      }

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

      .stale-text {
        margin: 0 0 6px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-primary);
      }

      .stale-when {
        display: block;
        font-size: 12px;
        color: var(--text-tertiary);
        margin-bottom: 8px;
      }

      .stale-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .pattern-row {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 12px 2px;
        border-bottom: 0.5px solid var(--border);
        cursor: pointer;
      }

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

      .pattern-check,
      #patterns-select-all {
        flex-shrink: 0;
        width: 17px;
        height: 17px;
        margin: 2px 0 0;
        accent-color: var(--accent);
        cursor: pointer;
      }

      .pattern-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
      }

      .pattern-text {
        font-family: var(--font-serif);
        font-size: 15px;
        line-height: 1.5;
        color: var(--text-primary);
        overflow-wrap: anywhere;
      }

      .pattern-when {
        font-size: 11.5px;
        color: var(--text-tertiary);
      }

      .pattern-sources {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin: 2px 0 0;
        padding: 0 0 0 14px;
        list-style: disc;
      }

      .pattern-source {
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--text-secondary);
        overflow-wrap: anywhere;
      }

      .pattern-source--gone {
        color: var(--text-tertiary);
        font-style: italic;
      }

      #patterns-more {
        flex-shrink: 0;
        align-self: flex-start;
      }

      #patterns-more[hidden] {
        display: none;
      }

      .digest-more {
        background: none;
        border: none;
        padding: 6px 0;
        cursor: pointer;
        color: var(--text-secondary);
        font-family: var(--font-sans);
        font-size: 13px;
      }

      .digest-more:hover {
        color: var(--accent-ink);
      }

      .digest-candidate-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 0.5px solid var(--line-soft);
      }

      .digest-candidate-row:last-of-type {
        border-bottom: none;
      }

      .digest-candidate-label {
        font-size: 13px;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .digest-candidate-count {
        font-size: 11px;
        color: var(--text-tertiary);
      }

      .digest-btn {
        font-size: 12px;
        font-weight: 500;
        color: var(--accent);
        background: var(--accent-soft);
        border: none;
        border-radius: var(--radius-pill);
        padding: 5px 12px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s;
      }

      .digest-btn:hover {
        background: rgba(253, 84, 10, 0.14);
      }

      .digest-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .digest-btn--loading i {
        animation: spin 0.7s linear infinite;
        display: inline-block;
      }

      .digest-note {
        font-size: 12px;
        color: var(--text-tertiary);
        line-height: 1.5;
        margin-bottom: 10px;
      }

      .digest-note a {
        color: var(--accent);
        text-decoration: none;
        border-bottom: 1px solid var(--accent-soft);
      }

      .digest-note a:hover {
        border-bottom-color: var(--accent);
      }

      .integration-row {
        padding: 16px 0;
      }

      .integration-row + .integration-row {
        border-top: 0.5px solid var(--border-input);
      }

      .integration-category-row {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 15px 4px;
        background: transparent;
        border: none;
        border-bottom: 0.5px solid var(--border-input);
        font-family: inherit;
        font-size: 14px;
        color: var(--text-primary);
        cursor: pointer;
        text-align: left;
      }
      .integration-category-row:last-child {
        border-bottom: none;
      }
      .integration-category-row:hover {
        background: rgba(128, 128, 128, 0.08);
      }
      .integration-category-row > i.ti {
        color: var(--accent);
        font-size: 18px;
      }
      .integration-category-name {
        font-weight: 500;
      }
      .integration-category-summary {
        margin-left: auto;
        font-size: 12px;
        color: var(--text-tertiary);
      }
      .integration-category-chevron {
        color: var(--text-tertiary) !important;
        font-size: 16px !important;
      }

      .integration-head {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 6px;
      }

      .integration-head i {
        color: var(--accent);
        font-size: 15px;
      }

      .integration-state {
        margin-left: auto;
        font-size: 11px;
        color: var(--text-tertiary);
      }

      .integration-state.connected {
        color: var(--good);
      }

      .integration-connect-row {
        display: flex;
        gap: 8px;
        margin-bottom: 6px;
      }

      .integration-connect-col {
        flex-direction: column;
        align-items: stretch;
      }

      .integration-connect-row input {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        background: transparent;
        border: 0.5px solid var(--border-input);
        border-radius: 9px;
        font-size: 13px;
        font-family: inherit;
        color: var(--text-primary);
        outline: none;
      }

      .integration-connect-row input:focus {
        border-color: var(--accent);
      }

      .integration-actions {
        display: flex;
        gap: 8px;
      }

      .digest-btn.danger {
        color: var(--danger);
        background: rgba(179, 38, 30, 0.08);
      }

      .integration-error {
        font-size: 12px;
        color: var(--danger);
        margin-bottom: 6px;
      }

      .digest-result {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 6px;
        line-height: 1.5;
        padding: 8px 10px;
        background: var(--accent-soft);
        border-radius: 8px;
      }

      .digest-result-meta {
        margin-top: 6px;
        font-size: 11px;
        color: var(--good);
        font-weight: 500;
      }

      /* ============ DESKTOP SIDEBAR ============ */
      #sidebar {
        width: 248px;
        flex-shrink: 0;
        flex-direction: column;
        background: var(--bg);
        border-right: 0.5px solid var(--border);
        padding: 20px 12px 22px;
      }

      .sb-logo {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 6px 10px 26px;
      }

      .sb-brand-name {
        font-family: var(--font-serif);
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
      }

      .sb-brand-status {
        font-size: 11.5px;
        color: var(--text-secondary);
        margin-top: 1px;
      }

      .sb-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .sb-tab {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 11px;
        border-radius: 10px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 14.5px;
        font-family: var(--font-serif);
        width: 100%;
        text-align: left;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .sb-tab i {
        font-size: 19px;
        flex-shrink: 0;
      }

      .sb-tab:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      .sb-tab.active {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }

      .sb-footer {
        padding-top: 12px;
        border-top: 0.5px solid var(--border);
      }

      .sb-footer-btn {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 11px;
        border-radius: 10px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 14.5px;
        font-family: var(--font-sans);
        width: 100%;
        text-align: left;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .sb-footer-btn:hover {
        background: var(--surface-2);
        color: var(--text-primary);
      }

      .sb-footer-btn i {
        font-size: 19px;
      }

      /* ============ DESKTOP ============ */
      /* ── v2.3 Recent rows: title, meta, and a hidden destructive action ──
         Mobile-first. Actions are always present on touch (the overflow is the
         primary affordance); the hover reveal below is a desktop enhancement. */
      .card-title {
        font-weight: 500;
        font-size: 15px;
        line-height: 1.4;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .card-preview {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .card-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--text-tertiary);
        margin-bottom: 6px;
      }

      .card-source {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .card-source i {
        font-size: 13px;
      }

      /* Tags scroll sideways rather than stacking into a tall wrap — a row's
         height should not depend on how many tags it carries.
         `flex-wrap: nowrap` is doing real work: the base rule above wraps, and
         inside the footer's narrow middle column that put every chip on its own
         line — a memory with nine tags became a nine-line row on a phone. */
      .card-tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
      }

      /* Phones give the tags their own full-width line. Squeezing them between
         the source badge and the action buttons leaves ~120px, which truncates
         chips mid-word ("second-brain-cl…") no matter how they wrap. */
      .card-footer {
        flex-wrap: wrap;
      }

      .card-meta {
        order: 1;
      }

      .card-actions {
        order: 2;
        margin-left: auto;
      }

      .card-tags {
        order: 3;
        flex: 1 0 100%;
      }

      .card-tags::-webkit-scrollbar {
        display: none;
      }

      .card-tags .tag-chip {
        flex: 0 0 auto;
      }

      .card-overflow {
        position: relative;
      }

      .overflow-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
      }

      .card-overflow-menu {
        position: absolute;
        right: 0;
        bottom: calc(100% + 6px);
        z-index: 20;
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        padding: 4px;
        min-width: 200px;
      }

      .card-overflow-menu[hidden] {
        display: none;
      }

      .card-overflow-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        background: none;
        border: 0;
        border-radius: 8px;
        font-size: 14px;
        color: var(--text-primary);
        cursor: pointer;
        text-align: left;
      }

      .card-overflow-item.danger {
        color: var(--danger);
      }

      .card-overflow-item.danger:hover {
        background: var(--danger-soft);
      }

      /* ── Safe areas ──────────────────────────────────────────────────────
         Installed as a PWA the app owns the whole screen, so the bottom bars
         sat under the iPhone home indicator. Paired with viewport-fit=cover. */
      .input-bar,
      .filter-bar {
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
      }

      #menu-sheet .menu-inner,
      #integrations-sheet .menu-inner {
        padding-bottom: max(env(safe-area-inset-bottom), 16px);
      }

      @media (hover: hover) {
        .card-actions {
          opacity: 0;
          transition: opacity 0.15s ease;
        }

        .memory-card:hover .card-actions,
        .memory-card:focus-within .card-actions,
        .memory-card.card--menu-open .card-actions {
          opacity: 1;
        }
      }

      /* ── v2.3 memory detail: what the brain knows ─────────────────────── */
      .view-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--text-tertiary);
        margin-bottom: 14px;
        flex-shrink: 0;
      }

      .view-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .view-meta-item i {
        font-size: 13px;
      }

      .view-brain {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 18px;
        flex-shrink: 0;
      }

      .view-brain-label {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-tertiary);
        margin-bottom: 8px;
      }

      .view-brain-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 13.5px;
        color: var(--text-secondary);
        padding: 3px 0;
      }

      .view-brain-row strong {
        color: var(--text-primary);
        font-weight: 500;
      }

      .view-brain-row .dots {
        color: var(--accent);
        letter-spacing: 2px;
        font-size: 12px;
      }

      /* The sentence that explains a verdict, in the voice the rest of the
         product uses rather than the tag it is stored as. */
      .view-brain-note {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-secondary);
        margin-top: 6px;
      }

      .view-brain-note--warn {
        color: var(--warn);
        font-style: normal;
        font-family: var(--font-sans);
      }

      /* Citation chips in an answer, and the card they point at. */
      .cite {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin: 0 2px;
        vertical-align: baseline;
        background: var(--accent-soft);
        color: var(--accent-ink);
        border: 0;
        border-radius: 5px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10.5px;
        line-height: 1;
        cursor: pointer;
      }

      .cite:hover {
        background: var(--accent);
        color: #fff;
      }

      .memory-card--cited {
        box-shadow: 0 0 0 2px var(--accent);
        transition: box-shadow 0.3s ease;
      }

      /* Capture receipt — the site's "● stored to brain" moment. */
      .receipt {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 12px;
        padding: 12px 14px;
        margin: 8px 0 4px;
      }

      .receipt-headline {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11.5px;
        color: var(--accent-ink);
      }

      .receipt-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
      }

      .receipt-filed {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        font-size: 13px;
        color: var(--text-secondary);
      }

      .receipt-note {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--text-secondary);
        margin-top: 8px;
      }

      /* The number the answer cites this source by. Same visual language as the
         inline chip, so [2] in the prose and 2 on the card read as one thing. */
      .cite-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: var(--accent-soft);
        color: var(--accent-ink);
        border-radius: 5px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10.5px;
        line-height: 1;
        flex-shrink: 0;
      }

      /* A scrolling tag row clipped hard at the card edge reads as a rendering
         fault; the fade says "there is more this way". Harmless when the tags
         already fit, because then it only fades empty space. */
      .card-tags {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
      }

      /* ── Sheet proportions ────────────────────────────────────────────────
         The memory is the point of this sheet, and it was losing: three rows of
         tags, the verdict panel and three related cards left the text about
         four lines in a 90vh sheet. The content now takes the space and the
         supporting sections are capped. */
      /* The middle of the sheet scrolls as one, so the memory renders at its
         natural length instead of through a keyhole while the panels below it
         each keep their own scrollbar — and, more importantly, so nothing can
         push the action row past the sheet's own padding. */
      .view-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Room for the fixed action row below, which would otherwise sit right
           on top of the last line of text as it scrolls under. */
        padding-bottom: 4px;
      }

      .view-content {
        flex: 0 0 auto;
        overflow-y: visible;
      }

      /* One scrolling line, like the tag rows on cards — a memory with a dozen
         tags should not cost three lines of the reading area. */
      .view-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        margin-bottom: 14px;
      }

      .view-tags::-webkit-scrollbar {
        display: none;
      }

      .view-tags .tag-chip {
        flex: 0 0 auto;
      }

      /* Related is context, not the subject: it scrolls within its own bounds
         rather than pushing the memory off the top of the sheet. */
      /* No longer its own scroll area: the region above scrolls, and a panel
         that scrolled inside a scrolling panel meant two gestures to read one
         memory. */
      .view-related {
        flex-shrink: 0;
      }

      /* ── v2.3 daily brief ─────────────────────────────────────────────────
         The home surface. Quiet by construction: when nothing happened it does
         not render, and the welcome hero stands in its place. */
      .brief {
        padding: 4px 0 8px;
      }

      .brief-eyebrow {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 14px;
      }

      .brief-card {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
      }

      /* Nothing to decide here — context, not a prompt for action. */
      .brief-card--quiet {
        background: none;
        border-style: dashed;
      }

      .brief-label {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-tertiary);
        margin-bottom: 6px;
      }

      .brief-body {
        font-family: var(--font-serif);
        font-size: 15px;
        line-height: 1.55;
        color: var(--text-primary);
      }

      .brief-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
      }

      /* Sits in the same list as the cards above it, so it takes the same
         block rhythm rather than the inline width a bare <button> defaults to. */
      .brief-more {
        display: block;
        margin: 0 0 10px;
      }

      .brief-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

      /* ── Brief dashboard panels ───────────────────────────────────────── */
      .brief-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
      }

      .brief-panel {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 12px;
        padding: 12px 14px;
      }

      /* Activity strip. No axes: the shape is the point, and the counts are in
         the tooltips. */
      .spark {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 46px;
        margin-top: 4px;
      }

      .spark-bar {
        flex: 1 1 0;
        min-width: 0;
        background: var(--accent);
        border-radius: 2px 2px 0 0;
        opacity: 0.85;
      }

      /* A day with nothing is a fact worth seeing, so it keeps its slot. */
      .spark-bar--empty {
        background: var(--surface-3);
        opacity: 1;
      }

      .src-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 7px;
        font-size: 12.5px;
        color: var(--text-secondary);
      }

      .src-name {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 88px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
      }

      .src-bar {
        flex: 1;
        height: 6px;
        background: var(--surface-2);
        border-radius: 3px;
        overflow: hidden;
      }

      .src-fill {
        display: block;
        height: 100%;
        background: var(--accent);
        opacity: 0.8;
      }

      .src-n {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--text-tertiary);
        min-width: 22px;
        text-align: right;
      }

      .topic-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
      }

      .topic-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-tag);
        color: var(--text-tag);
        border: 0;
        border-radius: var(--radius-tag);
        padding: 5px 10px;
        font-size: 12px;
        font-family: var(--font-sans);
        cursor: pointer;
      }

      .topic-chip span {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        color: var(--text-tertiary);
      }

      .topic-chip:hover {
        background: var(--accent-soft);
        color: var(--accent-ink);
      }

      .brief-attention {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
      }

      .attn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 1px solid var(--border-input);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 12.5px;
        color: var(--warn);
        cursor: pointer;
        font-family: var(--font-sans);
      }

      .attn:hover {
        background: var(--surface-2);
      }

      /* ── v2.4 home: greeting and one input, composed as a unit ──────────
         The old layout pinned a hero to the top and the input to the bottom
         and left a trench between them, which is what made a brain holding
         two thousand memories feel empty. */
      .home {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 58vh;
        padding: 24px 4px 8px;
        text-align: center;
      }

      .home-greet {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-serif);
        font-size: 30px;
        color: var(--text-primary);
      }

      .home-mark {
        color: var(--accent);
        font-size: 24px;
        display: inline-flex;
      }

      .home-sub {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11.5px;
        color: var(--text-tertiary);
        margin-top: 10px;
      }

      .home-input {
        width: 100%;
        max-width: 620px;
        margin-top: 26px;
        background: var(--bg-card);
        border: 1px solid var(--border-input);
        border-radius: 18px;
        padding: 14px 16px 10px;
        text-align: left;
        transition: border-color 0.15s;
      }

      .home-input:focus-within {
        border-color: var(--accent);
      }

      .home-field {
        width: 100%;
        border: 0;
        background: none;
        resize: none;
        outline: none;
        font-family: var(--font-serif);
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-primary);
        max-height: 40vh;
      }

      .home-field::placeholder {
        color: var(--text-tertiary);
      }

      .home-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
      }

      /* The prediction, always visible and always one tap from being overridden.
         Hidden only while the field is empty, when there is nothing to predict. */
      .home-mode {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: none;
        border: 1px solid var(--border-input);
        border-radius: 999px;
        padding: 5px 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--text-secondary);
        cursor: pointer;
        visibility: hidden;
      }

      .home-mode:hover {
        border-color: var(--accent);
        color: var(--accent-ink);
      }

      .home-mode-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--text-tertiary);
      }

      .home-mode--remember .home-mode-dot {
        background: var(--accent);
      }

      .home-topics {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
      }

      .home-more {
        width: 100%;
        max-width: 620px;
        margin-top: 14px;
        text-align: left;
      }

      /* On the home screen the old bottom bars are redundant: the input above
         is the input, and a tag filter with nothing to filter is furniture. */
      #screen-home.home-visible .input-bar,
      #screen-home.home-visible .suggestions-row,
      #screen-home.home-visible .filter-bar {
        display: none;
      }

      /* The hashtag lesson, inherited from the deleted Remember tab — which was
         the only place the product ever taught it. */
      .home-hint {
        font-size: 12.5px;
        color: var(--text-tertiary);
        text-align: center;
        margin-top: 10px;
      }

      .home-hint .hashtag {
        color: var(--accent-ink);
        font-style: italic;
      }

      @media (min-width: 768px) {
        .brief-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (min-width: 768px) {
        /* Wide enough for one row again: badge, tags, actions. */
        .card-footer {
          flex-wrap: nowrap;
        }

        .card-tags {
          order: 2;
          flex: 1 1 auto;
        }

        .card-actions {
          order: 3;
          margin-left: 0;
        }
      }

      @media (min-width: 768px) {
        html,
        body {
          height: 100%;
          overflow: auto;
        }

        body {
          background: var(--surface-3);
        }

        #auth-overlay {
          position: fixed;
          inset: 0;
          max-width: none;
          background: color-mix(in srgb, var(--bg) 88%, transparent);
          backdrop-filter: blur(8px);
          align-items: center;
          justify-content: center;
          padding: 0;
        }

        .auth-card {
          background: var(--bg);
          border-radius: 22px;
          padding: 44px 38px;
          width: 420px;
          box-shadow: var(--shadow-float);
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        #app {
          flex-direction: row;
          height: 100vh;
          max-width: 100%;
          width: 100%;
          border-radius: 0;
          overflow: hidden;
        }

        #sidebar {
          display: flex;
        }
        #topbar {
          display: none;
        }
        #navbar {
          display: none;
        }

        #main-panel {
          margin: 0 auto;
          border-left: 0.5px solid var(--border);
          border-right: 0.5px solid var(--border);
        }

        #confirm-dialog,
        #append-sheet,
        #edit-sheet,
        #menu-sheet,
        #integrations-sheet,
        #patterns-sheet,
        #stale-sheet,
        #view-sheet {
          align-items: center;
          justify-content: center;
        }

        .confirm-sheet,
        .append-inner,
        .edit-inner,
        .menu-inner,
        .view-inner {
          border-radius: 18px;
          max-width: 420px;
          transform: translateY(16px) scale(0.98);
          /* Bottom-sheet shadow points upward; on centered modals it reads as a
             flat dark bar under the panel. Use the floating elevation instead. */
          box-shadow: var(--shadow-float);
          border: 0.5px solid var(--border-card);
        }

        /* The editor is the exception to the 420px modal width. Every other
           sheet presents something to read or a short list to pick from; this
           one is a writing surface, and 420px on a 1,500px window meant editing
           a long memory through a column narrower than the row it came from. */
        .edit-inner {
          max-width: 680px;
        }

        .open .confirm-sheet,
        .open .append-inner,
        .open .edit-inner,
        .open .menu-inner,
        .open .view-inner {
          transform: none;
        }
      }

      ::-webkit-scrollbar {
        width: 0;
      }

      /* forget animation */
      @keyframes explode-out {
        0% {
          transform: scale(1);
          opacity: 1;
          filter: brightness(1) blur(0);
        }
        20% {
          transform: scale(1.04) translateY(-2px);
          opacity: 1;
          filter: brightness(1.4) blur(1px);
        }
        100% {
          transform: scale(0.6) translateY(20px);
          opacity: 0;
          filter: brightness(2.2) blur(8px);
        }
      }

      .explode-out {
        animation: explode-out 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.05s !important;
        }
      }

      /* Download-the-app CTA (sidebar footer).
         A solid pill rather than another nav row like Settings — it is the one
         thing here aimed at someone who has not installed the app yet.
         .sb-footer-btn was written for <button>, so as an <a> it also needs the
         underline removed. */
      #sb-download-app {
        --dl-bg: #1f2532;
        --dl-fg: #ffffff;
        box-sizing: border-box;
        justify-content: center;
        gap: 9px;
        margin-bottom: 10px;
        padding: 11px 14px;
        border: none;
        border-radius: var(--radius-pill);
        background: var(--dl-bg);
        color: var(--dl-fg);
        font-weight: 650;
        /* "Download for Windows" is the longest label and wraps to two lines in
           a narrow sidebar, which reads as broken rather than tight. */
        white-space: nowrap;
        font-size: 14px;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(22, 22, 22, 0.14);
        transition:
          background 0.15s,
          box-shadow 0.15s,
          transform 0.08s;
      }

      /* Inverted in dark mode: the light-mode fill is nearly --bg there, so the
         button would disappear into the sidebar. */
      html[data-theme='dark'] #sb-download-app {
        --dl-bg: var(--text-primary);
        --dl-fg: #161616;
        box-shadow: none;
      }

      #sb-download-app i {
        color: inherit;
        font-size: 17px;
      }

      #sb-download-app:hover {
        background: #2a3444;
        color: var(--dl-fg);
        box-shadow: 0 2px 6px rgba(22, 22, 22, 0.18);
      }

      html[data-theme='dark'] #sb-download-app:hover {
        background: #ffffff;
      }

      /* A press that visibly depresses is most of what makes a link feel like a
         button. */
      #sb-download-app:active {
        transform: translateY(1px);
        box-shadow: 0 1px 1px rgba(22, 22, 22, 0.16);
      }