/*
 * preview-panel — panel styling.
 *
 * Deliberately does NOT hardcode any host theme's design tokens. A theme
 * integrates by setting this plugin's public custom properties, e.g.
 *
 *   .pp-panel { --pp-bg: var(--my-card-bg); --pp-border: var(--my-border); }
 *
 * IMPORTANT: this file never *declares* a public --pp-* property, it only
 * reads one with `var(--pp-x, var(--pp-x-default))`. That is what makes the
 * theming hook order-independent. Declaring `--pp-bg: transparent` here would
 * put the plugin and the theme at equal specificity, and Grav's Assets manager
 * renders a theme's custom.css *before* a plugin's stylesheet — so the
 * plugin's own default would silently win and the theme's mapping would do
 * nothing. Only the private --pp-*-default properties are set here.
 *
 * Placement is the theme's business too — this file sets no float, no grid
 * column and no width. See README.md.
 */

.pp-panel {
  --pp-bg-default: transparent;
  --pp-fg-default: inherit;
  --pp-border-default: rgba(0, 0, 0, 0.15);
  --pp-muted-default: rgba(0, 0, 0, 0.55);
  --pp-accent-default: currentColor;
  --pp-radius-default: 6px;

  background: var(--pp-bg, var(--pp-bg-default));
  color: var(--pp-fg, var(--pp-fg-default));
  border: 1px solid var(--pp-border, var(--pp-border-default));
  border-radius: var(--pp-radius, var(--pp-radius-default));
  padding: 1rem 1.25rem;
  min-height: 8rem;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Dark defaults, for a host theme that maps nothing. Only the *-default
 * properties move, so a theme that does map its own tokens is unaffected. */
@media (prefers-color-scheme: dark) {
  .pp-panel {
    --pp-border-default: rgba(255, 255, 255, 0.18);
    --pp-muted-default: rgba(255, 255, 255, 0.55);
  }
}

/* A theme's explicit toggle must win over the OS preference in both
 * directions, so mirror whichever root attribute it stamps. */
:root[data-theme="dark"] .pp-panel {
  --pp-border-default: rgba(255, 255, 255, 0.18);
  --pp-muted-default: rgba(255, 255, 255, 0.55);
}

:root[data-theme="light"] .pp-panel {
  --pp-border-default: rgba(0, 0, 0, 0.15);
  --pp-muted-default: rgba(0, 0, 0, 0.55);
}

.pp-panel__heading {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

/* Themes commonly hang a decorative rule off `h2::before` sized for page
 * headings (quark2 does). At panel scale that reads as a stray dash, so
 * suppress it on the plugin's own heading — a theme that wants it back can
 * re-enable it, since it owns the more specific context. */
.pp-panel__heading::before {
  display: none;
}

.pp-panel__extract > p:first-child {
  margin-top: 0;
}

.pp-panel__extract > p:last-child {
  margin-bottom: 0;
}

/* Leads carry markup we did not author — keep it inside the box. */
.pp-panel__extract img,
.pp-panel__extract table {
  max-width: 100%;
  height: auto;
}

.pp-panel__more {
  margin-bottom: 0;
  font-size: 0.9em;
}

.pp-muted {
  color: var(--pp-muted, var(--pp-muted-default));
}

/* A tagged link loads into the panel instead of navigating, so it should not
 * look identical to a link that leaves the page. */
.pp-source-link {
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.pp-panel .pp-source-link {
  text-decoration-color: var(--pp-accent, var(--pp-accent-default));
}