/* Task 1169 — simple, privacy-safe operator page-view analytics. */
.operator-traffic-page { color: #111; display: grid; gap: 1rem; }
.operator-traffic-header { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.operator-traffic-header h1 { margin: .15rem 0 .25rem; }
.operator-traffic-intro { margin: 0; max-width: 46rem; }
.operator-stat-card, .operator-traffic-panel { background: #fff; border: 1px solid rgba(95, 60, 44, .18); }
.operator-stat-card { display: grid; gap: .3rem; max-width: 22rem; padding: 1rem; }
.operator-stat-card > span { font-weight: 650; }
.operator-stat-card > strong { color: #71432f; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.operator-traffic-panel { min-width: 0; padding: 1rem; }
.operator-traffic-panel-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.operator-traffic-panel-heading h2 { font-size: 1rem; margin: 0; }
.operator-traffic-panel-heading p { color: #333; font-size: .86rem; margin: .2rem 0 0; }
.operator-traffic-period-switch { background: #f3ece7; border-radius: 999px; display: flex; padding: .2rem; }
.operator-traffic-period-switch button { background: transparent; border: 0; border-radius: 999px; color: #333; cursor: pointer; font: inherit; min-height: 2.25rem; padding: .4rem .7rem; }
.operator-traffic-period-switch button.is-active { background: #fff; box-shadow: 0 1px 4px rgba(76, 45, 32, .16); color: #71432f; font-weight: 700; }
.operator-traffic-period-switch button:focus-visible { outline: 2px solid #71432f; outline-offset: 2px; }
.operator-traffic-summary { align-items: baseline; display: flex; gap: .65rem; margin: 1rem 0 .75rem; }
.operator-traffic-summary strong { font-size: 1.15rem; }
.operator-traffic-summary span { color: #555; font-size: .85rem; }
.operator-traffic-summary .is-up { color: #23643e; }
.operator-traffic-summary .is-down { color: #9a3f32; }
.operator-traffic-chart { align-items: stretch; display: flex; gap: clamp(.18rem, .75vw, .55rem); height: 15rem; min-width: 0; overflow-x: auto; padding: .25rem 0 .15rem; }
.operator-traffic-chart-day { align-items: center; display: grid; flex: 1 0 1.4rem; grid-template-rows: 1.1rem 1fr 1rem; min-width: 0; text-align: center; }
.operator-traffic-chart-value { font-size: .68rem; font-variant-numeric: tabular-nums; }
.operator-traffic-chart-track { align-items: end; display: flex; height: 100%; justify-content: center; min-height: 0; width: 100%; }
.operator-traffic-chart-bar { background: #a87257; border-radius: .35rem .35rem 0 0; display: block; min-height: 2px; width: min(1.5rem, 78%); }
.operator-traffic-chart-label { color: #444; font-size: .64rem; white-space: nowrap; }
.operator-traffic-note { color: #222; font-size: .82rem; margin: 0; }
[data-traffic-panel][hidden] { display: none; }
@media (max-width: 640px) {
  .operator-traffic-header { align-items: stretch; flex-direction: column; }
  .operator-traffic-header .btn { text-align: center; }
  .operator-stat-card { max-width: none; }
  .operator-traffic-panel-heading { align-items: stretch; flex-direction: column; }
  .operator-traffic-period-switch { align-self: start; }
  .operator-traffic-chart { height: 13rem; }
  [data-traffic-panel="30"] .operator-traffic-chart-day { flex-basis: 1.25rem; }
}