/* reach12.com/dashboard: a customer's own view of the API, on top of the site's /style.css
   (fonts, tokens, nav, buttons). The page shell is generated by scripts/reach12-docs.mjs and the
   data is filled in by dashboard.js. No inline styles anywhere: the page's CSP allows none. */
.dash{padding:140px 0 90px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── pieces ─────────────────────────────────────────────────────────────────────────────── */
.dash-card{background:var(--card);border:1px solid #e3e6ec;border-radius:var(--r-md);padding:24px;min-width:0}
.dash-card h3{font-size:17px;letter-spacing:-.01em;margin:0}
.dash-label{font-size:14px;font-weight:700;color:#3a4254}
.dash-input{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #cfd5e1;border-radius:12px;padding:10px 14px;min-height:46px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}
.dash-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px #2f7bff30}
.dash-input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px #d2454526}
select.dash-input{width:auto;padding-right:36px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6272' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px}
.dash-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:8px 18px;border-radius:999px;border:1px solid #cfd5e1;background:#fff;color:var(--ink);font-weight:700;font-size:15px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.dash-btn:hover{background:#eef3ff;border-color:#b9c6e0}
.dash-btn:disabled{opacity:.55;cursor:default}
.dash-btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.dash-btn-dark:hover{background:#26324b;border-color:#26324b}
.dash-btn-quiet{background:#eef1f7;border-color:#eef1f7}
.dash-btn-danger{color:var(--bad);border-color:#efc6c6}
.dash-btn-danger:hover{background:#fdecec;border-color:#e3a9a9}
.dash-btn-confirm{background:var(--bad);border-color:var(--bad);color:#fff}
.dash-btn-confirm:hover{background:#b43a3a;border-color:#b43a3a}
.dash-btn-sm{min-height:34px;padding:5px 12px;font-size:14px}
.dash-fine{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.dash-alert{margin:0;padding:10px 14px;border-radius:12px;background:#fdecec;color:#962a2a;font-size:15px;font-weight:600;line-height:1.45}
.dash-alert a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.dash-alert-warn{background:#fdf3e2;color:#7e5211}
.empty{margin:0;padding:34px 20px;text-align:center;color:var(--muted);font-size:16px}

/* ── signed out ─────────────────────────────────────────────────────────────────────────── */
.signin{max-width:600px;margin:0 auto}
.signin h1{font-size:clamp(36px,5vw,54px);margin:0 0 16px}
.dash-lede{color:var(--muted);font-size:18px;margin:0 0 28px}
.signin-card{display:flex;flex-direction:column;gap:12px;padding:28px}
.key-field{display:flex;gap:8px}
.key-field .dash-input{flex:1}
.dash-submit{width:100%;margin-top:4px}
.dash-privacy{display:flex;gap:10px;align-items:flex-start}
.dash-privacy .ico{margin-top:2px;color:var(--ok)}
.dash-conn{border-top:1px solid #eceef2;padding-top:12px}
.dash-conn summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--muted);padding:2px 0;width:max-content}
.dash-conn[open]{display:flex;flex-direction:column;gap:8px}
.dash-alt{margin:22px 0 0;color:var(--muted);font-size:16px}
.dash-alt a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── signed in ──────────────────────────────────────────────────────────────────────────── */
.app-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:26px}
.app-id{min-width:0}
.app-head h1{font-size:clamp(34px,4.6vw,52px);margin:0;overflow-wrap:anywhere}
.app-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;color:var(--muted);font-size:15px}
.app-meta .mono{font-size:14px}
.app-actions{display:flex;gap:10px;flex-wrap:wrap}
.app-note{flex-basis:100%}
.app-error{margin-bottom:24px}
.mode-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.02em}
.mode-pill:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.mode-live{background:#e1f4ea;color:#136b47}
.mode-test{background:#fcefd9;color:#8a530d}

.dash-section{margin-top:44px}
.section-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:16px}
.section-bar h2{font-size:clamp(26px,2.6vw,32px);margin:0}
.inline-field{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#3a4254;margin:0}
.inline-field > span,.inline-field > label{white-space:nowrap}
.inline-field .dash-input{min-height:42px;padding-top:7px;padding-bottom:7px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cards{display:grid;gap:16px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* today: a meter per channel */
.chan-state{font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px;background:#e1f4ea;color:#136b47}
.chan-state.is-off{background:#eef0f4;color:#5d6272}
.chan-line{margin:8px 0 0;color:var(--muted);font-size:15px;overflow-wrap:anywhere}
.meter-num{margin:16px 0 10px;font-size:16px;color:var(--muted)}
.meter-num strong{font-size:30px;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.meter{height:10px;border-radius:999px;background:#edf0f5;overflow:hidden}
.meter span{display:block;height:100%;width:0;border-radius:inherit;background:var(--blue)}
.meter.is-high span{background:var(--warn)}
.meter.is-full span{background:var(--bad)}

/* the month */
.stat h3{font-size:15px;color:var(--muted);font-weight:700}
.stat-num{margin:8px 0 4px;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-num.is-word{font-size:26px;letter-spacing:-.02em}
.stat-amount{background:linear-gradient(160deg,#fff 40%,#eef3ff)}
.amount-lines{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid #e6e9f0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#3a4254}
.amount-lines:empty{display:none}
.amount-lines li{display:flex;justify-content:space-between;gap:12px}
.amount-lines span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.chart-card{margin-top:16px}
.legend{list-style:none;display:flex;gap:16px;margin:0;padding:0;font-size:14px;font-weight:700;color:#3a4254}
.legend li{display:flex;align-items:center;gap:7px}
.swatch{width:12px;height:12px;border-radius:4px;display:inline-block}
.swatch-sms,.bar-sms{background:var(--blue);fill:var(--blue)}
.swatch-email,.bar-email{background:#1d2c57;fill:#1d2c57}
.chart{margin-top:14px;min-height:220px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:#e6e9f0;stroke-width:1}
.chart .axis{fill:#7b8292;font-size:12px;font-family:Assistant,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.chart .future{fill:#f2f4f8}
.chart .today-mark{fill:var(--ink);font-weight:800}
.chart-empty{fill:#7b8292;font-size:15px;font-family:Assistant,system-ui,sans-serif}
.chart-table{margin-top:12px}
.chart-table summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--muted);width:max-content}
.table-scroll{overflow-x:auto;margin-top:10px;max-height:340px;overflow-y:auto}
.mini{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.mini th,.mini td{padding:6px 10px;text-align:right;border-bottom:1px solid #eceef2}
.mini th:first-child,.mini td:first-child{text-align:left}
.mini th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#7b8292}

/* the log and the list */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:#e6e9f0}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 16px;font-weight:700;font-size:14px;color:#3a4254;min-height:34px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #1c284120}
.list-card{padding:0;overflow:hidden}
.dtable{width:100%;border-collapse:collapse;font-size:15px}
.dtable th{text-align:left;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7b8292;padding:12px 18px;border-bottom:1px solid var(--line);background:#f7f8fb;white-space:nowrap}
.dtable td{padding:12px 18px;border-bottom:1px solid #eceef2;vertical-align:top;overflow-wrap:anywhere}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .t-time{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.dtable .t-to{white-space:nowrap}
.dtable .t-body{max-width:440px}
.dtable .t-kind{color:var(--muted);font-size:14px}
.dtable .t-act{text-align:right;white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.status-sent{background:#e1f4ea;color:#136b47}
.status-failed{background:#fdecec;color:#962a2a}
.status-blocked{background:#fcefd9;color:#8a530d}
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid #eceef2;background:#fbfbfd}
.list-foot:has(.dash-fine:empty):has(button[hidden]){display:none}
.opt-form{margin-bottom:16px;display:flex;flex-direction:column;gap:14px}
.opt-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr) auto;gap:12px;align-items:end}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld select.dash-input{width:100%}
.opt{font-weight:500;color:#8a90a0}
.opt-submit{min-height:46px;padding:10px 22px;font-size:16px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;margin:0;max-width:calc(100% - 32px);padding:12px 20px;border-radius:14px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;box-shadow:0 14px 40px #0e142040}

@media (prefers-reduced-motion:no-preference){
  .meter span{transition:width .6s var(--ease)}
  .toast{animation:toast-in .3s var(--ease)}
}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}}

@media (max-width:1000px){
  .dash{padding-top:120px}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-amount{grid-column:1/-1}
  .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fld-wide{grid-column:1/-1}
  .opt-submit{grid-column:1/-1}
}
@media (max-width:720px){
  .dash{padding-top:104px}
  .signin-card{padding:22px 18px}
  .dash-card{padding:20px 18px}
  .list-card{padding:0}
  .cards-2,.cards-3,.opt-grid{grid-template-columns:minmax(0,1fr)}
  .app-actions{width:100%}
  .app-actions .dash-btn{flex:1}
  .tools{width:100%}
  /* The date gets a line of its own: beside the channel switch it is squeezed to "dd/m". */
  .tools .inline-field{flex:1 1 100%;min-width:0}
  .tools .inline-field .dash-input{flex:1}
  /* A table becomes a card per row, each value under its column's name. */
  .dtable thead{display:none}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable tr{padding:12px 18px;border-bottom:1px solid #eceef2}
  .dtable tbody tr:last-child{border-bottom:0}
  .dtable td,.dtable tbody tr:last-child td{border:0;padding:3px 0;display:flex;gap:12px;max-width:none;white-space:normal}
  .dtable td:before{content:attr(data-label);flex:0 0 82px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8a90a0;padding-top:3px}
  .dtable .t-act{padding-top:8px}
  .dtable .t-act:before{content:none}
}