/* === Kana writing canvas options panel ===============================
   Drop-in styles for a gear-button-triggered dropdown that lets the
   user adjust Stroke Color, Tolerance, Particles, Show stroke guides,
   and Haptic feedback. Used by /hiragana/aiueo and the per-character
   pages. Same options as the home page's KANA WRITING CANVAS dropdown,
   but anchored to a button in the recall-toolbar instead of the column
   eyebrow caret.

   Class contract (host markup):
     .options-dropdown                 — relative wrapper
       .options-dropdown-trigger       — gear button
       .options-dropdown-panel         — the dropdown contents
         .options-section              — labeled group (one per pref)
           .options-section-label      — small uppercase header text
           …controls…
         .options-divider              — hr between groups
         .view-option                  — toggle row (icon + label)
   ==================================================================== */

.options-dropdown{
  position:relative;display:inline-flex;
}
.options-dropdown-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border:1px solid var(--line,#e6dcca);
  background:var(--inset,#ffffff);
  color:var(--muted,#5c4a43);
  border-radius:8px;cursor:pointer;
  transition:color .12s, border-color .12s, background .12s;
}
.options-dropdown-trigger:hover,
.options-dropdown.open .options-dropdown-trigger{
  color:var(--accent,#b1322a);
  border-color:var(--accent,#b1322a);
}
.options-dropdown-trigger svg{width:18px;height:18px}

.options-dropdown-panel{
  display:none;position:absolute;
  /* Anchor below the gear, growing leftward so it doesn't run past
     the canvas's right edge on narrow viewports. */
  top:calc(100% + 6px);right:0;
  background:var(--bg,#fbf7ef);
  color:var(--text,#221c19);
  border:1px solid var(--container-border,#d9cdb4);
  border-radius:12px;padding:12px;
  min-width:240px;max-width:calc(100vw - 24px);
  z-index:200;
  flex-direction:column;gap:6px;
  font-family:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  text-align:left;
}
.options-dropdown.open .options-dropdown-panel{display:flex}

/* On narrow viewports, anchor centered on the trigger so the panel
   doesn't get pushed off-screen either side. */
@media (max-width:600px){
  .options-dropdown-panel{
    right:auto;left:50%;transform:translateX(-50%);
  }
}

.options-section{
  display:flex;flex-direction:column;gap:8px;
}
.options-section-label{
  font-size:.72rem;font-weight:700;
  color:var(--muted,#5c4a43);
  text-transform:uppercase;letter-spacing:.08em;
}
.options-divider{
  border:0;border-top:1px solid var(--line,#e6dcca);
  margin:4px 0;
}

/* ── Stroke color: Multi button + swatch grid ─────────────────────── */
.color-multi-btn{
  display:block;width:100%;
  padding:6px 10px;margin-bottom:4px;
  border-radius:6px;background:transparent;
  border:1px solid var(--line,#e6dcca);
  color:var(--text,#221c19);
  font-family:inherit;font-size:.78rem;font-weight:700;
  cursor:pointer;
  background-image:linear-gradient(90deg,#e74c3c,#f39c12,#2ecc71,#3498db,#9b59b6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.color-multi-btn:hover{border-color:var(--accent,#b1322a)}
.color-multi-btn.active{
  border-color:var(--accent,#b1322a);
  box-shadow:0 0 0 2px var(--accent-bg,rgba(177,50,42,0.07));
}
.color-swatch-grid{
  display:grid;grid-template-columns:repeat(5,28px);
  gap:8px;justify-content:center;
}
.color-swatch{
  width:28px;height:28px;border-radius:50%;
  border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);
  transition:transform .1s, border-color .15s;
}
.color-swatch:hover{transform:scale(1.08)}
.color-swatch.active{
  border-color:var(--accent,#b1322a);
  box-shadow:0 0 0 2px var(--accent-bg,rgba(177,50,42,0.07));
}

/* ── Slider row (Tolerance) ───────────────────────────────────────── */
.color-opacity-row{
  display:flex;align-items:center;gap:8px;
}
.color-opacity-label{
  font-size:.72rem;font-weight:700;
  color:var(--muted,#5c4a43);
  text-transform:uppercase;letter-spacing:.05em;
}
.color-opacity-slider{flex:1;min-width:0}
.color-opacity-val{
  font-size:.78rem;font-weight:700;
  color:var(--text,#221c19);
  min-width:38px;text-align:right;
}

/* ── Select (Particles dropdown) ──────────────────────────────────── */
.pen-row{display:flex;width:100%}
.pen-select{
  flex:1;width:100%;
  padding:6px 10px;
  border:1px solid var(--line,#e6dcca);
  border-radius:6px;
  background:var(--inset,#ffffff);
  color:var(--text,#221c19);
  font-family:inherit;font-size:.78rem;
  cursor:pointer;
}
.pen-select:hover{border-color:var(--accent,#b1322a)}

/* ── View options (Show stroke guides, Haptic feedback toggles) ──── */
.view-option{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;
  border:1px dashed var(--accent-line,rgba(177,50,42,0.20));
  border-radius:8px;
  background:transparent;color:var(--accent,#b1322a);
  font-family:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;text-align:left;
  transition:border-color .12s, background .12s;
}
.view-option:hover{
  border-color:var(--accent,#b1322a);
  background:var(--accent-bg,rgba(177,50,42,0.07));
}
.view-option[aria-pressed="false"]{
  color:var(--muted,#5c4a43);
  border-color:var(--line,#e6dcca);
}
.view-option-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;flex:0 0 18px;
}
.view-option-label{flex:1}