/* ==========================================================================
   Liwanag — front end
   Every color, font and size comes from CSS variables printed inline by
   PHP from the plugin settings. There are no hard-coded values here, so
   editing anything on the settings screen is enough.
   ========================================================================== */

.lwn-app{
  font-family:var(--font-body);
  color:var(--c-text);
  background:var(--c-section-bg);
  padding:var(--lwn-pad);
  border-radius:var(--lwn-radius);
  container-type:inline-size;
  max-width:100%;
  overflow:hidden;
}
.lwn-app *,.lwn-app *::before,.lwn-app *::after{box-sizing:border-box;}
/* Author rules beat the UA [hidden] rule, so restate it. */
.lwn-app [hidden]{display:none !important;}
.lwn-app p,.lwn-app h2,.lwn-app ol,.lwn-app li{margin:0;padding:0;border:0;}
.lwn-app ol{list-style:none;}
.lwn-app button{font:inherit;cursor:pointer;}

@supports not (container-type: inline-size){
  .lwn-app{--lwn-stage-h:420px;}
  @media (min-width:900px){ .lwn-app{--lwn-stage-h:600px;} }
}

/* ---------- head (centred, full width) ---------- */
.lwn-head{width:100%;text-align:center;margin-bottom:clamp(14px,2.4cqw,24px);}
/* These five beat the element reset above on specificity. */
.lwn-app .lwn-eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-eyebrow);margin-bottom:8px;font-weight:600;}
.lwn-app .lwn-title{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:var(--fs-heading);line-height:var(--lh-heading);color:var(--c-heading);margin-bottom:8px;}
.lwn-app .lwn-lede{color:var(--c-subheading);font-size:var(--fs-subheading);line-height:1.55;margin-inline:auto;max-width:62ch;text-align:center;}
.lwn-app .lwn-legend{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-muted);font-weight:600;margin-bottom:9px;display:block;}
.lwn-app .lwn-g-note{grid-area:note;margin-top:2px;}

/* ---------- stage ---------- */
.lwn-stage{min-width:0;}
.lwn-canvas-wrap{
  position:relative;
  height:var(--lwn-stage-h);
  max-width:100%;
  margin-inline:auto;
  background:var(--c-section-bg);
  border:1px solid var(--c-border);
  border-radius:var(--lwn-radius-in);
  overflow:hidden;
}
.lwn-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;}
.lwn-mode-trace .lwn-canvas{cursor:crosshair;}
.lwn-canvas.is-over-handle{cursor:grab;}
.lwn-canvas.is-dragging{cursor:grabbing;touch-action:none;}

.lwn-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:22px;}
.lwn-empty-icon{width:clamp(46px,6.5cqw,64px);height:clamp(46px,6.5cqw,64px);color:var(--c-accent);opacity:.9;margin-bottom:6px;display:block;}
.lwn-empty-title{font-family:var(--font-heading);font-size:clamp(17px,2cqi,20px);}
.lwn-empty-sub{color:var(--c-text-muted);font-size:var(--fs-text);max-width:34ch;}
.lwn-empty-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:12px;}

.lwn-hint{
  position:absolute;left:10px;bottom:10px;right:10px;
  display:flex;align-items:center;gap:9px;
  background:color-mix(in srgb, var(--c-section-bg) 88%, transparent);
  border:1px solid var(--c-border);border-radius:9px;padding:8px 11px;
  font-size:var(--fs-small);line-height:1.35;backdrop-filter:blur(6px);pointer-events:none;
}
.lwn-hint-dot{width:7px;height:7px;border-radius:50%;background:var(--c-trace);flex:none;animation:lwn-pulse 2s ease-out infinite;}
.lwn-mode-lit .lwn-hint-dot{background:var(--c-accent);}
@keyframes lwn-pulse{from{box-shadow:0 0 0 0 currentColor;}to{box-shadow:0 0 0 9px transparent;}}

.lwn-tourtag{
  position:absolute;top:10px;left:10px;pointer-events:none;
  background:color-mix(in srgb, var(--c-section-bg) 90%, transparent);
  border:1px solid var(--c-border);border-radius:9px;padding:7px 12px;backdrop-filter:blur(6px);
}
.lwn-tourtag span{display:block;font-family:var(--font-heading);font-size:15px;line-height:1.2;color:var(--c-text);}

.lwn-stagebar{display:flex;flex-wrap:wrap;gap:9px;justify-content:space-between;align-items:center;margin-top:11px;}
.lwn-stagebar-left,.lwn-stagebar-right{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.lwn-count{font-size:var(--fs-small);color:var(--c-text-muted);font-variant-numeric:tabular-nums;}

/* ---------- control bar ----------
   Three groups now that color is chosen in the admin. Each group is a
   label plus ONE row of controls, so the columns end up the same height
   and there is no dead space under the short one. */
.lwn-panel{
  background:var(--c-panel-bg);border:1px solid var(--c-border);
  border-radius:var(--lwn-radius-in);padding:clamp(14px,1.8cqw,20px);
  margin-top:14px;min-width:0;
}
.lwn-pane{display:flex;flex-direction:column;gap:16px;}
.lwn-steps{display:flex;flex-direction:column;gap:10px;}

@container (min-width:660px){
  .lwn-pane-lit{
    display:grid;gap:18px 26px;align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "movement adjust"
      "actions  actions"
      "note     note";
  }
  .lwn-pane-trace{
    display:grid;gap:14px 26px;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(210px,264px);
    grid-template-areas:"steps cta";
  }
  .lwn-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;}
}
@container (min-width:980px){
  .lwn-pane-lit{
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.45fr) minmax(0,1.25fr);
    grid-template-areas:
      "movement adjust actions"
      "note     note   note";
  }
  .lwn-steps{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Without the Adjust panel there are only two groups; keep them even. */
@container (min-width:980px){
  .lwn-pane-lit:not(:has(.lwn-g-adjust)){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"movement actions" "note note";
  }
}

.lwn-g-movement{grid-area:movement;}
.lwn-g-adjust{grid-area:adjust;}
.lwn-g-actions{grid-area:actions;}
.lwn-g-steps{grid-area:steps;}
.lwn-g-cta{grid-area:cta;display:flex;flex-direction:column;gap:8px;}
.lwn-group{min-width:0;}

.lwn-steps li{display:flex;gap:9px;font-size:var(--fs-text);line-height:1.4;color:var(--c-text-muted);}
.lwn-steps span{flex:none;width:19px;height:19px;border-radius:50%;border:1px solid var(--c-trace);color:var(--c-trace);font-size:10.5px;font-weight:700;display:grid;place-items:center;margin-top:1px;}

/* one row each — this is what keeps the three columns level */
.lwn-segmented{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;}
.lwn-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:4px 18px;}
.lwn-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:8px;}

.lwn-seg{background:transparent;border:1px solid var(--c-border);border-radius:8px;padding:10px 6px;font-size:var(--fs-small);color:var(--c-text-muted);transition:.15s;}
.lwn-seg:hover{color:var(--c-text);border-color:var(--c-text-muted);}
.lwn-seg[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-btn-text);font-weight:600;}

.lwn-slider{display:block;}
.lwn-slider-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--fs-small);color:var(--c-text-muted);}
.lwn-slider-label em{font-style:normal;color:var(--c-text);font-variant-numeric:tabular-nums;}
.lwn-app input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--c-border);border-radius:3px;outline:none;margin:9px 0 0;}
.lwn-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--c-accent);cursor:pointer;border:none;}
.lwn-app input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--c-accent);cursor:pointer;border:none;}

/* ---------- buttons ---------- */
.lwn-btn{border-radius:9px;padding:11px 17px;font-size:var(--fs-text);font-weight:600;border:1px solid transparent;transition:.15s;line-height:1.2;}
.lwn-btn-primary{background:var(--c-btn);color:var(--c-btn-text);}
.lwn-btn-primary:hover:not(:disabled){background:var(--c-btn-hover);}
.lwn-btn-ghost{background:transparent;border-color:var(--c-btn2-border);color:var(--c-btn2-text);}
.lwn-btn-ghost:hover:not(:disabled){border-color:var(--c-btn2-hover);}
.lwn-btn-block{width:100%;}
.lwn-btn-lg{padding:14px 18px;font-size:calc(var(--fs-text) + 2px);}
.lwn-btn:disabled{opacity:var(--o-disabled);cursor:not-allowed;}
.lwn-btn-lg:not(:disabled){animation:lwn-ready 2.4s ease-out infinite;}
@keyframes lwn-ready{from{box-shadow:0 0 0 0 var(--c-accent-soft);}to{box-shadow:0 0 0 14px transparent;}}

.lwn-chip{background:transparent;border:1px solid var(--c-border);border-radius:7px;padding:7px 11px;font-size:var(--fs-small);color:var(--c-text-muted);transition:.15s;}
.lwn-chip:hover:not(:disabled){color:var(--c-text);border-color:var(--c-text-muted);}
.lwn-chip:disabled{opacity:var(--o-disabled);cursor:not-allowed;}
.lwn-chip-reset:hover:not(:disabled){color:var(--c-danger);border-color:var(--c-danger);}
.lwn-chip-tour{border-color:var(--c-accent);color:var(--c-accent);display:inline-flex;align-items:center;gap:7px;}
.lwn-chip-tour:hover:not(:disabled){background:var(--c-accent-soft);color:var(--c-accent);border-color:var(--c-accent);}
.lwn-chip-tour.is-playing{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-btn-text);}
.lwn-tour-icon{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;flex:none;}
.lwn-chip-tour.is-playing .lwn-tour-icon{
  width:8px;height:10px;border:none;background:currentColor;
  -webkit-mask:linear-gradient(#000 0 0) 0/2.5px 100% no-repeat,linear-gradient(#000 0 0) 100%/2.5px 100% no-repeat;
          mask:linear-gradient(#000 0 0) 0/2.5px 100% no-repeat,linear-gradient(#000 0 0) 100%/2.5px 100% no-repeat;
}

/* ---------- switch ---------- */
.lwn-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.lwn-switch input{position:absolute;opacity:0;width:0;height:0;}
.lwn-switch-track{width:36px;height:20px;border-radius:10px;background:var(--c-border);position:relative;transition:background .18s;flex:none;}
.lwn-switch-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--c-text-muted);transition:transform .18s,background .18s;}
.lwn-switch input:checked + .lwn-switch-track{background:var(--c-accent);}
.lwn-switch input:checked + .lwn-switch-track .lwn-switch-knob{transform:translateX(16px);background:var(--c-btn-text);}
.lwn-switch-label{font-size:var(--fs-small);color:var(--c-text-muted);}

.lwn-note{font-size:var(--fs-small);color:var(--c-text-muted);line-height:1.5;opacity:.82;}

/* ---------- touch + a11y ---------- */
@media (pointer:coarse){
  .lwn-chip{padding:9px 13px;}
  .lwn-btn{padding:13px 18px;}
  .lwn-seg{padding:12px 6px;}
}
.lwn-app :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .lwn-app *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ==========================================================================
   THEME ARMOUR — keep last
   Page builders style raw <button> and <input> elements globally, often with
   !important. A rule like `.elementor-kit-7 button:hover` outranks a plain
   `.lwn-btn-primary`, which is how a stray brand color ends up on these
   controls. These re-assert the plugin's own palette and read from the SAME
   variables, so the settings screen still governs everything.
   ========================================================================== */
.lwn-app.lwn-app button{
  background-image:none !important;
  text-shadow:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  filter:none !important;
  transform:none !important;
  min-height:0 !important;
  width:auto;
}
.lwn-app.lwn-app .lwn-btn-block{width:100% !important;}

.lwn-app.lwn-app .lwn-btn-primary{
  background-color:var(--c-btn) !important;color:var(--c-btn-text) !important;border-color:transparent !important;
}
.lwn-app.lwn-app .lwn-btn-primary:hover:not(:disabled),
.lwn-app.lwn-app .lwn-btn-primary:focus:not(:disabled),
.lwn-app.lwn-app .lwn-btn-primary:active:not(:disabled){
  background-color:var(--c-btn-hover) !important;color:var(--c-btn-text) !important;border-color:transparent !important;
}
/* disabled keeps the brand color and only dims */
.lwn-app.lwn-app .lwn-btn-primary:disabled,
.lwn-app.lwn-app .lwn-btn-primary[disabled]{
  background-color:var(--c-btn) !important;color:var(--c-btn-text) !important;
  border-color:transparent !important;opacity:var(--o-disabled) !important;
}
.lwn-app.lwn-app .lwn-btn-ghost{
  background-color:transparent !important;color:var(--c-btn2-text) !important;border-color:var(--c-btn2-border) !important;
}
.lwn-app.lwn-app .lwn-btn-ghost:hover:not(:disabled),
.lwn-app.lwn-app .lwn-btn-ghost:focus:not(:disabled){
  background-color:transparent !important;color:var(--c-btn2-text) !important;border-color:var(--c-btn2-hover) !important;
}
.lwn-app.lwn-app .lwn-chip{
  background-color:transparent !important;color:var(--c-text-muted) !important;border-color:var(--c-border) !important;
}
.lwn-app.lwn-app .lwn-chip:hover:not(:disabled),
.lwn-app.lwn-app .lwn-chip:focus:not(:disabled){
  background-color:transparent !important;color:var(--c-text) !important;border-color:var(--c-text-muted) !important;
}
.lwn-app.lwn-app .lwn-chip:disabled{opacity:var(--o-disabled) !important;}
.lwn-app.lwn-app .lwn-chip-reset:hover:not(:disabled),
.lwn-app.lwn-app .lwn-chip-reset:focus:not(:disabled){
  background-color:transparent !important;color:var(--c-danger) !important;border-color:var(--c-danger) !important;
}
.lwn-app.lwn-app .lwn-chip-tour{
  background-color:transparent !important;color:var(--c-accent) !important;border-color:var(--c-accent) !important;
}
.lwn-app.lwn-app .lwn-chip-tour:hover:not(:disabled),
.lwn-app.lwn-app .lwn-chip-tour:focus:not(:disabled){
  background-color:var(--c-accent-soft) !important;color:var(--c-accent) !important;border-color:var(--c-accent) !important;
}
.lwn-app.lwn-app .lwn-chip-tour.is-playing{
  background-color:var(--c-accent) !important;color:var(--c-btn-text) !important;border-color:var(--c-accent) !important;
}
.lwn-app.lwn-app .lwn-seg{
  background-color:transparent !important;color:var(--c-text-muted) !important;border-color:var(--c-border) !important;
}
.lwn-app.lwn-app .lwn-seg:hover:not([aria-pressed="true"]),
.lwn-app.lwn-app .lwn-seg:focus:not([aria-pressed="true"]){
  background-color:transparent !important;color:var(--c-text) !important;border-color:var(--c-text-muted) !important;
}
.lwn-app.lwn-app .lwn-seg[aria-pressed="true"]{
  background-color:var(--c-accent) !important;color:var(--c-btn-text) !important;border-color:var(--c-accent) !important;
}
.lwn-app.lwn-app input[type=range]{background:var(--c-border) !important;border:0 !important;padding:0 !important;box-shadow:none !important;}
.lwn-app.lwn-app input[type=range]::-webkit-slider-thumb{background:var(--c-accent) !important;}
.lwn-app.lwn-app input[type=range]::-moz-range-thumb{background:var(--c-accent) !important;}
.lwn-app.lwn-app .lwn-switch input:checked + .lwn-switch-track{background:var(--c-accent) !important;}
.lwn-app.lwn-app .lwn-btn-lg:disabled{box-shadow:none !important;animation:none !important;}