/* PixelGlass content styling — what the platform owns, not the theme.
 *
 * The editor produces markup no theme author wrote (docs/THEMES.md, "Markup
 * inside post.content"). This sheet ships the part of its look a reader cannot
 * do without: a callout *is* a colour, so an untinted callout is not a callout
 * at all. Everything past that stays the theme's call.
 *
 * {% pixel_head %} links this ahead of the theme's own stylesheet, so a theme
 * overrides any rule here by redeclaring it — never by out-specifying it.
 * Selectors are attribute-only and unscoped for the same reason: the theme
 * decides where post content sits in its markup, so there is no wrapper class
 * to hang them on.
 *
 * It lives under lib/assets/ rather than app/assets/ on purpose. Both are on
 * Propshaft's load path, but the admin's `stylesheet_link_tag :app` collects
 * every stylesheet under app/assets — and /pixel styles this same
 * aside[data-callout] itself, inside .aero-editor. Two sheets, one selector,
 * one place they can meet: not here. (Do not write that glob out. A CSS
 * comment ends at the first star-slash, which the glob contains, and the
 * prose after it swallows the rule below as a selector.)
 */

/* Callout cards, authored in the editor as <aside data-callout="…">. One
   variable per name in Cards::Callout::BACKGROUNDS; the edge tone is mixed from
   the pair, so a colour can never be paired with a clashing border, and a name
   this sheet has never heard of still renders as a card in the default tint.
   A theme retints the whole set with one line per name. The ink is declared
   because the tints are light: a dark theme's body colour on top of them would
   be unreadable, and one variable is a cheaper fix than a media query that
   cannot know whether the theme is dark. */
aside[data-callout] {
  --callout-bg: #f5f7fc;
  --callout-ink: #16233f;
  --callout-edge: color-mix(in oklab, var(--callout-bg), var(--callout-ink) 12%);
  /* A top margin only: whatever follows brings its own, and vertical rhythm
     past that separation is the theme's to set. */
  margin-top: 1.5rem;
  border: 1px solid var(--callout-edge);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--callout-bg);
  color: var(--callout-ink);
}

aside[data-callout="grey"] { --callout-bg: #f5f7fc; }
aside[data-callout="blue"] { --callout-bg: #edf2fe; }
aside[data-callout="violet"] { --callout-bg: #f4f0ff; }
aside[data-callout="green"] { --callout-bg: #e6f6ed; }
aside[data-callout="amber"] { --callout-bg: #fbf0d6; }
aside[data-callout="red"] { --callout-bg: #fdecef; }

/* Video cards, authored in the editor as <figure data-video="…"> holding the
   provider's player (Cards::Video). An iframe with no size is a 300×150 box,
   which is not a film: the platform gives it the column and a 16:9 frame,
   and nothing past that — the radius, the margins and any wider measure are
   the theme's, as they are for a picture. */
figure[data-video] iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* The paywall, written in place of post.content for a reader the post is
   not for (ThemeRuntime::Paywall): a sentence, the gate's door, a sign-in
   line. It stands where the body would and must read as a stop, not as one
   more paragraph, so it gets a frame and a button — drawn from the theme's
   own ink (currentColor) and the publication's accent when one is set,
   since this sheet cannot know whether the theme is dark. The sizes and the
   fonts stay the theme's. */
.pixel-paywall {
  --paywall-accent: var(--pixel-accent, currentColor);
  margin-top: 2rem;
  border-top: 1px solid color-mix(in oklab, currentColor 20%, transparent);
  padding-top: 2rem;
  text-align: center;
}

.pixel-paywall > p { margin: 0.75rem 0 0; }
.pixel-paywall > p:first-child { margin-top: 0; }
.pixel-paywall-title { font-weight: 600; }

.pixel-paywall-button {
  display: inline-block;
  border: 1px solid var(--paywall-accent);
  border-radius: 999px;
  padding: 0.5em 1.25em;
  color: var(--paywall-accent);
  font-weight: 600;
  text-decoration: none;
}

.pixel-paywall-signin { opacity: 0.75; font-size: 0.9em; }