/* AppWT Manuals floating widgets: back to top, translate, accessibility, cookies.
 *
 * Ported from prismaticflowers.com and re-themed to the AppWT black-and-gold palette.
 * Externalised rather than inlined so the bundle satisfies script-src/style-src 'self'
 * even if the inline allowance is tightened later.
 *
 * Palette (CLAUDE.md brand): base black #0A0A0A, charcoal #1A1A1A / #222222,
 * champagne gold #C4A052 (single accent, under 10% of surface), pearl #FAFAFA,
 * warm gray #A3B5CC.
 */

:root {
  --awx-black: #0A0A0A;
  --awx-charcoal: #1A1A1A;
  --awx-surface: #222222;
  --awx-gold: #C4A052;
  --awx-gold-dim: rgba(196, 160, 82, .22);
  --awx-pearl: #FAFAFA;
  --awx-muted: #A3B5CC;
  --awx-border: rgba(196, 160, 82, .28);
  --awx-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- the dock
 * One stack, one owner of the corner. Floating furniture that each positions
 * itself independently is how two controls end up on top of each other, and how a
 * widget lands on whatever the site already pins. One column, fixed gaps.
 */
.awx-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.awx-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--awx-surface), var(--awx-charcoal));
  color: var(--awx-gold);
  border: 1px solid var(--awx-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--awx-shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  padding: 0;
}
.awx-fab:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #2a2a2a, var(--awx-surface));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 0 1px var(--awx-gold-dim);
}
.awx-fab:focus-visible {
  outline: 3px solid var(--awx-gold);
  outline-offset: 3px;
}
.awx-fab svg { width: 22px; height: 22px; display: block; }

/* Back to top hides until there is somewhere to go back to. */
#awx-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}
#awx-top.awx-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------------------------------------------------------------- panels */
/* Beside the dock, not above it.
 *
 * A panel anchored above the dock covered the dock's own buttons: the column is about
 * 220px tall and a 620px panel starting 78px up swallows all of it. The collision test
 * caught it, and so did a click that landed on the panel instead of the button under it.
 * Sitting the panel to the LEFT of the column keeps every control reachable while a
 * panel is open. */
.awx-panel {
  position: fixed;
  right: 76px;
  bottom: 18px;
  width: min(370px, calc(100vw - 94px));
  max-height: min(72vh, 620px);
  overflow-y: auto;
  background: var(--awx-charcoal);
  color: var(--awx-pearl);
  border: 1px solid var(--awx-border);
  border-radius: 14px;
  box-shadow: var(--awx-shadow);
  z-index: 2147483001;
  display: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.awx-panel.awx-open { display: block; }

.awx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--awx-border);
  position: sticky;
  top: 0;
  background: var(--awx-charcoal);
  border-radius: 14px 14px 0 0;
}
.awx-panel-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--awx-gold);
  letter-spacing: .01em;
}
.awx-panel-head .awx-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--awx-muted);
  margin-top: 2px;
}
.awx-x {
  background: transparent;
  border: 1px solid var(--awx-border);
  color: var(--awx-pearl);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}
.awx-x:hover { background: var(--awx-surface); color: var(--awx-gold); }
.awx-body { padding: 14px 16px 18px; }

.awx-group { margin-bottom: 18px; }
.awx-group:last-child { margin-bottom: 0; }
.awx-group h3 {
  margin: 0 0 9px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--awx-muted);
  font-weight: 600;
}

.awx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.awx-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  background: var(--awx-surface);
  color: var(--awx-pearl);
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.awx-opt:hover { background: #2c2c2c; border-color: var(--awx-border); }
.awx-opt:focus-visible { outline: 3px solid var(--awx-gold); outline-offset: 2px; }
.awx-opt[aria-pressed="true"] {
  border-color: var(--awx-gold);
  color: var(--awx-gold);
  background: rgba(196, 160, 82, .10);
}
.awx-opt .awx-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--awx-border);
  margin-left: auto; flex: 0 0 auto;
}
.awx-opt[aria-pressed="true"] .awx-dot { background: var(--awx-gold); border-color: var(--awx-gold); }

/* sliders */
.awx-slider-row { margin-bottom: 14px; }
.awx-slider-row:last-child { margin-bottom: 0; }
.awx-slider-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; margin-bottom: 6px;
}
.awx-slider-label b { color: var(--awx-gold); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"].awx-range {
  width: 100%; height: 5px; border-radius: 3px; appearance: none;
  background: var(--awx-surface); border: 1px solid var(--awx-border); cursor: pointer;
}
input[type="range"].awx-range::-webkit-slider-thumb {
  appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--awx-gold); border: 2px solid var(--awx-black); cursor: pointer;
}
input[type="range"].awx-range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--awx-gold); border: 2px solid var(--awx-black); cursor: pointer;
}

.awx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.awx-btn {
  flex: 1 1 auto;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid var(--awx-border);
  background: var(--awx-surface);
  color: var(--awx-pearl);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
}
.awx-btn:hover { background: #2c2c2c; }
.awx-btn:focus-visible { outline: 3px solid var(--awx-gold); outline-offset: 2px; }
.awx-btn-primary {
  background: var(--awx-gold);
  color: var(--awx-black);
  border-color: var(--awx-gold);
  font-weight: 600;
}
.awx-btn-primary:hover { background: #d4b264; }

/* A status line instead of alert(). An accessibility tool must never open a blocking
 * modal: it steals focus, cannot be styled, and freezes a headless browser. */
.awx-status {
  margin-top: 10px;
  min-height: 18px;
  font-size: 12px;
  color: var(--awx-gold);
}

/* ---------------------------------------------------------------- cookie bar */
.awx-cookie {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: min(430px, calc(100vw - 36px));
  background: var(--awx-charcoal);
  color: var(--awx-pearl);
  border: 1px solid var(--awx-border);
  border-radius: 14px;
  box-shadow: var(--awx-shadow);
  padding: 18px;
  z-index: 2147483002;
  display: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
}
.awx-cookie.awx-open { display: block; }
.awx-cookie h2 {
  margin: 0 0 7px; font-size: 15px; color: var(--awx-gold); font-weight: 600;
}
.awx-cookie p { margin: 0 0 13px; color: var(--awx-muted); }
.awx-cookie a { color: var(--awx-gold); }

/* On a phone the cookie card and the dock both want the bottom of the screen.
 * The card takes the full width and the dock lifts above it while it is open. */
@media (max-width: 640px) {
  .awx-cookie { left: 12px; right: 12px; width: auto; bottom: 12px; }
  /* One ROW on a phone, so a full-width panel above it clears the buttons instead of
   * burying them. A 4-button column is 220px tall and would leave no usable height. */
  .awx-dock { right: 12px; left: 12px; bottom: 12px; flex-direction: row;
              justify-content: flex-end; }
  body.awx-cookie-open .awx-dock { bottom: 234px; }
  .awx-panel { right: 12px; left: 12px; width: auto; bottom: 70px; max-height: 62vh; }
  body.awx-cookie-open .awx-panel { bottom: 292px; }
  .awx-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- a11y effects
 * Applied at the ROOT only. Never `calc(1em * S)` on every element: 1em resolves
 * against the parent's already-multiplied size, so the factor compounds once per
 * level of nesting and 17.5px becomes 560px five levels down.
 */
html.awx-contrast body { background: #000 !important; color: #fff !important; }
html.awx-contrast body :not(.awx-dock):not(.awx-panel):not(.awx-cookie):not(svg):not(path) {
  background-color: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.awx-contrast a, html.awx-contrast a * { color: #ffe680 !important; }

html.awx-invert body { filter: invert(1) hue-rotate(180deg); }
html.awx-invert body img,
html.awx-invert body video { filter: invert(1) hue-rotate(180deg); }

html.awx-grayscale body { filter: grayscale(1); }
html.awx-invert.awx-grayscale body { filter: invert(1) hue-rotate(180deg) grayscale(1); }

html.awx-underline body a { text-decoration: underline !important; }

html.awx-readable body,
html.awx-readable body p,
html.awx-readable body li,
html.awx-readable body span,
html.awx-readable body div {
  font-family: Verdana, "DejaVu Sans", Arial, sans-serif !important;
  letter-spacing: .015em;
}

html.awx-nomotion *,
html.awx-nomotion *::before,
html.awx-nomotion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

html.awx-bigcursor body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2l30 22-13 2 7 14-6 3-7-14-11 8z' fill='%23C4A052' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto;
}

html.awx-focus :focus { outline: 4px solid var(--awx-gold) !important; outline-offset: 2px !important; }

/* A reading guide bar that follows the pointer, for tracking a line of text. */
.awx-guide {
  position: fixed; left: 0; right: 0; height: 40px; pointer-events: none;
  background: rgba(196, 160, 82, .14);
  border-top: 2px solid var(--awx-gold);
  border-bottom: 2px solid var(--awx-gold);
  z-index: 2147482000; display: none;
}
html.awx-guide-on .awx-guide { display: block; }

@media print { .awx-dock, .awx-panel, .awx-cookie, .awx-guide { display: none !important; } }