/* _appearance.css 1.2.0 - [OLY-1555, 2026-10-04, Atlas] the shared Appearance panel for every fleet site
   (Macel 2026-09-28: "zelfde als wikipedia"). Three axes, set as attributes on <html> by the pre-paint snippet:
     data-ap-text  = small | standard | large
     data-ap-width = standard | wide
     data-ap-color = auto | light | dark
   COLOUR WORKS THROUGH color-scheme, ON PURPOSE. A page WITHOUT its own colours then follows completely: the
   browser draws canvas and text for that scheme. A page WITH its own colours keeps them; it opts in by reading
   html[data-ap-color] (or --ap-* below). Forcing a dark background onto a page that sets its own text colour
   is exactly the trap the item names: dark text on a forced dark ground. So we never force colours here.
   TEXT works on rem/em sizes (font-size on <html>); a page sized in px only does not scale - a stated limit.
   WIDTH: a page opts in with max-width: var(--ap-max-width, <its own>); common containers are opened anyway.
   1.1.0 OWN THEME: a page that already HAS a colour control of its own (the tracker: cookie tracker-thema,
   Macel's order of 2026-09-15) marks <html data-ap-eigen-kleur>. Then this file sets no color-scheme and the
   panel shows no Color axis: two colour switches on one page would contradict each other.
   1.2.0 OFFERED AXES: <html data-ap-assen="text"> (a space list of text/width/color) limits the panel to those
   axes AND switches the rules of the other axes off, so a choice made on another site (stored 'wide') cannot
   reach a page that does not offer it - the orrery, a full-screen globe, offers Text only. No attribute = all. */
html[data-ap-color="auto"]:not([data-ap-eigen-kleur]):is(:not([data-ap-assen]), [data-ap-assen~="color"])  { color-scheme: light dark; }
html[data-ap-color="light"]:not([data-ap-eigen-kleur]):is(:not([data-ap-assen]), [data-ap-assen~="color"]) { color-scheme: light; }
html[data-ap-color="dark"]:not([data-ap-eigen-kleur]):is(:not([data-ap-assen]), [data-ap-assen~="color"])  { color-scheme: dark; }

html[data-ap-text="small"]:is(:not([data-ap-assen]), [data-ap-assen~="text"]) { font-size: 87.5%; }
html[data-ap-text="large"]:is(:not([data-ap-assen]), [data-ap-assen~="text"]) { font-size: 118.75%; }

html[data-ap-width="wide"]:is(:not([data-ap-assen]), [data-ap-assen~="width"]) { --ap-max-width: none; }
html[data-ap-width="wide"]:is(:not([data-ap-assen]), [data-ap-assen~="width"]) :is(main, .container, .wrap, .page, .content, article) { max-width: none !important; }

/* the panel itself - its own colours follow the scheme via system colours, so it is readable on any page */
#ap-knop { position: fixed; right: 12px; bottom: 12px; z-index: 2147483000; font: 600 14px/1 system-ui, sans-serif;
  padding: 8px 10px; border-radius: 6px; border: 1px solid GrayText; background: Canvas; color: CanvasText; cursor: pointer; }
#ap-paneel { position: fixed; right: 12px; bottom: 52px; z-index: 2147483000; width: 220px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid GrayText; background: Canvas; color: CanvasText;
  font: 14px/1.4 system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
#ap-paneel[hidden] { display: none; }
#ap-paneel h2 { font-size: 15px; margin: 0 0 6px; display: flex; justify-content: space-between; align-items: center; }
#ap-paneel fieldset { border: 0; margin: 0 0 8px; padding: 0; }
#ap-paneel legend { font-weight: 600; padding: 0; margin-bottom: 2px; }
#ap-paneel label { display: block; cursor: pointer; }
#ap-paneel button { font: inherit; background: none; border: 1px solid GrayText; color: CanvasText; border-radius: 4px; cursor: pointer; }
@media print { #ap-knop, #ap-paneel { display: none !important; } }