/* Shared styles for a content page (used by every module screen). */
.page-head { margin-bottom: var(--sp-7); }

/* Wrap wide tables so they scroll horizontally within their card on small
   screens instead of forcing the whole page wider than the viewport. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 4vw + 1rem, var(--fs-5xl));
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-desc {
  margin-top: var(--sp-4);
  max-width: 60ch;
  font-size: var(--fs-lg);
  color: var(--c-ink-soft);
}

.page-note {
  display: inline-block;
  margin-top: var(--sp-5);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-faint);
}

/* When a module has a tab bar, the big title needs less space beneath it. */
.page-head { margin-bottom: var(--sp-5); }
.panel__title { font-size: var(--fs-2xl); letter-spacing: -0.01em; margin-bottom: var(--sp-3); }
.panel .page-desc { margin-top: 0; }

/* ---- Compact breadcrumb header with tabs on the opposite side ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); padding-bottom: 0; border-bottom: 1px solid var(--c-border); }
.crumb { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; margin: 0; min-width: 0; }
.crumb__group { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.crumb__sep { flex: 0 0 auto; color: var(--c-ink-faint); font-size: var(--fs-sm); }
.crumb__page { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* subnav sits inside the header row, restyled as pill tabs (no full-width underline) */
.page-head .subnav { margin: 0; border-bottom: 0; gap: 2px; flex-wrap: wrap; }
.page-head .subnav__tab { padding: var(--sp-1) var(--sp-3); margin-bottom: 0; border-bottom: 0; border-radius: var(--r-full); font-size: var(--fs-sm); }
.page-head .subnav__tab:hover { background: var(--c-surface-2); }
.page-head .subnav__tab[aria-current="page"] { background: var(--c-accent-wash); color: var(--c-accent-ink); border-bottom: 0; }
.page-head .subnav__sep { height: var(--sp-4); }

/* Notifications test block */
.notif-test { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.notif-test .btn-primary { display: inline-flex; align-items: center; gap: var(--sp-2); }
.notif-test .btn-primary svg { width: 1.1rem; height: 1.1rem; }
.notif-test__status { font-size: var(--fs-sm); color: var(--c-ink-soft); min-height: 1.2em; }

/* Hourly focus reminder toggle */
.notif-focus { margin-top: var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.notif-focus__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-focus__text strong { font-size: var(--fs-md); color: var(--c-ink); }
.notif-focus__text span { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.notif-focus__status { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); min-height: 1.2em; }
.switch { flex: 0 0 auto; width: 3rem; height: 1.7rem; padding: 3px; border-radius: var(--r-full); background: var(--c-surface-2); border: 1px solid var(--c-border-strong); }
.switch__knob { display: block; width: 1.25rem; height: 1.25rem; border-radius: var(--r-full); background: #fff; box-shadow: 0 1px 3px rgba(20,21,26,0.3); transition: transform var(--dur) var(--ease); }
.switch.is-on { background: var(--c-accent); border-color: transparent; }
.switch.is-on .switch__knob { transform: translateX(1.3rem); }