/* /admin: the owner's dashboard (web/js/screens/admin.js, ui/admin-attribution.js; charts: .lc in more.css).
   Tokens from tokens.css only. Phone: one column, tiles two across, wide tables scroll inside their card; tablet and
   desktop: more tiles per row and two-column card rows. */
.app:has(> .screen.admin) { max-width: 1180px; } /* the dashboard uses the desktop width, not the phone column */
.screen.admin { max-width: 1180px; margin: 0 auto; }
.admin .m-head { align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.admin-title { font: 800 1.4rem var(--font-display); margin: 0; }
.admin-at { margin-left: auto; color: var(--text-2); font-size: var(--fs-sm); }
.admin-k { margin: 0; color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: .45em; }
.admin-v { margin: 2px 0 0; font: 800 1.7rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.admin-sub { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.admin-hero { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: var(--s5); align-items: center; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.admin-live { margin: 0; font: 800 3.4rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.admin-pulse { width: 9px; height: 9px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 0 0 rgba(60, 207, 142, .6); animation: admin-pulse 1.8s infinite; }
@keyframes admin-pulse { 70% { box-shadow: 0 0 0 9px rgba(60, 207, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 207, 142, 0); } }
@media (prefers-reduced-motion: reduce) { .admin-pulse { animation: none; } }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.admin-tile, .admin-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.admin-card { margin-bottom: var(--s4); }
.admin-h2 { margin: var(--s5) 0 var(--s3); font: 700 var(--fs-lg)/1.25 var(--font-display); }
.admin-h3 { margin: 0 0 var(--s2); font: 700 1rem var(--font-display); }
.admin-note { margin: var(--s2) 0 0; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.4; }
.admin-note:empty { display: none; }
.admin-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.admin-two .admin-card { margin-bottom: 0; min-width: 0; }
.admin-hero > *, .admin-tile { min-width: 0; }
/* Surface Duo / foldables spanned side by side: two-column rows split at the hinge instead of across it. */
@media (horizontal-viewport-segments: 2) {
  .admin-two { column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + var(--s5)); }
}
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.admin-table th, .admin-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.admin-table th { color: var(--text-2); font-weight: 700; }
.admin-fb { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.admin-fb li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.admin-fb time { display: block; color: var(--text-2); font-size: .8em; }
.admin-tag { display: inline-block; padding: 0 .45em; border-radius: 999px; background: var(--bg-inset); color: var(--text-2); font-size: .8em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 700px) { .admin-hero, .admin-two { grid-template-columns: minmax(0, 1fr); } .admin-live { font-size: 2.8rem; } }
/* Attribution funnel + channel codes (ui/admin-attribution.js) */
.admin-attr-tools { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-bottom: var(--s3); }
.admin-attr-tools .seg { display: flex; flex-wrap: wrap; max-width: 100%; background: var(--bg-inset); }
.admin-attr-tools .seg button { min-height: var(--tap); padding: 0 var(--s3); font-size: var(--fs-sm); }
.admin-attr-test { display: inline-flex; gap: var(--s2); align-items: center; min-height: var(--tap); font-size: var(--fs-sm); color: var(--text-2); }
.admin-attr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--s2)); padding: 0 var(--s2); }
.admin-attr-table { min-width: 760px; }
.admin-attr-table th[scope="row"] { color: var(--text); max-width: 180px; overflow-wrap: anywhere; }
.admin-attr-table td b { display: block; font-weight: 800; }
.admin-attr-of { display: block; color: var(--text-2); font-size: .8em; }
.admin-attr-none { color: var(--text-2); }
.admin-attr-total th, .admin-attr-total td { background: var(--bg-inset); }
.admin-ch-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--s2) var(--s3); align-items: end; margin-bottom: var(--s3); }
.admin-ch-form label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 700; }
.admin-ch-form label { min-width: 0; }
.admin-ch-form input { width: 100%; min-width: 0; min-height: var(--tap); padding: 0 var(--s3); font-size: 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-inset); color: var(--text); }
.admin-ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.admin-ch-list li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.admin-ch-off { opacity: .6; }
.admin-ch-qr { margin: 0; flex: 0 0 104px; background: #fff; border-radius: 10px; padding: 4px; }
.admin-ch-qr svg { display: block; width: 100%; height: auto; }
.admin-ch-info { display: grid; gap: 4px; min-width: 0; }
.admin-ch-info code { font-size: var(--fs-sm); overflow-wrap: anywhere; color: var(--accent); }
.admin-ch-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }


/* Window switch (7 / 30 / 90 days) in the header */
.admin-window { display: flex; background: var(--bg-inset); }
.admin-window button { min-height: var(--tap); padding: 0 var(--s3); font-size: var(--fs-sm); }

/* Traffic facts reuse the tile look; bar lists sit in a grid of small cards. */
.admin-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.admin-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.admin-lists .admin-card { margin-bottom: 0; min-width: 0; }
.admin-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.admin-bars li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 4.5ch; align-items: center; gap: var(--s2); min-height: 28px; }
.admin-bar-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 700; }
.admin-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--bg-inset); overflow: hidden; }
.admin-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.admin-bars b { text-align: right; font: 700 var(--fs-sm) var(--font-display); font-variant-numeric: tabular-nums; }

/* Tables scroll inside their card, never the page. */
.admin-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.admin-ret { min-width: 420px; }
.admin-ret td b { display: block; font-weight: 800; }
.admin-of { display: block; color: var(--text-2); font-size: .8em; }
.admin-none { color: var(--text-2); }
.admin-table th[scope="row"] { color: var(--text); }

/* Label + value rows */
.admin-kv { list-style: none; margin: 0; padding: 0; }
.admin-kv li { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.admin-kv span { color: var(--text-2); }
.admin-kv b { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) { .admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-at { margin-left: 0; width: 100%; } }
@media (min-width: 640px) {
  .admin-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .admin-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .admin-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Email section (ui/admin-email.js): the brake line. */
.admin-alert { margin: 0 0 var(--s3); padding: var(--s3); border-radius: var(--radius); background: var(--red-tint); color: var(--danger); font-weight: 800; }

/* Own catalog panel (ui/admin-own-catalog.js): one bar per switch-gate criterion with its target tick, the gate streak. */
.own-crits { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s3); }
.own-crit { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 5.5ch minmax(0, 7rem); align-items: center; gap: var(--s2); min-height: 32px; }
.own-crit-k { font-size: var(--fs-sm); font-weight: 700; }
.own-crit-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--bg-inset); }
.own-crit-track i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.own-crit.is-pass .own-crit-track i { background: var(--good); }
.own-crit-track s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); text-decoration: none; }
.own-crit b, .own-streak b { text-align: right; font: 700 var(--fs-sm) var(--font-display); font-variant-numeric: tabular-nums; }
.own-crit small { color: var(--text-2); font-size: var(--fs-xs, 0.78rem); }
.own-streak { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.own-streak-cells { display: flex; gap: 4px; }
.own-streak-cells i { flex: 1; height: 12px; border-radius: 3px; background: var(--bg-inset); }
.own-streak-cells i.on { background: var(--good); }
.own-gate { margin-left: var(--s2); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-inset); color: var(--text-2); font-size: var(--fs-xs, 0.78rem); }
.own-gate.is-pass { background: var(--green); color: var(--text); }
.own-fixed { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.own-fixed time { color: var(--text-2); font-weight: 700; margin-right: 4px; }
@media (max-width: 700px) {
  .own-crit { grid-template-columns: minmax(0, 1fr) auto; }
  .own-crit-track { grid-column: 1 / -1; grid-row: 2; }
  .own-crit small { grid-column: 1 / -1; }
  .own-streak { grid-template-columns: minmax(0, 1fr) auto; }
  .own-streak-cells { grid-column: 1 / -1; grid-row: 2; }
}
/* Gap list: the cause on its own line (labels are sentences), bar + number below. */
.own-gaps li { grid-template-columns: minmax(0, 1fr) 6ch; row-gap: 4px; }
.own-gap-k { grid-column: 1 / -1; font-size: var(--fs-sm); font-weight: 700; }