/* topbar section - extracted for modularity */
  /* Top bar — three zones: start (lens, etc.) | center search | end (controls) */
  .topbar{
    position:sticky;top:0;z-index:var(--z-sticky);
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"start center end";
    align-items:center;gap:10px 14px;
    padding:11px 22px;
    background:var(--bar);backdrop-filter:blur(8px);
    border:1px solid var(--st2);border-radius:12px;margin:12px 0 4px;
    overflow:visible}
  .topbar-start{
    grid-area:start;display:flex;align-items:center;gap:10px;min-width:0;max-width:min(240px,36vw);
    justify-self:start;overflow:hidden}
  .topbar-center{
    grid-area:center;justify-self:center;width:100%;max-width:min(480px,100%);min-width:0;
    position:relative}
  .topbar-end{
    grid-area:end;display:flex;align-items:center;gap:8px;justify-self:end;flex-shrink:0;
    min-width:0;max-width:100%;overflow:visible;flex-wrap:nowrap}
  .topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
  .topbar-end .tb-btn-lbl{display:none}
  .topbar-end .tb-icon-btn{padding:7px 9px;min-width:34px;justify-content:center}
  .topbar-end .snap-dd{flex:1 1 auto;min-width:0;max-width:min(200px,28vw)}
  .ui-slide-loader{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .2s}
  .ui-slide-loader.is-active{opacity:1;animation:topbar-slide 1.2s ease-in-out infinite}
  @keyframes topbar-slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
  .bookmark-wrap{position:relative;display:inline-flex;align-items:center}
  .share-wrap{position:relative;display:inline-flex;align-items:center}
  /* Dropdowns anchor to their wrap — not search.css top:52px (clips under .content) */
  .share-wrap > .bookmark-menu,
  .bookmark-wrap > .bookmark-menu{
    top:calc(100% + 6px);right:0;left:auto;
    z-index:calc(var(--z-sticky, 55) + 10)}
  .topbar .grp{display:flex;gap:6px;align-items:center}
  .lbl{color:var(--fg2);font-size:12px}
  .pill{border:1px solid var(--st1);background:transparent;color:var(--fg);
    border-radius:6px;padding:4px 12px;font-size:13px;cursor:pointer}
  .pill.active{border-color:color-mix(in srgb,var(--accent-color) 25%,transparent)}
  .spacer{flex:1}
  .snap{display:flex;gap:14px;align-items:center;color:var(--fg2);font-size:12px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
  .snap b{color:var(--fg);font-weight:600}
  .btn{padding:7px 14px;font-size:13px;border-radius:8px}
  .iconbtn{border:1px solid var(--st1);background:var(--gradient-btn-surface);color:var(--fg);border-radius:8px;
    width:34px;height:32px;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .dirtydot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block}
  .topbar-lens-date{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;max-width:100%}
  .topbar-env-switcher{
    display:inline-flex;align-items:center;gap:5px;flex-shrink:1;min-width:0;
    max-width:min(168px,30vw);cursor:pointer;border:0;background:transparent;
    font:inherit;color:inherit;padding:0}
  .topbar-env-switcher:not([hidden]){display:inline-flex}
  .topbar-env-switcher:hover .topbar-env-label{color:var(--fg)}
  .topbar-env-emoji{font-size:14px;line-height:1;flex-shrink:0}
  .topbar-env-label{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .topbar-env-caret{flex-shrink:0;font-size:11px}
  .topbar-ai-btn{
    display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
    cursor:pointer;border:0;background:transparent;font:inherit;color:inherit;padding:0}
  .topbar-ai-btn:hover .topbar-ai-label{color:var(--fg)}
  .topbar-ai-symbol{font-size:14px;line-height:1;flex-shrink:0}
  .topbar-ai-label{font-weight:600;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-ai-btn[hidden]{display:none!important}
  .topbar-lens-date-val{font-weight:600;color:var(--fg)}
  .lens-score-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.55em;padding:1px 6px;
    border-radius:999px;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.35;
    border:1px solid var(--st2);vertical-align:middle;flex-shrink:0}
  .lens-score-chip--compact{font-size:10px;padding:0 5px}
  .lens-score-chip.tone-success{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--st2));
    background:color-mix(in srgb,var(--green) 12%,var(--fill2))}
  .lens-score-chip.tone-info{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,var(--st2));
    background:color-mix(in srgb,var(--blue) 12%,var(--fill2))}
  .lens-score-chip.tone-warning{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,var(--st2));
    background:color-mix(in srgb,var(--amber) 12%,var(--fill2))}
  .lens-score-chip.tone-danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--st2));
    background:color-mix(in srgb,var(--red) 12%,var(--fill2))}
  .lens-score-chip.tone-neutral{color:var(--fg2);border-color:var(--st2);background:var(--fill2)}

  .tabs{display:flex;gap:var(--space-1);margin:var(--space-4) 0 0;flex-wrap:wrap;padding:var(--space-1);border-radius:var(--radius-pill);background:var(--fill2);border:1px solid var(--st2);width:fit-content;max-width:100%}
  .tab{background:transparent;border:0;color:var(--fg2);padding:8px 16px;font-size:var(--font-base);
    cursor:pointer;border-radius:var(--radius-pill);font-weight:500;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
  .tab.active{color:#fff;background:var(--gradient-accent);box-shadow:var(--shadow-sm)}
  .tab:hover:not(.active){color:var(--fg)}
  /* Tab visibility: !important so shell layout rules (#tab-input etc.) cannot resurrect hidden panes */
  .tabpane[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
  .content.tab-shell-host > .tabpane[hidden]{display:none!important}

  .calc-ceremony-strip{font-size:12px;padding:8px 10px;margin-bottom:6px;border-radius:8px;background:var(--fill2);border:1px solid var(--st2)}
  .calc-ceremony-chip{font-size:11px;padding:2px 8px;margin-left:6px}
  .assess-sub-copy{margin-left:auto;font-size:11px;padding:4px 10px}
  .cat-food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:8px 0}
  .cat-food-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:1px solid var(--st2);border-radius:8px;background:var(--fill1);cursor:pointer;font-size:12px}
  .cat-food-img{width:48px;height:48px;object-fit:cover;border-radius:6px}
  .cat-crumb{margin-bottom:10px;font-size:12px}
  .cat-crumb-here{font-weight:600}
  @media(max-width:640px){
    #snapPhaseVal .phase-long{display:none}
    #snapPhaseBtn .phase-label-text{display:none}
    #snapPhaseBtn::before{content:"🕐";font-size:16px}
  }
  @media(max-width:1180px){
    .snap-dd{max-width:min(168px,22vw)}
  }
  @media(max-width:900px){
    .topbar{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:10px 16px}
    .topbar-start{flex:0 0 auto;order:1;grid-area:unset;max-width:42%}
    .topbar-center{flex:1 1 0;order:2;min-width:0;max-width:none;grid-area:unset;justify-self:stretch}
    .topbar-end{flex:0 0 auto;order:3;margin-left:auto;min-width:0;grid-area:unset;max-width:none}
    .tb-btn-lbl{display:none}
    .tb-icon-btn{padding:7px 9px;min-width:34px;justify-content:center}
    .snap-dd-summary,.snap-dd-chevron{display:none}
    .snap-dd-trigger{padding:7px 9px;min-width:34px}
    .snap-dd{max-width:none}
  }