/* Hallmark · macrostructure: Workbench · tone: austere · anchor hue: warm (orange, rationed)
 *
 * ClawBot app-shell refresh — Phase 1 "Quiet".
 * Loads AFTER dashboard.css and overrides it; nothing here changes markup or JS,
 * so the layer can be removed with one <link> line. Four rules drive every
 * override below:
 *   1. One accent per view. Orange marks the single next action, nothing else.
 *   2. One surface per element. A fill OR a hairline, never both, never stacked.
 *   3. One measure. Content sits in a centred column instead of spanning 1440px.
 *   4. Value before chores. The home page leads with what to do, not with counts.
 */

:root {
    /* Neutral ramp — cooler paper, true ink, hairlines that read as edges not lines */
    --ink: #1d1d1f;
    --ink-2: #545456;
    --ink-3: #86868b;
    --paper: #ffffff;
    --paper-2: #f5f5f7;
    --paper-3: #ebebf0;
    --hairline: rgba(0, 0, 0, 0.09);

    /* 4pt rhythm */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

    /* Type scale */
    --t-caption: 12px; --t-small: 13px; --t-body: 15px;
    --t-lead: 17px; --t-title: 21px; --t-display: 30px;

    --radius: 14px;
    --radius-sm: 10px;
    --radius-pill: 980px;
    --measure: 980px;

    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --dur: 200ms;
}

:root[data-theme="dark"] {
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #6e6e73;
    --paper: #000000;
    --paper-2: #1c1c1e;
    --paper-3: #2c2c2e;
    --hairline: rgba(255, 255, 255, 0.12);
}

/* Bind the app's own tokens to the ramp so untouched components follow along. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
    --bg-primary: var(--paper);
    --bg-secondary: var(--paper-2);
    --bg-tertiary: var(--paper-2);
    --bg-card: var(--paper);
    --bg-hover: var(--paper-3);
    --text: var(--ink);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --border: var(--hairline);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────
   Quieter chrome: no heavy rules, no solid accent pill. The active row is a
   neutral fill with ink text — colour is spent on actions, not on location. */

.sidebar { background: var(--paper-2); border-right: 1px solid var(--hairline); }

.sidebar-brand {
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: none;
    gap: var(--s-2);
}
.sidebar-brand h2 { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.02em; }
.sidebar-brand .brand-emoji,
.sidebar-brand img.brand-emoji { width: 22px; height: 22px; }

.sidebar-nav { padding: 0 var(--s-3); gap: 1px; }

.sidebar-nav a {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-sm);
    font-size: var(--t-small);
    font-weight: 450;
    color: var(--ink-2);
    gap: var(--s-3);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.sidebar-nav a:hover { background: var(--paper-3); color: var(--ink); }
.sidebar-nav a.active {
    background: var(--paper-3);
    color: var(--ink);
    font-weight: 550;
}
.sidebar-nav a .nav-icon { font-size: 15px; width: 20px; color: var(--ink-3); }
.sidebar-nav a.active .nav-icon { color: var(--accent); }

/* Nested crew agents read as a sub-list, not as eight more destinations. */
.sidebar-nav .crew-subnav a,
.sidebar-nav a.crew-sub {
    font-size: var(--t-caption);
    color: var(--ink-3);
    padding-left: var(--s-6);
}

/* Eight flat destinations become three groups in reading order:
   what you talk to, what runs for you (Loop · Skills · Memory · Jobs — the
   machinery you configure once and it keeps working), and the account.
   Ordering only — the markup is untouched, so every page inherits it. */
.sidebar-nav > a[href="home"]     { order: 1; }
.sidebar-nav > a[href="chat"]     { order: 2; }
.sidebar-nav > a[href="crew"]     { order: 3; }
.sidebar-nav > #crew-subnav,
.sidebar-nav > .crew-subnav       { order: 4; }
.sidebar-nav > a[href="loop"]     { order: 5; }
.sidebar-nav > a[href="skills"]   { order: 6; }
.sidebar-nav > a[href="memory"]   { order: 7; }
.sidebar-nav > a[href="jobs"]     { order: 8; }
.sidebar-nav > a[href="settings"] { order: 9; }

.sidebar-nav > a[href="loop"],
.sidebar-nav > a[href="settings"] {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Crew agents are a sub-list of one destination, not three more of them. */
#crew-subnav .sidebar-sublink,
.sidebar-nav .sidebar-sublink {
    font-size: var(--t-small);
    color: var(--ink-3);
    padding-left: var(--s-5);
}
/* The crew emoji is the only thing that tells one agent from another at a
   glance. Phase 1 hid it and the list went anonymous — it stays. */
.sidebar-sublink .sub-emoji {
    display: inline-block;
    width: 18px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    filter: saturate(0.9);
}

/* The mobile bar needs no order rules: its markup is already
   Loop · Skills · Memory, and a curated subset of it is moved into "More" by
   JS at runtime. Setting `order` here pushed that injected More button to the
   front, so it stays out. */

.sidebar-user {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--hairline);
}
.sidebar-user .user-name { font-size: var(--t-small); font-weight: 550; }
.sidebar-user .user-email { font-size: var(--t-caption); color: var(--ink-3); }

/* ── Home ─────────────────────────────────────────────────────────────────
   Rebuilt in markup (home.html), not reordered by CSS. One page, one action:
   a greeting, a place to type, five things worth typing. Everything that used
   to compete with that — five counter cards, a progress checklist, a tour
   banner — is either folded away or reduced to a line of type. */

.home2 {
    max-width: 720px;
    margin: 0 auto;
    padding: 104px var(--s-6) 140px;
}

.home2-head h1 {
    font-size: clamp(34px, 3.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: var(--ink);
}
.home2-head p {
    margin-top: var(--s-3);
    font-size: 19px;
    line-height: 1.45;
    letter-spacing: -0.012em;
    color: var(--ink-2);
}

/* The composer. A single tall field is the whole invitation — no modal, no
   permission ask, nothing to dismiss before the product can do something. */
.ask {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-7);
    padding: 6px 6px 6px var(--s-5);
    background: var(--paper-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.ask:focus-within { background: var(--paper); border-color: var(--hairline); }

.ask-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 17px;
    letter-spacing: -0.012em;
    color: var(--ink);
    padding: var(--s-3) 0;
}
.ask-input::placeholder { color: var(--ink-3); }
.ask-input:focus { outline: none; }

.ask-go {
    flex: none;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.ask-go:hover { opacity: 0.86; }
.ask-go:active { transform: scale(0.94); }

/* Suggestions: rows of type on the page itself, not tiles in a panel. */
.suggest { margin-top: var(--s-8); }

.eyebrow {
    font-size: var(--t-small);
    font-weight: 450;
    color: var(--ink-3);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: var(--s-2);
}

.home-usecases { display: block; background: none; border-radius: 0; }

.home-uc {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    padding: var(--s-4) 2px;
    cursor: pointer;
    transition: opacity 120ms var(--ease-out);
}
.home-uc:hover { opacity: 0.55; }
.home-uc:hover .home-uc-l1 { color: var(--ink); }
.home-uc-ic { display: none; }
.home-uc-l1 {
    font-size: 17px;
    font-weight: 450;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.home-uc-l2 {
    font-size: var(--t-small);
    font-weight: 400;
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
}
.home-uc::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--ink-3);
    border-top: 1.5px solid var(--ink-3);
    transform: rotate(45deg);
}

/* Folded reference. Closed by default; a disclosure row, not a card. */
.quiet { margin-top: var(--s-7); }

.fold { border-top: 1px solid var(--hairline); }
.fold summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) 2px;
    cursor: pointer;
    list-style: none;
    font-size: var(--t-body);
    font-weight: 450;
    letter-spacing: -0.01em;
    color: var(--ink-2);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
    content: '';
    width: 6px; height: 6px;
    flex: none;
    border-right: 1.5px solid var(--ink-3);
    border-bottom: 1.5px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur) var(--ease-out);
}
.fold[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold summary:hover { color: var(--ink); }
.fold-body { padding: 0 2px var(--s-5); }

.home-setup-progress { font-size: var(--t-small); color: var(--ink-3); font-weight: 400; margin-left: auto; }
.fold summary::after { order: 3; }

.home-progress { height: 3px; background: var(--paper-3); border-radius: 2px; margin-bottom: var(--s-4); }
.home-progress-fill { height: 100%; background: var(--ink-2); border-radius: 2px; }

.home-step { border-bottom: 1px solid var(--hairline); padding: var(--s-3) 0; }
.home-step:last-child { border-bottom: 0; }
.home-step-label { font-size: var(--t-body); letter-spacing: -0.01em; }
.home-step.done .home-step-label { text-decoration: none; color: var(--ink-3); }
.home-step-ring { border-color: var(--hairline); width: 18px; height: 18px; }
.home-step.done .home-step-ring { background: var(--ink-3); border-color: var(--ink-3); }
.home-step-cta {
    background: none;
    border: 1px solid var(--hairline);
    color: var(--ink);
    border-radius: var(--radius-pill);
    padding: 5px 13px;
    font-size: var(--t-small);
    font-weight: 450;
}
.home-step-cta:hover { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink); }

.home-result { border-bottom: 1px solid var(--hairline); padding: var(--s-3) 0; }
.home-result:last-child { border-bottom: 0; }
.home-result-ic { display: none; }
.home-result-t { font-size: var(--t-body); font-weight: 450; letter-spacing: -0.01em; }
.home-result-m { font-size: var(--t-small); color: var(--ink-3); }
.home-results-empty { text-align: left; padding: var(--s-3) 0; font-size: var(--t-small); }
.home-results-empty-ic { display: none; }

/* Counters: one line of type across the foot of the page. */
.glance { margin-top: var(--s-6); border-top: 1px solid var(--hairline); padding-top: var(--s-5); }

.home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    background: none;
    border-radius: 0;
}
.home-stat {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    transition: opacity 120ms var(--ease-out);
}
.home-stat:hover { background: none; border: 0; opacity: 0.6; }
.home-stat.accent { border-left: 0; }
.home-stat-ic { display: none; }
.home-stat-v { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); line-height: 1.2; }
.home-stat-l { font-size: var(--t-small); font-weight: 400; color: var(--ink-3); margin-top: 1px; }
.home-stat-s { display: none; }

.footnote { margin-top: var(--s-7); font-size: var(--t-small); color: var(--ink-3); }
.footnote a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.footnote a:hover { color: var(--ink); border-bottom-color: var(--ink-3); }

@media (max-width: 768px) {
    .home2 { padding: 88px var(--s-5) 110px; }
    .home2-head h1 { font-size: 30px; }
    .home2-head p { font-size: 17px; }
    .home-uc { gap: var(--s-3); }
    .home-uc-l2 { display: none; }
}

/* ── Shared page chrome ───────────────────────────────────────────────── */

.page-header { border-bottom: 1px solid var(--hairline); padding: var(--s-7) var(--s-6) var(--s-5); }
.page-header h1 { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.03em; }
.page-header p { font-size: var(--t-body); color: var(--ink-2); margin-top: var(--s-2); }

.mobile-header { background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
:root[data-theme="dark"] .mobile-header { background: rgba(0,0,0,0.72); }
.mobile-header h2 { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.02em; }

.mobile-nav { background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--hairline); }
:root[data-theme="dark"] .mobile-nav { background: rgba(0,0,0,0.82); }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Crew ─────────────────────────────────────────────────────────────────
   Ten equal tiles in a 3-up grid gave every agent the same weight and left a
   third of each card empty. The same cards read as a list: one row per agent,
   name and sentence on the left, the action on the right, hairlines between.
   Selectors are id-scoped because crew.html's rules are inline and load last. */

#crew-grid {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-7) var(--s-6) var(--s-8);
}

#crew-grid .crew-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    align-items: start;
    min-height: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    padding: var(--s-5) 2px;
    text-align: left;
    transition: opacity 120ms var(--ease-out);
}
#crew-grid .crew-card:hover { border-color: var(--hairline); opacity: 0.62; }
#crew-grid .crew-card .plus { display: none; }
#crew-grid .crew-card .crew-trial-badge { grid-column: 2; justify-self: start; margin: var(--s-2) 0 0; }

#crew-grid .crew-card .crew-header { display: contents; }
#crew-grid .crew-card .crew-emoji {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 17px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    background: var(--paper-2);
    border-radius: 9px;
}
#crew-grid .crew-card .crew-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    font-weight: 550;
    letter-spacing: -0.015em;
    color: var(--ink);
}
#crew-grid .crew-card .crew-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--t-body);
    line-height: 1.45;
    letter-spacing: -0.008em;
    color: var(--ink-2);
    max-width: 52ch;
}
#crew-grid .crew-card .crew-meta,
#crew-grid .crew-card .crew-trial-note {
    grid-column: 2;
    margin-top: var(--s-2);
    padding-top: 0;
    font-size: var(--t-small);
    color: var(--ink-3);
}

/* The learn-more link is the row's affordance — right-aligned, ink, no orange. */
#crew-grid .crew-card .crew-learn,
#crew-grid .crew-card .crew-learn-link {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: var(--t-small);
    font-weight: 450;
    color: var(--ink-3);
    text-decoration: none;
    white-space: nowrap;
}
#crew-grid .crew-card a:hover { color: var(--ink); }

.page-header { max-width: 760px; margin: 0 auto; border-bottom: 0; padding: 96px var(--s-6) 0; }

/* crew.html centres its page header inline; the list below it is left-aligned,
   so the two were reading as different pages. */
#crew-grid,
.main-content > .page-header,
.page-header h1,
.page-header p { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 2 · "Alive" — home only
   ══════════════════════════════════════════════════════════════════════════
   Phase 1 borrowed the Linear/Vercel reference: quiet chrome, monochrome,
   one surface per element, everything non-essential folded away. That is the
   right reference for a tool someone lives in for eight hours. ClawBot's home
   is the opposite case — an occasional visit whose whole job is to show that
   an agent has been working while you were gone. Stripped of colour, glyphs,
   surfaces and the activity feed, it had nothing left that changes between
   visits, and a page where nothing changes reads as dead.

   So life comes back, but from content and state rather than decoration
   (PostHog's lesson: personality does real UX work; Attio's: the agent's
   output is a designed component, not a widget). Five levers, in order of
   how much they carry:
     1. the activity feed leaves the fold and gets its own live header;
     2. glyphs return to the suggestion cards and the crew sub-nav;
     3. suggestions become cards with a surface and a hover lift;
     4. counters become tinted chips instead of an invisible line of type;
     5. one warm wash behind the greeting, and arrival motion on each block.
   Colour discipline is unchanged: orange still marks state and the single
   next action, never decoration. Every animation is off under
   prefers-reduced-motion (the global rule above already collapses them).   */

/* Arrival: each block rises once, staggered. Nothing loops, nothing blocks
   interaction, and the page is fully readable if the animation never runs. */
@keyframes hm-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.home2 .rise {
    animation: hm-rise 520ms var(--ease-out) both;
}
.home2 .rise:nth-child(1) { animation-delay: 0ms; }
.home2 .rise:nth-child(2) { animation-delay: 55ms; }
.home2 .rise:nth-child(3) { animation-delay: 110ms; }
.home2 .rise:nth-child(4) { animation-delay: 165ms; }
.home2 .rise:nth-child(5) { animation-delay: 220ms; }
.home2 .rise:nth-child(n+6) { animation-delay: 275ms; }

/* A wider measure: 720px reads as a document, 920px reads as a dashboard.
   width:100% is load-bearing — .main-content is a column flexbox, so the auto
   side margins cancel the default stretch and the block collapses to
   shrink-to-fit (that is why Phase 1 rendered a ~430px ribbon, not 720px). */
.home2 { width: 100%; max-width: 920px; padding-top: 92px; }

/* One warm wash, anchored on the greeting. Low enough alpha that it never
   competes with the accent, high enough that the page is not blank paper. */
.home2-head {
    position: relative;
    padding: var(--s-5) 0 var(--s-2);
}
.home2-head > * { position: relative; }
.home2-head::before {
    content: '';
    position: absolute;
    /* Zero side insets on purpose: any horizontal bleed past the column gives
       the page a phantom h-scrollbar at narrow widths. The wash reads wide
       because the gradients are wide, not because the box is. */
    inset: -96px 0 -48px 0;
    pointer-events: none;
    background:
        radial-gradient(78% 130% at 6% 0%, rgba(255, 107, 53, 0.15), transparent 64%),
        radial-gradient(62% 110% at 88% 6%, rgba(255, 158, 53, 0.11), transparent 68%);
    /* Feather the box edges so the wash reads as light, not as a panel. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
:root[data-theme="dark"] .home2-head::before {
    background:
        radial-gradient(60% 120% at 12% 0%, rgba(255, 107, 53, 0.20), transparent 62%),
        radial-gradient(45% 100% at 78% 10%, rgba(255, 158, 53, 0.13), transparent 66%);
}

/* ── Suggestions: cards, not a table of contents ─────────────────────── */

.suggest { margin-top: var(--s-7); }

.home-usecases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-3);
}

.home-uc {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--s-3);
    row-gap: 2px;
    align-items: start;
    background: var(--paper-2);
    border: 1px solid transparent;
    border-top: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--s-4);
    transition:
        transform 220ms var(--ease-out),
        border-color 220ms var(--ease-out),
        background-color 220ms var(--ease-out),
        box-shadow 220ms var(--ease-out);
}
.home-uc:hover {
    opacity: 1;
    transform: translateY(-2px);
    background: var(--paper);
    border-color: rgba(255, 107, 53, 0.34);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.home-uc:active { transform: translateY(0); }

.home-uc-ic {
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 38px; height: 38px;
    font-size: 18px;
    line-height: 1;
    border-radius: 11px;
    background: var(--paper-3);
    transition: background-color 220ms var(--ease-out);
}
.home-uc:hover .home-uc-ic { background: rgba(255, 107, 53, 0.12); }

.home-uc-l1 { grid-column: 2; font-size: var(--t-body); font-weight: 500; line-height: 1.35; }
.home-uc-l2 { grid-column: 2; font-size: var(--t-caption); color: var(--ink-3); }
.home-uc::after { display: none; }

/* ── The feed: the page's one living surface ─────────────────────────── */

.feed { margin-top: var(--s-8); }

.eyebrow.live { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }

.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
    animation: hm-pulse 2.4s var(--ease-out) infinite;
}
@keyframes hm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

.home-results {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-4);
}
.home-result {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 0;
}
.home-result-ic {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    background: var(--paper-2);
}
.home-result-t { font-weight: 500; }
.home-result-m { font-size: var(--t-caption); color: var(--ink-3); margin-top: 1px; }

.home-results-empty {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: var(--s-3);
    align-items: center;
    padding: var(--s-4) 0;
    color: var(--ink-2);
    font-size: var(--t-body);
}
.home-results-empty-ic {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    font-size: 15px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.12);
}

/* ── Counters: chips under the feed, sized as support, not as headline ── */

.feed .home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-3);
}
.feed .home-stat {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: var(--s-2);
    align-items: center;
    background: var(--paper-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--s-3);
    transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.feed .home-stat:hover { opacity: 1; background: var(--paper); border-color: var(--hairline); }
.feed .home-stat-ic {
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 26px; height: 26px;
    font-size: 12px;
    border-radius: 8px;
    background: var(--paper-3);
    color: var(--ink-3);
}
.feed .home-stat.accent .home-stat-ic { background: rgba(255, 107, 53, 0.12); color: var(--accent); }
.feed .home-stat-v { grid-column: 2; font-size: var(--t-lead); font-weight: 600; line-height: 1.15; }
.feed .home-stat-l { grid-column: 2; font-size: var(--t-caption); color: var(--ink-3); margin-top: 0; }

/* Chores keep the Phase 1 treatment, one step further down the page. */
.quiet { margin-top: var(--s-7); }

@media (max-width: 768px) {
    .home2 { max-width: none; }
    .home-usecases { grid-template-columns: 1fr; }
    .home-uc-l2 { display: block; }
    .home2-head::before { inset: -76px 0 -32px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 2b · One chrome across every app page
   ══════════════════════════════════════════════════════════════════════════
   Home was redesigned first, which left eight other tabs on their original
   chrome: four different page-header treatments, three different content
   measures, and orange spent on selection state, section icons and card
   hovers on every page at once. This section is the reconciliation. It is
   still CSS-only over the existing markup.

   Two mechanical notes:
     · `width: 100%` recurs because .main-content is a column flexbox — auto
       side margins cancel the default stretch, so a block with only
       `max-width + margin:0 auto` silently collapses to fit-content and reads
       as centred. That is why Skills, Settings and Tracks looked centre-set.
     · `body ` prefixes are here only to out-specify rules that live in a
       page's own inline <style>, which loads after this file.              */

:root { --app-measure: 920px; }

/* Sidebar links injected at runtime (Quests, Tracks) carry no order value, so
   the ordered nav put them first. Default every link to the group that sits
   just before Settings — which is where the injector intends them to go. */
.sidebar-nav > a { order: 8; }

/* ── One page header ──────────────────────────────────────────────────── */

.page-header {
    width: 100%;
    max-width: var(--app-measure);
    margin: 0 auto;
    border-bottom: 0;
    padding: 84px var(--s-6) 0;
    text-align: left;
}
.page-header h1 {
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.page-header p {
    margin-top: var(--s-2);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 64ch;
}

/* Loop and Jobs have no .page-header — their toolbar stands in for one, so it
   gets the same column, the same top padding and the same heading type. */
body .loop-toolbar,
body .jobs-toolbar {
    width: 100%;
    max-width: var(--app-measure);
    margin: 0 auto;
    border-bottom: 0;
    padding: 84px var(--s-6) var(--s-4);
    background: none;
}
body .loop-toolbar h2 {
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: -0.03em;
}
body .loop-toolbar h2 i { display: none; }

/* ── One content measure ──────────────────────────────────────────────── */
/* Chat and Memory are deliberately absent: both are working two-pane layouts
   that need the full width. Only their controls are normalised, below. */

/* width:100% is load-bearing, not belt-and-braces: .main-content is a column
   flex, and `margin: 0 auto` on a flex item cancels the default stretch — so
   the list sized to its widest ROW. With the per-agent credit column gone the
   rows got narrower and the whole list shrank and drifted inward, off the page
   header's left edge. Pinning the width keeps the measure fixed whatever a row
   happens to contain. */
#crew-grid { max-width: var(--app-measure); width: 100%; }

body .settings-content,
body .jobs-grid,
body .trk-wrap,
body .q-wrap,
.skills-section-title,
.skills-suggested-list,
.skills-list {
    width: 100%;
    max-width: var(--app-measure);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--s-6);
    padding-right: var(--s-6);
}

/* ── One selection colour ─────────────────────────────────────────────── */
/* Orange marks the next action. Where it also marked "which tab am I on",
   every page had two or three accents competing; selection goes to ink. */

body .filter-pill {
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline);
    background: none;
    color: var(--ink-3);
    font-size: var(--t-caption);
    font-weight: 500;
}
body .filter-pill:hover { border-color: var(--ink-3); color: var(--ink); background: none; }
body .filter-pill.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

body .memory-tab { border-radius: var(--radius-sm); font-size: var(--t-small); }
body .memory-tab:hover { background: var(--paper-3); }
body .memory-tab.active {
    background: var(--paper-3);
    border-color: transparent;
    color: var(--ink);
    font-weight: 550;
}

body .theme-toggle.active {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--paper) !important;
}

/* ── One card idiom ───────────────────────────────────────────────────── */
/* Same radius, same surface, same hover as the home cards: a lift and a
   neutral edge, never an orange outline. */

body .job-card,
body .mem-card,
.skill-card,
.card {
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: var(--paper);
    transition:
        transform 220ms var(--ease-out),
        border-color 220ms var(--ease-out),
        box-shadow 220ms var(--ease-out);
}
body .job-card:hover,
body .mem-card:hover,
.skill-card:hover {
    border-color: var(--hairline);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
@media (hover: hover) and (pointer: fine) {
    body .job-card:hover,
    body .mem-card:hover,
    .skill-card:hover { transform: translateY(-2px); }
}

/* Section eyebrows read as the home page's: sentence case, no orange icon. */
.skills-section-title {
    font-size: var(--t-small);
    font-weight: 450;
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: var(--s-2);
}
.skills-section-title i,
.skill-card-head i { display: none; }
.settings-section h2 {
    font-size: var(--t-title);
    font-weight: 600;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .page-header,
    body .loop-toolbar,
    body .jobs-toolbar { padding: 76px var(--s-5) var(--s-3); }
    body .settings-content,
    body .jobs-grid,
    body .trk-wrap,
    body .q-wrap,
    .skills-section-title,
    .skills-suggested-list,
    .skills-list { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* Jobs now opens with a .page-header, so its toolbar is a toolbar again. */
body .jobs-toolbar { padding-top: var(--s-5); }

/* Memory and Chat keep their full-width two-pane layouts, but their top bar
   starts on the same rhythm as every other page instead of flush at y=0. */
body .memory-toolbar { padding-top: 76px; border-bottom: 1px solid var(--hairline); }
@media (max-width: 768px) {
    body .jobs-toolbar { padding-top: var(--s-4); }
    body .memory-toolbar { padding-top: 68px; }
}