/*!
 * Kiswebs Accessibility Tools — standalone widget styles (Stage 1, v1.1)
 * Isolated from the host website: every class is prefixed `kiswebs-` and all
 * rules are scoped under the widget root so they cannot leak into or be
 * overridden by the host page. Branding colours use CSS custom properties that
 * the installer can override via the `colors` config or by setting the
 * variables on `.kiswebs-root`.
 */
.kiswebs-root,
.kiswebs-root * {
  box-sizing: border-box;
  font-family: var(--kiswebs-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  line-height: 1.45;
}
.kiswebs-root {
  --kiswebs-accent: #1f5fb4;
  --kiswebs-accent-hover: #1a4f95;
  --kiswebs-accent-contrast: #ffffff;
  --kiswebs-focus: #b0be00;
  --kiswebs-surface: #ffffff;
  --kiswebs-surface-muted: #f5f7fa;
  --kiswebs-border: #d8dee9;
  --kiswebs-text: #1f2937;
  --kiswebs-text-muted: #5b6675;
  --kiswebs-warning-bg: #fff7e6;
  --kiswebs-warning-border: #f5c97a;
  --kiswebs-warning-text: #8a5a00;
  --kiswebs-error-bg: #fdecec;
  --kiswebs-error-border: #f3b4b4;
  --kiswebs-error-text: #a02020;
  --kiswebs-z: 2147483000;
  color: var(--kiswebs-text);
}

/* Entry buttons ---------------------------------------------------------- */
.kiswebs-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kiswebs-accent-contrast);
  background-color: var(--kiswebs-accent);
  border: 1px solid var(--kiswebs-accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
.kiswebs-entry:hover { background-color: var(--kiswebs-accent-hover); }
.kiswebs-entry:active { transform: translateY(1px); }
.kiswebs-entry:focus {
  outline: 3px solid var(--kiswebs-focus);
  outline-offset: 2px;
}
.kiswebs-entry[aria-expanded="true"] {
  box-shadow: inset 0 -2px 0 var(--kiswebs-focus);
}

/* Fixed entry cluster (used when no mount point is configured) ---------- */
.kiswebs-entry-fixed {
  position: fixed;
  z-index: var(--kiswebs-z);
  display: flex;
  gap: 0.5rem;
}
.kiswebs-entry-fixed.kiswebs-pos-right-top { top: 0.75rem; right: 0.75rem; }
.kiswebs-entry-fixed.kiswebs-pos-right-bottom { bottom: 0.75rem; right: 0.75rem; }

/* Toolbar ---------------------------------------------------------------- */
.kiswebs-toolbar {
  background-color: var(--kiswebs-surface);
  border-bottom: 1px solid var(--kiswebs-border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  width: 100%;
}
.kiswebs-toolbar.kiswebs-pos-bottom {
  border-bottom: none;
  border-top: 1px solid var(--kiswebs-border);
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}
.kiswebs-toolbar-inner {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0.7rem 1rem;
}
.kiswebs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Compact toolbar row of section buttons + Reset all + Close ------------ */
.kiswebs-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.kiswebs-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.375rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kiswebs-text);
  background-color: var(--kiswebs-surface-muted);
  border: 1px solid var(--kiswebs-border);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kiswebs-tab:hover:not(:disabled) {
  background-color: #eef2f7;
  border-color: #c2ccd9;
}
.kiswebs-tab:focus {
  outline: 3px solid var(--kiswebs-focus);
  outline-offset: 2px;
}
.kiswebs-tab[aria-expanded="true"] {
  background-color: var(--kiswebs-accent);
  color: var(--kiswebs-accent-contrast);
  border-color: var(--kiswebs-accent);
}
.kiswebs-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.kiswebs-tab-label { white-space: nowrap; }

/* In-section controls --------------------------------------------------- */
.kiswebs-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.375rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kiswebs-text);
  background-color: var(--kiswebs-surface-muted);
  border: 1px solid var(--kiswebs-border);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kiswebs-ctrl:hover:not(:disabled) {
  background-color: #eef2f7;
  border-color: #c2ccd9;
}
.kiswebs-ctrl:disabled { opacity: 0.45; cursor: not-allowed; }
.kiswebs-ctrl:focus {
  outline: 3px solid var(--kiswebs-focus);
  outline-offset: 2px;
}
.kiswebs-ctrl.kiswebs-active {
  background-color: var(--kiswebs-accent);
  color: var(--kiswebs-accent-contrast);
  border-color: var(--kiswebs-accent);
}
.kiswebs-ctrl.kiswebs-active:hover:not(:disabled) {
  background-color: var(--kiswebs-accent-hover);
}
.kiswebs-ctrl.kiswebs-block { width: 100%; margin-top: 0.4rem; }

.kiswebs-status {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--kiswebs-text-muted);
}
.kiswebs-notice {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.78rem;
}
.kiswebs-notice.kiswebs-warn {
  background-color: var(--kiswebs-warning-bg);
  border: 1px solid var(--kiswebs-warning-border);
  color: var(--kiswebs-warning-text);
}
.kiswebs-notice.kiswebs-error {
  background-color: var(--kiswebs-error-bg);
  border: 1px solid var(--kiswebs-error-border);
  color: var(--kiswebs-error-text);
}

/* Expandable sections --------------------------------------------------- *
 * NOTE: do NOT set `display` on .kiswebs-section — the [hidden] attribute
 * (UA stylesheet: display:none) controls open/closed visibility and keeps
 * closed sections out of the Tab order and accessibility tree.
 */
.kiswebs-sections { margin-top: 0.6rem; }
.kiswebs-section {
  padding: 0.6rem 0;
  border-top: 1px solid var(--kiswebs-border);
}
.kiswebs-field { margin-top: 0.7rem; }
.kiswebs-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kiswebs-text-muted);
  margin-bottom: 0.25rem;
}
.kiswebs-select {
  width: 100%;
  height: 2.3rem;
  padding: 0 0.5rem;
  border: 1px solid var(--kiswebs-border);
  border-radius: 0.375rem;
  background-color: var(--kiswebs-surface);
  color: var(--kiswebs-text);
  font-size: 0.85rem;
}
.kiswebs-select:focus {
  outline: 3px solid var(--kiswebs-focus);
  outline-offset: 2px;
}
.kiswebs-btn-group { display: flex; gap: 0.35rem; }
.kiswebs-btn-group .kiswebs-ctrl { flex: 1; }

/* Active paragraph highlight -------------------------------------------- */
.kiswebs-active-block {
  outline: 3px solid var(--kiswebs-accent);
  outline-offset: 2px;
  background-color: color-mix(in srgb, var(--kiswebs-accent) 10%, transparent);
  border-radius: 2px;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}

/* Reading overlays ------------------------------------------------------ */
.kiswebs-ruler {
  position: fixed;
  left: 0;
  right: 0;
  height: 2.5rem;
  background-color: color-mix(in srgb, var(--kiswebs-accent) 16%, transparent);
  border-top: 2px solid var(--kiswebs-accent);
  border-bottom: 2px solid var(--kiswebs-accent);
  pointer-events: none;
  z-index: calc(var(--kiswebs-z) - 1);
}
.kiswebs-mask-top,
.kiswebs-mask-bottom {
  position: fixed;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: calc(var(--kiswebs-z) - 1);
}
.kiswebs-mask-top { top: 0; }

/* Reading adjustments --------------------------------------------------- */
html.kiswebs-ts-larger { font-size: 115%; }
html.kiswebs-ts-largest { font-size: 130%; }

.kiswebs-spacing-increased { line-height: 2; letter-spacing: 0.03em; word-spacing: 0.05em; }
.kiswebs-spacing-increased p { margin-bottom: 1.25rem; }

/* Themes: scoped to the configured website content only. ---------------- */
.kiswebs-themed.kiswebs-themed {
  background-color: var(--kiswebs-theme-bg) !important;
  color: var(--kiswebs-theme-text) !important;
}
.kiswebs-themed.kiswebs-themed *:not(img):not(picture):not(video):not(svg):not(svg *):not(canvas):not(.kiswebs-active-block) {
  background-color: transparent !important;
}
/* Gradients are background images, so background-color alone cannot clear them.
   Leave URL-based photographs and ordinary media elements unchanged. */
.kiswebs-themed.kiswebs-themed [class*="bg-gradient"],
.kiswebs-themed.kiswebs-themed [class*="bg-linear"],
.kiswebs-themed.kiswebs-themed [class*="bg-radial"],
.kiswebs-themed.kiswebs-themed [class*="bg-conic"],
.kiswebs-themed.kiswebs-themed [style*="gradient("],
.kiswebs-themed.kiswebs-themed[class*="bg-gradient"],
.kiswebs-themed.kiswebs-themed[style*="gradient("] {
  background-image: none !important;
}
.kiswebs-themed.kiswebs-themed *:not(img):not(picture):not(video):not(svg):not(svg *):not(canvas) {
  color: var(--kiswebs-theme-text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
.kiswebs-themed.kiswebs-themed a,
.kiswebs-themed.kiswebs-themed a *:not(img):not(picture):not(svg):not(svg *) {
  color: var(--kiswebs-theme-link) !important;
}
.kiswebs-themed.kiswebs-themed a { text-decoration: underline !important; }
.kiswebs-themed.kiswebs-themed a:hover,
.kiswebs-themed.kiswebs-themed a:hover *:not(img):not(picture):not(svg):not(svg *) {
  color: var(--kiswebs-theme-link-hover) !important;
}
.kiswebs-themed.kiswebs-themed :is(input, textarea, select, option, button) {
  background-color: var(--kiswebs-theme-bg) !important;
  color: var(--kiswebs-theme-text) !important;
  border-color: var(--kiswebs-theme-text) !important;
}
.kiswebs-themed.kiswebs-themed ::placeholder {
  color: var(--kiswebs-theme-text) !important;
  opacity: 1;
}
.kiswebs-themed.kiswebs-themed a:focus-visible {
  outline: 3px solid var(--kiswebs-theme-link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Colour palette (roving-tabindex radio group) ------------------------- */
.kiswebs-palette { display: flex; flex-direction: column; gap: 0.55rem; }
.kiswebs-palette-hint {
  margin: 0 0 0.15rem;
  font-size: 0.76rem;
  color: var(--kiswebs-text-muted);
}
.kiswebs-palette-original {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kiswebs-text);
  background-color: var(--kiswebs-surface-muted);
  border: 1px solid var(--kiswebs-border);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kiswebs-palette-original:hover { background-color: #eef2f7; border-color: #c2ccd9; }
.kiswebs-palette-original:focus {
  outline: 3px solid var(--kiswebs-focus);
  outline-offset: 2px;
}
.kiswebs-palette-original[aria-checked="true"] {
  background-color: var(--kiswebs-accent);
  color: var(--kiswebs-accent-contrast);
  border-color: var(--kiswebs-accent);
}

.kiswebs-palette-group { display: flex; flex-direction: column; gap: 0.25rem; }
.kiswebs-palette-group-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kiswebs-text-muted);
}
.kiswebs-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kiswebs-swatch {
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kiswebs-swatch:focus {
  outline: 3px solid var(--kiswebs-focus);
  outline-offset: 2px;
  border-radius: 50%;
}
.kiswebs-swatch-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  background-color: var(--sw-bg, #ffffff);
  color: var(--sw-text, #000000);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.12s ease;
}
.kiswebs-swatch[aria-checked="true"] .kiswebs-swatch-circle {
  box-shadow: 0 0 0 2px var(--kiswebs-surface, #ffffff), 0 0 0 4px var(--kiswebs-accent);
}
.kiswebs-swatch-tick {
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: var(--kiswebs-accent);
  color: var(--kiswebs-accent-contrast);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 1.5px var(--kiswebs-surface, #ffffff);
}
.kiswebs-swatch[aria-checked="true"] .kiswebs-swatch-tick { display: flex; }

/* Visually-hidden helper ----------------------------------------------- */
.kiswebs-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}