/*!
 * ticket — the renderer's structural stylesheet.
 *
 * THIS FILE IS THE LIBRARY'S, NOT THE BRAND'S. What is here is layout: the
 * tab rail at the left with one vertical tab per section, the tickets in the
 * main column with their head, body, tear line and stub, the field tables,
 * the type scale. Every COLOUR is a custom property with a neutral grey
 * default, and the brand's own `index.html` sets them — t1pay is the first
 * to, and its violet lives there, not here. A palette hardcoded in this file
 * would be the "two brands, one vendor" tell `packages/docs-vendor/README.md`
 * exists to prevent, with the vendor being us.
 */

.tk-root {
  /* NEUTRAL DEFAULTS — a plain light grey, so a page that sets nothing is
     legible and visibly unbranded. Every one of these is meant to be
     overridden by the brand's own page. */
  --tk-bg: #EEEEEF;          /* the counter the tickets lie on */
  --tk-paper: #FFFFFF;       /* the ticket */
  --tk-ink: #1C1C1E;
  --tk-ink-2: #6E6E73;       /* muted */
  --tk-line: #D8D8DA;        /* hairlines, the ticket's edge, the tear line */
  --tk-accent: #55555C;      /* the rail, the filled method pill */
  --tk-accent-2: #7A7A82;    /* the active tab, hover */
  --tk-accent-3: #35353A;    /* pressed, deep */
  --tk-accent-wash: rgba(85, 85, 92, 0.07); /* the stub */
  --tk-done: #C9CDB0;        /* 2xx, the overview's stub */
  --tk-danger: #8A3A3A;      /* 4xx / 5xx */
  --tk-pending-bg: #EFE9D8;  /* 3xx and anything else */
  --tk-radius: 12px;
  --tk-sans: -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Ends on families the pinned screenshot image actually has (Liberation
     Mono, DejaVu Sans Mono) rather than the bare generic, for the reason
     obsidian.css records: on a zh-CN page Chromium resolves `monospace`
     against the element's language, re-resolves on the relayout a full-page
     capture forces, and the document jumps height between two captures. */
  --tk-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --tk-rail-w: 96px;
  --tk-notch: 14px;
  --tk-top: 0px; /* the brand's own header height; the sticky rail clears it */

  display: grid;
  grid-template-columns: var(--tk-rail-w) minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  background: var(--tk-bg);
  color: var(--tk-ink);
  font-family: var(--tk-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.tk-root * { box-sizing: border-box; }

.tk-root :focus-visible {
  outline: 2px solid var(--tk-accent);
  outline-offset: 2px;
}

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

/* ---- the tab rail ----------------------------------------------------- */
/* The one fully coloured surface on the page: a narrow column in the accent,
   the height of the viewport, with one vertical tab per section. The tab
   for the section in view is lighter and pulled 6px out to the right, over
   the counter, the way the index tab of a ticket book stands proud of the
   others. */
.tk-rail {
  position: sticky;
  top: var(--tk-top);
  align-self: start;
  height: calc(100vh - var(--tk-top));
  overflow-y: auto;
  overflow-x: visible;
  background: var(--tk-accent);
  z-index: 2;
}
.tk-rail::-webkit-scrollbar { width: 0; height: 0; }
.tk-rail-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 22px 0 32px 10px;
}

.tk-tab-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 16px 0;
  margin-right: 6px;
  border-radius: var(--tk-radius) 0 0 var(--tk-radius);
  color: #FFFFFF;
  text-decoration: none;
  background: transparent;
  transition: background 0.14s ease, margin 0.14s ease, color 0.14s ease;
}
.tk-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.78;
}
.tk-tab-link:hover { background: var(--tk-accent-3); }
.tk-tab-link:hover .tk-tab-label { opacity: 1; }
.tk-tab-link.is-here {
  background: var(--tk-accent-2);
  margin-right: 0;
  padding-right: 6px; /* the pull-out: 6px further right than its siblings */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.tk-tab-link.is-here .tk-tab-label { opacity: 1; }
.tk-tab-link:focus-visible { outline-color: #FFFFFF; outline-offset: -3px; }

/* ---- the main column -------------------------------------------------- */
.tk-main {
  min-width: 0;
  max-width: 1040px;
  padding: 36px clamp(16px, 3vw, 48px) 96px clamp(20px, 3.5vw, 56px);
}

.tk-tag { padding-top: 40px; scroll-margin-top: calc(var(--tk-top) + 12px); }
.tk-tag-head {
  margin: 0 0 16px 4px;
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--tk-ink);
}

/* ---- the ticket ------------------------------------------------------- */
/* Paper on the counter: a rounded card with a hairline edge. `overflow:
   hidden` is what turns the two circles on the tear line into notches —
   half of each is clipped away, and what remains is a bite out of the edge
   through which the counter shows. */
.tk-ticket {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  background: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  scroll-margin-top: calc(var(--tk-top) + 12px);
}
.tk-ticket--wide { margin-bottom: 26px; }
#overview { scroll-margin-top: calc(var(--tk-top) + 12px); }

.tk-ticket-head { padding: 22px 26px 6px; }
.tk-ticket-body { padding: 8px 26px 22px; }

.tk-eyebrow {
  margin: 0 0 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tk-accent);
}
.tk-h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--tk-ink);
}
.tk-summary-line { margin: 12px 0 8px; font-size: 1rem; line-height: 1.6; color: var(--tk-ink-2); }

/* the operation's head: pill, path, summary */
.tk-op-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-summary {
  margin: 10px 0 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--tk-ink);
}

/* THE METHOD PILL. GET is the accent outlined on paper; POST, the verb that
   moves money, is the accent filled. A pill, because every button and tag
   in this vocabulary is a pill. */
.tk-method {
  flex: none;
  display: inline-block;
  padding: 3px 11px;
  border: 1.5px solid var(--tk-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--tk-accent);
  font-family: var(--tk-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
}
.tk-method--post,
.tk-method--put,
.tk-method--patch,
.tk-method--delete { background: var(--tk-accent); color: #FFFFFF; }
.tk-method--delete { background: var(--tk-danger); border-color: var(--tk-danger); }
.tk-path {
  font-family: var(--tk-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tk-ink);
  word-break: break-all;
}
.tk-hook {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--tk-line);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tk-ink-2);
}
.tk-op-desc { margin-top: 6px; font-size: 0.9rem; line-height: 1.75; }

/* Captions above a table and above an example — uppercase, tracked. */
.tk-cap {
  margin: 22px 0 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-ink-2);
}

/* ---- the tear line ---------------------------------------------------- */
/* A dashed rule across the ticket with a notch at each end. The notches are
   circles in the counter's colour centred on the ticket's edge; the ticket's
   `overflow: hidden` bites them in half. The inset shadow is the edge of the
   bite, in the ticket's own hairline. */
.tk-tear {
  position: relative;
  height: 0;
  margin: 0 var(--tk-notch);
  border-top: 2px dashed var(--tk-line);
}
.tk-tear::before,
.tk-tear::after {
  content: "";
  position: absolute;
  top: calc(var(--tk-notch) / -2 - 1px);
  width: var(--tk-notch);
  height: var(--tk-notch);
  border-radius: 50%;
  background: var(--tk-bg);
  box-shadow: inset 0 0 0 1px var(--tk-line);
}
.tk-tear::before { left: calc(var(--tk-notch) * -1.5); }
.tk-tear::after { right: calc(var(--tk-notch) * -1.5); }

/* ---- the stub --------------------------------------------------------- */
/* Below the tear line, on a wash of the accent: the part of the ticket the
   reader keeps. The overview's stub is in the "done" colour, because the
   version and host are the one settled thing on the page. */
.tk-stub { padding: 18px 26px 22px; background: var(--tk-accent-wash); }
.tk-stub--done { background: var(--tk-done); color: var(--tk-ink); }
.tk-stub-cap {
  margin: 14px 0 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-ink-2);
}
.tk-stub-cap:first-child { margin-top: 0; }
.tk-stub .tk-cap { margin-top: 16px; }

.tk-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tk-meta-item {
  font-family: var(--tk-mono);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tk-ink);
}
.tk-meta-item + .tk-meta-item::before { content: "·"; margin-right: 14px; font-weight: 400; opacity: 0.5; }
.tk-digest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; }
.tk-digest-k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tk-digest-v { font-family: var(--tk-mono); font-size: 0.72rem; overflow-wrap: anywhere; }

/* the signing-header strip: one chip per header */
.tk-headers { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-header {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--tk-line);
  border-radius: 999px;
  background: var(--tk-paper);
}
.tk-header-name { font-family: var(--tk-mono); font-size: 0.74rem; font-weight: 500; color: var(--tk-ink); }

/* status tags: 2xx in the "done" colour, 4xx/5xx in the danger colour,
   anything else on the pending wash */
.tk-statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-status {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  padding: 3px 12px 3px 4px;
  border-radius: 999px;
  background: var(--tk-pending-bg);
  color: var(--tk-ink);
  font-size: 0.78rem;
  line-height: 1.5;
}
.tk-status-code {
  flex: none;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-family: var(--tk-mono);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tk-status--ok { background: var(--tk-done); }
.tk-status--danger { background: var(--tk-danger); color: #FFFFFF; }
.tk-status--danger .tk-status-code { background: rgba(255, 255, 255, 0.2); }
.tk-status-desc { min-width: 0; overflow-wrap: anywhere; }

/* the callback pointer: a small line that links to the webhook's ticket */
.tk-callback {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px dashed var(--tk-accent);
  border-radius: var(--tk-radius);
  color: var(--tk-ink);
  text-decoration: none;
}
.tk-callback:hover { background: var(--tk-paper); }
.tk-callback .tk-path { font-size: 0.82rem; }
.tk-callback-t { font-size: 0.86rem; font-weight: 700; }

/* ---- tables ----------------------------------------------------------- */
/* Wide content scrolls inside its own container; the page never scrolls
   sideways. */
.tk-scroll { overflow-x: auto; max-width: 100%; }
.tk-scroll::-webkit-scrollbar { height: 8px; }
.tk-scroll::-webkit-scrollbar-thumb { background: var(--tk-line); border-radius: 4px; }

.tk-table { width: 100%; border-collapse: collapse; min-width: 480px; margin-top: 18px; }
.tk-table caption {
  padding: 0 0 8px;
  text-align: left;
  caption-side: top;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-ink-2);
}
.tk-table th {
  text-align: left;
  padding: 6px 12px 8px 0;
  border-bottom: 1px solid var(--tk-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-ink-2);
  white-space: nowrap;
}
/* Dashed row hairlines: every row is a small perforation of its own. */
.tk-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px dashed var(--tk-line);
  font-size: 0.86rem;
  line-height: 1.6;
  vertical-align: top;
}
.tk-table tr:last-child td { border-bottom: 0; }

.tk-td-name { white-space: nowrap; }
.tk-field { font-family: var(--tk-mono); font-size: 0.84rem; color: var(--tk-ink); }
/* The required mark is a small dot in the accent before the name. */
.tk-req {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--tk-accent);
}
.tk-td-type { font-family: var(--tk-mono); font-size: 0.76rem; color: var(--tk-ink-2); white-space: nowrap; }
.tk-td-desc { color: var(--tk-ink); }
.tk-constraint { margin-top: 4px; font-family: var(--tk-mono); font-size: 0.72rem; color: var(--tk-ink-2); }

.tk-stub .tk-table { margin-top: 12px; }
.tk-stub .tk-table th { border-bottom-color: var(--tk-ink-2); }

/* ---- markdown --------------------------------------------------------- */
.tk-prose { font-size: 0.94rem; line-height: 1.75; }
.tk-p { margin: 0 0 14px; }
.tk-p:last-child { margin-bottom: 0; }
.tk-strong { font-weight: 700; color: var(--tk-ink); }
.tk-link { color: var(--tk-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tk-line); }
.tk-link:hover { color: var(--tk-accent-3); text-decoration-color: currentColor; }

.tk-md-h { margin: 28px 0 10px; font-weight: 700; letter-spacing: -0.02em; color: var(--tk-ink); }
.tk-md-h1 { font-size: 1.14rem; }
.tk-md-h2 { font-size: 1rem; }
.tk-md-h3,
.tk-md-h4 { font-size: 0.92rem; }
.tk-prose > .tk-md-h:first-child { margin-top: 10px; }
.tk-op-desc .tk-md-h { margin: 18px 0 8px; font-size: 0.88rem; }

.tk-list { margin: 0 0 14px; padding-left: 22px; }
.tk-list li { margin: 4px 0; }

/* A blockquote in these specs is a caveat or a rule; it reads as a marked
   passage beside a rule in the accent, not as a quotation. */
.tk-quote {
  margin: 16px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--tk-accent);
  color: var(--tk-ink-2);
}
.tk-quote .tk-p { margin-bottom: 8px; }

.tk-table--md { min-width: 380px; margin: 6px 0 16px; }
.tk-table--md td { font-size: 0.84rem; }
.tk-table--md td:first-child { white-space: nowrap; }

/* ---- code ------------------------------------------------------------- */
/* Code sits in the deep accent — the one dark surface on the page — so a
   canonical string or a body read character by character stands apart from
   the paper around it. */
.tk-pre {
  margin: 8px 0 14px;
  padding: 12px 14px;
  border-radius: calc(var(--tk-radius) - 4px);
  background: var(--tk-accent-3);
  color: #F4F2FA;
  font-family: var(--tk-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre;
}
.tk-stub .tk-pre { margin-bottom: 0; }
.tk-code {
  padding: 0 5px;
  border-radius: 6px;
  background: var(--tk-accent-wash);
  font-family: var(--tk-mono);
  font-size: 0.86em;
  color: var(--tk-ink);
}
.tk-td-desc .tk-code,
.tk-status .tk-code { background: transparent; padding: 0; }

/* ---- states ----------------------------------------------------------- */
.tk-loading { grid-column: 1 / -1; padding: 80px 16px; text-align: center; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tk-ink-2); }
.tk-fail { grid-column: 1 / -1; padding: 70px 16px; text-align: center; }
.tk-fail h3 { margin: 0 0 8px; font-size: 1rem; color: var(--tk-ink); }
.tk-fail p { margin: 0; font-family: var(--tk-mono); font-size: 0.8rem; color: var(--tk-danger); }
.tk-foot { margin-top: 48px; padding: 0 4px; font-size: 0.72rem; color: var(--tk-ink-2); }

/* ---- narrow ----------------------------------------------------------- */
/* Under 900px the rail lies down: a horizontal strip of tabs across the top
   that scrolls sideways, still in the accent, the tabs' labels now upright.
   The pull-out becomes a pull-up. */
@media (max-width: 900px) {
  .tk-root { grid-template-columns: minmax(0, 1fr); }
  .tk-rail {
    position: sticky;
    top: var(--tk-top);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .tk-rail-inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    padding: 10px 12px 0;
  }
  .tk-tab-link {
    min-height: 0;
    flex: none;
    margin: 6px 0 0;
    padding: 9px 14px;
    border-radius: var(--tk-radius) var(--tk-radius) 0 0;
  }
  .tk-tab-label { writing-mode: horizontal-tb; letter-spacing: 0.08em; }
  .tk-tab-link.is-here { margin-top: 0; padding: 12px 14px 9px; box-shadow: none; }
  .tk-main { padding: 20px 16px 64px; }
  .tk-ticket-head { padding: 18px 16px 4px; }
  .tk-ticket-body { padding: 6px 16px 18px; }
  .tk-stub { padding: 16px 16px 18px; }
  .tk-tag { padding-top: 28px; }
  .tk-tag-head { font-size: 1.2rem; }
  .tk-table { min-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-root * { transition: none !important; scroll-behavior: auto !important; }
}