/* Empty Knowledge. Flip + next deck. Dark monochrome, amber accent. */

:root {
  --knowledge-bg: #050505;
  --knowledge-card-bg: #100a05;
  --knowledge-border: #5a3a1a;
  --knowledge-border-dim: #2a1f10;
  --knowledge-text: #f0d6a8;
  --knowledge-text-strong: #ffe0b0;
  --knowledge-text-dim: #c8a070;
  --knowledge-text-faint: #806040;
  --knowledge-accent: #d4a25c;
  --knowledge-accent-soft: #8a6a3a;
}

/* ---------- Admin gate (knowledge is owner-only) ---------- */

.knowledge-admin-locked {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 22px 96px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--knowledge-text-faint);
  text-align: center;
}
.knowledge-admin-locked-line {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--knowledge-text-faint);
  margin: 0;
}
.knowledge-admin-only { display: none !important; }
body.is-admin .knowledge-admin-locked { display: none; }
body.is-admin .knowledge-admin-only { display: revert !important; }

/* ---------- Landing (knowledge/index.md) ---------- */

.knowledge-landing {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 22px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--knowledge-text);
}

.knowledge-landing-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.knowledge-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--knowledge-text-faint);
  margin: 0;
}

.knowledge-eyebrow .tm-mark {
  font-size: 8px;
  letter-spacing: 0;
}

.knowledge-landing-top h1 {
  font-size: 28px;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--knowledge-text-strong);
  font-weight: 500;
}

.knowledge-lede {
  font-size: 14px;
  line-height: 1.65;
  color: var(--knowledge-text-dim);
  margin: 0;
}

.knowledge-landing-foot {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--knowledge-text-faint);
  margin: 0;
}

.knowledge-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
}

.knowledge-deck-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border: 1px solid var(--knowledge-border);
  background: rgba(20, 14, 6, 0.5);
  color: var(--knowledge-text);
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.knowledge-deck-tile:hover {
  background: rgba(40, 28, 12, 0.7);
  border-color: var(--knowledge-accent);
  transform: translateY(-2px);
}

.knowledge-deck-tile,
.knowledge-deck-tile:hover,
.knowledge-deck-tile:focus,
.knowledge-deck-tile:visited {
  text-decoration: none;
}

.content .knowledge-deck-tile,
.content .knowledge-deck-tile:hover,
.content .knowledge-deck-tile:focus,
.content .knowledge-deck-tile:visited {
  text-decoration: none;
}

.knowledge-deck-tile > * {
  text-decoration: none;
}

.knowledge-deck-name {
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--knowledge-accent);
}

.knowledge-deck-count {
  font-size: 12px;
  color: var(--knowledge-text-strong);
}

.knowledge-deck-source {
  font-size: 11px;
  color: var(--knowledge-text-faint);
  letter-spacing: 0.04em;
}

.knowledge-deck-tile-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-deck-export {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--knowledge-text-faint);
  text-decoration: none;
  padding: 6px 4px;
  align-self: flex-start;
  transition: color 120ms;
}

.knowledge-deck-export:hover {
  color: var(--knowledge-accent);
}

/* ---------- Single-card grid (Stage 3 redesign) ---------- */
/* Replaces family-deck-grid as the /knowledge/ landing surface.            */
/* 4-col desktop, 3-col tablet, 2-col mobile, 1-col narrow. Tier-aware     */
/* via data-visibility on each tile (CSS in style.css hides member/private */
/* unless body class unlocks).                                              */

.knowledge-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

@media (max-width: 1080px) {
  .knowledge-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .knowledge-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .knowledge-card-grid { grid-template-columns: 1fr; }
}

.knowledge-card-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  min-height: 132px;
  border: 1px solid var(--knowledge-border);
  background: rgba(20, 14, 6, 0.5);
  color: var(--knowledge-text);
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.knowledge-card-tile:hover {
  background: rgba(40, 28, 12, 0.7);
  border-color: var(--knowledge-accent);
  transform: translateY(-1px);
}

.knowledge-card-tile--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 168px;
  justify-content: space-between;
}

.knowledge-card-tile--image:hover {
  background-size: cover;
  background-position: center;
}

.knowledge-card-tile--image .knowledge-card-tile-title {
  color: #ededed;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.knowledge-card-tile--image .knowledge-card-tile-family,
.knowledge-card-tile--image .knowledge-card-tile-index {
  color: #c8c8c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.content .knowledge-card-tile,
.content .knowledge-card-tile:hover,
.content .knowledge-card-tile:focus,
.content .knowledge-card-tile:visited {
  text-decoration: none;
}

.knowledge-card-tile-family {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--knowledge-text-faint);
}

.knowledge-card-tile-title {
  font-size: 13px;
  line-height: 1.35;
  color: var(--knowledge-accent);
  flex: 1;
}

.knowledge-card-tile-index {
  font-size: 10px;
  color: var(--knowledge-text-faint);
  align-self: flex-end;
}

/* Tier-aware grid: hide cards by tier unless body class unlocks them.     */
/* Mirrors the library-item rules in style.css.                            */
.knowledge-card-tile[data-visibility="member"],
.knowledge-card-tile[data-visibility="private"],
.knowledge-card-tile[data-visibility="pending"] { display: none; }

body.dtg-tier-member .knowledge-card-tile[data-visibility="member"] { display: flex; }
body.dtg-tier-private .knowledge-card-tile[data-visibility="member"],
body.dtg-tier-private .knowledge-card-tile[data-visibility="private"] { display: flex; }
body.dtg-admin .knowledge-card-tile[data-visibility="member"],
body.dtg-admin .knowledge-card-tile[data-visibility="private"],
body.dtg-admin .knowledge-card-tile[data-visibility="pending"] { display: flex; }

/* Admin-only tier badge in the corner. */
body.dtg-admin .knowledge-card-tile[data-visibility]:not([data-visibility="public"])::after {
  content: attr(data-visibility);
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--knowledge-text-faint);
  text-transform: uppercase;
}
body.dtg-admin .knowledge-card-tile { position: relative; }

/* ---------- Legacy landing CTA (still used in some redirects) ---------- */

.knowledge-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 32px;
}

.knowledge-cta-btn {
  display: inline-block;
  padding: 14px 22px;
  border: 1px solid var(--knowledge-accent);
  background: transparent;
  color: var(--knowledge-accent);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.knowledge-cta-btn:hover {
  background: var(--knowledge-accent);
  color: #000;
}

.knowledge-preview {
  margin: 24px 0 32px;
  overflow-x: auto;
}

.knowledge-card-frame {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--knowledge-text);
  background: rgba(20, 14, 6, 0.5);
  padding: 18px 14px;
  border: 1px solid var(--knowledge-border);
  white-space: pre;
  margin: 0;
}

/* ---------- Feed (knowledge/feed.md) ---------- */

.knowledge-feed-shell {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: var(--knowledge-bg);
  color: var(--knowledge-text);
  font-family: 'JetBrains Mono', monospace;
  overflow: visible;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

.knowledge-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 3px,
    transparent 4px
  );
  z-index: 1;
}

.knowledge-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--knowledge-border-dim);
  z-index: 2;
  position: relative;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.knowledge-topbar-back,
.knowledge-topbar-reset {
  color: var(--knowledge-accent);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}

.knowledge-topbar-back:hover,
.knowledge-topbar-reset:hover {
  color: var(--knowledge-text-strong);
}

.knowledge-topbar-title {
  color: var(--knowledge-text-strong);
  font-weight: 600;
}

.knowledge-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 24px 16px 32px;
}

.knowledge-card-stack {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.knowledge-card {
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms;
}

.knowledge-card.is-fly-left  { transform: translateX(-140%) rotate(-22deg); opacity: 0; }
.knowledge-card.is-fly-right { transform: translateX(140%) rotate(22deg); opacity: 0; }
.knowledge-card.is-dragging  { transition: none; cursor: grabbing; }

/* voice 5535 (2026-05-21): button-driven next/back uses a quick fade, not
   the swipe fly-off. Fast (~120ms) so the next card shows immediately. */
.knowledge-card.is-fade-out {
  transition: opacity 120ms ease-out;
  opacity: 0;
}

.knowledge-card-inner {
  position: relative;
  width: 100%;
}

.knowledge-face {
  background: var(--knowledge-card-bg);
  border: 1px solid var(--knowledge-accent-soft);
  padding: 26px 22px 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  transition: opacity 200ms;
}

/* Default: front in flow (sets card height), back overlaid hidden. */
.knowledge-face--front { position: relative; opacity: 1; }
.knowledge-face--back  { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* Flipped: back in flow (sets card height), front overlaid hidden. */
.knowledge-card.is-flipped .knowledge-face--front { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.knowledge-card.is-flipped .knowledge-face--back  { position: relative; opacity: 1; pointer-events: auto; }

.knowledge-face-tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--knowledge-text-faint);
  margin-bottom: 10px;
}

.knowledge-face-tag--back { color: var(--knowledge-accent); }

.knowledge-concept {
  font-size: 19px;
  font-weight: 600;
  color: var(--knowledge-text-strong);
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.knowledge-hook {
  font-size: 14px;
  line-height: 1.65;
  color: var(--knowledge-text);
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.knowledge-law {
  font-size: 13px;
  line-height: 1.55;
  color: var(--knowledge-text-strong);
  font-style: italic;
  border-left: 2px solid var(--knowledge-accent);
  padding: 8px 0 8px 12px;
  margin-bottom: 14px;
}

.knowledge-mechanism {
  font-size: 13px;
  line-height: 1.7;
  color: var(--knowledge-text-dim);
  white-space: pre-wrap;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.knowledge-ascii {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--knowledge-text-dim);
  white-space: pre;
  margin: 8px 0 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--knowledge-border-dim);
  border-bottom: 1px dashed var(--knowledge-border-dim);
  overflow-x: auto;
}

.knowledge-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--knowledge-accent);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.knowledge-trigger {
  font-size: 14px;
  line-height: 1.6;
  color: var(--knowledge-text);
  margin-bottom: 18px;
}

.knowledge-drill {
  font-size: 14px;
  line-height: 1.7;
  color: var(--knowledge-text-strong);
  white-space: pre-wrap;
  flex: 0 0 auto;
}

.knowledge-face-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--knowledge-border-dim);
  font-size: 11px;
  color: var(--knowledge-text-faint);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
}

.knowledge-face-footer a {
  color: var(--knowledge-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--knowledge-accent-soft);
}

.knowledge-face-footer a:hover { color: var(--knowledge-text-strong); }

.knowledge-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  z-index: 5;
  /* voice 5535/5536 (2026-05-21): sticky-bottom made the buttons jitter
     up/down on scroll. Anchor them statically immediately below the card
     instead. The card is a fixed-content surface and the action row reads
     as part of the card chrome rather than a floating overlay. */
  position: relative;
  background: transparent;
}

.knowledge-action {
  min-width: 72px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--knowledge-accent-soft);
  background: var(--knowledge-card-bg);
  color: var(--knowledge-text);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms, background 120ms, color 120ms, border-color 120ms;
}

.knowledge-action:hover { transform: scale(1.08); }

.knowledge-action--dismiss:hover { color: #f8a060; border-color: #844; }
.knowledge-action--flip:hover    { color: var(--knowledge-accent); border-color: var(--knowledge-accent); }
.knowledge-action--share:hover   { color: #ffd060; border-color: #884; }
.knowledge-action--keep:hover    { color: #ffeeaa; border-color: var(--knowledge-accent); }

.knowledge-empty-state {
  text-align: center;
  color: var(--knowledge-text-dim);
  font-size: 14px;
}

.knowledge-empty-state a { color: var(--knowledge-accent); }

.knowledge-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--knowledge-card-bg);
  border: 1px solid var(--knowledge-accent-soft);
  color: var(--knowledge-text);
  padding: 10px 16px;
  font-size: 13px;
  z-index: 10;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

@media (max-width: 640px) {
  .knowledge-feed-shell {
    min-height: 100svh;
    /* voice 5717 (2026-05-22): action row is fixed to viewport bottom on
       mobile so the user never has to scroll to reach back/flip/next. Pad
       the shell so the card's last lines aren't trapped under the bar. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .knowledge-card-stack { height: auto; max-width: 100%; }
  /* voice 5717 (2026-05-22): no internal card scroll. Card grows to its
     natural height; only the page scrolls when content exceeds viewport. */
  .knowledge-face {
    padding: 22px 18px 18px;
  }
  .knowledge-concept { font-size: 17px; }
  .knowledge-hook, .knowledge-trigger, .knowledge-drill { font-size: 13.5px; }
  .knowledge-mechanism { font-size: 12.5px; }
  .knowledge-action { min-width: 64px; height: 38px; padding: 0 12px; font-size: 11px; }
  .knowledge-stage {
    min-height: 0;
    padding: 14px 14px 8px;
  }
  .knowledge-action-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--knowledge-bg);
    border-top: 1px solid var(--knowledge-border-dim);
    z-index: 20;
  }
}

/* =========================================================================
   v0.2 narrative shape. Recognition → story → law → credit.
   ========================================================================= */

.knowledge-card--v2 .knowledge-face {
  padding: 22px 22px 18px;
  /* voice 5717 (2026-05-22): no internal scroll; card grows to its
     natural height and only the page scrolls when needed. */
  overflow: visible;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.knowledge-card--v2 .knowledge-face--front {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.knowledge-family-image {
  position: relative;
  margin: -22px -22px 4px;
  border-bottom: 1px solid var(--knowledge-border-dim);
  background: #050505;
  overflow: hidden;
  flex: 0 0 auto;
}

.knowledge-family-image img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.88) contrast(1.04) saturate(0.92);
  /* voice 5530 (2026-05-21): block native image-drag so the card swipe
     handler receives pointermove events when the drag starts on the
     image. */
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.knowledge-family-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--knowledge-text-strong);
  background: rgba(8, 6, 3, 0.78);
  border: 1px solid var(--knowledge-accent-soft);
  padding: 4px 8px;
  z-index: 2;
}

.knowledge-family-badge--back {
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--knowledge-accent);
}

.knowledge-family-label {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--knowledge-text-strong);
  text-transform: uppercase;
  background: rgba(8, 6, 3, 0.7);
  padding: 4px 9px;
  border-left: 2px solid var(--knowledge-accent);
  z-index: 2;
}

/* Compact header strip for cards 2..N in a family (no cover image). */
.knowledge-family-strip {
  margin: -22px -22px 4px;
  padding: 10px 22px;
  background: rgba(20, 14, 6, 0.7);
  border-bottom: 1px solid var(--knowledge-border-dim);
  border-left: 2px solid var(--knowledge-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}

.knowledge-family-strip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--knowledge-text-strong);
  text-transform: uppercase;
}

.knowledge-family-strip-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--knowledge-accent);
}

.knowledge-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--knowledge-text-strong);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--knowledge-accent-soft);
  flex: 0 0 auto;
}

.knowledge-title--back {
  color: var(--knowledge-accent);
  border-bottom-color: var(--knowledge-border-dim);
  padding-bottom: 8px;
}

.knowledge-recognition {
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--knowledge-accent);
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--knowledge-border-dim);
  flex: 0 0 auto;
}

.knowledge-story {
  font-size: 15px;
  line-height: 1.65;
  color: var(--knowledge-text);
  white-space: normal;
  flex: 1 1 auto;
}

.knowledge-law-v2 {
  font-size: 15px;
  line-height: 1.5;
  color: var(--knowledge-text-strong);
  font-style: italic;
  font-weight: 500;
  padding: 14px 16px;
  background: rgba(212, 162, 92, 0.06);
  border-left: 2px solid var(--knowledge-accent);
  flex: 0 0 auto;
}

.knowledge-credit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--knowledge-text-faint);
  text-transform: lowercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--knowledge-border-dim);
  flex: 0 0 auto;
}

.knowledge-credit-concept {
  color: var(--knowledge-text-dim);
  font-weight: 500;
}

.knowledge-credit-sep { color: var(--knowledge-text-faint); opacity: 0.6; }

.knowledge-credit-source a {
  color: var(--knowledge-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--knowledge-accent-soft);
}
.knowledge-credit-source a:hover { color: var(--knowledge-text-strong); }

.knowledge-credit-flip { margin-left: auto; color: var(--knowledge-text-faint); }

/* v0.2 back face. Eyebrow + concept + trigger + drill + DID-THE-DRILL + credit. */

.knowledge-card--v2 .knowledge-face--back {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.knowledge-back-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--knowledge-accent);
  text-transform: uppercase;
}

.knowledge-back-concept {
  font-size: 19px;
  font-weight: 600;
  color: var(--knowledge-text-strong);
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--knowledge-border-dim);
}

.knowledge-back-trigger {
  font-size: 14px;
  line-height: 1.55;
  color: var(--knowledge-accent);
  font-style: italic;
}

.knowledge-back-drill {
  font-size: 15px;
  line-height: 1.65;
  color: var(--knowledge-text);
  white-space: normal;
  flex: 1 1 auto;
}

.knowledge-drill-btn {
  align-self: stretch;
  margin-top: 6px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--knowledge-accent);
  color: var(--knowledge-accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
  flex: 0 0 auto;
}

.knowledge-drill-btn:hover {
  background: var(--knowledge-accent);
  color: #000;
}

.knowledge-drill-btn.is-done {
  background: rgba(212, 162, 92, 0.12);
  color: var(--knowledge-text-strong);
  border-color: var(--knowledge-text-strong);
  cursor: default;
}

.knowledge-credit--back .knowledge-credit-flip { color: var(--knowledge-text-faint); }

/* Phone-first sizing for v0.2 cards. Budgeted against ~360px viewport. */
@media (max-width: 640px) {
  .knowledge-card--v2 .knowledge-face { padding: 18px 16px 14px; gap: 11px; }
  .knowledge-family-image {
    margin: -18px -16px 2px;
    height: clamp(210px, 62vw, 255px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .knowledge-family-strip {
    margin: -18px -16px 2px;
    padding: 8px 16px;
  }
  .knowledge-family-strip-label { font-size: 9px; letter-spacing: 0.2em; }
  .knowledge-family-strip-badge { font-size: 10px; }
  .knowledge-family-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .knowledge-family-badge { font-size: 10px; padding: 3px 7px; top: 8px; right: 10px; }
  .knowledge-family-label { font-size: 9px; padding: 3px 7px; bottom: 8px; left: 10px; }
  .knowledge-title { font-size: 12px; letter-spacing: 0.14em; padding-bottom: 8px; }
  .knowledge-recognition { font-size: 12.5px; padding-bottom: 10px; }
  .knowledge-story { font-size: 14px; line-height: 1.6; }
  .knowledge-law-v2 { font-size: 13.5px; padding: 11px 12px; }
  .knowledge-back-concept { font-size: 17px; padding-bottom: 10px; }
  .knowledge-back-trigger { font-size: 13px; }
  .knowledge-back-drill { font-size: 13.5px; line-height: 1.55; }
  .knowledge-drill-btn { padding: 10px 12px; font-size: 11px; }
  .knowledge-credit { font-size: 10px; gap: 6px; padding-top: 11px; }
}