/* ==========================================================================
   Cloud Services Catalogue — Henaket (Հենակետ) design system
   Tokens copied verbatim from @henaket/shared (theme.ts / antd.theme.ts / fonts.ts).
   Legal basis: RA Government Decision N 153-Ն §32–59.
   ========================================================================== */

:root {
  /* Brand */
  --primary: #355C8C;
  --secondary: #56B7B2;
  --accessibility: #BD13B8;

  /* Blue ramp */
  --blue100: #F0F4F9; --blue200: #DDE5EE; --blue300: #CBD6E3; --blue400: #B8C6D8;
  --blue500: #A5B7CD; --blue600: #8099B8; --blue700: #5A7AA2; --blue800: #355C8C;
  --blue900: #2A4A70; --blue1000: #203754; --blue1100: #152538; --blue1200: #0B121C;

  /* Green ramp */
  --green100: #F6FFFF; --green200: #EEF8F7; --green300: #DDF1F0; --green400: #CCE9E8;
  --green800: #56B7B2; --green900: #45928E; --green1000: #346E6B;

  /* Text */
  --text100: #FFFFFF; --text500: #999999; --text600: #747474;
  --text700: #454545; --text800: #1A1A1A;

  /* Links */
  --linkMain: #004D99; --linkActive: #000040; --linkVisited: #800080;

  /* System */
  --success: #358000; --successLight: #EEFFE2;
  --info: #1B86C3;    --infoLight: #E2F2FB;
  --error: #CC0000;   --errorLight: #FFE0E0;
  --warning: #FEBB30; --warningLight: #FFEECC;

  /* Backgrounds */
  --backgroundWhite: #FFFFFF;
  --backgroundAlternative: #F5F5F5;
  --overlay: #1A1A1A66;

  /* Typography */
  --font: "Noto Sans", "Noto Sans Armenian", Arial, sans-serif;
  --fontArm: "Noto Sans Armenian", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing — 8px scale, 4px fine step (§36/§37) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 40px; --s7: 48px; --s8: 64px;

  /* Grid — 12 columns, 32px gutter (§34/§35) */
  --gutter: 32px;

  /* Elevation */
  --shadowCard: 0 2px 4px 0 #0000000D;
  --shadowCardHover: 0 2px 8px 0 #00000026;
  --shadowModal: 0 8px 16px 0 #0000004D;

  --header-h: 72px;
  --sidebar-w: 272px;
}

/* Service-tier ramp — monochrome blue by criticality (data-viz palette is charts only) */
:root {
  --tier-T1: #203754; --tier-T2: #355C8C; --tier-T3: #5A7AA2; --tier-T4: #8099B8;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;              /* body (§50) */
  line-height: 24px;            /* line-height MD */
  color: var(--text800);
  background: var(--backgroundAlternative);
  overflow-x: hidden;           /* no horizontal scroll at any width (§32) */
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.25; color: var(--text800); }
h1 { font-size: 40px; font-weight: 700; }   /* H1 = Bold 700 (§48) */
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }

p { margin: 0 0 var(--s3); }

a { color: var(--linkMain); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--linkVisited); }
a:active { color: var(--linkActive); }
a:hover { text-decoration-thickness: 2px; }

code, pre, kbd { font-family: var(--mono); }
code {
  font-size: 0.875em;
  background: var(--blue100);
  border: 1px solid var(--blue300);
  padding: 1px 4px;
  border-radius: 0;
  word-break: break-word;
}
pre {
  background: var(--blue100);
  border: 1px solid var(--blue300);
  padding: var(--s3);
  overflow-x: auto;
  margin: 0 0 var(--s3);
}
pre code { background: none; border: 0; padding: 0; font-size: 13px; }

hr { border: 0; border-top: 1px solid var(--blue400); margin: var(--s4) 0; }

/* Focus indicator — box-shadow 0 0 0 3px #BD13B8 with pulse (§43/§44) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accessibility);
  animation: hk-focus-pulse 300ms ease-in-out;
}
@keyframes hk-focus-pulse {
  from { box-shadow: 0 0 0 3px var(--accessibility); }
  50%  { box-shadow: 0 0 0 6px var(--accessibility); }
  to   { box-shadow: 0 0 0 3px var(--accessibility); }
}
@media (prefers-reduced-motion: reduce) {
  :focus-visible { animation: none; }
  * { scroll-behavior: auto !important; }
}

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

.hk-skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 100;
  background: var(--primary); color: var(--text100); padding: var(--s2) var(--s3);
  text-decoration: none;
}
.hk-skip:focus { top: var(--s2); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hk-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5);
  background: var(--backgroundWhite);
  border-bottom: 1px solid var(--blue400);
}

.hk-brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; flex: 0 1 auto; min-width: 0; }
.hk-brand:visited { color: inherit; }
.hk-brand__mark {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  background: var(--primary); color: var(--text100);
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.hk-brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hk-brand__text strong { font-size: 16px; font-weight: 600; }
.hk-brand__text small { font-size: 13px; color: var(--text600); }
.hk-brand__text strong, .hk-brand__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hk-search { display: flex; gap: var(--s2); flex: 1 1 auto; max-width: 620px; margin-left: auto; }
.hk-search .hk-input { flex: 1 1 auto; }

.hk-header__actions { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }

.hk-langtoggle { display: flex; border: 1px solid var(--blue400); }
.hk-langtoggle button {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 10px; border: 0; background: var(--backgroundWhite);
  color: var(--text700); cursor: pointer;
}
.hk-langtoggle button + button { border-left: 1px solid var(--blue400); }
.hk-langtoggle button.is-active { background: var(--primary); color: var(--text100); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.hk-layout { display: flex; align-items: flex-start; }

.hk-sidebar {
  position: sticky; top: var(--header-h);
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--backgroundWhite);
  border-right: 1px solid var(--blue400);
  padding: var(--s4) 0 var(--s7);
}

.hk-navgroup { margin-bottom: var(--s4); }
.hk-navgroup__title {
  font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text600); padding: 0 var(--s4) var(--s2);
}
.hk-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 8px var(--s4); color: var(--text700); text-decoration: none;
  border-left: 3px solid transparent; font-size: 15px;
}
.hk-nav a:visited { color: var(--text700); }
.hk-nav a:hover { background: var(--blue100); color: var(--primary); }
.hk-nav a.is-active {
  background: var(--blue100); color: var(--primary);
  border-left-color: var(--primary); font-weight: 600;
}
.hk-nav__count { font-size: 12px; color: var(--text600); font-variant-numeric: tabular-nums; }

.hk-main { flex: 1 1 auto; min-width: 0; padding: var(--s5) var(--gutter) var(--s8); }
.hk-main:focus { outline: none; }
.hk-view { max-width: 1180px; min-width: 0; }

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

.hk-input {
  font: inherit; font-size: 15px;
  padding: 8px 12px; min-height: 40px;
  border: 1px solid var(--blue400); border-radius: 0;
  background: var(--backgroundWhite); color: var(--text800);
  width: 100%;
}
.hk-input::placeholder { color: var(--text500); }
.hk-input:hover { border-color: var(--blue700); }
.hk-input:focus { border-color: var(--primary); }

select.hk-input { min-width: 140px; cursor: pointer; }

.hk-btn {
  font: inherit; font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--blue400); border-radius: 0;
  background: var(--backgroundWhite); color: var(--text700);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.hk-btn:visited { color: var(--text700); }
.hk-btn:hover { border-color: var(--primary); color: var(--primary); }
.hk-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--text100); }
.hk-btn--primary:visited { color: var(--text100); }
.hk-btn--primary:hover { background: var(--blue900); border-color: var(--blue900); color: var(--text100); }
.hk-btn--ghost { border-color: transparent; background: transparent; }
.hk-btn--sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* Tag / label — radius 0 (square), border blue400.
   Text wraps rather than forcing the page wider on narrow viewports (§32). */
.hk-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 0;
  border: 1px solid var(--blue400); background: var(--blue100);
  color: var(--text700); font-size: 13px; font-weight: 500; line-height: 20px;
  max-width: 100%; overflow-wrap: anywhere;
}
.hk-tag--primary { background: var(--primary); border-color: var(--primary); color: var(--text100); }
.hk-tag--outline { background: transparent; }
/* Status tags carry meaning through the bordered Light background; text stays
   text800 so every pairing clears WCAG AA (info main on infoLight is only 3.5:1). */
.hk-tag--success { background: var(--successLight); border-color: var(--success); color: var(--text800); }
.hk-tag--info { background: var(--infoLight); border-color: var(--info); color: var(--text800); }
.hk-tag--warning { background: var(--warningLight); border-color: var(--warning); color: var(--text800); }
.hk-tag--error { background: var(--errorLight); border-color: var(--error); color: var(--text800); }

.hk-tier {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 0; border: 1px solid transparent;
  color: var(--text100); font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap;
}
.hk-tier[data-tier="T1"] { background: var(--tier-T1); }
.hk-tier[data-tier="T2"] { background: var(--tier-T2); }
.hk-tier[data-tier="T3"] { background: var(--tier-T3); }
.hk-tier[data-tier="T4"] { background: var(--tier-T4); }

.hk-card {
  background: var(--backgroundWhite);
  border: 1px solid var(--blue400);
  box-shadow: var(--shadowCard);
  padding: var(--s4);
  min-width: 0;
  overflow-wrap: break-word;
}
a.hk-card { display: block; text-decoration: none; color: inherit; }
a.hk-card:visited { color: inherit; }
a.hk-card:hover { box-shadow: var(--shadowCardHover); border-color: var(--primary); }

.hk-alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3); border: 1px solid var(--info); background: var(--infoLight);
  margin-bottom: var(--s4); font-size: 15px;
}
.hk-alert--warning { border-color: var(--warning); background: var(--warningLight); color: var(--text800); }
.hk-alert--success { border-color: var(--success); background: var(--successLight); }
.hk-alert--error { border-color: var(--error); background: var(--errorLight); }
.hk-alert__title { font-weight: 600; display: block; margin-bottom: 2px; }

/* Table — wide content scrolls inside its own container, never the page */
.hk-table-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 var(--s4); border: 1px solid var(--blue400); background: var(--backgroundWhite); }
.hk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hk-table th, .hk-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--blue300); }
.hk-table thead th {
  background: var(--blue100); color: var(--text800); font-weight: 600; font-size: 13px;
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--blue400); white-space: nowrap;
}
.hk-table tbody tr:last-child td { border-bottom: 0; }
.hk-table tbody tr:hover { background: var(--blue100); }
.hk-table--rows tbody tr { cursor: pointer; }
.hk-table th.is-sortable { cursor: pointer; user-select: none; }
.hk-table th.is-sortable::after { content: '↕'; opacity: .35; margin-left: 6px; font-size: 11px; }
.hk-table th[aria-sort="ascending"]::after { content: '↑'; opacity: 1; }
.hk-table th[aria-sort="descending"]::after { content: '↓'; opacity: 1; }
.hk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tabs — underline, active primary */
.hk-tabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--blue400); margin-bottom: var(--s4); overflow-x: auto; }
.hk-tabs a {
  padding: 10px 2px; margin-bottom: -1px; text-decoration: none;
  color: var(--text700); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 15px;
}
.hk-tabs a:visited { color: var(--text700); }
.hk-tabs a:hover { color: var(--primary); }
.hk-tabs a.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.hk-breadcrumb { font-size: 14px; color: var(--text600); margin-bottom: var(--s3); }
.hk-breadcrumb a { color: var(--linkMain); }
.hk-breadcrumb span { margin: 0 8px; color: var(--blue600); }

.hk-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hk-chip {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 5px 12px; border: 1px solid var(--blue400); border-radius: 0;
  background: var(--backgroundWhite); color: var(--text700); cursor: pointer; white-space: nowrap;
}
.hk-chip:hover { border-color: var(--primary); color: var(--primary); }
.hk-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--text100); }

.hk-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  padding: var(--s3); background: var(--backgroundWhite); border: 1px solid var(--blue400);
  margin-bottom: var(--s4); max-width: 100%;
}
.hk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.hk-field label { font-size: 12px; font-weight: 600; color: var(--text600); text-transform: uppercase; letter-spacing: .4px; }

/* Page head */
.hk-pagehead { margin-bottom: var(--s5); }
.hk-pagehead h1 { margin-bottom: var(--s2); }
.hk-pagehead__meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.hk-lead { font-size: 20px; line-height: 32px; color: var(--text700); max-width: 76ch; }

/* Stats */
.hk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.hk-stat { background: var(--backgroundWhite); border: 1px solid var(--blue400); padding: var(--s3) var(--s4); box-shadow: var(--shadowCard); }
.hk-stat__value { font-size: 30px; font-weight: 700; color: var(--primary); line-height: 1.2; font-variant-numeric: tabular-nums; }
.hk-stat__label { font-size: 13px; color: var(--text600); margin-top: 2px; }

/* Grid and flex children default to min-width:auto, which lets wide tables and long
   unbroken strings push the page wider than the viewport. Opt every child out. */
.hk-grid { display: grid; gap: var(--s3); }
.hk-grid > * { min-width: 0; }
.hk-grid--cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.hk-grid--tiers { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Two-item header row (label left, tag right) that collapses instead of overflowing */
.hk-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.hk-row--top { align-items: flex-start; }

.hk-servicecard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; }
.hk-servicecard h3 { font-size: 20px; margin-bottom: var(--s1); }
.hk-servicecard p { font-size: 14px; color: var(--text700); margin: var(--s2) 0 var(--s3); }
.hk-servicecard__foot { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.hk-tiercard { border-top: 4px solid var(--primary); }
.hk-tiercard[data-tier="T1"] { border-top-color: var(--tier-T1); }
.hk-tiercard[data-tier="T2"] { border-top-color: var(--tier-T2); }
.hk-tiercard[data-tier="T3"] { border-top-color: var(--tier-T3); }
.hk-tiercard[data-tier="T4"] { border-top-color: var(--tier-T4); }
.hk-tiercard__avail { font-size: 30px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.hk-dl { margin: 0; font-size: 14px; min-width: 0; }
.hk-dl div { display: flex; justify-content: space-between; gap: var(--s3); padding: 5px 0; border-bottom: 1px solid var(--blue200); flex-wrap: wrap; }
.hk-dl div:last-child { border-bottom: 0; }
.hk-dl dt { color: var(--text600); min-width: 0; overflow-wrap: anywhere; }
.hk-dl dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Document prose */
.hk-doc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--gutter); align-items: start; }
.hk-prose {
  background: var(--backgroundWhite); border: 1px solid var(--blue400);
  padding: var(--s5); box-shadow: var(--shadowCard); min-width: 0;
}
.hk-prose h1 { font-size: 32px; margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--blue400); }
.hk-prose h2 { font-size: 24px; margin: var(--s6) 0 var(--s3); }
.hk-prose h3 { font-size: 20px; margin: var(--s5) 0 var(--s2); }
.hk-prose h4 { font-size: 16px; margin: var(--s4) 0 var(--s2); }
.hk-prose h5, .hk-prose h6 { font-size: 14px; margin: var(--s3) 0 var(--s2); }
.hk-prose > :first-child { margin-top: 0; }
.hk-prose ul, .hk-prose ol { margin: 0 0 var(--s3); padding-left: var(--s4); }
.hk-prose li { margin-bottom: 6px; }
.hk-prose li > ul { margin-top: 6px; }
.hk-prose blockquote {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
  border-left: 4px solid var(--primary); background: var(--blue100);
}
.hk-prose blockquote > :last-child { margin-bottom: 0; }
.hk-prose .hk-table-wrap { border-color: var(--blue300); }

.hk-toc { position: sticky; top: calc(var(--header-h) + var(--s4)); font-size: 14px; }
.hk-toc__title { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text600); margin-bottom: var(--s2); }
.hk-toc a { display: block; padding: 4px 0 4px var(--s2); color: var(--text700); text-decoration: none; border-left: 2px solid var(--blue300); }
.hk-toc a:visited { color: var(--text700); }
.hk-toc a:hover { color: var(--primary); border-left-color: var(--primary); }
.hk-toc a[data-level="3"] { padding-left: var(--s3); color: var(--text600); font-size: 13px; }

.hk-docmeta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); font-size: 13px; color: var(--text600); }
.hk-path {
  font-family: var(--mono); font-size: 12px; background: var(--blue100);
  border: 1px solid var(--blue300); padding: 2px 6px; color: var(--text700);
}

/* JSON tree */
.hk-json { font-family: var(--mono); font-size: 13px; line-height: 20px; }
.hk-json details { margin-left: 12px; border-left: 1px solid var(--blue300); padding-left: 10px; }
.hk-json > details { margin-left: 0; border-left: 0; padding-left: 0; }
.hk-json summary { cursor: pointer; padding: 2px 0; color: var(--text800); }
.hk-json summary:hover { color: var(--primary); }
.hk-json__key { color: var(--blue900); font-weight: 600; }
.hk-json__row { padding: 2px 0 2px 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.hk-json__val { color: var(--text800); word-break: break-word; }
.hk-json__val--string { color: var(--green1000); }
.hk-json__val--number { color: var(--error); }
.hk-json__val--boolean { color: var(--success); font-weight: 600; }
.hk-json__val--null { color: var(--text500); font-style: italic; }
.hk-json__count { color: var(--text500); font-weight: 400; }

/* Drawer */
.hk-drawer { position: fixed; inset: 0; z-index: 60; }
.hk-drawer[hidden] { display: none; }
.hk-drawer__scrim { position: absolute; inset: 0; background: var(--overlay); }
.hk-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--backgroundWhite); box-shadow: var(--shadowModal);
  display: flex; flex-direction: column; border-left: 1px solid var(--blue400);
}
.hk-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--blue400);
}
.hk-drawer__title { font-size: 20px; }
.hk-drawer__body { padding: var(--s4); overflow-y: auto; }

/* Search results */
.hk-result { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--blue300); text-decoration: none; color: inherit; }
.hk-result:visited { color: inherit; }
.hk-result:hover { background: var(--blue100); }
.hk-result__title { font-size: 16px; font-weight: 600; color: var(--linkMain); }
.hk-result__snippet { font-size: 14px; color: var(--text700); margin-top: 4px; }
.hk-result mark { background: var(--warningLight); color: var(--text800); padding: 0 2px; }

.hk-empty { padding: var(--s7) var(--s4); text-align: center; color: var(--text600); background: var(--backgroundWhite); border: 1px solid var(--blue400); }

.hk-sectiontitle { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.hk-sectiontitle h2 { font-size: 24px; }
.hk-sectiontitle:first-child { margin-top: 0; }

.hk-count { font-size: 14px; color: var(--text600); font-variant-numeric: tabular-nums; }

.hk-list-plain { list-style: none; margin: 0; padding: 0; }
.hk-list-plain li { padding: 8px 0; border-bottom: 1px solid var(--blue200); font-size: 15px; }
.hk-list-plain li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Responsive — breakpoints per shipped library (Tailwind set)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hk-doc { grid-template-columns: minmax(0, 1fr); }
  .hk-toc { position: static; order: -1; }
  .hk-sidebar { display: none; }
  .hk-main { padding: var(--s4) var(--s3) var(--s7); }
}

@media (max-width: 768px) {
  .hk-header { flex-wrap: wrap; height: auto; padding: var(--s2) var(--s3); gap: var(--s2); }
  .hk-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; padding-bottom: var(--s2); min-width: 0; }
  .hk-search .hk-input { min-width: 0; }
  .hk-header__actions { margin-left: auto; }
  .hk-brand__text small { display: none; }
  .hk-sidebar { top: 0; }
  h1 { font-size: 30px; }
  .hk-prose { padding: var(--s3); }
  .hk-lead { font-size: 17px; line-height: 26px; }

  /* Filter fields go full width so nothing pushes the page wider than the viewport */
  .hk-field { flex: 1 1 100%; }
  select.hk-input { min-width: 0; width: 100%; }
  .hk-grid--cards, .hk-grid--2, .hk-grid--tiers, .hk-stats { grid-template-columns: 1fr; }
}

@media print {
  .hk-header, .hk-sidebar, .hk-toc, .hk-tabs, .hk-toolbar { display: none !important; }
  .hk-main { padding: 0; }
  .hk-prose { border: 0; box-shadow: none; padding: 0; }
}