/* Shared across themes; updated only with a page request. */
body.hx-site .hx-header-worker { display:flex; align-items:center; justify-content:center; align-self:stretch; gap:10px; flex:0 1 auto; min-width:0; padding:0 12px; min-height:38px; box-sizing:border-box; border:1px solid var(--hx-border,var(--border-color)); border-radius:8px; background:transparent; line-height:1.2; }
body.hx-site .hx-header-worker-badge { display:inline-flex; align-items:center; gap:7px; min-width:0; font-size:12px; font-weight:600; color:var(--hx-muted,var(--text-secondary)); white-space:nowrap; }
body.hx-site .hx-header-worker-badge[data-state="running"] { color:#047857; }
body.hx-site .hx-header-worker-badge[data-state="starting"] { color:#92400e; }
html[data-theme="dark"] body.hx-site .hx-header-worker-badge[data-state="running"] { color:#6ee7b7; }
html[data-theme="dark"] body.hx-site .hx-header-worker-badge[data-state="starting"] { color:#fcd34d; }
body.hx-site .hx-header-worker-label { overflow:hidden; text-overflow:ellipsis; }
body.hx-site .hx-header-worker-version { flex:none; padding-left:10px; border-left:1px solid var(--hx-border,var(--border-color)); font-size:11px; color:var(--hx-muted,var(--text-secondary)); white-space:nowrap; }
body.hx-site .header-container { flex-wrap:wrap; }
body.hx-site .header-actions { margin-left:auto; }
@media(max-width:767px) {
 body.hx-site .hx-header-worker { padding:0 7px; gap:6px; }
 body.hx-site .hx-header-worker-badge { gap:4px; font-size:10px; }
 body.hx-site .hx-header-worker-label { max-width:58px; }
 body.hx-site .hx-header-worker-version { padding-left:6px; font-size:10px; }
}
/* Only the worker status moves to a second row on phones. */
@media (max-width:767px) {
 html[data-variant] body.hx-site .main-header .header-container {
  height:auto; min-height:0; display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  padding:12px; gap:10px 8px;
 }
 html[data-variant] body.hx-site .main-header .logo-section { grid-column:1; grid-row:1; min-width:0; }
 html[data-variant] body.hx-site .main-header .header-actions { display:contents; }
 html[data-variant] body.hx-site .main-header .header-actions > :not(.hx-header-worker) { grid-row:1; }
 html[data-variant] body.hx-site .main-header .header-container { grid-template-columns:minmax(0,1fr) repeat(var(--header-action-count,4),auto); }
 html[data-variant] body.hx-site .main-header .hx-header-worker {
  grid-column:1 / -1; grid-row:2; justify-self:end;
  margin:0; min-height:32px;
 }
 html[data-variant] body.hx-site .main-header { margin-bottom:12px; flex-shrink:0; }
}

@media(max-width:767px) {
 html[data-variant] body.hx-site .main-header .hx-mobile-status-row { grid-column:1 / -1; grid-row:2; display:flex; align-items:stretch; gap:8px; min-width:0; }
 html[data-variant] body.hx-site .main-header .hx-mobile-status-row .hx-header-worker { flex:0 0 auto; padding:0 7px; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota { flex:1; min-width:0; margin:0; padding:7px 9px; border:1px solid var(--hx-border); border-radius:8px; background:var(--hx-surface); }
 html[data-variant] body.hx-site .main-header #daily-upload-quota .hx-section-label,
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-reset],
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-grid] > :not(.hx-quota-compact) { display:none; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-grid]:not([hidden]) { display:block; margin:0; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota .hx-quota-compact { display:grid; grid-template-columns:auto 1fr; gap:3px 6px; padding:0; border:0; background:transparent; font-size:10px; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-summary] { white-space:normal; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-left] { grid-column:2; font-size:9px; color:var(--hx-muted); }
 html[data-variant] body.hx-site .main-header #daily-upload-quota progress { grid-column:1 / -1; grid-row:3; width:100%; height:4px; border:0; border-radius:4px; overflow:hidden; accent-color:var(--hx-accent); }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-error] { margin:0; font-size:10px; }
}

/* Stable compact quota row, independent of theme card/grid spacing. */
@media(max-width:767px) {
 html[data-variant] body.hx-site .main-header .hx-mobile-status-row,
 html[data-variant] body.hx-site .main-header .hx-mobile-status-row .hx-header-worker,
 html[data-variant] body.hx-site .main-header #daily-upload-quota { height:40px; min-height:40px; max-height:40px; box-sizing:border-box; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota { position:relative; padding:5px 9px 9px; overflow:hidden; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota #daily-upload-quota-values,
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-grid]:not([hidden]) { height:100%; min-height:0; padding:0; margin:0; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota .hx-quota-compact { height:100%; min-height:0; display:flex; align-items:center; gap:6px; margin:0; padding:0; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-summary] { flex:1; min-width:0; margin:0; line-height:14px; white-space:nowrap; text-align:center; overflow:hidden; text-overflow:ellipsis; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-left] { display:none; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota progress { position:absolute; left:9px; bottom:4px; width:calc(100% - 18px); height:2px; margin:0; padding:0; }
 html[data-variant] body.hx-site .main-header #daily-upload-quota [data-quota-error]:not([hidden]) { display:flex; align-items:center; height:100%; line-height:12px; }
}

/* Align the phone status card with the theme and user controls above it. */
@media(max-width:767px) {
 html[data-variant] body.hx-site .main-header .header-container:has(#themeToggle):has(#userMenuBtn) .hx-mobile-status-row:has(.hx-header-worker) {
  display:grid;
  grid-template-columns:subgrid;
  column-gap:normal;
 }
 html[data-variant] body.hx-site .main-header .header-container:has(#themeToggle):has(#userMenuBtn) .hx-mobile-status-row:has(.hx-header-worker) #daily-upload-quota {
  grid-column:1 / -3;
  width:auto;
 }
 html[data-variant] body.hx-site .main-header .header-container:has(#themeToggle):has(#userMenuBtn) .hx-mobile-status-row .hx-header-worker {
  grid-column:-3 / -1;
  grid-row:1;
  justify-self:stretch;
  width:100%;
  padding:0 4px;
  gap:4px;
 }
 html[data-variant] body.hx-site .main-header .hx-mobile-status-row .hx-header-worker-version { padding-left:4px; }
}

/* Phones show the same server-rendered worker status in Navigation, not a header row.
   Keep the upload quota independent; no header positioning or panel clipping changes. */
html[data-variant] body.hx-site .main-header .hx-sidebar-worker { display:none; }
@media(max-width:767px) {
 html[data-variant] body.hx-site .main-header .header-actions>.hx-header-worker { display:none; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker:not(:empty) { display:block; margin-bottom:12px; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker .hx-header-worker {
  display:flex; width:100%; min-height:40px; padding:10px 12px; justify-content:space-between;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker .hx-header-worker-badge { font-size:12px; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker .hx-header-worker-label { max-width:none; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker .hx-header-worker-version { font-size:11px; }
}

/* Relocate the existing quota instance; retain its live updates and original
   desktop position. No empty second header row is created on phones. */
@media(max-width:767px) {
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota { margin-bottom:12px; min-width:0; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota {
  position:static; width:100%; height:auto; min-height:0; max-height:none;
  padding:12px; overflow:visible; margin:0;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota .hx-section-label {
  display:block; margin-bottom:8px; font-size:12px; color:var(--hx-muted);
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota .hx-quota-compact {
  display:flex; flex-wrap:wrap; height:auto; gap:8px; font-size:12px;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota [data-quota-summary] {
  text-align:start; font-size:12px; line-height:1.5;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota progress {
  position:static; flex-basis:100%; width:100%; height:4px; order:3;
 }
}

/* Compact sidebar footer: allowance above the real worker status/version. */
@media(max-width:767px) {
 html[data-variant] body.hx-site .main-header .mobile-nav-footer {
  padding:12px 0 0; margin-top:8px; border-top:1px solid var(--hx-border);
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker:not(:empty) { margin-bottom:0; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-worker .hx-header-worker {
  border:0; border-radius:0; padding:8px 2px; min-height:32px;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota { margin-bottom:8px; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota { padding:10px 12px; }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota #daily-upload-quota-values,
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota [data-quota-grid]:not([hidden]) {
  display:block; height:auto; min-height:0; padding:0; margin:0;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota .hx-section-label {
  margin:0 0 6px; font-size:11px; line-height:16px;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota .hx-quota-compact {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 8px;
  min-height:0; height:auto; margin:0; padding:0; border:0; background:transparent;
 }
 html[data-variant] body.hx-site .main-header .hx-sidebar-quota #daily-upload-quota progress {
  grid-column:1 / -1; grid-row:2; height:3px; margin:0; padding:0;
 }
}