/*
 * 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));
}

.pp-panel__citation {
  font-size: 0.85em;
  font-style: italic;
  color: var(--pp-muted, var(--pp-muted-default));
}

.pp-panel__source {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pp-border, var(--pp-border-default));
}

/* ------------------------------------------------------------------ *
 * Timeline shell
 *
 * .pp-timeline sets no width/float/grid-column — that is the host theme's
 * job (see README.md, "Full-viewport timeline"). This file only sizes the
 * canvas and, below, overrides vis-timeline's light-mode-only palette.
 * ------------------------------------------------------------------ */

.pp-timeline__canvas {
  width: 100%;
  min-height: 22rem;
}

@media (max-width: 700px) {
  .pp-timeline__canvas {
    min-height: 18rem;
  }
}

/* Mandatory, not cosmetic: vis-timeline ships light-mode-only styles and
 * visibly breaks (dark text on dark background, invisible grid lines)
 * under any dark theme without these. Must be enqueued at a lower priority
 * (i.e. later) than assets/vendor/vis-timeline-graph2d.min.css so these
 * win the cascade — see preview-panel.php's enqueueTimelineAssets(). */
@media (prefers-color-scheme: dark) {
  .pp-timeline__canvas .vis-timeline,
  .pp-timeline__canvas .vis-panel {
    border-color: rgba(255, 255, 255, 0.18);
  }

  .pp-timeline__canvas .vis-labelset .vis-label,
  .pp-timeline__canvas .vis-time-axis .vis-text {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .pp-timeline__canvas .vis-time-axis .vis-grid.vis-minor {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .pp-timeline__canvas .vis-time-axis .vis-grid.vis-major {
    border-color: rgba(255, 255, 255, 0.16);
  }

  .pp-timeline__canvas .vis-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: inherit;
  }

  .pp-timeline__canvas .vis-item.vis-selected {
    background: rgba(120, 170, 255, 0.28);
    border-color: rgba(120, 170, 255, 0.8);
  }

  .pp-timeline__canvas .vis-item .vis-item-content {
    color: inherit;
  }
}

:root[data-theme="dark"] .pp-timeline__canvas .vis-timeline,
:root[data-theme="dark"] .pp-timeline__canvas .vis-panel {
  border-color: rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .pp-timeline__canvas .vis-labelset .vis-label,
:root[data-theme="dark"] .pp-timeline__canvas .vis-time-axis .vis-text {
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .pp-timeline__canvas .vis-time-axis .vis-grid.vis-minor {
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .pp-timeline__canvas .vis-time-axis .vis-grid.vis-major {
  border-color: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .pp-timeline__canvas .vis-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: inherit;
}

:root[data-theme="dark"] .pp-timeline__canvas .vis-item.vis-selected {
  background: rgba(120, 170, 255, 0.28);
  border-color: rgba(120, 170, 255, 0.8);
}