/*
 * The API reference on docs.secretag.co (layouts/docs.html.erb). Every rule is
 * scoped to the docs page's own classes, since :app loads this file on every
 * page. Colors and sizes come from tokens.css only.
 */

body.docs {
  display: flex;
  flex-direction: column;
}

body.docs > main {
  flex: 1 0 auto;
}

.docs-header {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

.docs-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.docs-header-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.docs-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.docs-header-actions .button {
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.docs-main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.docs-version {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.docs-overview {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

.docs-prose {
  overflow-wrap: anywhere;
}

.docs-prose > * + * {
  margin-top: var(--space-3);
}

.docs-prose h2 {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
}

.docs-prose ul {
  margin-bottom: 0;
  padding-left: var(--space-6);
}

.docs-main code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* The two-column frame: one column on a phone, the sticky "On this page" sidebar beside the content from 900px. The
   content column is minmax(0, 1fr) so a wide <pre> or table scrolls inside itself instead of widening the column. */
.docs-content {
  min-width: 0;
}

.docs-section {
  margin-top: var(--space-12);
}

.docs-section > h2 + .docs-prose {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

/* Getting started and the guide sections of the info text. */
.docs-guide {
  margin-top: var(--space-8);
  overflow-wrap: anywhere;
}

.docs-guide > h2 {
  font-size: var(--text-xl);
}

/* Verifying a delivery: a lead-in sentence, then each language's heading, lead-in and sample. */
.docs-samples > h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.docs-samples > p,
.docs-samples > .docs-example {
  margin-top: var(--space-3);
}

.docs-steps {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
}

.docs-steps > li + li {
  margin-top: var(--space-3);
}

.docs-steps > li > * + * {
  margin-top: var(--space-2);
}

/* "On this page": the same list in a disclosure on a phone and in the sidebar on a desktop; one copy shows at a time. */
.docs-toc-list,
.docs-toc-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-toc-list ul {
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.docs-toc a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  overflow-wrap: break-word;
}

.docs-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.docs-toc-list > li > a {
  font-weight: 700;
}

.docs-toc-verb {
  flex: 0 0 4em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* The filter of "On this page" (hidden until toc_filter_controller connects) and its count; no display here, so
   the hidden attribute keeps working on the field and on each filtered entry. */
.docs-toc-filter {
  margin-bottom: var(--space-3);
  padding: 0 var(--space-2);
}

.docs-toc-filter-status {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.docs-toc-filter-status:empty {
  margin: 0;
}

.docs-toc-phone {
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.docs-toc-phone > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--accent);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.docs-toc-phone > summary::-webkit-details-marker {
  display: none;
}

.docs-toc-phone > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  text-align: center;
}

.docs-toc-phone[open] > summary::before {
  content: "-";
}

.docs-toc-phone[open] {
  padding-bottom: var(--space-3);
}

.docs-toc-desktop {
  display: none;
}

.op-card {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  min-width: 0;
}

/* A long page: the browser skips rendering the cards and schemas off screen (they stay in find-in-page and the
   accessibility tree). The intrinsic sizes are the median closed heights measured at 375px on the dev server
   (172 and 46; 145 and 46 at 1280px), in px because tokens.css holds no such size. */
.op-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 172px;
}

.schema-details {
  content-visibility: auto;
  contain-intrinsic-size: auto 46px;
}

/* The path of an operation link breaks only after a slash, a schema name only before an inner capital (the view
   puts <wbr> there). The span may shrink below its longest word: before 2026-10-14 CreateWebhookSubscriptionResponse
   ran 29px past the 240px sidebar at 1280px. */
.docs-toc a > span + span,
.docs-toc a > span:only-child {
  min-width: 0;
}

/* A jump from "On this page" or a type link shows where it landed, a little below the top edge. */
.op-card:target,
.schema-details:target {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.op-card,
.schema-details {
  scroll-margin-top: var(--space-2);
}

.op-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.method-badge {
  display: inline-block;
  min-width: 4.5em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-input);
  color: var(--on-method);
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: center;
}

.method-get { background: var(--method-get); }
.method-post { background: var(--method-post); }
.method-patch { background: var(--method-patch); }
.method-delete { background: var(--method-delete); }

.op-path {
  min-width: 0;
}

/* The summary is part of the heading, on its own line under the method and path. */
.op-summary {
  flex-basis: 100%;
  font-weight: 400;
}

.op-details,
.schema-details {
  margin-top: var(--space-3);
}

.op-details > summary,
.schema-details > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--accent);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.op-details > summary::-webkit-details-marker,
.schema-details > summary::-webkit-details-marker {
  display: none;
}

.op-details > summary::before,
.schema-details > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  text-align: center;
}

.op-details[open] > summary::before,
.schema-details[open] > summary::before {
  content: "-";
}

.op-body,
.schema-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  min-width: 0;
}

.op-body h4 {
  margin: var(--space-3) 0 0;
  font-size: var(--text-md);
}

.op-body p {
  margin: 0;
}

.op-id,
.op-data,
.schema-type {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.op-responses,
.schema-values {
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-responses > li + li {
  margin-top: var(--space-3);
}

.op-responses > li > * + * {
  margin-top: var(--space-2);
}

.schema-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.op-status {
  display: inline-block;
  min-width: 3em;
  font-family: var(--font-mono);
  font-weight: 700;
}

.docs-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
}

.docs-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.docs-table th,
.docs-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.docs-table tbody th {
  font-weight: 400;
}

/* Only the description column may break inside a word (a long URL or header name); names, types and "Yes"/"No" wrap at spaces only. */
.docs-table td:last-child {
  overflow-wrap: anywhere;
}

.docs-table tbody tr:last-child > * {
  border-bottom: 0;
}

.docs-table thead th {
  color: var(--text-muted);
  white-space: nowrap;
}

/* A field or parameter name stays on one line (no "destination_ address"); the table scrolls inside its region. */
.docs-table th[scope="row"] code {
  white-space: nowrap;
}

.docs-code {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.docs-main .docs-code code {
  overflow-wrap: normal;
}

/* A placeholder (API_KEY, ID, HASH): upright mono in the accent color, in the example and in its Replace list. */
.docs-main var {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--accent);
}

/* An example and its Copy button (hidden until the clipboard controller connects), the status line beside it. */
.docs-example {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.docs-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.docs-replace {
  margin: 0;
  padding-left: var(--space-6);
  overflow-wrap: anywhere;
}

.docs-replace > li + li {
  margin-top: var(--space-1);
}

.schema-details {
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.schema-details[open] {
  padding-bottom: var(--space-4);
}

.docs-footer {
  text-align: center;
}

.docs-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.docs-footer .footer-legal {
  margin-top: var(--space-4);
}

/* A phone reads each table row as a block: the name, then type and required (each with its column name), then the
   description, full width. The header row stays in the accessibility tree (visually hidden, the declarations of
   components.css .visually-hidden), and the explicit roles keep the table a table once its parts are blocks. */
@media (max-width: 599px) {
  .docs-table {
    min-width: 0;
  }

  .docs-table,
  .docs-table tbody {
    display: block;
  }

  .docs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .docs-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .docs-table tbody tr:last-child {
    border-bottom: 0;
  }

  .docs-table tbody th,
  .docs-table tbody td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .docs-table tbody th,
  .docs-table tbody td:last-child {
    flex-basis: 100%;
  }

  .docs-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-muted);
  }

  .docs-table th[scope="row"] code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 900px) {
  .docs-main {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .docs-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-8);
  }

  .docs-toc-phone {
    display: none;
  }

  .docs-toc-desktop {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--space-4) 0;
  }

  .docs-toc-desktop a {
    min-height: 0;
  }

  .op-card {
    padding: var(--space-4) var(--space-6);
  }
}