/* ============================================================
   KOENIG — editor card styling. Radius 0 everywhere; no second
   accent; no emoji; no blur; every tone from the ink ramp.

   STARTER PASS: covers card width, image/gallery/embed plates,
   bookmark/callout/toggle/button redesigns at a baseline. The
   full per-card treatment table lives in 01-ghost-theme-spec.md §4
   and 03-components-to-partials.md — flesh out during the design
   phase and check against 07-acceptance-checklist.md.
   ============================================================ */

/* card rhythm + width escapes (reading measure is set on .kg-prose) */
.kg-card + .kg-card,
.kg-prose > .kg-card { margin-top: var(--space-lg); }

/* Width escapes. The body column is 47.5rem. "Wide" = the feature plate's own
   measure; "full" = the note column's full width. Both CENTRE on the text
   column rather than flushing to the note's outer edge (the note-indent'd
   plate/title edge, --note-indent to the left of the text): a wide card
   sitting mid-paragraph flush to that outer edge read as knocked loose from
   the text above and below it, not deliberately overrun. Centring keeps the
   overrun symmetric at every width the indent clamps to, on posts and the
   already-centred .note--page body alike — one rule now covers both, where
   a second, page-only override used to duplicate the same math. Neither
   bleeds the viewport — plates stay framed on the sheet; only the fold's
   rules bleed. Ghost's stock 46.25em MQ rules for these classes lose to the
   bespoke geometry below on specificity. */
.kg-prose .kg-width-wide {
  max-width: none;
  width: min(var(--measure-wide), 100vw - 2 * var(--gutter));
  margin-inline: calc((100% - min(var(--measure-wide), 100vw - 2 * var(--gutter))) / 2);
}
.kg-prose .kg-width-full {
  max-width: none;
  width: min(100vw - 2 * var(--gutter), var(--content-max, 76rem));
  margin-inline: calc((100% - min(100vw - 2 * var(--gutter), var(--content-max, 76rem))) / 2);
  padding-inline: 0;
}

/* image card → plate */
.kg-image-card img,
.kg-embed-card,
.kg-gallery-card,
.kg-bookmark-card,
.kg-audio-card,
.kg-video-card,
.kg-file-card { border-radius: var(--radius) !important; }

.kg-image-card img {
  border: var(--line) solid var(--rule-strong);
  box-shadow: var(--cast-sm);
}
.kg-image-card figcaption,
figure figcaption {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--step--2);
  color: var(--text-faint);
  text-align: center;
  margin-top: var(--space-2xs);
}

/* native gallery — Ghost's card assets do the LAYOUT (package.json ships them:
   card_assets gallery.js sets each .kg-gallery-image's flex from the image's
   aspect ratio so mixed-ratio rows align, and gallery.css spaces rows/images
   with its --gap custom property). Excluding those assets once broke galleries
   outright — there is no CSS-only exclude, and the ratio maths never ran. The
   theme re-tunes the gap to its own token (extra specificity: Ghost's sheet
   loads after this one via ghost_head, incl. a 600px re-set of --gap) and
   dresses each print with the standard ink frame. */
.kg-prose .kg-gallery-card { --gap: var(--space-2xs); }
.kg-gallery-card .kg-gallery-image img { border: var(--line) solid var(--rule-strong); border-radius: var(--radius); }

.kg-embed-card iframe { border: var(--line) solid var(--rule-strong); border-radius: var(--radius); }

/* bookmark → plate (no default rounded card). Ghost's cards.min.css arrives
   AFTER this sheet via ghost_head and restates background/box-shadow at the
   same specificity — every declaration it would win back is !important here. */
.kg-bookmark-container {
  border: var(--line) solid var(--rule-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--cast-sm) !important;
  background: var(--surface-raised) !important;
}
.kg-bookmark-thumbnail img { border-radius: var(--radius) !important; }
.kg-bookmark-content { display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-md); }
.kg-bookmark-title { font-family: var(--font-serif); color: var(--text-strong); }
.kg-bookmark-description { color: var(--text-muted); font-size: var(--step--1); }
.kg-bookmark-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--step--2); color: var(--text-muted); }
.kg-bookmark-icon { width: 1em; height: 1em; margin-right: var(--space-3xs); border-radius: var(--radius); }
.kg-bookmark-author { color: var(--text-muted); }
.kg-bookmark-publisher { color: var(--text-faint); }

/* callout → full ink border + inset well; NO left-rule slop; no emoji */
.kg-callout-card {
  background: var(--surface-well) !important;
  border: var(--line) solid var(--rule-strong) !important;
  border-radius: var(--radius) !important;
  color: var(--text-body);
}
.kg-callout-emoji { display: none !important; }

/* toggle → ruled row, typographic marker, no chevron. Ghost's later sheet sets
   a grey fill, 4px radius and its own box — beat it declaration for declaration. */
.kg-toggle-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: var(--line) solid var(--rule-strong) !important;
  border-bottom: var(--line) solid var(--rule-strong) !important;
  border-radius: var(--radius) !important;
}
.kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-serif); }
.kg-toggle-card .kg-toggle-card-icon { display: none; }

/* button card → reuse the .btn look. Same cascade problem as the bookmark:
   Ghost's own a.kg-btn rule has equal specificity and loads later. */
.kg-button-card a.kg-btn {
  font-family: var(--font-mono) !important;
  font-size: var(--step--1) !important;
  font-weight: var(--wt-med) !important;
  text-transform: uppercase;
  letter-spacing: var(--track-button);
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius) !important;
  box-shadow: var(--cast-sm);
}
.kg-button-card a.kg-btn:hover { background: var(--accent) !important; }

/* header card → woodcut register */
.kg-header-card { border-radius: var(--radius); }
.kg-header-card .kg-header-card-heading { font-family: var(--font-serif); font-weight: var(--wt-bold); }

/* code card → plate frame, accent only on machine tokens. The frame lives on
   the <pre> ALONE: a captioned code card wraps its pre in figure.kg-code-card,
   and framing both printed a plate inside a plate. The sheet is RAISED
   (--paper-hi): a framed code plate sits ON the page like the bookmark plate,
   it is not a well pressed into it. The inline chips in prose.css are the
   well, and stay there — the two readings are the distinction. */
pre {
  background: var(--surface-raised);
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--cast-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--leading-mono);
  color: var(--code-fg);
  padding: var(--space-md);
  overflow-x: auto;
}
.kg-code-card { background: none; border: 0; box-shadow: none; padding: 0; }

/* Shiki-highlighted output (assets/js/shiki/highlight.js). The <pre.shiki>
   keeps the plate frame above; Shiki paints token colour inline from the
   --code-* tokens — only the ink ramp + the one sanguine accent appear.

   The FILL has to be restated here, with !important, because Shiki stamps
   `background-color:transparent` INLINE on this very <pre> (its theme sets
   editor.background: 'transparent' — build/shiki-entry.mjs), and an inline
   declaration beats the rule above at every specificity. Transparent does not
   let the plate show through, it shows the PAGE: every highlighted block
   rendered flush with --paper and the frame enclosed nothing but the sheet it
   sat on. Same reach as .gh-post-upgrade-cta-content below — !important is the
   only thing that gets past an inline non-important value. */
pre.shiki {
  color: var(--code-fg);
  background: var(--surface-raised) !important;
}
/* every code-in-plate inherits the plate's mono — including a PLAIN
   <pre><code> with no language class, which matches neither this block's
   Shiki case nor prose.css's `:not(pre) > code`, and so used to fall to the
   UA's own fixed font (Menlo on a Mac screen — near-invisible — but Courier
   in Chromium's print path, which is how it was caught) */
pre code {
  font-family: inherit;
  background: none;
  padding: 0;
  border: 0;
}
/* Shiki separates lines with a literal newline inside the <pre>; leave .line
   inline so it doesn't break a second time (that doubles the leading). */

/* signup card → subscribe plate */
.kg-signup-card { border-radius: var(--radius) !important; }

/* paywall / member CTA → a mezzotinta plate, not a solid accent block.
   Ghost injects gh-members-styles in <head> (after this sheet) and sets the fill
   INLINE from accent_color; !important beats the inline non-important declarations. */
.gh-post-upgrade-cta { color: var(--text-body); }
.gh-post-upgrade-cta-content {
  background: var(--surface-raised) !important;
  color: var(--text-body) !important;
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius) !important;
  box-shadow: var(--cast);
  font-family: var(--font-serif) !important;
  padding: var(--space-xl) !important;
}
.gh-post-upgrade-cta h2 {
  color: var(--text-strong) !important;
  font-family: var(--font-serif) !important;
  font-weight: var(--wt-semi);
  font-size: var(--step-2) !important;
  letter-spacing: var(--track-tight);
}
.gh-post-upgrade-cta p,
.gh-post-upgrade-cta small { color: var(--text-muted) !important; }
/* "Subscribe now" → the .btn treatment (ink → sanguine on hover), square, hard cast */
.gh-post-upgrade-cta .gh-btn {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius) !important;
  box-shadow: var(--cast-sm);
  font-family: var(--font-mono);
  font-weight: var(--wt-med);
  text-transform: uppercase;
  letter-spacing: var(--track-button);
  padding: 0.7em 1.3em;
  transition: background-color var(--dur) var(--step-ease);
}
.gh-post-upgrade-cta .gh-btn:hover { background: var(--accent-pressed) !important; }
.gh-post-upgrade-cta a[data-portal="signin"] { color: var(--ink) !important; text-decoration-color: var(--accent); }
.gh-post-upgrade-cta a[data-portal="signin"]:hover { color: var(--accent-text) !important; }

/* Cards without a bespoke treatment yet (audio, video, file, product, CTA…):
   hold the two hard invariants against Ghost's later sheet — no radius
   anywhere, and no accent-colour fills (one accent per view, and it is the
   theme's sanguine, not Ghost's accent_color setting). Bespoke rules above
   keep winning where they exist; inner controls keep Ghost's layout. */
.kg-prose [class*="kg-"] { border-radius: var(--radius) !important; }
.kg-prose .kg-style-accent,
.kg-prose .kg-btn-accent,
.kg-prose .kg-product-card-btn-accent {
  background-color: var(--ink) !important;
  color: var(--paper) !important;
}
.kg-prose .kg-btn-accent:hover,
.kg-prose .kg-product-card-btn-accent:hover { background-color: var(--accent-pressed) !important; }
.kg-prose .kg-cta-link-accent { color: var(--ink) !important; }

/* tables — ruled, mono head */
.kg-prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.kg-prose th { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); text-align: left; border-bottom: var(--line) solid var(--rule-strong); padding: var(--space-2xs); }
.kg-prose td { border-bottom: var(--hair) solid var(--rule); padding: var(--space-2xs); }