/* What the portal adds to the panel's template: the dashboard's layout, code blocks, the guide and the sign-in shell.
   Colours come from the template's tokens; the charts bring their own from the chart library. */

/* Sign-in and error pages. */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 440px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* The filters that scope a page sit in one row above what they scope. */
.slice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.slice-bar .select { width: auto; min-width: 180px; }
.period { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.period a { padding: 6px 12px; font-size: var(--fs-base); color: var(--text-secondary); border-left: 1px solid var(--border); white-space: nowrap; }
.period a:first-child { border-left: 0; }
.period a:hover { background: var(--bg-hover); color: var(--text); }
.period a.is-active { background: var(--accent-subtle); color: var(--accent); font-weight: 500; }
.slice-note { font-size: var(--fs-sm); color: var(--text-muted); }

/* Three headline figures read as one row, and one under another on a phone. A large number reads in the font's own
   figures, a column of them in tabular ones. */
.kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .kpi-row { grid-template-columns: minmax(0, 1fr); } }
.kpi-row .kpi-value { font-variant-numeric: normal; }
a.kpi { display: block; color: inherit; transition: border-color 0.12s; }
a.kpi:hover { border-color: var(--border-strong); }
.kpi-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-note.value-up { color: var(--green); }
.kpi-note.value-down { color: var(--danger); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-2 > .card { margin: 0; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-bottom: 16px; align-items: start; }
.grid-main > .card { margin: 0; }
@media (max-width: 1200px) {
  .grid-2, .grid-main { grid-template-columns: minmax(0, 1fr); }
}

/* A share of the leader, as a bar inside a table cell. */
.share { display: flex; align-items: center; gap: 8px; }
.share-track { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 3px; background: var(--bg-row); overflow: hidden; }
.share-fill { height: 100%; border-radius: 3px; background: var(--series-1); }
.share-value { flex: 0 0 auto; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Code: a request, a body or an answer, read as sent and copied whole. */
.code-block { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-row); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); font-size: var(--fs-xs); color: var(--text-muted); }
.code-bar .btn { padding: 2px 8px; font-size: var(--fs-xs); }
.code-bar .btn.is-copied { border-color: var(--green); color: var(--green); }
.code-block pre { margin: 0; padding: 12px 14px; max-height: 520px; overflow: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); white-space: pre; tab-size: 2; }
.code-empty { padding: 12px 14px; font-size: var(--fs-sm); color: var(--text-muted); }

.method { display: inline-block; min-width: 44px; padding: 2px 7px; border-radius: 999px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.method-get { background: var(--green-subtle); color: var(--green); }
.method-post { background: var(--accent-subtle); color: var(--accent); }
.path { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }

/* The integration guide: the text, and its contents beside it where the screen is wide. */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
.guide-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.guide-toc a { padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); }
.guide-toc a:hover { background: var(--bg-hover); color: var(--text); }
.guide-toc .toc-title { padding: 0 10px 6px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.guide section { scroll-margin-top: 16px; }
.guide h2 { font-size: var(--fs-lg); font-weight: 600; }
.guide h3 { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.guide p { margin: 0; max-width: 780px; }
.guide ol, .guide ul { margin: 0; padding-left: 20px; max-width: 780px; }
.guide li + li { margin-top: 4px; }
.endpoint-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Each answer of an endpoint opens on the body the API sends with it. */
.answers { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.answer + .answer { border-top: 1px solid var(--border-soft); }
.answer > summary { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; cursor: pointer; list-style: none; }
.answer > summary::-webkit-details-marker { display: none; }
.answer > summary:hover { background: var(--bg-hover); }
.answer > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.answer > summary .badge { flex-shrink: 0; min-width: 44px; justify-content: center; }
.answer > summary::after { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin: 6px 4px 0 auto; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 0.15s; }
.answer[open] > summary::after { margin-top: 9px; transform: rotate(-135deg); }
.answer-when { color: var(--text-secondary); }
.answer-body { padding: 0 12px 12px; }
@media (max-width: 1200px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { display: none; }
  .samples { grid-template-columns: minmax(0, 1fr); }
}

/* The facts of a call or an order laid out in columns. */
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }

.confirm-dialog { max-width: 420px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-lg); }
.confirm-dialog::backdrop { background: rgba(24, 24, 27, 0.4); }
.confirm-text { margin: 0 0 16px; }

.pager-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; }
.pager-next .info { color: var(--text-muted); font-size: var(--fs-base); }