/* ===========================================================================
   doesitfit.ai — theme stylesheet (spec 001 + revisions R1-R4)
   Hand-maintained, single file, no preprocessor, no framework.

   COLOUR RULE: every hex value in this file lives in the :root token block
   below. Nothing else — no rule, no SVG, no template, no JS — may name a
   colour. Use var(--dif-*).

   OVERFLOW RULE (R1.1): no component inside the stream may carry a fixed width.
   Widths are max-width / min() / percentages. The compare table is the single
   deliberate exception and it lives inside its own overflow-x container.

   Sections
     1.  Tokens (concept doc §4.4)
     2.  Reset + base
     3.  Layout shell + desktop rail (R1.5)
     4.  Header
     5.  Garage chips + build editor (R1.3)
     6.  Stream, thinking
     6b. Ask-first landing (R3)
     7.  Headlines
     8.  Cards + badges
     9.  Sources, quotes (R1.6), links
     10. Buttons
     11. Diagram panel
     12. No-fit row + report row
     13. Unknown screen
     14. Compare table (R1.2)
     15. Composer bar (R1.1) + toast
     16. Ghost content pages (index / post / page)
     17. Focus + a11y
   =========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* evidence-class colours — never decoration */
  --dif-carbon: #1D2420;
  --dif-bg: #F5F3ED;
  --dif-fit: #48674F;
  --dif-caveat: #B7791F;
  --dif-caveat-text: #8F5D14;
  --dif-action: #C75222;
  --dif-nofit: #B4473C;

  /* neutrals derived from the two above */
  --dif-surface: #FFFFFF;
  --dif-on-dark: #FFFFFF;
  --dif-muted: #55605A;
  --dif-line: rgba(29, 36, 32, 0.12);
  --dif-line-strong: rgba(29, 36, 32, 0.24);
  --dif-line-dashed: rgba(29, 36, 32, 0.18);
  --dif-fill-quiet: rgba(29, 36, 32, 0.04);
  --dif-fit-soft: rgba(72, 103, 79, 0.10);
  --dif-caveat-soft: rgba(183, 121, 31, 0.08);
  --dif-nofit-soft: rgba(180, 71, 60, 0.08);
  --dif-scrim: rgba(29, 36, 32, 0.42);
  --dif-shadow: 0 1px 2px rgba(29, 36, 32, 0.05), 0 4px 14px rgba(29, 36, 32, 0.04);
  --dif-shadow-lift: 0 -2px 18px rgba(29, 36, 32, 0.07);

  /* metrics */
  --dif-max: 640px;
  --dif-ask-max: 720px;    /* R3.4 landing cluster column */
  --dif-head-max: 1100px;  /* R3.4 header content container */
  --dif-rail-w: 320px;
  --dif-rail-gap: 32px;
  --dif-radius: 12px;
  --dif-radius-sm: 4px;
  --dif-pad: 20px;
  --dif-rhythm: 18px;
  /* real height of the fixed composer, measured by app.js on every resize */
  --dif-composer-h: 84px;
  --dif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- 2. Reset + base ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--dif-bg);
  color: var(--dif-carbon);
  font-family: var(--dif-font);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, table, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

a { color: var(--dif-carbon); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

/* --- 3. Layout shell + desktop rail ------------------------------------- */
.dif-shell {
  max-width: var(--dif-max);
  margin: 0 auto;
  min-height: 100vh;          /* fallback for browsers without dvh */
  min-height: 100dvh;
  background: var(--dif-bg);
  border-left: 1px solid var(--dif-line);
  border-right: 1px solid var(--dif-line);
  display: flex;
  flex-direction: column;
}

@media (max-width: 680px) {
  .dif-shell { border-left: 0; border-right: 0; }
}

.dif-app {
  display: block;
  flex: 1 1 auto;
  padding: 0 16px;
}

/* Shared site footer: one quiet product/navigation surface across the app and
   editorial pages. Legal labels become links when their pages are published. */
.dif-site-footer {
  border-top: 1px solid var(--dif-line);
  background: var(--dif-fill-quiet);
}

.dif-site-footer__inner {
  width: min(var(--dif-head-max), 100%);
  margin: 0 auto;
  padding: 28px var(--dif-pad);
}

.dif-site-footer__name { font-size: 16px; font-weight: 800; }
.dif-site-footer__brand > p:last-child { margin-top: 5px; color: var(--dif-muted); font-size: 14px; }
.dif-site-footer__links { margin-top: 22px; }
.dif-site-footer__links nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dif-site-footer__links nav a { color: var(--dif-carbon); font-size: 14px; font-weight: 700; text-decoration: none; }
.dif-site-footer__links nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dif-site-footer__account { display: inline-flex; margin-top: 18px; color: var(--dif-action); font-size: 14px; font-weight: 800; text-decoration: none; }
.dif-site-footer__account:hover { text-decoration: underline; text-underline-offset: 3px; }
.dif-site-footer__legal { margin-top: 20px; color: var(--dif-muted); font-size: 12px; }
.dif-site-footer__legal a { color: inherit; text-decoration: none; }
.dif-site-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 760px) {
  .dif-site-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding-top: 34px; padding-bottom: 34px; }
  .dif-site-footer__brand { max-width: 350px; }
  .dif-site-footer__links { min-width: 310px; margin-top: 0; text-align: right; }
  .dif-site-footer__links nav { justify-content: flex-end; }
}

/* R3.3: on the landing the app itself is the flex column that anchors the
   footer to the bottom and centres the interaction cluster. */
.dif-app[data-dif-screen="welcome"] {
  display: flex;
  flex-direction: column;
}

@media (min-width: 420px) {
  .dif-app { padding: 0 var(--dif-pad); }
}

.dif-layout { display: block; }
.dif-main { min-width: 0; }

/* R1.5 — two columns from 1100px: stream + sticky context rail */
@media (min-width: 1100px) {
  .dif-shell {
    max-width: none;
    border-left: 0;
    border-right: 0;
  }

  .dif-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--dif-max)) var(--dif-rail-w);
    gap: var(--dif-rail-gap);
    justify-content: center;
    align-items: start;
  }

  .dif-rail {
    position: sticky;
    top: 88px;
    min-width: 0;
    padding-top: 18px;
  }

  .dif-rail__block + .dif-rail__block { margin-top: 18px; }
  .dif-rail .dif-panel { margin-top: 0; }
  .dif-rail .dif-seclabel { margin-top: 0; }
}

/* --- 4. Header ---------------------------------------------------------- */
.dif-header {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dif-bg);
  border-bottom: 1px solid var(--dif-line);
}

@media (min-width: 420px) {
  .dif-header { padding: 14px var(--dif-pad); }
}

/* R3.4: header spans full width; its contents align to a 1100px container */
@media (min-width: 768px) {
  .dif-header {
    padding-left: max(var(--dif-pad), calc((100% - var(--dif-head-max)) / 2));
    padding-right: max(var(--dif-pad), calc((100% - var(--dif-head-max)) / 2));
  }
}

/* One compact account action. It is a link, rather than a product-level button. */
.dif-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Signup is available without adding a distracting navigation menu. */
.dif-account-link {
  flex: 0 0 auto;
  padding: 10px 2px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--dif-action);
}

/* The wordmark renders exactly as authored in the shell markup — the R4
   amendment made it "Does It Fit", so no text-transform here. */
.dif-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;          /* R3.1: small but confident lockup */
  font-weight: 800;
  letter-spacing: -0.02em;  /* three words at 22px; weight unchanged */
  text-decoration: none;
  color: var(--dif-carbon);
}

.dif-wordmark__mark {
  display: block;
  width: 24px;              /* R3.1: production mark, unmodified */
  height: 24px;
  color: var(--dif-carbon);
}

@media (max-width: 380px) {
  .dif-account-link { font-size: 14px; }
  .dif-wordmark { font-size: 20px; }
}

/* The hidden attribute is only UA-level display:none — any author display rule
 * (like the inline-flex below) would override it. Guard globally. */
[hidden] { display: none !important; }

.dif-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--dif-radius-sm);
  color: var(--dif-carbon);
}

.dif-iconbtn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 5. Garage chips + build editor ------------------------------------- */
.dif-garage {
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--dif-line);
}

.dif-garage__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dif-carbon);
  margin-bottom: 10px;
}

/* horizontal scroller with an edge-fade affordance — no clipped chips */
.dif-chipscroll { position: relative; }

.dif-chipscroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--dif-bg));
}

.dif-chiprow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 24px 6px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dif-chiprow::-webkit-scrollbar { display: none; }

.dif-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--dif-line-strong);
  border-radius: 999px;
  background: var(--dif-surface);
  font-size: 14px;
  text-align: left;
}

.dif-chip__label { min-width: 0; }
.dif-chip .dif-icon svg { width: 17px; height: 17px; }
/* R2.1: full opacity — the pencil is the affordance, not decoration */
.dif-chip__pencil svg { width: 15px; height: 15px; }

/* R2.1 before setup: the chip is an empty slot asking to be filled */
/* R4.3: the pre-setup state is one compact row, never placeholder chips */
.dif-promptrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.dif-promptrow__support {
  font-size: 14px;
  color: var(--dif-muted);
}

/* rail variant: 2x2 grid, wraps instead of scrolling */
.dif-chipgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dif-chipgrid .dif-chip {
  flex: 1 1 auto;
  width: 100%;
  border-radius: var(--dif-radius);
}

.dif-chipgrid .dif-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* bottom sheet on phones, centred popover from 560px */
.dif-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--dif-scrim);
}

.dif-sheet__panel {
  width: 100%;
  max-width: min(480px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--dif-surface);
  border-radius: var(--dif-radius) var(--dif-radius) 0 0;
  box-shadow: var(--dif-shadow-lift);
}

@media (min-width: 560px) {
  .dif-sheet { align-items: center; }

  .dif-sheet__panel {
    max-width: min(420px, calc(100vw - 32px));
    border-radius: var(--dif-radius);
  }
}

.dif-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dif-sheet__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dif-sheet__label {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dif-muted);
}

.dif-sheet__select {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  color: var(--dif-carbon);
  background: var(--dif-surface);
  border: 1px solid var(--dif-line-strong);
  border-radius: var(--dif-radius-sm);
}

/* R2.1: the setup sheet stacks all four fields in the same panel */
.dif-sheet__field + .dif-sheet__field { margin-top: 4px; }


.dif-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.dif-sheet__actions .dif-btn { flex: 1 1 140px; }

/* --- 6. Stream, welcome, thinking --------------------------------------- */
.dif-stream {
  padding-top: 18px;
  /* R1.1: clear the fixed composer using its measured height */
  padding-bottom: calc(var(--dif-composer-h) + 28px);
}

.dif-screen { display: block; }

.dif-seclabel {
  margin: 24px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dif-carbon);
}

/* --- 6b. R3 ask-first landing -------------------------------------------
   Hierarchy is the point: ONE obvious action in the middle of the screen.
   composer (dominant, 112px tall, bordered) > heading (supporting copy)
   > pills (secondary, ~40px) > details link (tertiary) > promise + legal
   (ambient). Nothing else renders here. */
.dif-landing {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.dif-landing__cluster {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--dif-ask-max);
  margin: 0 auto;
  /* small top bias so the composer's centre lands slightly below mid-screen */
  padding: 4vh 0 2vh;
}

/* supporting copy — deliberately smaller than an answer verdict headline */
.dif-landing__heading {
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

/* the dominant element */
.dif-ask {
  position: relative;
  display: block;
  min-height: 112px;
  padding: 18px 74px 18px 20px;
  background: var(--dif-surface);
  border: 1.5px solid var(--dif-carbon);
  border-radius: 20px;
}

.dif-ask__input {
  display: block;
  width: 100%;
  min-height: 76px;
  max-height: 40vh;
  border: 0;
  padding: 0;
  margin: 0;
  resize: none;
  overflow-y: hidden;
  background: transparent;
  font: inherit;
  font-size: 17px;
  line-height: 1.45;
  color: var(--dif-carbon);
}

.dif-ask__input::placeholder { color: var(--dif-muted); }
.dif-ask__input:focus { outline: none; }
.dif-ask:focus-within { box-shadow: 0 0 0 3px var(--dif-fill-quiet); }

/* shared rust circle: landing composer and the fixed answer-screen composer */
.dif-sendbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dif-action);
  color: var(--dif-on-dark);
}

.dif-sendbtn svg { width: 20px; height: 20px; }

/* the landing button is positioned inside the textarea's padding well */
.dif-ask__send {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

/* secondary: text-only carbon pills, one scrollable row, never wrapping */
.dif-pillscroll {
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dif-pillscroll::-webkit-scrollbar { display: none; }

.dif-pills {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  width: max-content;
  min-width: 100%;
  padding: 2px;
}

.dif-pill {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--dif-carbon);
  color: var(--dif-on-dark);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* tertiary */
.dif-detailsrow { margin-top: 20px; text-align: center; }

.dif-textlink {
  color: var(--dif-carbon);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dif-legal {
  margin-top: 32px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--dif-line);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--dif-muted);
}

.dif-legal a { color: var(--dif-muted); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 768px) {
  .dif-landing__heading { font-size: 34px; }
  /* desktop has room: wrap and centre the pills instead of clipping a scroller */
  .dif-pillscroll { overflow: visible; }
  .dif-pills {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    min-width: 0;
  }
}

/* R3.5: quiet updates-signup row under every answer */
/* R4.6: quiet bordered callout — text link + support line, no icon, no fill */
.dif-callout {
  margin: var(--dif-rhythm) 0 4px;
  padding: 14px 16px;
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
}

.dif-callout__title { font-size: 15px; font-weight: 600; }
.dif-callout__support { margin-top: 4px; font-size: 14px; color: var(--dif-muted); }

.dif-thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

/* R5: the same slot as the dots, for a rate limit or a failed answer. The
   wording comes from the API (429) or fixtures — never from CSS or app.js. */
.dif-notice {
  padding: 14px 18px;
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
  font-size: 15px;
  line-height: 1.45;
  color: var(--dif-carbon);
}

.dif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dif-carbon);
  opacity: 0.28;
  animation: dif-pulse 1.1s infinite ease-in-out;
}

.dif-dot:nth-child(2) { animation-delay: 0.16s; }
.dif-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes dif-pulse {
  0%, 80%, 100% { opacity: 0.22; transform: translateY(0); }
  40% { opacity: 0.85; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .dif-dot { animation: none; opacity: 0.5; }
  .dif-swipecue { animation: none; }
}

/* --- 7. Headlines ------------------------------------------------------- */
.dif-echo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.dif-verdict {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* landing hero: under the header, above the YOUR TACOMA row */

.dif-subline {
  margin-top: 10px;
  font-size: 15px;
  color: var(--dif-muted);
}

.dif-question {
  font-size: 28px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 8px 0 18px;
}

@media (min-width: 768px) {
  .dif-verdict { font-size: 36px; }
  .dif-question { font-size: 32px; }
}

/* R1.3 honesty line — quiet, never styled as a verdict */
.dif-demonote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius-sm);
  background: var(--dif-caveat-soft);
  font-size: 14px;
  color: var(--dif-caveat-text);
}

.dif-demonote .dif-icon svg { width: 17px; height: 17px; }

/* --- 8. Cards + badges -------------------------------------------------- */
.dif-card {
  margin-top: var(--dif-rhythm);
  padding: var(--dif-pad);
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

.dif-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.dif-card__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dif-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.dif-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--dif-radius-sm);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* short, fixed strings; wrapping them mid-label reads as two badges */
  white-space: nowrap;
}

/* rule 1: verdict badge is solid, stock chip is quiet */
.dif-badge--fit {
  background: var(--dif-fit);
  color: var(--dif-on-dark);
}

.dif-badge--quiet {
  background: transparent;
  border-color: var(--dif-line-strong);
  color: var(--dif-carbon);
}

/* rule 2: amber never renders as small text — the text is --dif-caveat-text */
.dif-badge--caveat {
  background: var(--dif-caveat-soft);
  border-color: var(--dif-caveat);
  color: var(--dif-caveat-text);
}

.dif-badge--nofit {
  background: var(--dif-nofit-soft);
  border-color: var(--dif-nofit);
  color: var(--dif-nofit);
}

/* R1.4: price is a headline number, not body text */
.dif-price {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dif-fresh { color: var(--dif-muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.dif-fresh--block { display: block; font-size: 12px; margin-top: 4px; }

.dif-reason { margin-top: 8px; font-size: 15px; }

.dif-card__foot {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--dif-line-dashed);
}

/* from 480px the CTA sits beside the source block, as in the v2 mocks */
@media (min-width: 480px) {
  .dif-card__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .dif-card__foot .dif-btn--full { width: auto; }
}

/* R4.5: a card carrying the "Why this fits" disclosure stacks its foot, so the
   diagram gets the full card width instead of a narrow grid cell. */
.dif-card__foot--stacked { grid-template-columns: minmax(0, 1fr); }
.dif-card__foot--stacked .dif-btn--full { width: 100%; }

.dif-why {
  padding-top: 12px;
  border-top: 1px dashed var(--dif-line-dashed);
}

.dif-why__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dif-carbon);
  text-align: left;
}

.dif-why__chevron { margin-left: auto; transition: transform 0.15s ease; }
.dif-why__chevron svg { width: 17px; height: 17px; }
.dif-why__toggle[aria-expanded="true"] .dif-why__chevron { transform: rotate(90deg); }

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

.dif-why__panel { padding-top: 4px; }

.dif-card--compact .dif-card__title { font-size: 18px; }
.dif-card--compact .dif-btn--full { margin-top: 14px; }

.dif-card.is-highlighted {
  border-color: var(--dif-fit);
  box-shadow: 0 0 0 3px var(--dif-fit-soft);
}

/* --- 9. Sources, quotes, links ------------------------------------------ */
.dif-sourceblock { min-width: 0; margin-top: 12px; }
.dif-card__foot .dif-sourceblock { margin-top: 0; }

.dif-source { font-size: 14px; }
.dif-source__prefix { font-weight: 700; }

.dif-link {
  color: var(--dif-carbon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* R1.6: the quoted sentence, clamped to two lines until expanded */
.dif-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
  color: var(--dif-muted);
}

.dif-quote.is-open {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.dif-quote__toggle {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dif-carbon);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dif-srcbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  vertical-align: middle;
  border-radius: var(--dif-radius-sm);
  color: var(--dif-carbon);
}

.dif-srcbtn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dif-srcbtn[aria-expanded="true"] { background: var(--dif-fill-quiet); }

.dif-srcchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.dif-srcchip {
  padding: 6px 10px;
  border: 1px solid var(--dif-line-strong);
  border-radius: var(--dif-radius-sm);
  font-size: 13px;
  text-decoration: none;
  color: var(--dif-carbon);
  background: var(--dif-surface);
}

/* --- 10. Buttons -------------------------------------------------------- */
.dif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--dif-radius-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.dif-btn--full { width: 100%; }

/* rust is reserved for merchant handoff (rule 3) */
.dif-btn--action {
  background: var(--dif-action);
  color: var(--dif-on-dark);
}

/* buttons leading to verified fits are carbon, never amber (rule 3) */
.dif-btn--carbon {
  background: var(--dif-carbon);
  color: var(--dif-on-dark);
}

.dif-btn--outline {
  background: var(--dif-surface);
  border-color: var(--dif-line-strong);
  color: var(--dif-carbon);
}

.dif-btn .dif-icon svg { width: 17px; height: 17px; }

/* --- 11. Diagram panel -------------------------------------------------- */
.dif-panel {
  margin-top: var(--dif-rhythm);
  padding: var(--dif-pad);
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

.dif-panel__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.dif-dgm { display: block; width: 100%; height: auto; }

.dif-dgm__line,
.dif-dgm__hint,
.dif-dgm__dimline {
  fill: none;
  stroke: var(--dif-carbon);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dif-dgm__hint { stroke-width: 1.25; opacity: 0.55; }

.dif-dgm__solid {
  fill: var(--dif-fill-quiet);
  stroke: var(--dif-carbon);
  stroke-width: 2;
}

.dif-dgm__dot { fill: var(--dif-carbon); opacity: 0.55; }

/* dimension line ships hidden; shown only for a verified clearance assertion */
.dif-dgm__dims { display: none; }
.dif-dgm__dims.is-visible { display: block; }
.dif-dgm__dimline { stroke-width: 1.5; }
.dif-dgm__dimbadge { fill: var(--dif-surface); stroke: var(--dif-carbon); stroke-width: 1.5; }

.dif-dgm__dimtext {
  fill: var(--dif-carbon);
  font-family: var(--dif-font);
  font-size: 15px;
  font-weight: 700;
}

/* --- 12. No-fit row + report row ---------------------------------------- */
.dif-nofit {
  margin-top: var(--dif-rhythm);
  padding: var(--dif-pad);
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

.dif-nofit__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.dif-nofit__verdict { color: var(--dif-nofit); text-transform: uppercase; }

.dif-nofit .dif-reason {
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--dif-line-dashed);
}


/* "Was this answer right?" + thumbs — replaces the report link */
.dif-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: var(--dif-rhythm) 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--dif-line);
}

.dif-feedback__q {
  font-size: 16px;
  font-weight: 600;
  color: var(--dif-carbon);
}

.dif-feedback__btns { display: flex; gap: 8px; flex: 0 0 auto; }

.dif-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 40px;
  border: 1px solid var(--dif-line-strong);
  border-radius: 10px;
  background: var(--dif-surface);
  color: var(--dif-carbon);
}

.dif-thumb svg { width: 20px; height: 20px; }
.dif-thumb:hover { border-color: var(--dif-carbon); }

.dif-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  color: var(--dif-fit);
  font-weight: 600;
}

/* --- 13. Unknown screen ------------------------------------------------- */
.dif-unknown {
  padding: var(--dif-pad);
  background: var(--dif-surface);
  border: 1px solid var(--dif-caveat);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

.dif-unknown__top { display: flex; gap: 14px; align-items: flex-start; }
.dif-unknown__copy { min-width: 0; }

.dif-unknown__status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dif-caveat-text);
}

.dif-unknown__title {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.dif-unknown__body { margin-top: 10px; font-size: 15px; }

/* R1.1: stacked on phones, side by side once there is room */
.dif-unknown__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--dif-line);
}

@media (min-width: 480px) {
  .dif-unknown__actions { flex-direction: row; flex-wrap: wrap; }
  .dif-unknown__actions .dif-btn { flex: 1 1 200px; }
}

.dif-found {
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
  overflow: hidden;
}

.dif-found__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--dif-line);
}

.dif-found__row:last-child { border-bottom: 0; }
.dif-found__copy { flex: 1 1 auto; min-width: 0; }
.dif-found__title { font-size: 17px; font-weight: 700; }
.dif-found__text { margin-top: 4px; font-size: 15px; }

.dif-honesty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  font-size: 15px;
}

/* --- 14. Compare table -------------------------------------------------- */
.dif-topbar { display: flex; align-items: center; gap: 10px; }

.dif-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  flex: 0 0 auto;
  border-radius: var(--dif-radius-sm);
  color: var(--dif-carbon);
}

.dif-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dif-topbar__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* R1.2: the table scrolls inside this box — the document never scrolls sideways */
.dif-tablewrap {
  position: relative;
  margin-top: 8px;
}

.dif-tablescroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dif-tablewrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  background: linear-gradient(to right, transparent, var(--dif-bg) 85%);
}

.dif-tablewrap.is-overflowing::after { opacity: 1; }
.dif-tablewrap.is-overflowing.is-end::after { opacity: 0; }

/* explicit "swipe" cue over the clipped column; gone after the first scroll */
.dif-swipecue {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: var(--dif-carbon);
  color: var(--dif-on-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--dif-shadow);
  pointer-events: none;
  animation: dif-nudge 1.4s ease-in-out infinite;
}

.dif-swipecue .dif-icon svg,
.dif-swipecue svg { width: 14px; height: 14px; }

.dif-tablewrap.is-overflowing.is-start .dif-swipecue { display: inline-flex; }

@keyframes dif-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.dif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* sticky metric column: values scroll underneath it */
.dif-table__corner,
.dif-table__rowhead {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--dif-bg);
  border-right: 1px solid var(--dif-line);
}

.dif-table__corner { border-bottom: 0; }

.dif-table__col {
  min-width: 140px;
  padding: 10px 12px 16px;
  text-align: center;
  vertical-align: top;
}

.dif-table__coltitle {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.dif-table__band {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.dif-table__band td {
  padding: 10px 0;
  border-top: 1px solid var(--dif-line);
  border-bottom: 1px solid var(--dif-line);
}

.dif-table__rowhead {
  min-width: 148px;
  text-align: left;
  font-weight: 400;
  padding: 14px 10px 14px 0;
  border-bottom: 1px solid var(--dif-line);
  vertical-align: top;
}

.dif-table__cell {
  min-width: 140px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--dif-line);
  vertical-align: top;
}

.dif-table__value { font-weight: 600; }

/* Full-width rows inside the scroller. They stick to the left edge and clamp
   their content to the viewport, so a safety footnote or an open quote is never
   parked off-screen while the value columns are scrolled. */
.dif-table__footnote td,
.dif-quoterow td {
  position: sticky;
  left: 0;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--dif-line);
}

.dif-tablespan {
  display: block;
  max-width: min(calc(100vw - 40px), 100%);
}

/* footnote spans the full scroll width, directly under the load row */
.dif-table__footnote td {
  font-size: 13px;
  color: var(--dif-muted);
}

.dif-quoterow td { background: var(--dif-fill-quiet); padding-left: 12px; padding-right: 12px; }
.dif-quoterow .dif-quote { margin-top: 0; margin-bottom: 6px; }
.dif-quoterow[hidden] { display: none; }

.dif-winner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 22px;
  padding: var(--dif-pad);
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

.dif-winner__copy { min-width: 0; }

.dif-winner__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dif-fit);
}

.dif-winner__headline {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.dif-winner__body { margin-top: 8px; font-size: 15px; }

.dif-winner__sources {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--dif-muted);
}

.dif-ctastack { display: grid; gap: 10px; margin-top: var(--dif-rhythm); }

/* --- 15. Composer bar + toast ------------------------------------------- */
/* R1.1: fixed, opaque, bordered — and the stream pads itself by its height. */
.dif-composerbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--dif-bg);
  border-top: 1px solid var(--dif-line);
}

@media (min-width: 420px) {
  .dif-composerbar { padding-left: var(--dif-pad); padding-right: var(--dif-pad); }
}

.dif-composerbar__inner {
  max-width: var(--dif-max);
  margin: 0 auto;
}

/* align the composer with the main column when the rail is showing */
@media (min-width: 1100px) {
  .dif-composerbar__inner {
    display: grid;
    grid-template-columns: minmax(0, var(--dif-max)) var(--dif-rail-w);
    gap: var(--dif-rail-gap);
    justify-content: center;
    max-width: none;
  }
}

.dif-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 6px 6px 16px;
  background: var(--dif-surface);
  border: 1.5px solid var(--dif-carbon);
  border-radius: 26px;
  box-shadow: var(--dif-shadow);
}


/* size only — the icon asset carries its own stroke attributes (1.8 / 2.3 dots) */

.dif-composer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--dif-carbon);
  padding: 12px 0;
}

.dif-composer__input::placeholder { color: var(--dif-muted); }
.dif-composer__input:focus { outline: none; }
.dif-composer:focus-within { box-shadow: 0 0 0 3px var(--dif-fill-quiet); }

.dif-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dif-composer-h) + 16px);
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(calc(var(--dif-max) - 60px), calc(100vw - 32px));
  padding: 10px 16px;
  background: var(--dif-carbon);
  color: var(--dif-on-dark);
  border-radius: var(--dif-radius-sm);
  font-size: 14px;
}

.dif-toast[hidden] { display: none; }

/* --- 16. Ghost content pages -------------------------------------------- */
/* Ghost's Design > Fonts setting applies to the answer pages only. The chat app
   keeps the locked system stack from concept doc §4.4 — the UI is not themable. */
.dif-page { padding: 24px 16px 64px; font-family: var(--gh-font-body, var(--dif-font)); }

@media (min-width: 420px) {
  .dif-page { padding-left: var(--dif-pad); padding-right: var(--dif-pad); }
}

.dif-page-title,
.dif-post-title,
.dif-postcard h2,
.dif-content h2,
.dif-content h3 { font-family: var(--gh-font-heading, var(--dif-font)); }

.dif-page-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.dif-page-sub { margin-top: 8px; color: var(--dif-muted); }

.dif-postcard {
  margin-top: var(--dif-rhythm);
  padding: var(--dif-pad);
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
}

.dif-postcard h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.dif-postcard h2 a { text-decoration: none; }
.dif-postcard p { margin-top: 8px; }

.dif-meta { font-size: 13px; color: var(--dif-muted); }

.dif-post-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.dif-feature { margin-top: 18px; border-radius: var(--dif-radius); }

.dif-content { margin-top: 20px; font-size: 17px; line-height: 1.6; }
.dif-content > * + * { margin-top: 18px; }
.dif-content h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
.dif-content h3 { font-size: 19px; font-weight: 700; }
.dif-content ul, .dif-content ol { padding-left: 22px; list-style: disc; }
.dif-content ol { list-style: decimal; }
.dif-content a { color: var(--dif-carbon); text-decoration: underline; }

.dif-content blockquote {
  padding-left: 16px;
  border-left: 3px solid var(--dif-line-strong);
  color: var(--dif-muted);
}

/* --- 16b. Methodology --------------------------------------------------- */
.dif-methodology-page { width: min(100%, 1120px); margin: 0 auto; padding: 40px var(--dif-pad) 88px; font-family: var(--gh-font-body, var(--dif-font)); }
.dif-methodology__hero { max-width: 760px; padding: 18px 0 34px; border-bottom: 1px solid var(--dif-line); }
.dif-methodology__eyebrow, .dif-methodology__nav > p, .dif-methodology__next-step-label { color: var(--dif-caveat-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dif-methodology__lede { max-width: 620px; margin-top: 12px; color: var(--dif-muted); font-size: 18px; line-height: 1.5; }
.dif-methodology__layout { margin-top: 34px; }
.dif-methodology__nav { display: none; }
.dif-methodology__content { max-width: 760px; font-size: 17px; line-height: 1.68; }
.dif-methodology__content > * + * { margin-top: 22px; }
.dif-methodology__content h1, .dif-methodology__content h2 { font-family: var(--gh-font-heading, var(--dif-font)); color: var(--dif-carbon); }
.dif-methodology__content h1 { max-width: 760px; font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.dif-methodology__content h2 { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--dif-line); font-size: 26px; font-weight: 760; letter-spacing: -.025em; line-height: 1.16; }
.dif-methodology__content h1 + p { max-width: 700px; margin-top: 20px; color: var(--dif-muted); font-size: 19px; line-height: 1.58; }
.dif-methodology__content strong { font-weight: 800; }
.dif-methodology__content h2 + p strong:first-child { color: var(--dif-carbon); }
.dif-methodology__content ul { display: grid; gap: 10px; margin-top: 24px; padding: 22px 24px; list-style: disc inside; background: var(--dif-fill-quiet); border: 1px solid var(--dif-line); border-radius: var(--dif-radius); }
.dif-methodology__content ul + p { color: var(--dif-muted); }
.dif-methodology__next-step { margin-top: 54px; padding: 26px; background: var(--dif-carbon); border-radius: 16px; color: var(--dif-on-dark); box-shadow: var(--dif-shadow); }
.dif-methodology__next-step p:not(.dif-methodology__next-step-label) { max-width: 560px; margin-top: 9px; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.5; }
.dif-methodology__next-step-label { color: rgba(255,255,255,.68); }
.dif-methodology__next-step a { display:inline-flex; align-items:center; gap:8px; margin-top:18px; color: var(--dif-on-dark); font-size:15px; font-weight:800; text-decoration:none; }
.dif-methodology__next-step a span { font-size: 20px; }
@media (min-width: 900px) {
  .dif-methodology-page { padding-top: 64px; padding-bottom: 112px; }
  .dif-methodology__layout { display: grid; grid-template-columns: 152px minmax(0, 760px); gap: 72px; align-items: start; }
  .dif-methodology__nav { position: sticky; top: 96px; display: block; padding-top: 10px; }
  .dif-methodology__nav nav { display: grid; gap: 9px; margin-top: 14px; }
  .dif-methodology__nav a { color: var(--dif-muted); font-size: 13px; font-weight: 650; line-height: 1.3; text-decoration: none; }
  .dif-methodology__nav a:hover { color: var(--dif-carbon); text-decoration: underline; text-underline-offset: 3px; }
}

.dif-content figure { margin: 0; }
.dif-content figcaption { margin-top: 8px; font-size: 13px; color: var(--dif-muted); }
.dif-content img { border-radius: var(--dif-radius); }

.dif-content pre {
  padding: 14px;
  overflow-x: auto;
  background: var(--dif-fill-quiet);
  border-radius: var(--dif-radius-sm);
}

/* Koenig cards — required by gscan so editor content is never unstyled */
.kg-width-wide { max-width: 100%; }
.kg-width-full { max-width: 100%; }
.kg-image { display: block; margin: 0 auto; }

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

.kg-gallery-row { display: flex; flex-direction: row; gap: 8px; }
.kg-gallery-image img { display: block; width: 100%; height: auto; border-radius: var(--dif-radius-sm); }

.kg-bookmark-card { width: 100%; margin-top: 18px; }

.kg-bookmark-container {
  display: flex;
  min-height: 148px;
  color: var(--dif-carbon);
  text-decoration: none;
  background: var(--dif-surface);
  border: 1px solid var(--dif-line);
  border-radius: var(--dif-radius);
  box-shadow: var(--dif-shadow);
  overflow: hidden;
}

.kg-bookmark-content { flex: 1 1 auto; padding: 18px; }
.kg-bookmark-title { font-weight: 700; letter-spacing: -0.01em; }
.kg-bookmark-description { margin-top: 6px; font-size: 15px; color: var(--dif-muted); }

.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--dif-muted);
}

.kg-bookmark-icon { width: 18px; height: 18px; }
/* single-line metadata strings inside a bookmark card, ellipsised not wrapped */
.kg-bookmark-author { white-space: nowrap; }
.kg-bookmark-publisher { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-bookmark-thumbnail { flex: 0 0 33%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.dif-pagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  font-size: 15px;
}

/* --- 17. Focus + a11y --------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dif-carbon);
  outline-offset: 2px;
  border-radius: var(--dif-radius-sm);
}

.dif-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--dif-carbon);
}

.dif-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dif-icon--lg svg { width: 26px; height: 26px; }
.dif-icon--xl svg { width: 34px; height: 34px; }
.dif-icon--end { margin-left: auto; }

/* icon-only colour classes — evidence classes, not decoration */
.dif-icon--caveat { color: var(--dif-caveat); }
.dif-icon--fit { color: var(--dif-fit); }
.dif-icon--nofit { color: var(--dif-nofit); }