/*
 * Help centre article blocks (help.aritma.com).
 *
 * Styles the HTML that src/Knowledge.Api/Blocks/BlockRenderer.cs writes into an article body, and nothing else. The
 * article pages are the vendor's knowledge base theme, which we cannot edit; this app serves the file as
 * GET /site/article.css (SiteEndpoints.cs), and the loader in site/snippet.html.template links it. Rules for it:
 *
 *  - Every selector starts with .knowledgebase-post (the theme's <article> around the body) and then one of our kb-*
 *    classes. The page itself (body, headings, plain paragraphs and lists, nav, footer, the theme's own classes) is
 *    never styled from here, so older articles look exactly as before.
 *  - The theme styles bare elements inside .knowledgebase-post (ol, li, p, pre, code, img, button). Our rules carry
 *    one more class, so they win without !important (the one exception is the screenshot image, see kb-figure); each
 *    reset says which theme rule it undoes.
 *  - Values come from the marketing kit's tokens.json and the block styles of web-17 (0.1). No @font-face: the font
 *    licence is not settled, so the stack falls back to Inter.
 *  - Kit rules: no left-border accents, no tracked uppercase, no text arrows, no middots, weight 400 only, blue never
 *    directly on indigo, pink never as text on a light surface.
 *
 * Tests (tests/Knowledge.Api.Tests/Blocks/ArticleCssTests.cs) fail when the renderer can write a class this file has
 * no rule for. A change ships with the next image; see DEPLOY.md.
 */

/* ===== Tokens, on our blocks only ===== */
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-figure, .kb-table, .kb-code, .kb-deflist, .kb-video, .kb-ui) {
  --kb-indigo: #45095A; --kb-pink: #FB8CAF; --kb-seashell: #F9F0EE; --kb-white: #FFFFFF; --kb-blue: #2549D2;
  --kb-card-alt: #FFF7F5; --kb-indigo-70: #7D538B; --kb-text: #222222; --kb-border: rgba(69, 9, 90, 0.23);
  --kb-radius-sm: 5px; --kb-radius-md: 10px;
  --kb-space-1: 4px; --kb-space-2: 8px; --kb-space-3: 16px; --kb-space-4: 24px;
  --kb-font: 'Aritma Uten', 'Aritma Uten 1.0', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kb-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-figure, .kb-table, .kb-code, .kb-deflist, .kb-video) {
  box-sizing: border-box; font-family: var(--kb-font); font-size: 16px; line-height: 26px; font-weight: 400;
  color: var(--kb-indigo);
}
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-figure, .kb-table, .kb-code, .kb-deflist, .kb-video) *,
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-figure, .kb-table, .kb-code, .kb-deflist, .kb-video) ::before {
  box-sizing: border-box;
}
/* The theme's p { margin: 0 0 1.4rem } would open gaps inside every block. */
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-figure, .kb-table, .kb-deflist) p { margin: 0; }

/* Links inside our blocks: indigo and underlined, as in the kit. The theme gives links their own font family, so they
   take the text's font here. Its hover colour is pink, which the kit does not allow as text on a light surface, so
   hover thickens the line instead. */
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-table, .kb-deflist) a {
  font: inherit; color: var(--kb-indigo); text-decoration: underline; text-underline-offset: 3px;
}
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-table, .kb-deflist) a:hover {
  color: var(--kb-indigo); text-decoration-thickness: 2px;
}
.knowledgebase-post :where(.kb-steps, .kb-callout, .kb-table, .kb-deflist, .kb-video) :focus-visible {
  outline: 2px solid var(--kb-blue); outline-offset: 2px;
}

/* ===== kb-ui: a label exactly as it reads in the app ===== */
.knowledgebase-post .kb-ui {
  display: inline-block; padding: 0 var(--kb-space-2); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm);
  background-color: var(--kb-white); font-family: var(--kb-font); font-size: 14px; line-height: 24px; font-weight: 400;
  color: var(--kb-indigo); white-space: nowrap;
}

/* ===== kb-callout: note, tip, warning. A surface and a word label, never a left border. ===== */
.knowledgebase-post .kb-callout { display: block; margin: var(--kb-space-4) 0; padding: var(--kb-space-4); border-radius: var(--kb-radius-md); }
.knowledgebase-post .kb-callout-label { display: block; margin-bottom: var(--kb-space-1); font-size: 14px; line-height: 20px; }
.knowledgebase-post .kb-callout p { color: var(--kb-text); }
.knowledgebase-post .kb-callout p + p { margin-top: var(--kb-space-2); }
.knowledgebase-post .kb-callout--note { background-color: var(--kb-white); }
.knowledgebase-post .kb-callout--note .kb-callout-label { color: var(--kb-indigo-70); }
.knowledgebase-post .kb-callout--tip { border: 1px solid var(--kb-border); }
.knowledgebase-post .kb-callout--tip .kb-callout-label { color: var(--kb-blue); }
.knowledgebase-post .kb-callout--warning { background-color: var(--kb-indigo); }
.knowledgebase-post .kb-callout--warning .kb-callout-label { color: var(--kb-pink); }
.knowledgebase-post .kb-callout--warning p,
.knowledgebase-post .kb-callout--warning a,
.knowledgebase-post .kb-callout--warning a:hover { color: var(--kb-seashell); }
.knowledgebase-post .kb-callout--warning :focus-visible { outline-color: var(--kb-seashell); }

/* ===== kb-steps: numbered steps; the number sits in its own column ===== */
/* Undoes the theme's ol (margin, padding-left, decimal markers) and li (margin 0.7rem, margin-left 17px, padding-left 8px). */
.knowledgebase-post .kb-steps { counter-reset: kb-step; margin: var(--kb-space-4) 0; padding: 0; list-style: none; }
.knowledgebase-post .kb-step {
  counter-increment: kb-step; display: grid; grid-template-columns: 48px minmax(0, 1fr); margin: 0; padding: var(--kb-space-4) 0;
  list-style: none; border-top: 1px solid var(--kb-border);
}
.knowledgebase-post .kb-step:last-child { border-bottom: 1px solid var(--kb-border); }
.knowledgebase-post .kb-step::before {
  content: counter(kb-step); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--kb-border); border-radius: 50%; background-color: var(--kb-white);
  font-size: 14px; line-height: 20px; color: var(--kb-indigo);
}
.knowledgebase-post .kb-step > div { min-width: 0; padding-top: var(--kb-space-1); }
/* Only the step's own text: a warning callout inside a step keeps its light text. */
.knowledgebase-post .kb-step > div > p { color: var(--kb-text); }
.knowledgebase-post .kb-step > div > p + p { margin-top: var(--kb-space-2); }
.knowledgebase-post .kb-step .kb-figure,
.knowledgebase-post .kb-step .kb-callout { margin: var(--kb-space-4) 0 0; }

/* ===== kb-figure: a screenshot with a caption and numbered markers ===== */
.knowledgebase-post .kb-figure { display: block; margin: var(--kb-space-4) 0; padding: 0; }
.knowledgebase-post .kb-figure figcaption { margin-top: var(--kb-space-2); font-size: 14px; line-height: 20px; color: var(--kb-indigo-70); }
.knowledgebase-post .kb-shot {
  position: relative; overflow: hidden; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md);
  background-color: var(--kb-white);
}
/* The markers are placed in percent of the box, so the image must fill it exactly. The theme sets img to inline, and
   the editor may add a pixel width in a style attribute; both would move the markers off their targets. */
.knowledgebase-post .kb-shot--file > img {
  display: block; width: 100% !important; max-width: none; height: auto !important; margin: 0; border: 0;
}
.knowledgebase-post .kb-marker {
  position: absolute; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; background-color: var(--kb-blue); color: var(--kb-white); font-family: var(--kb-font); font-size: 14px; line-height: 20px;
}
/* A picture that could not be moved from the old help centre: a dashed gap with a note, so nothing looks broken. */
.knowledgebase-post .kb-shot--missing {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 670 / 320; padding: var(--kb-space-4);
  border-style: dashed; background-color: var(--kb-card-alt);
}
.knowledgebase-post .kb-shot--missing p { font-size: 14px; line-height: 20px; color: var(--kb-indigo-70); text-align: center; }

/* ===== kb-table: an ARIA table from divs; stacks under 640 px ===== */
/* The first column is the name of the thing; every further cell gets an equal share. Auto-placed columns keep this
   right for two, three or four columns without reading --kb-cols, in case the editor drops custom properties. */
.knowledgebase-post .kb-table { margin: var(--kb-space-4) 0; padding: 0 var(--kb-space-4); border-radius: var(--kb-radius-md); background-color: var(--kb-white); }
.knowledgebase-post .kb-table [role="row"] {
  display: grid; grid-template-columns: 184px; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
  gap: var(--kb-space-4); padding: var(--kb-space-3) 0;
}
.knowledgebase-post .kb-table [role="row"] + [role="row"] { border-top: 1px solid var(--kb-border); }
.knowledgebase-post .kb-table [role="columnheader"] { font-size: 14px; line-height: 20px; color: var(--kb-indigo-70); }
.knowledgebase-post .kb-table [role="cell"] { min-width: 0; color: var(--kb-text); overflow-wrap: anywhere; }
.knowledgebase-post .kb-table [role="cell"]:first-child { color: var(--kb-indigo); }

/* ===== kb-code: exact text to copy or recognise ===== */
.knowledgebase-post .kb-code {
  display: block; margin: var(--kb-space-4) 0; padding: 0; overflow: hidden; border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-md); background-color: var(--kb-white);
}
.knowledgebase-post .kb-code figcaption {
  padding: var(--kb-space-2) var(--kb-space-4); border-bottom: 1px solid var(--kb-border); background-color: var(--kb-card-alt);
  font-size: 14px; line-height: 20px; color: var(--kb-indigo-70);
}
/* Undoes the theme's pre and code (grey fill, own border, 1.4rem margin, black text, normal line height). */
.knowledgebase-post .kb-code pre {
  margin: 0; padding: var(--kb-space-3) var(--kb-space-4); overflow-x: auto; border: 0; border-radius: 0; background: none;
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--kb-mono); font-size: 14px; line-height: 20px; color: var(--kb-text);
}
.knowledgebase-post .kb-code code {
  padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; vertical-align: baseline;
}

/* ===== kb-deflist: terms or error codes with a short meaning ===== */
.knowledgebase-post .kb-deflist { margin: var(--kb-space-4) 0; padding: var(--kb-space-1) var(--kb-space-4); border-radius: var(--kb-radius-md); background-color: var(--kb-white); }
.knowledgebase-post .kb-deflist > div {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--kb-space-1) var(--kb-space-4); align-items: baseline;
  padding: var(--kb-space-3) 0;
}
.knowledgebase-post .kb-deflist > div + div { border-top: 1px solid var(--kb-border); }
.knowledgebase-post .kb-deflist dt { margin: 0; font-family: var(--kb-mono); font-size: 16px; line-height: 26px; font-weight: 400; color: var(--kb-indigo); }
.knowledgebase-post .kb-deflist dd { margin: 0; color: var(--kb-text); }
.knowledgebase-post .kb-deflist dd + dd { grid-column: 2; }
.knowledgebase-post .kb-deflist dd a { font-size: 14px; line-height: 20px; }
.knowledgebase-post .kb-deflist--terms > div { grid-template-columns: 184px minmax(0, 1fr); }
.knowledgebase-post .kb-deflist--terms dt { font-family: var(--kb-font); }

/* ===== kb-video: a click-to-load facade (YouTube, Vimeo, Loom, Scribe) or a native video (MP4) ===== */
/* The play icon's inline fill reads var(--indigo). */
.knowledgebase-post .kb-video { --indigo: #45095A; display: block; margin: var(--kb-space-4) 0; padding: 0; }
.knowledgebase-post .kb-video figcaption { margin-top: var(--kb-space-2); font-size: 14px; line-height: 20px; color: var(--kb-indigo-70); }
.knowledgebase-post .kb-video-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--kb-radius-md); background-color: var(--kb-indigo);
}
.knowledgebase-post .kb-video-frame > iframe,
.knowledgebase-post .kb-video-frame > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.knowledgebase-post .kb-video-frame > img {
  position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover;
}
/* Undoes the theme's button reset (line-height 1.15, font-size 100%). */
.knowledgebase-post .kb-video-play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kb-space-2);
  width: 100%; margin: 0; padding: var(--kb-space-4); border: 0; background: transparent; color: var(--kb-seashell);
  font-family: var(--kb-font); font-weight: 400; text-align: center; cursor: pointer;
}
.knowledgebase-post .kb-video-frame > img + .kb-video-play { background-color: rgba(69, 9, 90, 0.6); }
.knowledgebase-post .kb-video-icon {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--kb-space-2);
  border-radius: 50%; background-color: var(--kb-white);
}
.knowledgebase-post .kb-video-icon svg { display: block; width: 22px; height: 22px; margin-left: 4px; }
.knowledgebase-post .kb-video-title { font-size: 18px; line-height: 28px; }
.knowledgebase-post .kb-video-meta { font-size: 14px; line-height: 20px; }
.knowledgebase-post .kb-video-play:hover .kb-video-title { text-decoration: underline; }
.knowledgebase-post .kb-video-play:focus-visible { outline: 2px solid var(--kb-seashell); outline-offset: -6px; }

/* ===== Small screens ===== */
@media (max-width: 640px) {
  .knowledgebase-post .kb-step { grid-template-columns: 40px minmax(0, 1fr); }
  .knowledgebase-post .kb-callout { padding: var(--kb-space-3); }
  .knowledgebase-post .kb-table { padding: 0 var(--kb-space-3); }
  .knowledgebase-post .kb-code figcaption,
  .knowledgebase-post .kb-code pre { padding-left: var(--kb-space-3); padding-right: var(--kb-space-3); }
  .knowledgebase-post .kb-table [role="row"] { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: var(--kb-space-1); }
  .knowledgebase-post .kb-table [role="row"]:first-child { display: none; }
  .knowledgebase-post .kb-table [role="row"]:nth-child(2) { border-top: 0; }
  .knowledgebase-post .kb-deflist { padding: var(--kb-space-1) var(--kb-space-3); }
  .knowledgebase-post .kb-deflist > div,
  .knowledgebase-post .kb-deflist--terms > div { grid-template-columns: minmax(0, 1fr); }
  .knowledgebase-post .kb-deflist dd + dd { grid-column: 1; }
  .knowledgebase-post .kb-video-icon { width: 48px; height: 48px; margin-bottom: 0; }
  .knowledgebase-post .kb-video-title { font-size: 16px; line-height: 26px; }
}