/* Appearance settings.
 *
 * Layered on top of color-scheme.css rather than replacing it. The existing
 * file already resolves light/dark into html[data-sk-scheme] and overrides the
 * theme's variables for dark; this one adds the two things it does not have, an
 * accent colour and a reading-size multiplier, and styles the panel itself.
 *
 * The accent is applied to a small set of custom properties, and the rules that
 * consume them are the site's own controls and links. Rewriting the theme's
 * whole palette would fight Blocksy on every update; touching a defined set of
 * hooks means a theme change leaves this working or visibly not working, rather
 * than producing a site that is half one theme and half another.
 *
 * Contrast is chosen per accent, not assumed. A colour that reads well as a
 * button on white is often unreadable as link text on the dark background, so
 * each accent supplies a separate link value for dark mode rather than relying
 * on the browser to adjust it.
 */

/* The accent palette itself is not here. It lives in appearance-tint.css, which
   is generated from gen_palette.py and loaded after this file, because the same
   twelve accents now drive the page tint and not just the controls. Keeping a
   second hand-written copy of the same values in this file is how they drift
   apart; the fallbacks on the rules below only matter if that file fails to
   load at all. */

/* Reading size. A multiplier rather than a font-size, so it composes with the
   visitor's own browser setting and with browser zoom instead of replacing
   them. Applied to the root so everything inside scales together, including the
   theme's own components, and line-height grows with it so large text does not
   become hard to track across. */
html[data-sk-text-scale] {
  font-size: calc(100% * var(--sk-text-scale, 1));
}

/* The root rule alone is not enough, and shipping only that would have made this
   control look broken. The theme sizes the actual reading text from
   --theme-font-size, which is an absolute pixel value, so it does not inherit
   from the root and stayed at 15-16px while headings and rem-based spacing grew.
   The same factor is applied to that variable's consumers, prefixed with the
   attribute selector so it outranks the theme's own selectors.

   --theme-font-size is a pixel length rather than a rem or em, so multiplying it
   cannot feed back into the root rule above and compound on each change. The
   line-height is set here because the theme's own is an absolute pixel value and
   would leave the text cramped once it is larger. */
html[data-sk-text-scale] body,
html[data-sk-text-scale] .entry-content,
html[data-sk-text-scale] .entry-summary,
html[data-sk-text-scale] .ct-widget *,
html[data-sk-text-scale] .site-footer {
  font-size: calc(var(--theme-font-size, 1rem) * var(--sk-text-scale, 1));
  line-height: 1.65;
}

/* Where the accent is actually used. Deliberately the site's own interactive
   surfaces: the theme's buttons and links are left alone so the tool cannot
   leave a half-themed control behind if the theme changes. */
.sk-media-button,
.sk-rewrite-button,
.sk-rewrite-ghost {
  background: var(--sk-accent, #3b6ea5);
  border-color: var(--sk-accent, #3b6ea5);
  color: var(--sk-accent-ink, #fff);
}
.sk-media-button:hover,
.sk-rewrite-button:hover {
  background: var(--sk-accent-hover, #2f5a8a);
  border-color: var(--sk-accent-hover, #2f5a8a);
}
.sk-rewrite-ghost {
  background: transparent;
  color: var(--sk-accent, #3b6ea5);
}
.sk-rewrite-ghost:hover {
  background: var(--sk-accent-soft, rgba(59,110,165,0.12));
}
.sk-rewrite-panel,
.sk-media-panel {
  border-color: var(--sk-accent-line, #dce4ea);
}
.sk-rewrite-mode:has(input:checked) {
  border-color: var(--sk-accent, #3b6ea5);
  background: var(--sk-accent-soft, rgba(59,110,165,0.12));
}

/* ------------------------------------------------------------------ panel */

/* The focus ring follows the accent. This is the one theme surface the accent
   is allowed to reach, and it is a deliberate exception: the ring only exists
   while someone is navigating by keyboard, so it changes how nothing looks at
   rest, and it is the piece of chrome a visitor is most likely to want tuned.
   The tool pages keep their own accent because those palettes were chosen for
   measured contrast against their own backgrounds and are not interchangeable;
   the ring sits outside all of that. */
html[data-sk-accent] :focus-visible {
  outline: 2px solid var(--sk-accent, #3b6ea5);
  outline-offset: 2px;
  border-radius: 3px;
}

/* color-scheme.css hides all three icon variants inside .sk-scheme-toggle,
   because the old cycling button revealed exactly one of them at a time with an
   inline style. This button reuses that class for the header placement, so it
   inherits a rule that hides the single icon it does draw, leaving an empty
   button in the header. The override is scoped to the new class so the old
   toggle, if it is ever used again, keeps working. */
.sk-appearance-trigger .sk-icon-auto {
  display: block;
}

.sk-appearance-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sk-appearance-panel {
  position: fixed;
  z-index: 100000;
  top: 60px;
  right: 16px;
  width: min(320px, calc(100vw - 32px));
  background: var(--sk-panel-bg, #fff);
  color: var(--sk-panel-ink, #22303a);
  border: 1px solid var(--sk-panel-line, #dce4ea);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 25, 35, 0.22);
  padding: 16px;
  font-size: 0.94rem;
}
html[data-sk-scheme="dark"] .sk-appearance-panel {
  --sk-panel-bg: #151d24;
  --sk-panel-ink: #e6edf3;
  --sk-panel-line: #2c3944;
}

.sk-appearance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}
.sk-appearance-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.sk-appearance-close {
  border: 1px solid var(--sk-panel-line, #dce4ea);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 4px 9px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.sk-appearance-close:hover {
  background: var(--sk-accent-soft, rgba(59,110,165,0.12));
}

.sk-appearance-group { margin: 0 0 16px; }
.sk-appearance-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 0 0 7px;
}

.sk-appearance-segmented {
  display: flex;
  border: 1px solid var(--sk-panel-line, #dce4ea);
  border-radius: 8px;
  overflow: hidden;
}
.sk-appearance-option {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 7px 6px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-right: 1px solid var(--sk-panel-line, #dce4ea);
}
.sk-appearance-option:last-child { border-right: 0; }
.sk-appearance-option.is-selected {
  background: var(--sk-accent, #3b6ea5);
  color: var(--sk-accent-ink, #fff);
  font-weight: 600;
}
.sk-appearance-option:not(.is-selected):hover {
  background: var(--sk-accent-soft, rgba(59,110,165,0.12));
}

.sk-appearance-swatches {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.sk-appearance-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--panel-line, transparent);
  background: var(--swatch, #3b6ea5);
  cursor: pointer;
  padding: 0;
  position: relative;
}
html[data-sk-scheme="dark"] .sk-appearance-swatch { border-color: #2c3944; }
.sk-appearance-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--sk-panel-bg, #fff), 0 0 0 4px var(--sk-accent, #3b6ea5);
}
.sk-appearance-swatch.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
}

.sk-appearance-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  opacity: 0.6;
  line-height: 1.45;
}

/* On a phone the panel is a sheet, anchored to the bottom where a thumb can
   reach it and where it cannot cover the header control that opened it. */
@media (max-width: 700px) {
  .sk-appearance-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 14px 14px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* A visitor who has asked for less motion gets none of the panel's movement
   either. Nothing here animates by default, but the transition is added only
   where it is not wanted. */
@media (prefers-reduced-motion: reduce) {
  .sk-appearance-panel,
  .sk-appearance-option,
  .sk-appearance-swatch {
    transition: none !important;
  }
}