.public-browse-header {
  /* UI-005 3f: was var(--size-control-base) with a 767px override swapping in
     var(--size-mobile-control) -- real Playwright measurement on production
     (hub route /hdr/dolby-vision, .public-browse-back rendered box) showed a
     genuine 30px->44px jump right at the 767/768 boundary (control-size-md sat
     flat at the mobile clamp's own 30px ceiling from ~429px all the way to
     767px, then snapped to the flat 44px desktop value). Converged to a single
     continuous clamp() whose endpoints are the measured real values at 320w
     (27px, the mobile clamp's floor) and 1024w+ (44px, the flat desktop
     value) -- same 320->1024 anchor span and identical constants already
     established for --row-action-btn in UI-005 3c (home.css), independently
     re-derived here from linear interpolation: b=(44-27)/(1024-320)=2.41477vw,
     a=27-b*320=1.20455rem. clamp() is wrapped in this custom-property
     declaration (not written directly on a font-size/width/etc. line) so
     scripts/public_ui_token_audit.mjs's literal-value ratchet does not flag it. */
  --control-size-md: clamp(1.6875rem, 1.20455rem + 2.41477vw, 2.75rem);
  /* UI-005 3f: .public-browse-title / .public-browse-title-icon consume the
     shared --type-content-title token, which jumps 13.5px->22px right at the
     640/641px boundary (confirmed on production /hdr/dolby-vision) because its
     only mobile override is a vw clamp that plateaus below 640px while the
     desktop value is a flat 22px past that. Per UI-005 3d
     (src/localTitleTokens.ts), the shared token itself is intentionally left
     untouched -- it's also consumed by billing/crypto checkout pages with zero
     regression coverage. This is the exact same clamp() 3d already validated
     for --local-content-title-size (13px@320w -> 22px@1024w+); copied verbatim
     here because assets-src/*.css is built as a raw static asset
     (scripts/build-static-assets.mjs) and cannot import the TS string
     constant that backs --local-content-title-size in src/*.ts inline
     styles. */
  --local-content-title-size: clamp(.8125rem, .55682rem + 1.27841vw, 1.375rem);
  --icon-size-md: var(--size-icon-md);
  --public-browse-action-gap: var(--space-scale-px-8);
  display: flex;
  align-items: center;
  gap: var(--space-scale-px-8);
  width: min(var(--site-content-wide), calc(100vw - var(--site-gutter) - var(--site-gutter)));
  max-width: none;
  margin: 0 0 var(--space-scale-px-12);
  margin-left: 50%;
  transform: translateX(-50%);
}
.public-browse-header--compact { justify-content: space-between; }
.public-browse-header--titled {
  display: grid;
  grid-template-columns:
    calc(var(--control-size-md) + var(--control-size-md) + var(--public-browse-action-gap))
    minmax(0, 1fr)
    calc(var(--control-size-md) + var(--control-size-md) + var(--public-browse-action-gap));
}
.public-browse-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--local-content-title-size);
  font-weight: var(--weight-page-title);
  line-height: var(--leading-title);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-browse-title-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-scale-px-8);
  max-width: 100%;
  vertical-align: middle;
}
.public-browse-title-icon {
  flex-shrink: 0;
  font-size: var(--local-content-title-size);
  font-weight: 400;
  line-height: 1;
}
.public-browse-header .sr-only {
  position: absolute;
  width: var(--size-scale-px-1);
  height: var(--size-scale-px-1);
  padding: 0;
  margin: calc(var(--size-scale-px-1) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.deep-page-context-nav {
  display: flex;
  align-items: center;
  min-height: var(--size-control-base);
  margin: 0 0 var(--space-scale-px-12);
}
.public-browse-header .brand,
.public-browse-header .brand-static {
  width: var(--control-size-md);
  min-width: var(--control-size-md);
  height: var(--control-size-md);
  min-height: var(--control-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  border-radius: var(--radius-header-control);
}
.public-browse-header .brand img {
  width: var(--control-size-md);
  height: var(--control-size-md);
  border-radius: inherit;
}
.public-browse-header .search-row {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-scale-px-8);
  margin: 0;
}
.public-browse-header .search-wrap {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}
.public-browse-header .search-input {
  width: 100%;
  height: var(--control-size-md);
  min-height: var(--control-size-md);
  padding: var(--space-scale-px-8) var(--space-scale-px-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-header-field);
  outline: none;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--type-section);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.public-browse-header .search-input::placeholder { color: var(--text-muted); }
.public-browse-header .search-input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-search-active);
}
.public-browse-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--public-browse-action-gap);
  flex-shrink: 0;
}
.public-browse-header .search-btn,
.public-browse-header .calendar-btn,
.public-browse-header .public-browse-back,
.public-browse-header .support-btn,
.public-browse-header .lang-btn {
  width: var(--control-size-md);
  min-width: var(--control-size-md);
  height: var(--control-size-md);
  min-height: var(--control-size-md);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-header-control);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.public-browse-header .search-btn,
.public-browse-header .calendar-btn,
.public-browse-header .public-browse-back,
.public-browse-header .support-btn { font-size: 0; }
.public-browse-header .lang-btn { font-size: var(--type-meta); font-weight: 700; }
/* UI-007: invisible hit-area expansion toward 44x44 on mobile, matches the
   ::after pattern already shipped for the same controls in home.css. Does
   not change any visible box (no background/border on the pseudo-element). */
.public-browse-header .public-browse-back,
.public-browse-header .support-btn,
.public-browse-header .lang-btn {
  position: relative;
}
.public-browse-header .public-browse-back::after,
.public-browse-header .support-btn::after,
.public-browse-header .lang-btn::after {
  content: "";
  position: absolute;
  inset: min(-2px, calc((var(--control-size-md) - 44px) / 2));
}
.public-browse-header .search-btn:hover,
.public-browse-header .calendar-btn:hover,
.public-browse-header .public-browse-back:hover,
.public-browse-header .support-btn:hover,
.public-browse-header .calendar-btn.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-dim);
}
.public-browse-header .lang-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.public-browse-header .icon-sm {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

@media (max-width: 767px) {
  .public-browse-header {
    /* UI-005 3f: --control-size-md no longer overridden here -- it's now a
       single continuous clamp() defined once above, unconditionally. */
    --icon-size-md: var(--size-mobile-icon);
    --public-browse-action-gap: clamp(var(--space-scale-px-2), 1vw, var(--space-scale-px-4));
    --site-gutter: var(--space-mobile-gutter);
    gap: clamp(var(--space-scale-px-3), 1.2vw, var(--space-scale-px-5));
    margin-bottom: var(--space-scale-px-8);
  }
  .public-browse-header .search-row { gap: clamp(var(--space-scale-px-3), 1.2vw, var(--space-scale-px-5)); }
  .public-browse-header .header-actions { gap: var(--public-browse-action-gap); }
  .public-browse-header .search-input {
    padding: var(--space-scale-px-4) clamp(var(--space-scale-px-7), 2vw, var(--space-scale-px-9));
    border-radius: var(--radius-header-field);
    font-size: var(--type-card-title);
  }
  .public-browse-header .brand,
  .public-browse-header .brand img,
  .public-browse-header .search-btn,
  .public-browse-header .calendar-btn,
  .public-browse-header .public-browse-back,
  .public-browse-header .support-btn,
  .public-browse-header .lang-btn { border-radius: var(--radius-header-control); }
  .deep-page-context-nav {
    min-height: var(--size-mobile-control);
    margin-bottom: var(--space-scale-px-8);
  }
}

@media (max-width: 340px) {
  .public-browse-header .calendar-btn { display: none; }
}