/* Components: cards, tabs, pills, search, theme picker, reference lists.
   Each block styles one element/class and reads tokens only. */

/* ---- Lists + empty states ---- */

.category-index-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.category-index-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color_border_default);
  border-radius: var(--radius-lg);
  background: var(--color_bg_layer);
  transition: border-color var(--duration-base);
}

.category-index-list li:has(a:hover),
.category-index-list li:has(a:focus-visible) {
  border-color: var(--color_border_hover);
}

.category-index-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color_fg_bold);
  font-weight: 500;
}

.category-index-list small {
  color: var(--color_fg_muted);
}

.empty-state,
.search-no-results {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--color_border_bold);
  border-radius: var(--radius-lg);
  color: var(--color_fg_muted);
  background: var(--color_bg_layer_alternate);
}

.search-no-results {
  grid-column: 1 / -1;
  justify-content: center;
}

/* ---- Search ---- */

search-box {
  display: block;
  margin-bottom: var(--space-5);
  position: relative;
}

search-results {
  display: block;
}

.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Two short words need more room per segment than the category labels to carry the same visual weight. */
.view-toolbar .segment {
  min-width: 5.5rem;
  min-height: 2.5rem;
  padding-inline: var(--space-5);
}

.view-count {
  min-width: 0;
  margin: 0;
  color: var(--color_fg_muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* List view: one tile-coloured row per result (same surface, mark and type as the grid tiles, but denser). */
.search-results-list {
  display: grid;
  gap: var(--space-2);
}

.result-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color_bg_tile);
  color: var(--color_fg_default);
  text-decoration: none;
}

.result-row:hover { text-decoration: none; }
.result-row:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.result-row .mark {
  align-self: center;
  width: 3rem;
  height: 3rem;
  background: var(--color_bg_tile_icon);
}
.result-row .mark img { width: 2rem; height: 2rem; }

.result-row .card-body { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-width: 0; }

.result-row h3 {
  margin: 0;
  color: var(--color_fg_bold);
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.35;
}

.result-row h3::after {
  content: '\2192';
  content: '\2192' / '';
  display: inline-block;
  margin-left: var(--space-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base), transform var(--duration-base);
}
.result-row:hover h3::after,
.result-row:focus-visible h3::after { opacity: 1; transform: none; }

.result-row p {
  margin: 0;
  overflow: hidden;
  color: var(--color_fg_tile_desc);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-row-cats { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* Narrow screens: no room beside the text, so the category drops under it and the summary may wrap. */
@media (max-width: 767px) {
  .result-row { flex-wrap: wrap; row-gap: var(--space-2); padding-right: var(--space-3); }
  .result-row p { white-space: normal; }
  .result-row-cats { flex-basis: 100%; justify-content: flex-start; padding-left: calc(3rem + var(--space-4)); padding-bottom: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .result-row h3::after { transform: none; transition: opacity var(--duration-base); }
}

/* ---- Browse controls: category switcher + search, then a one-line status ---- */
/* Same vocabulary as jwt.io's "JWT Decoder / JWT Encoder" switcher: a tinted pill track with a raised
   active segment (shared with the theme picker below). */

.browse-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.browse-controls search-box {
  flex: 1 1 16rem;
  max-width: 24rem;
  margin: 0;
}

.browse-controls search-box input {
  min-height: 2.75rem;
  padding-left: 2.75rem;
  border-color: var(--color_border_default);
  border-radius: var(--radius-pill);
  background:
    var(--color_bg_layer)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat 0.875rem center / 1.25rem;
}

.browse-controls { margin-bottom: var(--space-4); }

.browse-status {
  min-height: 1.5rem;
  margin: 0 0 var(--space-3);
  color: var(--color_fg_muted);
  font-size: var(--text-sm);
}

.browse-status:empty { display: none; }

/* Quiet: out of sight and out of flow, but still read by screen readers when it changes. */
.browse-status.is-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* While a search is active its results replace the category list and its status line. */
.discover.search-active #browse-list,
.discover.search-active .browse-status { display: none; }

/* ---- Segmented pill (category switcher + theme picker share this) ---- */

.segmented,
.theme-picker {
  position: relative;
  display: inline-flex;
  gap: 0.125rem;
  padding: var(--space-1);
  border: 1px solid var(--color_border_default);
  border-radius: var(--radius-pill);
  background: var(--color_bg_app_bar);
}

.segment,
.theme-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color_fg_nav);
  font-weight: 600;
  letter-spacing: -0.1px;
  transition: all var(--duration-base) ease;
}

.segment:hover,
.theme-option:hover {
  background: var(--color_bg_layer_alternate-bold);
  color: var(--color_fg_bold);
}

.segment[aria-checked='true'],
.theme-option[aria-checked='true'] {
  background: var(--color_bg_layer);
  color: var(--color_fg_bold);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Sliding thumb (segmented-thumb.js): one raised pill that glides to the active option. Once it exists
   (.has-thumb) the per-button active background is hidden so only the thumb is drawn. */
.seg-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--color_bg_layer);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.seg-thumb[hidden] { display: none; }

.has-thumb > :is(.segment, .theme-option, [role='tab']) {
  position: relative;
  z-index: 1;
}

.has-thumb > :is(.segment, .theme-option)[aria-checked='true'],
.has-thumb > [role='tab'][aria-selected='true'] {
  background: transparent;
  box-shadow: none;
}

.has-thumb > :is(.segment, .theme-option)[aria-checked='true']:hover { background: transparent; }

.segment {
  min-height: 2.25rem;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Wider than its row (enlarged text, or a long category name): scroll inside the track at any width. */
category-switcher { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
category-switcher::-webkit-scrollbar { display: none; }

/* Tablet and down: stack the filter above the search (side by side they wrap unevenly), search full width. */
@media (max-width: 1023px) {
  .browse-controls { flex-direction: column; align-items: stretch; }
  .browse-controls search-box { flex: none; max-width: none; }   /* column flow: the 16rem basis would become a height */
}

@media (max-width: 767px) {
  /* The labels do not fit on a phone: the track scrolls sideways, with a fade on whichever edge hides more. */
  category-switcher { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  category-switcher::-webkit-scrollbar { display: none; }
  category-switcher[data-fade='end'] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
  category-switcher[data-fade='start'] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
  category-switcher[data-fade='start end'] { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
}

/* ---- Theme picker (Auto / Light / Dark): the shared pill above, plus its icon segments ---- */

theme-toggle {
  display: block;
}

.theme-option {
  width: 2.5rem;
  height: 1.75rem;
}

.theme-option::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

/* ================= Page-level patterns ================= */

/* ---- Buttons (anchor + button) ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  max-width: 100%;   /* with enlarged text a label can be wider than the screen: cap the button and let the label wrap */
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color_bg_primary);
  color: var(--color_fg_on_primary);
}
.btn-primary:hover { background: var(--color_bg_primary_hover); }

.btn-secondary {
  background: transparent;
  border-color: var(--color_border_button);
  color: var(--color_fg_bold);
}
.btn-secondary:hover { background: var(--color_bg_button_hover); }

.btn-pill { border-radius: var(--radius-pill); }

.btn-sm {
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

/* ---- Glass glow (light theme; the dark theme draws its own gradient surface, so --glow_display is none) ---- */

.glow {
  --s: 1;   /* size scale: shrinks the pills on small screens */
  position: absolute;
  inset: 0;
  z-index: -1;
  display: var(--glow_display);
  overflow: hidden;
  pointer-events: none;
}

/* The four pills of the Figma group (4615:778): capsules turned -7.76 degrees, 50% fills, heavily blurred, so
   overlapping colours mix like light through frosted glass. Centre (--x, --y) and size are per pill. */
.glow-pill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  border-radius: 9999px;
  background: var(--c);
  opacity: var(--o, 0.5);
  transform: translate(-50%, -50%) rotate(-7.76deg);
  filter: blur(calc(4rem * var(--s)));
}

.glow-pill-pink { --c: var(--glow_pink); --w: 16rem; --h: 24rem; }
.glow-pill-coral { --c: var(--glow_coral); --w: 13rem; --h: 20rem; }
.glow-pill-indigo { --c: var(--glow_indigo); --w: 12.5rem; --h: 19rem; }
.glow-pill-cyan { --c: var(--glow_cyan); --w: 12.5rem; --h: 19rem; }

/* "How it works": glows in all four corners so the card is balanced, not weighted to the bottom edge: warm coral
   top-left, soft indigo bottom-right (the two strongest, on a diagonal), and fainter pink and cyan in the other two
   corners. Sizes are percentages of the section, so the composition keeps its shape on any width. */
.glow-soft .glow-pill-pink { display: block; }
.glow-soft .glow-pill {
  width: var(--pw);
  height: var(--ph);
  filter: blur(2.75rem);
}
.glow-soft .glow-pill-coral { --x: 6%; --y: -4%; --pw: 44%; --ph: 62%; --o: 0.32; }
.glow-soft .glow-pill-cyan { --x: 70%; --y: -8%; --pw: 34%; --ph: 56%; --o: 0.22; }
.glow-soft .glow-pill-pink { --x: 4%; --y: 108%; --pw: 30%; --ph: 50%; --o: 0.2; }
.glow-soft .glow-pill-indigo { --x: 94%; --y: 106%; --pw: 42%; --ph: 64%; --o: 0.3; }

/* The glass: a soft reflection, kept narrow so it does not wash out the top-left glow beneath it. */
.glow-soft::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0.06) 30%, transparent 50%);
}

/* Smaller screens shrink every variant (listed per variant so they beat the variant's own --s above). */
@media (max-width: 959px) { .glow, .glow-soft { --s: 0.7; } }
@media (max-width: 575px) { .glow, .glow-soft { --s: 0.5; } }

/* ---- Section heads ---- */

.section-head { margin-bottom: var(--space-5); }
.section-head h1,
.section-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.1; }
.section-head-sub {
  display: inline-block;   /* the gradient is painted per box; inline-block keeps it one smooth sweep across the words */
  background: var(--gradient_logo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Forced colours (high contrast mode) drops backgrounds, which would leave this text invisible: use a real colour. */
@media (forced-colors: active) {
  .section-head-sub { background: none; color: CanvasText; }
}
.section-head p { margin: 0; color: var(--color_fg_muted); }


/* ---- Breadcrumb + page head ---- */

/* One baseline for every crumb: each item is a same-height flex box centred on the row (the link used to
   carry its own padding while the current page did not, so the two sat at different heights). */
/* Back link: one quiet line above the page title, pointing at the parent page. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  margin-bottom: var(--space-5);
  color: var(--color_fg_muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.back-link:hover { color: var(--color_fg_bold); text-decoration: none; }
.back-link span { transition: transform var(--duration-base); }
.back-link:hover span { transform: translateX(-2px); }
.back-link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.page-head { margin-bottom: var(--space-6); }
.page-head h1 { font-size: var(--text-3xl); }
.page-head p { max-width: 60ch; color: var(--color_fg_muted); font-size: var(--text-lg); }

/* ---- Diagram page ----
   Same family as the home page: a large title, one lead line, the tags, then the diagram on its own stage and the references as the Browse tiles. */

/* Title, lead, intro prose and tags in one column; no facts card (protocol, category, step and participant counts added little). */
.diagram-intro { margin-bottom: var(--space-7); }

.diagram-status { margin: var(--space-3) 0 0; }

/* Intro prose runs the full page width, like the title and lead. */
.diagram-head { margin-bottom: var(--space-6); }
.diagram-prose p { color: var(--color_fg_default); font-size: var(--text-md); line-height: 1.7; }
.diagram-prose > :first-child { margin-top: 0; }

.diagram-head h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  line-height: 1.1;
}

.diagram-lead {
  margin: 0;
  color: var(--color_fg_muted);
  font-size: var(--text-lg);
}

/* Tags: quiet, mono, one wrapping row under the buttons. They describe the flow; they are not actions. */
.diagram-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.diagram-tags li { max-width: 100%; }

.diagram-tags a {
  display: block;
  overflow-wrap: anywhere;   /* a long tag breaks rather than widening the page when text is enlarged */
  padding: 0.125rem var(--space-3);
  border: 1px solid var(--color_border_default);
  background: var(--color_bg_tile_icon);
  border-radius: var(--radius-pill);
  color: var(--color_fg_muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
}

.diagram-tags a:hover { border-color: var(--color_fg_muted); color: var(--color_fg_bold); }

/* Text and diagram both use the full page width. */
.diagram-section { margin-bottom: var(--space-7); scroll-margin-top: 6rem; }
.diagram-body { max-width: none; }
.diagram-body > p { color: var(--color_fg_default); font-size: var(--text-md); line-height: 1.7; }
.diagram-body > interactive-diagram { max-width: none; margin-top: var(--space-6); }

/* References: two columns of the Browse tile, each a link out. */
.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-6);
}

.reference-block h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.4;
}

.reference-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color_bg_tile);
  color: var(--color_fg_default);
  text-decoration: none;
}

.reference-tile:hover { text-decoration: none; }

.reference-tile .mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--color_bg_tile_icon);
}

.reference-tile .ui-icon { width: 1.5rem; color: var(--color_fg_bold); }
.reference-tile .ui-icon[data-icon]::before { width: 1.5rem; height: 1.5rem; }

.reference-tile .card-body { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-width: 0; overflow-wrap: anywhere; }

.reference-title {
  color: var(--color_fg_bold);
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
}

.reference-title::after {
  content: '\2197';
  content: '\2197' / '';
  display: inline-block;
  margin-left: var(--space-2);
  opacity: 0;
  transform: translate(-4px, 2px);
  transition: opacity var(--duration-base), transform var(--duration-base);
}

.reference-tile:hover .reference-title::after,
.reference-tile:focus-visible .reference-title::after { opacity: 1; transform: none; }

.reference-host {
  color: var(--color_fg_tile_desc);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .reference-title::after { transform: none; transition: opacity var(--duration-base); }
}

@media (max-width: 575px) {
    .site-footer-bottom { align-items: flex-start; }
}

/* Touch devices: comfortable hit areas on primary controls. */
@media (pointer: coarse) {
  .btn,
  .back-link,
  .segment,
  .site-nav-link,
  .interactive-controls button,
  button.close {
    min-height: 2.75rem;
  }

  button.close { min-width: 2.75rem; }
  .theme-option { width: 2.75rem; height: 2.25rem; }
}