/* App shell: sticky header, centered main, thin footer. */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
  box-shadow: var(--shadow-1);
}
.header-top {
  display: flex; align-items: center; gap: 16px;
  max-width: 1600px; margin: 0 auto; padding: 10px 24px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  flex: 0 0 auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 15px; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--fg-2); }

.page-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.page-tab {
  border: 1px solid transparent; background: transparent; color: var(--fg-1);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.page-tab:hover { background: var(--bg-2); }
.page-tab.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent); font-weight: 600;
}

.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Cloudflare D1 rows-read counter (today, UTC) */
.d1-usage {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--good-soft); color: var(--good); border: 1px solid transparent;
}
.d1-usage[hidden] { display: none; }
.d1-usage.warn { background: var(--warn-soft); color: var(--warn); }
.d1-usage.bad  { background: var(--bad-soft);  color: var(--bad); }
.d1-usage b { font-weight: 700; }
.d1-label-short { display: none; }
.header-right .icon-btn { white-space: nowrap; }
/* Mid widths (landscape phones, tablets): compact counter and brand. */
@media (max-width: 1100px) {
  .d1-label, .d1-limit { display: none; }
  .d1-label-short { display: inline; }
  .brand-sub { display: none; }
}
.header-actions, .rotation-controls { display: flex; align-items: center; gap: 6px; }

main#view { max-width: 1600px; margin: 0 auto; padding: 24px; }

.app-footer {
  max-width: 1600px; margin: 0 auto; padding: 12px 24px;
  color: var(--fg-3); font-size: 12px;
}

/* Page header: the last-play line sits right on wide screens, wraps below on narrow. */
.page-header .last-play { margin-left: auto; }

@media (max-width: 720px) {
  .header-top { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .page-tabs { width: 100%; }
  .brand-sub { display: none; }
  /* Flatten header-right so its pieces wrap as header rows:
     brand + controls / D1 counter / page tabs. */
  .header-right { display: contents; }
  .header-actions { order: 1; margin-left: auto; }
  .rotation-controls { order: 2; }
  .d1-usage { order: 3; width: 100%; justify-content: center; }
  .d1-usage .d1-label { display: inline; } .d1-usage .d1-label-short { display: none; }
  .page-tabs { order: 4; }
  main#view { padding: 12px; }
  .page-header { margin-bottom: 12px; }
  .page-header .last-play { margin-left: 0; width: 100%; }
}