/* v16.64 — subscriber overview redesign (mockups 88–90). Logical properties only: RTL needs nothing extra. */
.s16 { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.s16-muted { color: var(--color-text-muted, #64748b); font-size: var(--text-xs, 12px); }
.s16-live { color: var(--color-ok-fg, #15803d); }

/* KPI strip: 4 tiles, 2×2 on mobile */
.s16-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3, 12px); }
.s16-kpi { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-lg, 12px); padding: var(--space-3, 12px) var(--space-4, 16px);
  display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.s16-kpi__label { font-size: var(--text-xs, 12px); color: var(--color-text-muted, #64748b); }
.s16-kpi__val { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--color-text, #0f172a); }
.s16-kpi__val small { font-size: 13px; font-weight: 600; color: var(--color-text-muted, #64748b); }
.s16-kpi__sub { font-size: var(--text-xs, 12px); color: var(--color-text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; }
.s16-kpi__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s16-kpi--warn { border-color: var(--color-warn-border, #fcd34d); background: var(--color-warn-bg, #fffbeb); }
.s16-kpi--warn .s16-kpi__val { color: var(--color-warn-fg, #b45309); }
.s16-kpi--bad { border-color: var(--color-bad-border, #fca5a5); background: var(--color-bad-bg, #fef2f2); }
.s16-kpi--bad .s16-kpi__val { color: var(--color-bad-fg, #b91c1c); }
.s16-kpi--ok .s16-kpi__val { color: var(--color-ok-fg, #15803d); }
.s16-spark { display: block; color: var(--color-text-muted, #94a3b8); flex: none; max-inline-size: 100%; }
#s16speed .s16-spark path:first-child { stroke: var(--color-ok-fg, #16a34a); }

/* retired-plan alert with its fix inline */
.s16-alert { align-items: center; flex-wrap: wrap; margin: 0; }
.s16-alert__act { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }

/* service cards */
.s16-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3, 12px); }
.s16-svc { margin: 0; padding: var(--space-4, 16px); display: flex; flex-direction: column; gap: 8px; }
.s16-svc__head { display: flex; align-items: center; gap: 8px; }
.s16-svc__head h3 { margin: 0; font-size: 15px; flex: 1; }
.s16-tag { font-size: 10px; padding-block: 1px; }
.s16-empty { border: 1.5px dashed var(--color-border-strong, #cbd5e1); background: var(--color-surface-sunken, #f8fafc); align-items: center; justify-content: center; text-align: center; min-block-size: 150px; }
.s16-empty__icon { inline-size: 44px; block-size: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--color-violet-bg, #ede9fe); color: var(--color-violet-fg, #6d28d9); }
.s16-kv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s16-kv li { display: flex; align-items: center; gap: 8px; padding-block: 5px; font-size: 13px; }
.s16-kv li > span:first-child { color: var(--color-text-muted, #64748b); flex: none; min-inline-size: 70px; }
.s16-kv li > b { margin-inline-start: auto; font-weight: 600; text-align: end; min-inline-size: 0; overflow-wrap: anywhere; }
.s16-kv--btn li { min-block-size: 36px; }
.s16-btns { display: inline-flex; gap: 4px; flex: none; }
.s16-ph:empty { display: none; }

/* session + side cards */
.s16-low { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-3, 12px); align-items: start; }
.s16-side { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.s16-ses, .s16-mini { margin: 0; padding: 0; }
.s16-card__head { display: flex; align-items: center; gap: 8px; padding: var(--space-3, 12px) var(--space-4, 16px); border-block-end: 1px solid var(--color-border, #e5e7eb); }
.s16-card__head h3 { margin: 0; font-size: 15px; flex: 1; }
.s16-ses__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.s16-ses__grid > ul { padding: var(--space-3, 12px) var(--space-4, 16px); border-inline-end: 1px solid var(--color-border, #e5e7eb); }
.s16-ses__chart { padding: var(--space-3, 12px) var(--space-4, 16px); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.s16-ses__chart #s16chart { inline-size: 100%; }
.s16-ses__chart .s16-spark { inline-size: 100%; block-size: auto; }
.s16-row { display: flex; justify-content: space-between; gap: 8px; margin-block-end: 6px; }
.s16-mini > .s16-kv { padding: 4px var(--space-4, 16px) 0; }
.s16-mini__row { display: flex; align-items: center; gap: 8px; padding: var(--space-3, 12px) var(--space-4, 16px); flex-wrap: wrap; }
.s16-mini__row .s16-muted { flex: 1; min-inline-size: 140px; }
.s16-mini__row .fn-btn { margin-inline-start: auto; }
.s16-count { min-inline-size: 22px; justify-content: center; }
.s16-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3, 12px); align-items: start; }
.s16-more:empty { display: none; }
.s16-more > .fn-card { margin: 0; }

/* header: perk chip (free upgrade day, only when it can be started) */
.s16-perk { cursor: pointer; border: 1px dashed var(--color-violet-fg, #a21caf); color: var(--color-violet-fg, #a21caf); background: var(--color-violet-bg, #fdf4ff); font: inherit; font-size: 12px; }
.s16-perk:hover { background: var(--color-violet-bg-hover, #fae8ff); }
.fn-entity__meta li bdi { unicode-bidi: isolate; }

/* top bar: the exchange rate is a quiet grey chip for the office (the "not set today" note lives in Settings, for admin) */
.fn-rate.fn-rate--quiet { background: var(--color-neutral-bg, #f1f5f9); color: var(--color-text-muted, #475569); font-weight: 500; }


@media (max-width: 1100px) {
  .s16-svcs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .s16-low, .s16-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .s16-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s16-kpi { padding: 10px 12px; }
  .s16-kpi__val { font-size: 19px; }
  .s16-svcs { grid-template-columns: minmax(0, 1fr); }
  .s16-ses__grid { grid-template-columns: minmax(0, 1fr); }
  .s16-ses__grid > ul { border-inline-end: 0; border-block-end: 1px solid var(--color-border, #e5e7eb); }
  .s16-alert__act { margin-inline-start: 0; inline-size: 100%; }
  /* ⋮ menu opens as a bottom sheet */
  .fn-menu[data-m16] { position: fixed !important; inset-inline: 0 !important; inset-block-start: auto !important; inset-block-end: 0 !important; max-block-size: 75vh; overflow: auto;
    border-radius: 16px 16px 0 0; padding-block-end: max(12px, env(safe-area-inset-bottom)); z-index: 1000; box-shadow: 0 -12px 40px rgba(15, 23, 42, .25); }
  .fn-menu[data-m16]::before { content: ''; display: block; inline-size: 40px; block-size: 4px; border-radius: 2px; background: var(--color-border-strong, #cbd5e1); margin: 8px auto 4px; }
  .fn-menu[data-m16] .fn-menu__item { min-block-size: 48px; }
}

/* the subscriber tabs scroll on their own on a phone (they used to push the whole page sideways) */
.fn-hub-tabs { min-inline-size: 0; max-inline-size: 100%; }
.fn-hub-tabs .fn-tabs { position: relative; min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.fn-hub-tabs .fn-tabs::-webkit-scrollbar { display: none; }
.fn-hub-tabs .fn-tab { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .fn-hub-tabs .fn-live { display: none; } }