/* Service pages: product overview, the four question services, knowledge base, queue, my questions.
   Every service has a people side (form or content) and an AI side (endpoint and snippet).
   Tokens only. The shared .api-panel/.endpoint/.snippet classes are used where they exist;
   everything is also styled under the svc- prefix so these pages do not depend on them. */

/* ---------- shared bits ---------- */
.svc-section{padding-top:var(--space-6)}
.svc-section.section--band{padding-top:clamp(var(--space-7),7vw,var(--space-8));padding-bottom:clamp(var(--space-7),7vw,var(--space-8))}
.svc-small{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.svc-column{max-width:760px}
.svc-column>*{max-width:none}
.svc-actions{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center;margin:var(--space-6) 0 0;max-width:none}
.svc-actions--tight{margin-top:var(--space-4)}
.svc-actions[hidden],.svc-filters[hidden]{display:none}
.svc-count-line{font-size:14px;color:var(--ink-soft);min-height:1.5em;margin:var(--space-5) 0 var(--space-2)}
.svc-message{margin:var(--space-5) 0;padding:var(--space-5);border:var(--line);border-radius:12px;background:var(--paper-raised);color:var(--ink)}
.svc-message>p{max-width:none}
.svc-message>:last-child{margin-bottom:0}
.svc-prewrap{white-space:pre-wrap;overflow-wrap:anywhere}
.svc-optional{font-weight:400;color:var(--ink-soft)}
.svc-ways>*,.svc-search>*,.svc-filters>*,.svc-paper__row>*,.svc-products>*,.svc-numbers>*,.svc-example__pair>*,.svc-endpoints>*,.svc-read>*{min-width:0}
.svc-back{margin:var(--space-7) 0 0}
.svc-back a{display:inline-block;padding:var(--space-2) 0}

/* Small label above a heading: which side of the service this is. */
.svc-kicker{margin:0 0 var(--space-2);max-width:none;font-size:0.8125rem;font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--stamp-deep)}
.svc-kicker--ai{color:var(--machine-deep)}

/* ---------- endpoint line and method badge ---------- */
.svc-endpoint{display:flex;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);max-width:none;border:var(--line);border-radius:var(--radius);background:var(--paper-raised);color:var(--ink);font-size:0.875rem;line-height:1.5}
.svc-endpoint__path,.svc-endpoint code{padding:0;border:0;background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:0.875rem;overflow-wrap:anywhere;min-width:0}
.svc-method{flex:none;display:inline-block;min-width:3.4em;padding:2px var(--space-2);border:1px solid transparent;border-radius:4px;font-family:var(--font-mono);font-size:0.8125rem;font-weight:700;line-height:1.4;letter-spacing:.03em;text-align:center}
.svc-method--get{background:var(--ok-tint);color:var(--ok)}
.svc-method--post{background:var(--machine-tint);color:var(--machine-deep)}

/* ---------- services: product overview ---------- */
.svc-products{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.svc-product{margin:0;display:flex;flex-direction:column;border:var(--line);border-radius:12px;background:var(--paper-raised);color:var(--ink);overflow:hidden}
.svc-product__body{flex:1 1 auto;display:flex;flex-direction:column;padding:var(--space-6) var(--space-5) var(--space-5)}
.svc-product__body>*{margin:0;max-width:none}
.svc-product h2{font-size:1.75rem;line-height:1.15}
.svc-product h2 a{color:inherit;text-decoration:none}
.svc-product h2 a:hover{color:var(--link-hover);text-decoration:underline}
.svc-product__desc{margin-top:var(--space-3);font-size:1.0625rem;line-height:1.5}
.svc-product__when{margin-top:var(--space-4);font-size:0.9375rem;line-height:1.5;color:var(--ink-soft)}
.svc-product__label{display:block;margin:0 0 var(--space-1);max-width:none;font-size:0.8125rem;font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.svc-product__go{margin-top:auto;padding-top:var(--space-5)}
.svc-product__ai{padding:var(--space-4) var(--space-5) var(--space-5);border-top:var(--line);background:var(--paper)}
.svc-product__ai>*{max-width:none}
.svc-product__ai .svc-product__label{margin-bottom:var(--space-2);color:var(--machine-deep)}
.svc-product__ai .svc-endpoint{margin:0;padding:0;border:0;background:transparent}
.svc-product__note{margin:var(--space-1) 0 0;font-size:0.875rem;line-height:1.5;color:var(--ink-soft)}
.svc-product__note code{font-size:0.8125rem}

.svc-endpoints{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-6) var(--space-7);align-items:start}
.svc-endpoints__intro>*{max-width:none}
.svc-endpoints__intro h2{margin:0 0 var(--space-3)}
.svc-table-wrap{margin:0;position:relative}
.svc-table th,.svc-table td{padding:var(--space-3) var(--space-4);vertical-align:middle}
.svc-table tbody th{font-family:var(--font-display);font-size:1.0625rem;font-weight:600}
.svc-table code{font-size:0.8125rem}
.svc-table__endpoint{display:inline-flex;align-items:center;gap:var(--space-3);white-space:nowrap}
.svc-table__endpoint code{padding:0;border:0;background:transparent;color:var(--ink);font-size:0.875rem}
.svc-table--numbers td,.svc-table--numbers thead th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}

/* ---------- two ways to use a service ---------- */
.svc-ways{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.svc-ways--read{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-7)}
.svc-way>*{max-width:none}
.svc-way--form{padding:var(--space-6);border:var(--line);border-top:4px solid var(--stamp);border-radius:12px;background:var(--paper-raised);color:var(--ink)}
.svc-way h2,.svc-api h2{margin:0 0 var(--space-3);font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.15}
.svc-way__intro{margin:0 0 var(--space-6);color:var(--ink-soft)}

.svc-api{margin:0;max-width:none;padding:var(--space-6);border:var(--line);border-top:4px solid var(--machine);border-radius:12px;background:var(--paper);color:var(--ink);font-size:1rem;line-height:1.6;position:sticky;top:var(--space-5)}
.svc-api>*{max-width:none}
.svc-api>p{margin:0 0 var(--space-4)}
.svc-api code{font-size:0.875rem}
.svc-snippet{margin:0 0 var(--space-4)}
.svc-snippet .codeblock{white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.8125rem;line-height:1.7}
.svc-api__links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);margin:var(--space-5) 0 0;max-width:none;font-weight:700}
.svc-api>.svc-api__links{margin:var(--space-5) 0 0;padding-top:var(--space-4);border-top:var(--line)}
.svc-api__links a{display:inline-block;padding:var(--space-2) 0}

/* One compact AI line on reading pages. */
.svc-apiline{margin:var(--space-6) 0 0;padding:var(--space-5);border:var(--line);border-top:4px solid var(--machine);border-radius:12px;background:var(--paper);color:var(--ink);font-size:0.9375rem;line-height:1.55}
.svc-apiline>*{max-width:none}
.svc-apiline>p:last-child{margin:0}
.svc-apiline .svc-endpoint{margin-bottom:var(--space-3)}
.svc-apiline--wide{margin-top:var(--space-7)}

/* What to do next: one sentence and one button. */
.svc-next{margin:var(--space-7) 0 0;padding:var(--space-5);border-radius:12px;background:var(--paper-deep);color:var(--ink)}
.svc-next>*{max-width:none}
.svc-next>p:last-child{margin:0}
.svc-next--side{margin-top:0}

/* ---------- example ---------- */
.svc-example{margin:0 0 var(--space-7);padding-bottom:var(--space-6);border-bottom:var(--line)}
.svc-example__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-4)}
.svc-example__head h2{margin:0;font-family:var(--font-text);font-size:0.8125rem;font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--stamp-deep)}
.svc-example__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5) var(--space-7);align-items:start}
.svc-example__pair>*{margin:0}
.svc-example__pair p{margin:0;max-width:none}
.svc-example__pair .voice-human{font-size:1.125rem}
.svc-example__more{margin:var(--space-5) 0 0;max-width:none;font-size:0.9375rem;color:var(--ink-soft)}

/* ---------- knowledge base ---------- */
.svc-search{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-4);align-items:start}
.svc-search .field,.svc-filters .field,.svc-paper .field{margin-bottom:0;max-width:none}
.svc-search input,.svc-search select,.svc-filters select,.svc-paper input[type="text"],.svc-paper textarea,.svc-paper select{width:100%;max-width:100%;box-sizing:border-box}
.svc-entries{list-style:none;margin:0;padding:0;max-width:none}
.svc-entry{margin:0;padding:var(--space-5) 0;border-top:var(--line)}
.svc-entry:last-child{border-bottom:var(--line)}
.svc-entry>*{margin:0;max-width:none}
.svc-entry h2{font-size:1.375rem;line-height:1.25;margin:var(--space-1) 0 var(--space-2)}
.svc-entry h2 a{text-decoration-thickness:1px;text-underline-offset:3px}
.svc-entry__topic{margin:0;max-width:none;font-size:0.8125rem;font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}

.svc-read{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-7) var(--space-8);align-items:start}
.svc-article>*{max-width:var(--measure)}
.svc-article>p:not(.svc-entry__topic):not(.svc-back),.svc-article li{font-size:1.125rem;line-height:1.65}
.svc-article h2{font-size:1.5rem;line-height:1.25;margin:var(--space-7) 0 var(--space-3)}
.svc-article .svc-entry__topic+h2{margin-top:var(--space-3)}
.svc-article__steps{padding-left:1.3em}
.svc-article__steps li{padding:var(--space-1) 0 var(--space-1) var(--space-1)}
.svc-read__side{position:sticky;top:var(--space-5)}

/* ---------- question form ---------- */
.svc-paper{display:block}
.svc-paper .field+.field,.svc-paper .field+.svc-paper__row,.svc-paper__row{margin-top:var(--space-6)}
.svc-paper .svc-paper__row>.field{margin-top:0}
.svc-paper textarea{min-height:10em;resize:vertical}
.svc-paper__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--space-6) var(--space-5);align-items:start}
.svc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-1) var(--space-4)}
.svc-meta .field__help{flex:1 1 14rem;min-width:0}
.svc-count{font-size:14px;color:var(--ink-soft);margin:0 0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.svc-paper [aria-invalid="true"]{border-color:var(--stamp);border-width:3px}
.svc-consent{margin-top:var(--space-6)}
.svc-consent .checkline{margin:0;max-width:none}
.svc-consent .field__error{margin-top:var(--space-2)}
.svc-form-response{margin-top:var(--space-4)}
.svc-form-response:not(:empty){border-left:6px solid var(--stamp);border-radius:4px;background:var(--paper);color:var(--ink);padding:var(--space-3) var(--space-4);font-weight:700}
.svc-paper .svc-actions{margin-top:var(--space-5)}
.svc-after{margin:var(--space-5) 0 0;padding-top:var(--space-4);border-top:var(--line);max-width:none;font-size:0.9375rem;line-height:1.55;color:var(--ink-soft)}

/* ---------- queue ---------- */
.svc-numbers{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.svc-number{margin:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);border:var(--line);border-radius:12px;background:var(--paper-raised);color:var(--ink)}
.svc-number__value{font-family:var(--font-display);font-size:clamp(2.75rem,6vw,4rem);font-weight:700;line-height:1;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.svc-number--queued .svc-number__value{color:var(--wait)}
.svc-number--claimed .svc-number__value{color:var(--machine-deep)}
.svc-number--answered .svc-number__value{color:var(--ok)}
.svc-number__label{font-size:1rem;font-weight:700;line-height:1.4}
.svc-way h2.svc-subhead{margin:var(--space-7) 0 var(--space-4);font-size:1.5rem;line-height:1.25}

/* ---------- my questions ---------- */
.svc-filters{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.svc-empty{color:var(--ink);background:var(--paper-raised)}
.svc-empty>*{max-width:none}
.svc-empty>p:last-child{margin:0}
.svc-list{list-style:none;margin:var(--space-2) 0 0;padding:0}
.svc-list li{margin:0;padding:var(--space-4) 0;border-top:var(--line);display:grid;gap:var(--space-2)}
.svc-list li:last-child{border-bottom:var(--line)}
.svc-list__title{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere;padding:var(--space-1) 0}
.svc-list__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}

/* ---------- one question ---------- */
.svc-question__status{margin:0 0 var(--space-3)}
.svc-question__title{margin:0 0 var(--space-4);overflow-wrap:anywhere}
.svc-detail{background:var(--paper-raised);color:var(--ink);border:var(--line);border-radius:12px;padding:var(--space-5);margin-bottom:var(--space-3)}
.svc-question h2:not(.svc-question__title){font-size:1.5rem;line-height:1.25;margin:var(--space-7) 0 var(--space-4)}
.svc-waiting{margin:var(--space-6) 0 0;padding:var(--space-5);border-radius:12px;background:var(--wait-tint);color:var(--ink)}
.svc-waiting>p{margin:0;max-width:none}
.svc-waiting>.svc-actions{margin-top:var(--space-4)}
.svc-history{list-style:none;margin:0;padding:0}
.svc-history li{margin:0;padding:var(--space-3) 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-4);border-top:var(--line)}
.svc-history li:last-child{border-bottom:var(--line)}
.svc-question__end{justify-content:space-between}

@media (max-width:1040px){
  .svc-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-endpoints{grid-template-columns:1fr}
}
@media (max-width:960px){
  .svc-ways,.svc-ways--read,.svc-read{grid-template-columns:1fr}
  .svc-api,.svc-read__side{position:static}
}
@media (max-width:620px){
  .svc-products,.svc-search,.svc-filters,.svc-example__pair{grid-template-columns:1fr}
  .svc-way--form,.svc-api{padding:var(--space-5) var(--space-4)}
  .svc-numbers{gap:var(--space-2)}
  .svc-number{padding:var(--space-4) var(--space-3)}
  .svc-number__label{font-size:0.875rem}
}
@media (forced-colors:active){
  .svc-product,.svc-number,.svc-detail,.svc-message,.svc-next,.svc-waiting,.svc-api,.svc-apiline,.svc-endpoint,.svc-method,.svc-way--form{border:1px solid CanvasText}
  .svc-form-response:not(:empty){border-color:CanvasText}
}
@media print{
  .svc-api,.svc-read__side{position:static}
}
.svc-count-line:empty{min-height:0;margin:0 0 var(--space-2)}
.svc-api>.svc-kicker{margin-bottom:var(--space-2)}