/* theme.css -- palette for the editor when it runs inside a WordPress theme.
 *
 * app.css defines the structure and deliberately leaves colour to the host.
 * This file is that host's answer, and the rule it follows is simple:
 *
 *   THE THEME'S OWN COLOURS WIN. Text is `inherit` -- the editor never sets a
 *   text colour. Panels are transparent. Borders are derived from `currentColor`,
 *   so they automatically contrast correctly in a light theme, a dark theme, and
 *   a high-contrast theme, with no media query and no `prefers-color-scheme`
 *   guess (which would follow the OPERATING SYSTEM, not the site, and get it
 *   wrong for anyone whose OS and site disagree).
 *
 * Two exceptions, both semantic and neither of which any theme provides:
 *   --toz-changed / --toz-locked  yellow "reading changed", blue "manual".
 * These use light-dark() when supported, keyed on the theme's color-scheme.
 */

.toz-app {
  /* Borders and secondary text, derived from whatever colour the theme gives
     the surrounding content. */
  --toz-line: color-mix(in srgb, currentColor 16%, transparent);
  --toz-line-soft: color-mix(in srgb, currentColor 9%, transparent);
  --toz-muted: color-mix(in srgb, currentColor 58%, transparent);

  /* Use the theme's accent when it publishes one (every modern WordPress theme
     does, via Global Styles). */
  --toz-accent: var(--wp--preset--color--accent-1, #1f6f5c);
  --toz-accent-ink: var(--wp--preset--color--base, #fff);
  --toz-accent-soft: color-mix(in srgb, var(--toz-accent) 15%, transparent);

  /* "Reading changed" highlight. This is a marker yellow, so it is only
     legible on a dark or saturated backdrop -- 4.34:1 on this site's blue
     article background, ~15:1 on the standalone dark panel, but only 1.22:1 on
     a white page. It survives here because the theme supplies a coloured
     article background; a theme that renders white-on-white will not. */
  --toz-changed: #f9ee21;
  --toz-locked: #2f5fa8;
}

/* @supports gates the sharper pair rather than relying on a fallback, because
   an unparsed light-dark() inside a custom property would invalidate every
   `color: var(--toz-changed)` that uses it -- the declaration would fall back to
   `inherit` and the semantic colours would silently disappear. */
@supports (color: light-dark(#000, #fff)) {
  .toz-app {
    --toz-changed: light-dark(#f9ee21, #f9ee21);
    --toz-locked: light-dark(#2f5fa8, #7fa8e8);
  }
}

/* ------------------------------------------------------------------ reset */

/* Themes style these globally and more aggressively than the element selectors
   app.css can use, so reclaim them inside the editor with matching
   specificity. Scoped to `.toz-app`, so nothing leaks out. */
.toz-app p { margin: 0 0 8px; }
.toz-app ol { margin: 0; padding-left: 20px; }
.toz-app h1, .toz-app h2 { margin: 0; line-height: 1.4; }
.toz-app code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .92em;
}
.toz-app b, .toz-app strong { font-weight: 650; }
.toz-app textarea { font-size: inherit; }

/* Many themes make the first <h1> on a page full-size and hide subsequent
   ones. The editor's title bar must not be at risk of inheriting that. */
.toz-bar h1 {
  font-size: 15px; font-weight: 650; line-height: 1.4;
  margin: 0; letter-spacing: .02em;
}

/* ------------------------------------------------------------- page title */

/* "禁止页面标题". The theme prints its own <h1> from the page's post_title, and
   the editor prints a title bar of its own, so leaving both on gives the reader
   the same three characters twice in a row before any content.

   The title is hidden with CSS rather than by filtering `the_title`, on purpose:
   `the_title` also feeds <title>, the admin list tables, feeds, the REST API and
   every theme breadcrumb, and blanking it there quietly destroys all of them --
   while changing nothing on screen that a filter could not then be scoped away
   from. This rule is scoped to the body class the plugin adds, and to that one
   page only.

   `.nv-page-title-wrap` is what Neve emits (verified in the served HTML); the
   `h1.entry-title` selector is the other common spelling, kept as a fallback. */
body.toneoz-editor-page .nv-page-title-wrap,
body.toneoz-editor-page h1.entry-title { display: none; }

/* ------------------------------------------------------------------ layout */

/* Inside a theme the editor must not claim the whole viewport height: an article
   page has a header above and a footer below. `auto` (app.css's default) makes it
   grow with its content, and app.js's `fitHeight()` then measures the gap down to
   the footer and writes it to `--toz-h`, which `.toz-app`'s `min-height` picks up.

   These caps stay, and they are load-bearing rather than legacy. They are what
   keeps the editor the height of the room between header and footer: 60vh/70vh of
   the viewport plus chrome lands almost exactly on the footer. Removing them in
   favour of "let the panes fill the measured height" was measured on the live site
   and made it 1110px tall inside a 700px window -- the footer went from just below
   the fold to 1190px down the page, which is the opposite of filling the space
   between the header and the footer. The preview's font is 64px and each pane is
   only ~320px wide, so unwrapped text wraps into a tower. The fill is therefore
   `min-height` (grow-only) and these caps stay exactly as they were. */
.toz-preview, .toz-plain { max-height: 60vh; }
.toz-readbody { max-height: 70vh; }

/* Some themes clip horizontally on small screens; the preview has to be able to
   scroll its own long line rather than widen the page. */
.toz-app { overflow-x: hidden; }

/* --------------------------------------------------------------- niceties */

/* Focus rings that follow the theme's accent instead of the browser default,
   which can be invisible on a themed button. */
.toz-app :focus-visible { outline: 2px solid var(--toz-accent); outline-offset: 2px; }

/* Leave room for themes that reserve space for a sticky header on the first
   paint. `scroll-margin` costs nothing and prevents the title bar from hiding
   under it when a reader follows an in-page anchor. */
.toz-app { scroll-margin-top: 80px; }

/* --------------------------------------------------------------- overrides */

/* Escape hatch for a site that needs to restyle the editor. Load a stylesheet
   AFTER `toneoz-editor-theme` (i.e. on `wp_enqueue_scripts` priority 99) and
   you can set any token without touching these files:
 *
 *   add_filter( 'toneoz_editor_asset_base', ... );   // point at a CDN
 *
 * or simply:
 *
 *   add_action( 'wp_enqueue_scripts', function () {
 *       wp_add_inline_style( 'toneoz-editor-theme',
 *           '.toz-app{--toz-accent:#b00;}' );
 *   }, 99 );
 */