/* Color cohesion: retune the interactive brand green onto the LOGO green's cool hue
     (#1B4332 family), as lighter siblings, so buttons/nav/dots match the hero + logo. */
  :root {
    --g-500:#3A926C; --g-600:#307859; --g-700:#265F46;
  }
  /* ---- Layout / structure only. All color, type, radii, shadow come from tokens.css ---- */
  .app { display:flex; min-height:100vh; }

  /* Sidebar internals */
  .sb-inner { display:flex; flex-direction:column; height:100%; padding:20px 16px; }
  .sb-lockup { display:flex; align-items:center; gap:10px; padding:4px 8px 20px; }
  .sb-mark { display:inline-flex; align-items:center; justify-content:center;
             width:28px; height:28px; border-radius:8px; background:var(--g-600); color:var(--n-0); flex:0 0 auto; }
  .sb-mark svg { width:16px; height:16px; }
  .sb-word { font-family:'Source Serif 4', Georgia, serif; font-size:20px; font-weight:600; letter-spacing:-0.015em; color:#0B1A14; }
  .sb-nav { display:flex; flex-direction:column; gap:2px; }
  .sb-spacer { flex:1 1 auto; }
  .sb-owner { display:flex; align-items:center; gap:10px; padding:10px 8px 2px; margin-top:8px; }
  .sb-owner-meta { display:flex; flex-direction:column; line-height:1.2; }

  /* Main column */
  .main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
  .topbar { display:flex; align-items:center; justify-content:space-between;
            padding:16px max(40px, calc((100% - 1240px) / 2 + 40px)); border-bottom:1px solid var(--hairline); }
  .topbar-actions { display:flex; align-items:center; gap:10px; }
  .icon-btn { padding:8px; width:34px; height:34px; justify-content:center; }
  .icon-btn svg { width:18px; height:18px; }
  .content { flex:1 1 auto; padding:32px 40px 56px; max-width:1240px; width:100%; margin-inline:auto; }

  /* Hero - three zones: greeting (left) · minimalist revenue (center) · suggestion (right) */
  /* Hero: three zones sharing a TOP and BOTTOM baseline (space-between grid). */
  .hero { display:flex; align-items:stretch; gap:32px; padding:32px; margin-bottom:28px; }
  .hero.bc-hero-dark { background:#1B4332; }        /* logo green */
  .hero-left { flex:0 0 auto; display:flex; flex-direction:column; justify-content:space-between; }
  .hero-caption { margin-top:8px; }
  .on-green-label { color:var(--g-200); }
  .on-green-muted { color:var(--g-100); }
  .hero-metric-wrap { margin-top:0; }              /* pinned to bottom by space-between */
  /* Center: revenue-this-month chart. Label/value pinned top, chart pinned bottom. */
  .hero-center { flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
                 justify-content:space-between; align-items:center; text-align:center; gap:14px; }
  .hc-top { display:flex; flex-direction:column; align-items:center; gap:3px; }
  .hc-label { font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:#8FB6A0; }
  .hc-val { font-family:var(--font-mono); font-size:22px; font-weight:600; color:#EAF1EC;
            font-variant-numeric:tabular-nums; letter-spacing:-0.01em; line-height:1.15; }
  .hc-chart { width:100%; max-width:460px; height:auto; display:block; }
  /* Hero metric toggle: hover the caret to reveal other graph options. */
  .hc-toggle { position:relative; display:inline-flex; align-items:center; gap:4px; }
  .hc-caret { background:none; border:0; padding:2px; margin:0; cursor:pointer; color:#8FB6A0;
              display:inline-flex; border-radius:4px; transition:color .15s var(--ease-out), transform .15s var(--ease-out); }
  .hc-caret:hover { color:#DCE9D7; }
  .hc-toggle:hover .hc-caret { transform:translateY(1px); }
  .hc-caret svg { width:12px; height:12px; }
  .hc-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px;
             background:var(--n-0); border:1px solid var(--n-200); border-radius:10px; box-shadow:var(--elev-3);
             padding:5px; min-width:196px; opacity:0; visibility:hidden;
             transition:opacity .14s var(--ease-out), margin-top .14s var(--ease-out); z-index:30; }
  .hc-menu::before { content:""; position:absolute; top:-10px; left:0; right:0; height:10px; } /* hover bridge */
  .hc-toggle:hover .hc-menu, .hc-toggle:focus-within .hc-menu { opacity:1; visibility:visible; margin-top:6px; }
  .hc-menu-item { text-align:left; font-size:13px; color:var(--n-700); padding:7px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; }
  .hc-menu-item:hover { background:var(--n-100); color:var(--n-900); }
  .hc-menu-item.active { color:var(--g-700); font-weight:600; background:var(--g-50); }
  .hero-right { flex:0 0 300px; display:flex; }
  .hero-cta { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
  .hero-cta svg { width:13px; height:13px; }
  .brok-panel { display:flex; flex-direction:column; gap:12px; width:100%;
                padding:20px; border-radius:var(--radius-card);
                background:#2B573F; border:1px solid #366A4B; }
  .brok-top { display:flex; align-items:center; gap:12px; }
  .brok-circle { display:inline-flex; align-items:center; justify-content:center;
                 width:44px; height:44px; border-radius:999px; flex:0 0 auto;
                 background:var(--g-700); color:var(--n-0); }
  .brok-circle svg { width:24px; height:24px; }
  .brok-name { font-size:13px; font-weight:600; color:var(--n-0); }
  .brok-name .role { font-weight:500; color:var(--g-200); }
  .brok-note { font-size:14px; line-height:20px; color:var(--g-100); margin:0; }
  .btn-inverse { background:var(--n-0); color:var(--g-900); align-self:flex-start; }
  .btn-inverse:hover { background:var(--g-50); }

  /* Section headers */
  .sec-head { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 14px; }
  .sec-head .count { color:var(--n-500); }

  /* Money moments */
  .money-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px; }
  .mm-card { display:flex; flex-direction:column; gap:8px; min-height:172px; }
  .mm-head { display:flex; align-items:center; gap:9px; margin-bottom:2px; }
  .mm-icon { display:inline-flex; color:var(--n-500); }
  .mm-icon svg { width:18px; height:18px; }
  .mm-icon-green { color:var(--g-600); }
  .mm-sub { margin-top:2px; }
  .mm-action { margin-top:auto; padding-top:6px; }
  .times { letter-spacing:0.01em; }

  /* Agenda */
  .agenda { padding:0; }
  .agenda-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
                 padding:16px 20px; border-bottom:1px solid var(--hairline); }
  .ag-list { padding:8px 20px 14px; }
  .ag-list > .ag-group-head:first-child { margin-top:6px; }
  .ag-group-head { margin:18px 0 4px; }
  .ag-row { display:flex; align-items:stretch; padding:14px 0; }
  .ag-time { flex:0 0 76px; text-align:right; padding-right:16px; padding-top:5px;
             font-size:14px; color:var(--n-700); white-space:nowrap; }
  .ag-time .ampm { color:var(--n-400); font-size:11px; margin-left:3px; }
  .ag-rail { flex:0 0 28px; position:relative; display:flex; justify-content:center; }
  .ag-rail::before { content:""; position:absolute; left:50%; top:0; bottom:0;
                     width:1px; background:var(--hairline); transform:translateX(-0.5px); }
  .ag-node { position:relative; z-index:1; margin-top:9px; width:14px; height:14px;
             border-radius:999px; border:4px solid var(--n-0); flex:0 0 auto; }
  .node-confirmed { background:var(--g-600); }
  .node-pending   { background:var(--warning-fg); }
  .node-completed { background:var(--n-400); }
  .ag-body { flex:1 1 auto; display:flex; align-items:center; gap:14px; padding-left:8px; }
  .ag-info { flex:1 1 auto; min-width:0; }
  .ag-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; row-gap:3px; margin-top:2px; }
  .ag-meta > * { white-space:nowrap; }
  .ag-meta .sep { color:var(--n-300); }
  .ag-price { flex:0 0 auto; font-size:15px; color:var(--n-900); font-weight:600; padding-left:16px; }

  /* Topbar: search + notifications + Brok head */
  .searchbar { display:flex; align-items:center; gap:8px; width:280px; height:34px; padding:0 12px;
               background:var(--n-100); border:1px solid var(--n-200); border-radius:var(--radius-control); color:var(--n-500); }
  .searchbar:focus-within { border-color:var(--g-600); box-shadow:var(--focus-ring); }
  .searchbar svg { width:16px; height:16px; flex:0 0 auto; }
  .searchbar input { border:0; background:transparent; outline:none; font-family:var(--font-body);
                     font-size:13px; color:var(--n-800); width:100%; }
  .searchbar input::placeholder { color:var(--n-500); }
  .icon-btn { position:relative; }
  .notif-dot { position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:999px;
               background:var(--danger-fg); border:2px solid var(--n-0); }

  /* Brok, real frame-animation sprites: 12 frames @ 16fps (0.75s), steps(12) across the
     strip. Full body in the header; head-only in the Live tracker + future chat box.
     Transparent PNGs, no crop, no border. Mood set via [data-mood]. */
  .brok-sprite { display:block; flex:0 0 auto; background-repeat:no-repeat; image-rendering:pixelated; }
  .brok-body { width:40px; height:46px; background-size:480px 46px; animation:brok-body-play 0.75s steps(12) infinite; }
  .brok-hd   { width:52px; height:40px; background-size:624px 40px; animation:brok-hd-play 0.75s steps(12) infinite; }
  @keyframes brok-body-play { from{background-position:0 0} to{background-position:-480px 0} }
  @keyframes brok-hd-play   { from{background-position:0 0} to{background-position:-624px 0} }
  .brok-body[data-mood="neutral"]  { background-image:url('./assets/brok/moods/brok_neutral_strip.png') }
  .brok-body[data-mood="happy"]    { background-image:url('./assets/brok/moods/brok_happy_strip.png') }
  .brok-body[data-mood="thinking"] { background-image:url('./assets/brok/moods/brok_thinking_strip.png') }
  .brok-body[data-mood="excited"]  { background-image:url('./assets/brok/moods/brok_excited_strip.png') }
  .brok-body[data-mood="sad"]      { background-image:url('./assets/brok/moods/brok_sad_strip.png') }
  .brok-hd[data-mood="neutral"]  { background-image:url('./assets/brok/head_moods/brok_head_neutral_strip.png') }
  .brok-hd[data-mood="happy"]    { background-image:url('./assets/brok/head_moods/brok_head_happy_strip.png') }
  .brok-hd[data-mood="thinking"] { background-image:url('./assets/brok/head_moods/brok_head_thinking_strip.png') }
  .brok-hd[data-mood="excited"]  { background-image:url('./assets/brok/head_moods/brok_head_excited_strip.png') }
  .brok-hd[data-mood="sad"]      { background-image:url('./assets/brok/head_moods/brok_head_sad_strip.png') }
  @media (prefers-reduced-motion:reduce){ .brok-sprite{ animation:none !important; } }
  .brok-head-btn { padding:2px; border:0; background:none; border-radius:8px; cursor:pointer;
                   display:inline-flex; align-items:center;
                   transition:background var(--dur-hover) var(--ease-out); }
  .brok-head-btn:hover { background:var(--n-100); }
  /* New logo lockup */
  .sb-mark-img { height:28px; width:auto; display:block; flex:0 0 auto; }

  /* Two-column: schedule + rail */
  .cols { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
  .rail { display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }

  /* Quick actions */
  .qa-list { display:flex; flex-direction:column; }
  .qa-row { display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--hairline);
            cursor:pointer; color:var(--n-800); font-size:13px; font-weight:500;
            transition:color var(--dur-hover) var(--ease-out); }
  .qa-row:first-of-type { border-top:0; }
  .qa-row:hover { color:var(--g-700); }
  .qa-ic { display:inline-flex; color:var(--n-500); transition:color var(--dur-hover) var(--ease-out); }
  .qa-row:hover .qa-ic { color:var(--g-600); }
  .qa-ic svg { width:17px; height:17px; }
  .qa-row .chev { margin-left:auto; color:var(--n-400); display:inline-flex; }
  .qa-row .chev svg { width:15px; height:15px; }

  /* Brok live tracker */
  .trk-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--hairline); }
  .trk-head .bc-h3 { line-height:1; }
  .brok-mini { width:28px; height:28px; border-radius:999px; background:var(--g-50); border:1px solid var(--g-200);
               display:inline-flex; align-items:center; justify-content:center; color:var(--g-700); flex:0 0 auto; overflow:hidden; }
  .brok-mini svg { width:16px; height:16px; }
  .live { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:11px; font-weight:600;
          letter-spacing:0.04em; text-transform:uppercase; color:var(--success-fg); }
  .feed { display:flex; flex-direction:column; margin-top:8px; }
  .feed-row { display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--hairline); }
  .feed-row:first-child { border-top:0; padding-top:2px; }
  .feed-ic { flex:0 0 auto; width:26px; height:26px; border-radius:999px; display:inline-flex;
             align-items:center; justify-content:center; background:var(--n-100); color:var(--n-500); }
  .feed-ic.warn { background:var(--warning-bg); color:var(--warning-fg); }
  .feed-ic svg { width:14px; height:14px; }
  .feed-body { flex:1 1 auto; min-width:0; }
  .feed-txt { font-size:13px; line-height:18px; color:var(--n-800); }
  .feed-txt strong { font-weight:600; color:var(--n-950); }
  .feed-meta { display:flex; align-items:center; gap:8px; margin-top:5px; }
  .feed-time { font-size:11px; color:var(--n-500); font-family:var(--font-mono); }

  /* ============================ RESPONSIVE ============================ */
  /* Below desktop: stack the hero, stack the schedule + rail columns, drop search. */
  @media (max-width:1180px){
    .hero { flex-direction:column; }
    .hero-right { flex-basis:auto; }
    .cols { grid-template-columns:1fr; }
    .searchbar { display:none; }
  }
  /* Stacked range with room: sit Quick actions + Brok tracker side by side (balanced). */
  @media (max-width:1180px) and (min-width:641px){
    .rail { display:grid; grid-template-columns:1fr 1fr; gap:16px; position:static; align-items:start; }
  }
  @media (max-width:640px){ .rail { position:static; } }
  /* Money moments: 3-up while wide, single column once it gets tight. */
  @media (max-width:820px){ .money-grid { grid-template-columns:1fr; } }
  /* Tablet / phone: collapse the sidebar to an icon rail so content gets the width. */
  @media (max-width:760px){
    .bc-sidebar { width:64px; flex-basis:64px; }
    .sb-inner { padding:16px 8px; }
    .sb-lockup { justify-content:center; padding:4px 0 18px; }
    .sb-word { display:none; }
    .bc-navitem { justify-content:center; gap:0; padding:10px 0; font-size:0; }
    .bc-navitem svg { width:20px; height:20px; }
    .bc-navgroup { display:none; }
    .sb-owner { justify-content:center; padding:10px 0 2px; }
    .sb-owner-meta { display:none; }
    .topbar { padding:14px 16px; }
    .content { padding:20px 16px 44px; }
    .hero { padding:22px; gap:18px; margin-bottom:22px; }
    .hero-metric-wrap { padding-top:18px; }
    .agenda-head { padding:14px 14px; }
    .ag-list { padding:6px 14px 12px; }
    .ag-time { flex-basis:46px; padding-right:8px; font-size:12px; }
    .ag-time .ampm { font-size:10px; margin-left:2px; }
    .ag-rail { flex-basis:18px; }
    .ag-body { gap:8px; padding-left:2px; }
    .ag-info { min-width:0; }
    .bc-avatar { width:28px; height:28px; font-size:11px; }
    .ag-price { padding-left:8px; font-size:14px; }
  }
  /* Small phones: drop the redundant top-bar business name (it's in the hero + sidebar). */
  @media (max-width:600px){
    .topbar .bc-h3 { display:none; }
    .topbar { justify-content:flex-end; }
  }

/* links styled as buttons should never underline */
a.bc-btn, a.bc-btn:hover { text-decoration:none; }