/* QIMA static site stylesheet (copy of app.css with a few additions) */
.link-mini { font-size: 13px; color: var(--text-2); text-decoration: none; }
.link-mini:hover { color: var(--qima-green); }
.loading-state {
  text-align: center; padding: 48px 0; color: var(--text-2); font-size: 14px;
}
.error-state {
  background: rgba(255,59,48,0.08); color: var(--bad);
  padding: 12px 16px; border-radius: 8px; font-size: 13px; margin: 16px 0;
}
.report-list { list-style: none; padding: 0; }
.report-list li {
  border-bottom: 1px solid var(--bg-soft); padding: 14px 0;
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
}
.report-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.report-list a:hover { color: var(--qima-green); }
.report-list .meta-bits { color: var(--text-2); font-size: 12px; }
.report-list .kind-pill {
  background: var(--bg-soft); color: var(--text-2);
  padding: 2px 8px; border-radius: 6px; font-size: 11px;
}
.topnav a.active { background: var(--bg-soft); color: var(--text); font-weight: 600; }
.markdown-body {
  font-size: 15px; line-height: 1.7; max-width: 760px;
}
.markdown-body h1 { font-size: 24px; margin-top: 24px; }
.markdown-body h2 { font-size: 18px; color: var(--text); margin-top: 32px; }
.markdown-body h3 { font-size: 15px; }
.markdown-body ul, .markdown-body ol { padding-left: 20px; }
.markdown-body li { margin: 4px 0; }
.markdown-body code {
  background: var(--bg-soft); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
}
.markdown-body a { color: var(--qima-green); text-decoration: none; }

/* === Below: copy of app.css === */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F5F5F7;
  --text: #1D1D1F;
  --text-2: #86868B;
  --text-3: #C7C7CC;
  --qima-green: #3FB39F;
  --qima-gold: #D4A24C;
  --good: #34C759;
  --bad: #FF3B30;
  --warn: #FF9500;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; border-bottom: 1px solid var(--bg-soft);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { width: 36px; height: 36px; border-radius: 8px; }
.brand-name { font-size: 17px; font-weight: 600; }
.brand-meta { font-size: 13px; color: var(--text-2); }

h1 { font-size: 28px; font-weight: 600; margin: 32px 0 16px; }
h2 { font-size: 17px; font-weight: 600; color: var(--text-2); margin: 48px 0 16px; text-transform: none; }

.segmented {
  display: inline-flex; padding: 4px; background: var(--bg-soft); border-radius: 10px;
}
.segmented button {
  border: 0; background: transparent; padding: 6px 14px; border-radius: 7px;
  font-size: 13px; cursor: pointer; color: var(--text-2);
}
.segmented button.active {
  background: white; color: var(--text); box-shadow: var(--shadow); font-weight: 600;
}

/* ── KPI two-tier hierarchy ── */
.kpi-primary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0 0 16px;
}
.kpi-card {
  background: var(--bg);
  border: 1px solid #E5E5EA;
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kpi-val {
  font-size: 30px; font-weight: 700;
  font-feature-settings: "tnum";
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.kpi-label { font-size: 13px; color: var(--text-2); margin-top: 2px; }

.kpi-secondary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0 0 28px;
}
.kpi-card-sm {
  background: var(--bg-soft);
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-val-sm {
  font-size: 18px; font-weight: 600;
  font-feature-settings: "tnum";
  line-height: 1.2;
}
.kpi-label-sm { font-size: 12px; color: var(--text-2); }

/* Custom date range picker */
.date-picker-inline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg);
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.date-picker-inline input[type="date"] {
  border: 1px solid #E5E5EA;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-soft);
  outline: none;
  cursor: pointer;
}
.date-picker-inline input[type="date"]:focus {
  border-color: var(--qima-green);
  box-shadow: 0 0 0 2px rgba(63,179,159,0.15);
}
.date-picker-sep { color: var(--text-3); font-size: 13px; }
.date-picker-apply {
  background: var(--qima-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.date-picker-apply:hover { opacity: 0.85; }

.kpi-green { color: var(--good); }
.kpi-cmp { font-size: 12px; font-weight: 500; font-feature-settings: "tnum"; margin-top: 2px; }
.cmp-up { color: var(--good); }
.cmp-down { color: var(--bad); }
.cmp-flat { color: var(--text-3); }

.chart { height: 320px; margin: 16px 0 32px; }

.acct-list { border-top: 1px solid var(--bg-soft); }
.acct-row {
  display: grid; grid-template-columns: 1fr 1fr auto;
  align-items: center; padding: 16px 0;
  border-bottom: 1px solid var(--bg-soft);
  text-decoration: none; color: inherit;
}
.acct-row:hover { background: var(--bg-soft); margin: 0 -16px; padding: 16px; border-radius: 8px; }
.acct-row .name { font-weight: 600; }
.acct-row .handle { font-size: 13px; color: var(--text-2); }
.acct-row .stats { font-size: 14px; color: var(--text-2); }
.acct-row .stats b { color: var(--text); font-weight: 600; }
.acct-row .arrow { color: var(--text-3); }
.acct-row .badge-warn { color: var(--warn); font-size: 12px; margin-left: 8px; }
.acct-row .badge-err { color: var(--bad); font-size: 12px; margin-left: 8px; }

table { width: 100%; border-collapse: collapse; font-feature-settings: "tnum"; }
table th, table td { padding: 10px 8px; text-align: left; font-size: 14px; }
table th { color: var(--text-2); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--bg-soft); }
table tr td { border-bottom: 1px solid var(--bg-soft); }

.video-cell-thumb { width: 56px; height: 80px; border-radius: 6px; background: var(--bg-soft); }
.audience-strip { display: flex; gap: 32px; flex-wrap: wrap; color: var(--text-2); font-size: 14px; }
.audience-strip b { color: var(--text); }

.footer { padding: 32px; text-align: center; color: var(--text-2); font-size: 13px; }
.footer a { color: var(--qima-green); text-decoration: none; }
.btn-rescrape {
  border: 0; background: var(--qima-green); color: white;
  padding: 8px 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.btn-rescrape:disabled { opacity: 0.5; }

/* Dashboard layout */
.dash-header { display: flex; align-items: center; justify-content: space-between; }

.filter-bar {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px 20px 12px;
  margin: 16px 0 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.filter-row {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 4px 0;
}
.filter-row .filter-label {
  font-size: 13px; color: var(--text-2);
  width: 40px; flex-shrink: 0;
  padding-top: 7px;
}
.custom-dates {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 4px;
}
.range-tag {
  font-size: 12px; color: var(--text-2);
  font-family: ui-monospace, Menlo, monospace;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg-soft);
}
.sa-tag {
  font-size: 11px; color: var(--text-2);
  border: 1px solid var(--bg-soft); border-radius: 6px;
  padding: 1px 6px;
  font-family: -apple-system, "SF Pro Text", sans-serif;
  letter-spacing: 0.3px;
}
.custom-dates input[type=date] {
  border: 1px solid var(--bg-soft); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; color: var(--text);
  background: white; font-family: inherit;
}
.custom-dates .tilde { color: var(--text-2); }

/* Account chips (inline like time filter) */
.acct-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; background: var(--bg-soft); border-radius: 10px;
}
.acct-chips button {
  border: 0; background: transparent; padding: 5px 12px; border-radius: 7px;
  font-size: 12px; cursor: pointer; color: var(--text-2);
  font-family: inherit; white-space: nowrap; transition: all .15s;
}
.acct-chips button.active {
  background: white; color: var(--text); box-shadow: var(--shadow); font-weight: 600;
}
.acct-chips button:hover:not(.active) { background: rgba(255,255,255,0.5); }

/* Charts grid */
.chart-title {
  font-size: 13px; color: var(--text-2);
  margin: 0 0 4px 4px;
}
.trend-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 16px 0 32px;
}
.trend-grid .chart { height: 220px; margin: 0; }
.pie-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 16px 0 32px;
}
.pie-grid .chart.pie { height: 320px; margin: 0; }

@media (max-width: 980px) {
  .trend-grid { grid-template-columns: 1fr; }
  .pie-grid   { grid-template-columns: 1fr; }
}

/* ============================================================
   Tablet  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 16px; }

  /* Topbar wraps to 2 rows: brand row on top, nav scrolls horizontally below */
  .topbar {
    flex-wrap: wrap; padding: 12px 16px; gap: 8px;
    position: sticky; top: 0; z-index: 50; background: var(--bg);
  }
  .brand-meta { font-size: 12px; order: 2; flex-basis: 100%; }
  .topnav {
    order: 3; flex-basis: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; padding: 4px 0; margin: 0 -4px;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 6px 10px; flex-shrink: 0; }

  h1 { font-size: 22px; margin: 20px 0 12px; }
  h2 { font-size: 15px; margin: 32px 0 12px; }

  .kpi-val { font-size: 26px; }
  .kpi-val-sm { font-size: 16px; }
  .kpi-primary { grid-template-columns: repeat(3, 1fr); }
  .kpi-secondary { grid-template-columns: repeat(3, 1fr); }

  /* Filter row stacks vertically on narrow viewport */
  .filter-row { flex-wrap: wrap; gap: 8px; }
  .filter-row .filter-label { width: auto; }
  .segmented button { padding: 6px 10px; font-size: 12px; }

  /* Account chips wrap on tablet */
  .acct-chips button { font-size: 12px; padding: 5px 10px; }

  /* Pie + trend charts keep size readable but smaller */
  .trend-grid .chart { height: 200px; }
  .pie-grid .chart.pie { height: 280px; }

  /* Table cells smaller */
  table th, table td { padding: 8px 6px; font-size: 13px; }
  .raw-table thead th { padding: 6px 8px; }
  .raw-table tbody td { padding: 6px 8px; }
}

/* ============================================================
   Phone  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 12px; }

  .brand .logo { width: 28px; height: 28px; }
  .brand-name { font-size: 15px; }
  .brand-meta { font-size: 11px; }

  h1 { font-size: 20px; margin: 16px 0 8px; }

  .kpi-primary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-secondary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi-card { padding: 14px; box-shadow: none; }
  .kpi-card-sm { padding: 10px 12px; }
  .kpi-val { font-size: 22px; }
  .kpi-val-sm { font-size: 15px; }

  /* Smaller charts */
  .chart { height: 240px; margin: 8px 0 24px; }
  .trend-grid .chart { height: 180px; }
  .pie-grid .chart.pie { height: 260px; }

  /* Segmented control + dates wrap to next line */
  .segmented { flex-wrap: wrap; }
  .custom-dates { flex-wrap: wrap; margin-left: 0; }
  .custom-dates input[type=date] {
    padding: 8px 10px; font-size: 14px;  /* bigger touch target */
    min-width: 130px;
  }

  /* Account chips: horizontal scroll on mobile */
  .acct-chips {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 4px;
  }
  .acct-chips::-webkit-scrollbar { display: none; }
  .acct-chips button { font-size: 11px; padding: 5px 10px; }

  /* Wide tables: scroll indicator hint */
  .table-wrap {
    margin: 12px -12px 24px;            /* break out of container padding */
    padding: 0 12px;
    background: linear-gradient(90deg,
      var(--bg) 30%, rgba(255,255,255,0)),
      linear-gradient(90deg, rgba(255,255,255,0), var(--bg) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), transparent) 100% 0;
    background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* Buttons: larger touch targets */
  .btn-rescrape { padding: 10px 18px; font-size: 14px; }

  /* Form rows stack vertically on phone */
  .form-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .form-row label { width: auto; }
  .form-row input, .form-row select, .form-row textarea {
    width: 100% !important;
  }

  /* Reports list and other simple tables */
  .acct-table { min-width: 0; }

  /* SA tag tighter */
  .sa-tag { padding: 1px 4px; font-size: 10px; }

  /* Markdown body */
  .markdown-body { font-size: 14px; }
  .markdown-body h1 { font-size: 20px; }
  .markdown-body h2 { font-size: 16px; margin-top: 20px; }

  /* Search input full width */
  .search-input { width: 100%; min-width: 0; }

  /* Login alert bar */
  .login-alert { padding: 8px 12px; font-size: 12px; flex-wrap: wrap; }
  .login-alert-list { width: 100%; }

  /* Range tag wraps */
  .range-tag { font-size: 11px; padding: 3px 8px; }

  /* Raw page: wide tables scroll horizontally on phone */
  .raw-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px 16px;
    padding: 0 12px;
  }
  .raw-select { min-width: 0; width: 100%; }
}

/* ============================================================
   Tiny phone  (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {
  .kpi-primary { grid-template-columns: 1fr; }
  .kpi-secondary { grid-template-columns: repeat(2, 1fr); }
  .kpi-val { font-size: 20px; }
  .kpi-val-sm { font-size: 15px; }
}

/* Account table */
.table-wrap { overflow-x: auto; margin: 16px 0 32px; }
table.acct-table { min-width: 900px; border-collapse: separate; border-spacing: 0; }
table.acct-table th.num,
table.acct-table td.num { text-align: right; }
table.acct-table tr:hover td { background: var(--bg-soft); }
table.acct-table tr:hover td.sticky-col { background: var(--bg-soft); }

/* Sticky account column */
table.acct-table th.sticky-col,
table.acct-table td.sticky-col {
  position: sticky; left: 0; z-index: 2;
  background: white;
  min-width: 140px; max-width: 200px;
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}
table.acct-table th.sticky-col { z-index: 3; }

/* Sortable headers */
table.acct-table th.sortable {
  cursor: pointer; user-select: none;
  transition: color 0.15s;
}
table.acct-table th.sortable:hover { color: var(--text); }

.acct-name { font-weight: 600; }
.acct-handle { font-size: 12px; color: var(--text-2); }
.acct-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acct-actions {
  display: flex; gap: 6px; margin-top: 4px;
}
.acct-action {
  font-size: 11px; color: var(--qima-green); text-decoration: none;
  padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--qima-green);
  transition: background 0.15s, color 0.15s;
}
.acct-action:hover { background: var(--qima-green); color: white; }
.acct-action-tk { color: var(--qima-gold); border-color: var(--qima-gold); }
.acct-action-tk:hover { background: var(--qima-gold); color: white; }
td.meta-cell { font-size: 12px; color: var(--text-2); font-family: ui-monospace, Menlo, monospace; }
table.acct-table td.delta-pos { color: var(--good); }

/* Top navigation */
.topnav { display: flex; gap: 4px; }
.topnav a {
  font-size: 13px; color: var(--text-2); text-decoration: none;
  padding: 6px 12px; border-radius: 8px;
}
.topnav a:hover { background: var(--bg-soft); color: var(--text); }

/* Raw data page */
.raw-select {
  border: 1px solid var(--bg-soft); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; color: var(--text);
  background: white; font-family: inherit;
  min-width: 280px;
}
.raw-meta { font-size: 12px; color: var(--text-2); margin-left: 12px; }
.raw-meta b { color: var(--text); font-weight: 500; }

.rawdb h2 { margin-top: 48px; margin-bottom: 12px; }

.raw-table {
  width: 100%; font-size: 13px; font-feature-settings: "tnum";
  border-collapse: separate; border-spacing: 0;
  margin: 0 0 16px;
}
.raw-table thead th {
  position: sticky; top: 0; background: white; z-index: 2;
  border-bottom: 1px solid var(--bg-soft);
  padding: 8px 12px; text-align: left;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
}
.raw-table th.num, .raw-table td.num { text-align: right; }
.raw-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--bg-soft);
  white-space: nowrap;
}
.raw-table tbody tr:hover td { background: var(--bg-soft); }
.raw-table .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-2); }
.raw-table .small { font-size: 11px; }
.raw-table .title-cell { max-width: 520px; white-space: normal; }
.raw-table .title-cell a { color: var(--text); text-decoration: none; }
.raw-table .title-cell a:hover { color: var(--qima-green); }

/* Make the date column stick to the left when the table is wide enough
   to require horizontal scroll. Without an outer scroll box, this kicks in
   only when the browser's own viewport is narrower than the table. */
.raw-table td.sticky-col,
.raw-table th.sticky-col {
  position: sticky; left: 0; background: white; z-index: 1;
  box-shadow: 1px 0 0 var(--bg-soft);
}
.raw-table tbody tr:hover td.sticky-col { background: var(--bg-soft); }

/* Mini-tables for gender + territories, side by side */
.audience-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: start;
  margin: 0 0 16px;
}
.audience-row .aud-title {
  font-size: 13px; color: var(--text-2); margin-bottom: 6px;
}
.raw-table.mini { font-size: 12px; }
.raw-table.mini thead th { padding: 6px 10px; }
.raw-table.mini tbody td { padding: 5px 10px; }
@media (max-width: 720px) {
  .audience-row { grid-template-columns: 1fr; }
}

/* Reports */
.upload-form {
  background: var(--bg-soft); border-radius: 12px;
  padding: 24px; margin: 16px 0;
}
.form-row {
  display: flex; gap: 16px; align-items: center;
  margin: 12px 0;
}
.form-row label {
  font-size: 13px; color: var(--text-2); width: 120px; flex-shrink: 0;
}
.form-row input, .form-row select, .form-row textarea {
  border: 1px solid var(--bg-soft); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; background: white;
  font-family: inherit;
}
.form-row textarea { font-family: ui-monospace, Menlo, monospace; }

.report-view .report-meta {
  font-size: 13px; color: var(--text-2); margin: 8px 0 24px;
}
.markdown-body {
  font-size: 15px; line-height: 1.7;
  max-width: 760px;
}
.markdown-body h1 { font-size: 24px; margin-top: 24px; }
.markdown-body h2 { font-size: 18px; color: var(--text); margin-top: 32px; }
.markdown-body h3 { font-size: 15px; }
.markdown-body ul, .markdown-body ol { padding-left: 20px; }
.markdown-body li { margin: 4px 0; }
.markdown-body code {
  background: var(--bg-soft); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
}
.markdown-body a { color: var(--qima-green); text-decoration: none; }

/* Login-expiry badge and alert bar */
.acct-table .badge-login {
  display: inline-block; padding: 2px 8px;
  background: rgba(255,59,48,0.1); color: var(--bad);
  border-radius: 6px; font-size: 11px; margin-left: 8px;
  font-weight: 500;
}
.login-alert {
  background: rgba(255,59,48,0.08); color: var(--bad);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; margin: 16px 0;
  display: flex; align-items: center; gap: 8px;
}
.login-alert-list { color: var(--text-2); font-size: 12px; }

/* Videos page */
.videos-table th.sortable { cursor: pointer; user-select: none; }
.videos-table th.sortable:hover { color: var(--text); }
.videos-table .title-cell { max-width: 560px; }
.videos-table .title-cell a { color: var(--text); text-decoration: none; }
.videos-table .title-cell a:hover { color: var(--qima-green); }
.search-input {
  border: 1px solid var(--bg-soft); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; background: white;
  font-family: inherit; min-width: 320px;
}
.seg-link {
  background: transparent; border: 0; color: var(--qima-green);
  font-size: 12px; cursor: pointer; padding: 4px 8px;
}

/* Audience chart grid */
.audience-chart-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 16px 0 32px;
}
.audience-chart-grid .chart { height: 320px; margin: 0; }
@media (max-width: 768px) {
  .audience-chart-grid { grid-template-columns: 1fr; }
}