/* Generated by scripts/build-tokens.mjs from @prioticket/design-system-web 1.10.1 and @prioticket/design-tokens-material-web 1.3.0. Do not edit. */
:root{--md-sys-color-primary:#006eff;--md-sys-color-on-primary:#ffffff;--md-sys-color-primary-container:#f2f8ff;--md-sys-color-on-primary-container:#006eff;--md-sys-color-success-container:#f4fcf4;--md-sys-color-on-success-container:#20cc20;--md-sys-color-warning-container:#fff9f3;--md-sys-color-on-warning-container:#fb8f14;--md-sys-color-surface:#ffffff;--md-sys-color-on-surface:#080808;--md-sys-color-on-surface-variant:#6d6d6d;--md-sys-color-outline:#d1d1d1;--md-sys-color-outline-variant:#eaeaea;--md-sys-color-surface-container-low:#ffffff;--md-sys-color-surface-container:#fcfcfc;--md-sys-color-surface-container-high:#eaeaea;--md-sys-color-primary-hover:#006eff0d;--md-sys-color-primary-focus:#006eff1a;--md-sys-color-primary-pressed:#006eff26;--md-sys-color-on-primary-hover:#ffffff0d;--md-sys-color-on-primary-focus:#ffffff1a;--md-sys-color-on-surface-hover:#0808080d;--md-sys-color-on-surface-focus:#0808081a;--md-sys-outline-width:1px;--md-sys-outline-width-medium:2px;--md-sys-shape-corner-small:5px;--md-sys-spacing-100:4px;--md-sys-spacing-200:8px;--md-sys-spacing-300:12px;--md-sys-spacing-400:16px;--md-sys-spacing-600:24px;--md-sys-spacing-800:32px;--md-sys-spacing-1000:40px;--md-sys-padding-200:8px;--md-sys-padding-300:12px;--md-sys-padding-400:16px;--md-sys-padding-500:20px;--md-sys-padding-600:24px;--md-sys-padding-800:32px;--md-sys-typescale-title-medium-weight:500;--md-sys-typescale-title-medium-weight-prominent:600;--md-sys-typescale-title-medium-size:1rem;--md-sys-typescale-title-medium-tracking:0;--md-sys-typescale-title-medium-line-height:1.5rem;--md-sys-typescale-title-small-size:0.875rem;--md-sys-typescale-title-small-line-height:1.25rem;--md-sys-typescale-label-large-weight:500;--md-sys-typescale-label-large-weight-prominent:600;--md-sys-typescale-label-large-size:0.875rem;--md-sys-typescale-label-large-tracking:0.02143em;--md-sys-typescale-label-large-line-height:1.25rem;--md-sys-typescale-headline-medium-weight:500;--md-sys-typescale-headline-medium-size:1.75rem;--md-sys-typescale-headline-medium-tracking:0;--md-sys-typescale-headline-medium-line-height:2.25rem;--md-sys-typescale-body-large-weight:400;--md-sys-typescale-body-large-size:1rem;--md-sys-typescale-body-large-tracking:0;--md-sys-typescale-body-large-line-height:1.5rem;--md-sys-typescale-body-medium-font:Proxima Nova;--md-sys-typescale-body-medium-weight:400;--md-sys-typescale-body-medium-size:0.875rem;--md-sys-typescale-body-medium-tracking:0.00714em;--md-sys-typescale-body-medium-line-height:1.25rem}
@font-face{font-family:"Proxima Nova";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/proxima-nova-400.0444ba0a2d.woff2") format("woff2")}
@font-face{font-family:"Proxima Nova";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/proxima-nova-500.4bdfd8ae01.woff2") format("woff2")}
@font-face{font-family:"Proxima Nova";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/proxima-nova-600.30520bdb73.woff2") format("woff2")}
/*
 * Dark theme: OUR OWN values, not the design system's (design-system gap: @prioticket/design-system-web
 * ships a light theme only). The values are the ones servers/distributor-api/ui/shared/theme-dark.css
 * uses (owner decision 2026-09-28 to keep a dark mode under the same token names), reduced to the
 * names this page uses, so the catalogue and the server pages look alike. Until the design system
 * ships a dark theme this is a copy: a change to a value goes into both files. Raise it with the
 * design system owners before treating these as house style.
 *
 * Only --md-sys-* names the package defines are set (test/theme.test.mjs checks that and the
 * contrast: text at least 4.5:1, controls and focus rings at least 3:1, on the surfaces they sit on).
 * scripts/build.mjs puts this block after the generated light tokens in the served styles.css.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --md-sys-color-primary: #7cb1ff;
    --md-sys-color-on-primary: #001a40;
    --md-sys-color-primary-container: #10284a;
    --md-sys-color-on-primary-container: #b3d0ff;
    --md-sys-color-surface: #161616;
    --md-sys-color-on-surface: #ededed;
    --md-sys-color-on-surface-variant: #ababab;
    --md-sys-color-surface-container-low: #1a1a1a;
    --md-sys-color-surface-container: #1e1e1e;
    --md-sys-color-surface-container-high: #2c2c2c;
    --md-sys-color-outline: #5c5c5c;
    --md-sys-color-outline-variant: #353535;
    --md-sys-color-success-container: #12351c;
    --md-sys-color-on-success-container: #8fdf8f;
    --md-sys-color-warning-container: #3b2709;
    --md-sys-color-on-warning-container: #ffc680;
    --md-sys-color-on-surface-hover: #ededed0f;
    --md-sys-color-on-surface-focus: #ededed1f;
    --md-sys-color-on-primary-hover: #001a400d;
    --md-sys-color-on-primary-focus: #001a401a;
    --md-sys-color-primary-hover: #7cb1ff0d;
    --md-sys-color-primary-focus: #7cb1ff1a;
    --md-sys-color-primary-pressed: #7cb1ff26;
  }
}

/* Prioticket MCP catalogue.
   Every colour, type style, shape, spacing and state layer is a --md-sys-* token from the
   Prioticket design system (@prioticket/design-system-web, exact pin). scripts/build.mjs puts
   the light values from the installed package (only the tokens used here), Proxima Nova (self-hosted)
   and our own dark block (src/theme-dark.css) in front of this file in the served styles.css.
   No raw colour value belongs in this file: test/theme.test.mjs fails on any.

   Component specs followed (the installed package's COMPONENT-DOCUMENTATION.md and component sources):
   App bar Small flat; Stacked card Outlined (1px Outline Variant, 5px shape); Badge label (container,
   24px, Label Large); Button filled and text, 40px drawn with a 48px target, 5px shape; Alert Minor
   (Primary Container, 5px shape, 12px padding); Snackbar. Deviations are marked "Deviation" and listed
   in the README. Prototype implementation: no coded components are used, only tokens and fonts. */

:root {
  color-scheme: light dark;

  /* Type styles, composed from the design system's typescale tokens. */
  --pt-font: var(--md-sys-typescale-body-medium-font), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Gap: the design system ships no monospace face (Hack was named before and never loaded). */
  --pt-font-code: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --text-headline: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size) / var(--md-sys-typescale-headline-medium-line-height) var(--pt-font);
  --text-title-medium: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size) / var(--md-sys-typescale-title-medium-line-height) var(--pt-font);
  --text-body-large: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--pt-font);
  --text-body-medium: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--pt-font);
  --text-label-large: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size) / var(--md-sys-typescale-label-large-line-height) var(--pt-font);
  --text-label-large-emphasized: var(--md-sys-typescale-label-large-weight-prominent) var(--md-sys-typescale-label-large-size) / var(--md-sys-typescale-label-large-line-height) var(--pt-font);

  /* Deviation (contrast): the design system's Primary is 4.49:1 against white, just under the 4.5:1
     that WCAG AA asks for text (and 4.38:1 on Surface Container), and its On-Primary-Container text
     reaches only 4.2:1 on its container. Ours mixes a little On-Surface into Primary for text and for
     the filled button, and 60% On-Success/Warning/Primary-Container with On-Surface for badges and
     notes, keeping the hue. Measured in test/theme.test.mjs. Raise with the design system owners (#34). */
  --pt-primary: color-mix(in srgb, var(--md-sys-color-primary) 94%, var(--md-sys-color-on-surface));
  --pt-on-info-container: color-mix(in srgb, var(--md-sys-color-on-primary-container) 60%, var(--md-sys-color-on-surface));
  --pt-on-success-container: color-mix(in srgb, var(--md-sys-color-on-success-container) 60%, var(--md-sys-color-on-surface));
  --pt-on-warning-container: color-mix(in srgb, var(--md-sys-color-on-warning-container) 60%, var(--md-sys-color-on-surface));

  --margin: var(--md-sys-spacing-400);        /* Layout/Compact margin */
  --gutter: var(--md-sys-spacing-400);
}

@media (min-width: 768px) { :root { --margin: var(--md-sys-spacing-800); } }                                  /* Layout/Medium */
@media (min-width: 1280px) { :root { --margin: var(--md-sys-spacing-1000); --gutter: var(--md-sys-spacing-600); } } /* Layout/Large */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--text-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -100px;
  padding: var(--md-sys-padding-200) var(--md-sys-padding-400);
  background: var(--md-sys-color-surface);
  color: var(--pt-primary);
  border-radius: var(--md-sys-shape-corner-small);
  z-index: 10;
}
.skip-link:focus { top: var(--md-sys-spacing-300); }

/* Focus indicator: 2px solid Primary. Gap: the design system leaves the offset open · 2px used, so the
   ring sits on the surface and stays visible on a filled button too (3:1 or more, see the test). */
:focus-visible {
  outline: var(--md-sys-outline-width-medium) solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

a { color: var(--pt-primary); }

/* App bar · Small, Elevation=Flat: 64px, 8px vertical padding, no fill */
.app-bar {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-300);
  height: 64px;
  padding: var(--md-sys-padding-200) var(--margin);
}
/* Brand logo · Size=XSmall 112 x 24, never scaled */
.brand img { display: block; width: 112px; height: 24px; }

main, .footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--margin);
}

.intro { padding: var(--md-sys-padding-400) 0 var(--md-sys-padding-600); max-width: 720px; }
/* Page title: no approved component (gap) · Headline Medium used */
.intro h1, .detail h1 { margin: 0 0 var(--md-sys-spacing-200); font: var(--text-headline); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); }
.intro p { margin: 0; color: var(--md-sys-color-on-surface-variant); font: var(--text-body-large); letter-spacing: var(--md-sys-typescale-body-large-tracking); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--gutter);
  align-items: start;
}

/* Stacked card · Style=Outlined (internal padding is a gap · Spacing/400 used) */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-300);
  min-width: 0;
  padding: var(--md-sys-padding-400);
  background: var(--md-sys-color-surface-container-low);
  border: var(--md-sys-outline-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

.card-head { display: flex; flex-direction: column; gap: var(--md-sys-spacing-200); }
/* Title slot: Text/Title/Medium */
.card-title { margin: 0; font: var(--text-title-medium); letter-spacing: var(--md-sys-typescale-title-medium-tracking); }
/* Supporting text slot: Text/Body/Medium */
.card-description, .facts, .note, .hint {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--text-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

/* Badge label · Label only, Container=True. Semantic colours as the design system defines them;
   Deviation: the text colours are the mixed --pt-on-* values above, because the package's own reach 2.1 to 4.2:1. */
.labels { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-200); margin: 0; padding: 0; list-style: none; }
.label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 2px var(--md-sys-padding-200) 2px var(--md-sys-padding-300);
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--text-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  /* Semantic=Neutral */
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: inset 0 0 0 var(--md-sys-outline-width) var(--md-sys-color-outline-variant);
}
.label-live { background: var(--md-sys-color-success-container); color: var(--pt-on-success-container); box-shadow: none; }
.label-staging { background: var(--md-sys-color-warning-container); color: var(--pt-on-warning-container); box-shadow: none; }
.label-sandbox { background: var(--md-sys-color-primary-container); color: var(--pt-on-info-container); box-shadow: none; }

/* Alert · Severity=Minor (Primary Container, 5px shape, 12px padding). No leading icon: we load no icon font (gap). */
.alert {
  margin: 0;
  padding: var(--md-sys-padding-300);
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--text-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.alert-minor { background: var(--md-sys-color-primary-container); color: var(--pt-on-info-container); }

.facts { display: grid; gap: var(--md-sys-spacing-100); }
.facts div { display: flex; gap: var(--md-sys-spacing-200); }
.facts dt { flex: none; min-width: 72px; color: var(--md-sys-color-on-surface); font-weight: var(--md-sys-typescale-label-large-weight); }
.facts dd { margin: 0; }

.url-row, .code-row, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-200); }
.url, .code, code {
  font-family: var(--pt-font-code);
  font-size: 0.75rem;
  line-height: 1.25rem;
  letter-spacing: 0.5px;       /* Text/Code/Code */
}
.url, .code {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  padding: var(--md-sys-padding-200) var(--md-sys-padding-300);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--md-sys-color-on-surface);
  /* Code container is a design system gap */
  background: var(--md-sys-color-surface-container);
  border: var(--md-sys-outline-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}
/* Commands wrap only at spaces, so flags like --transport stay whole */
.code { overflow-wrap: normal; overflow-x: auto; }

/* Button - Primary / Button - Text · Size=Small: 40px visual, 48px target */
.button, .howto summary, .links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--md-sys-padding-400);
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--text-label-large-emphasized);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  cursor: pointer;
}
.button::before, .howto summary::before, .links a::before { content: ""; position: absolute; inset: -4px 0; }

.button-filled {
  background: var(--pt-primary);
  color: var(--md-sys-color-on-primary);
}
.button-filled:hover, .button-filled:active { background-image: linear-gradient(var(--md-sys-color-on-primary-hover), var(--md-sys-color-on-primary-hover)); }
.button-filled:focus-visible { background-image: linear-gradient(var(--md-sys-color-on-primary-focus), var(--md-sys-color-on-primary-focus)); }

.button-text, .howto summary, .links a {
  background: transparent;
  color: var(--pt-primary);
}
.button-text:hover, .howto summary:hover, .links a:hover { background: var(--md-sys-color-primary-hover); }
.button-text:focus-visible, .howto summary:focus-visible, .links a:focus-visible { background: var(--md-sys-color-primary-focus); }
.button-text:active, .howto summary:active, .links a:active { background: var(--md-sys-color-primary-pressed); }

.links { margin: 0 0 0 calc(-1 * var(--md-sys-spacing-400)); display: flex; flex-wrap: wrap; }

.howto { margin: 0 0 0 calc(-1 * var(--md-sys-spacing-400)); }
.howto[open] { margin-left: 0; }
.howto[open] summary { margin-left: calc(-1 * var(--md-sys-spacing-400)); }
.howto summary { list-style: none; width: fit-content; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: "+"; margin-left: var(--md-sys-spacing-200); }
.howto[open] summary::after { content: "\2212"; }
/* Header item · Label text: Text/Title/Medium-emphasized */
.howto h3, .detail h2, .detail h3 {
  margin: var(--md-sys-spacing-400) 0 var(--md-sys-spacing-100);
  font: var(--text-title-medium);
  font-weight: var(--md-sys-typescale-title-medium-weight-prominent);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.howto ol, .steps { margin: 0; padding-left: var(--md-sys-padding-500); font: var(--text-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }
.howto li, .steps li { margin: var(--md-sys-spacing-100) 0; }
.howto li > .code-row, .steps li > .code-row { margin-top: var(--md-sys-spacing-200); }
.hint { margin-top: var(--md-sys-spacing-200); }
/* Hint under the Add to Claude link sits close to the row it explains */
.card > .hint { margin-top: calc(-1 * var(--md-sys-spacing-100)); }

/* Detail page of one server (/<name>): one column, the same components as the card */
.crumb { margin: 0; padding: var(--md-sys-padding-200) 0 0; font: var(--text-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); }
.detail { display: flex; flex-direction: column; gap: var(--md-sys-spacing-300); max-width: 720px; padding: var(--md-sys-padding-400) 0 var(--md-sys-padding-600); }
.detail .card-description { font: var(--text-body-large); letter-spacing: var(--md-sys-typescale-body-large-tracking); }
.detail h2 { margin-top: var(--md-sys-spacing-300); }
.detail h3 { font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); }
.detail .facts { padding: var(--md-sys-padding-400); background: var(--md-sys-color-surface-container-low); border: var(--md-sys-outline-width) solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); }
.detail .links { margin-left: 0; }

.footer { padding-top: var(--md-sys-padding-800); padding-bottom: 48px; color: var(--md-sys-color-on-surface-variant); font: var(--text-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }

/* Snackbar · Text only, One line, Type=Default: 344px, 12px padding */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: var(--md-sys-spacing-400);
  width: 344px;
  max-width: calc(100% - 2 * var(--margin));
  padding: var(--md-sys-padding-300);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--pt-on-info-container);
  font: var(--text-label-large);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  /* Hidden by opacity only: the status region stays in the accessibility tree, so a message put into it is announced. */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 150ms ease;
}
.snackbar.is-visible { opacity: 1; }
.snackbar:empty { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .snackbar { transition: none; }
}

@media (forced-colors: active) {
  .label, .alert, .url, .code, .snackbar { border: 1px solid CanvasText; }
}