/** /css/components.css */
/* ==========================================================
    Sudoku Paradise — Components ~ Diamond Feng Shui Edition
           Christined October 17, 2025 Pristinity Day
   ----------------------------------------------------------
   Buttons, toggles, swatch dots, and indicator lights
   Principles:
     - Pristine = untouched
     - Lift on hover
     - Indicators awaken only by intent
     - Modular & Feng Shui compliant
   ========================================================== */

/** ======================================= 
            --- Button Base ---
    ======================================= */
button {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  /* border: 1px solid #ccc; */
  background: var(--panel-bg);
  /* background: transparent; */
  color: var(--panel-fg); /* inherit; */
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  border-radius: 0.4rem;
  /* border-radius: 0.25rem; */
  padding: 0.25em 0.6em;
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  background: color-mix(in oklab, var(--accent) 10%, var(--panel-bg));
  border-color: var(--accent);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/** ======================================= 
            --- Toggle Buttons ---
    ======================================= */
.toggle {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 0.25em 0.5em;
}
.toggle.active {
  background-color: var(--highlight, #48cae4);
  color: var(--fg-color, #000);
}

/** ======================================= 
       --- Universal Indicator Dot ---
    ======================================= */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #999;
  box-shadow: 0 0 4px color-mix(in oklab, var(--accent) 50%, transparent);
  background: transparent; /* pristine = untouched */
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  /* transition: background 0.2s ease, box-shadow 0.2s ease; */
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  position: relative;
  top: -1.5px;
  gap: 0.4em;
  background-color: var(--swatch-color);
  border: 1px solid var(--swatch-border);
  box-shadow: 0 0 6px var(--swatch-color);
  transition: var(--transition-env);
}

/** ======================================= 
                --- States ---
    ======================================= */
.dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transition: var(--transition-env);
}

.dot::after {
  content: "";
  position: absolute;
  inset: -4px;          /* halo thickness */
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(6px);
  transition: inherit;
}

/* --- States --- */
.dot.pristine,
.dot.transparent {
  background: transparent;
  box-shadow: none;
}
.dot.transparent::after { background: transparent; }

.dot.green {
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14, 0 0 12px #39ff14;
}
.dot.green::after { background: #39ff14; }

.dot.red {
  background: #ff073a;
  box-shadow: 0 0 8px #ff073a, 0 0 14px #ff4500;
}
.dot.red::after { background: #ff4500; }


/** ======================================= 
           --- Indicator Lights ---
    ======================================= */
.indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #999;
  background: transparent;
  transition: background 0.2s ease;
}
.indicator.active { background-color: var(--highlight, #48cae4); }

/** ======================================== --
            --- Start|Quit Button --- 
--- ======================================== */
#startBtn {
  display: inline-flex;       /* give it a layout box */
  align-items: center;        /* center dot and label */
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: var(--transition-env);
}


/** ======================================== --
            --- Reset Button --- 
--- ======================================== */
#resetBtn {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/** ======================================== --
            --- Solve Dropdown --- 
--- ======================================== */
.solve-pane { position: relative; display: inline-block; }
#solveBtn {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.solve-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25em;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 1000;
  list-style: none;
  padding: 0.25em;
  width: 220px;
}
.solve-fontmenu.hidden { display: none; }
.solve-menu li {
  padding: 0.25em 0.5em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.solve-menu li:hover { background: #f0f0f0; }
.solve-menu li.active {
  -weight: bold;
  background: #dff7ff;
}

/** ======================================= --
          --- Difficulty Dropdown --- 
--- ======================================= */
.difficulty-pane { position: relative; display: inline-block; }

#difficultyButton {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.difficulty-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25em;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 1000;
  list-style: none;
  padding: 0.25em;
  width: 150px;
}
.difficulty-menu.hidden { display: none; }
.difficulty-menu li {
  padding: 0.25em 0.5em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.difficulty-menu li:hover { background: #f0f0f0; }
.difficulty-menu li.active {
  font-weight: bold;
  background: #dff7ff;
}

/** ============================================================================================================================================================================ 
    -- Theme Manager Owner's Manual -- =========================================================================================================================================
--- ============================================================================================================================================================================
        Item            Example   Description
    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    --bg:             #f8f3e3 ~ Wallpaper Background (Overall Tint) 
    --fg:             #2e2615 ~ Readability All Text (incl: Button Titles, chosen Swatch Dot Border, Footer & Website Text) & extra outer swatch border contrast if not selected
    --grid-bg:        #f4ebd4 ~ Grid Cells tone (Background layer behind cells)

                        These next four: give ideal contrast without harshness.
    --grid-line:      #b7a272 ~ Desaturated ~ (bright lines) Frame the 9×9 lattice, ideal contrast without harshness. The muted brass tone gives definition without glare. Lines are visible but never “neon” against --grid-bg.
    --cell-bg:        #faf6e9 ~ Soft polish surface layer ~ Surface under digits. Slightly lighter than grid background, so the eye reads separation through subtle luminance—not hard borders. 
    --cell-fg:        #352c18 ~ Crisp deep inked engraving color ~ Digit ink. Warm near-black yields high legibility but keeps the page organic; no cold black-on-white fatigue.
    --hover:          #ede3c8 ~ Flare of reflected light faintly deeper color tint when hovered ~ Tactile highlight. One step deeper in value, so focus is drawn by soft shadowing rather than brightness flash. 

    --panel-bg:       #f6eedc ~ Control panel texture ~ Swatch Pallet Background 
    --panel-fg:       #2e2615 ~ Consistent deep contrast readable text ~ eg. StoryBook Title text 
    --accent:         #c9ae76 ~ Accent for highlights ~ Grid Block & Swatch Border 
    --swatch-color:   #f0e6cc ~ Preview swatch tone matches cells polish ~ Swatch Sample (Swatch-Dot if chosen on hover only!) 

    ============================================================================================================================================================================
    ** END OWNER'S MANUAL ** ===================================================================================================================================================
    ============================================================================================================================================================================ */
/* ==========================================================
          Sudoku Paradise — Theme Dropdown (Retrofit)
   ----------------------------------------------------------
   • Unified Diamond hierarchy (no prefixes)
   • Pristine = untouched
   • Swatch-dot = functional state indicator (not decoration)
   • Dropdown behaves like Difficulty Menu
   • 4×5 grid restored (no flex redundancies)
   • Mirrors Difficulty Discipline | Feng Shui Balanced
   ========================================================== */

/* === Dropdown Container === */
/* ==========================================================
   Theme Dropdown — Feng Shui Retrofitted
   ----------------------------------------------------------
   Disciplined under DifficultyMenu doctrine.
   Compliant with universal .dot baseline.
   ========================================================== */
/* /css/components/theme-pane.css */
/* ==========================================================
   THEME PANE — DIAMOND DISCIPLINE EDITION
   ----------------------------------------------------------
   • Harmonized with ThemeManager + Switchboard lighting
   • Smooth entry/exit transitions via var(--transition-env)
   • Uses halo/accent colors dynamically
   • Enforces Feng Shui clarity and contrast balance
   ========================================================== */

.theme-pane {
  position: relative;
  display: inline-block;
  z-index: 2000;
  overflow: visible;
}

/* ========================== --
   Button + Dot Discipline
-- ========================== */
#themeButton {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
#themeButton:hover {
  background: color-mix(in oklab, var(--accent) 10%, var(--panel-bg));
  border-color: var(--accent);
}

/* Dot discipline — stays in harmony with --swatch-color */
#swatch-dot {
  position: relative;
  width: 7px;
  height: 7px;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  gap: 0.4em;
  border-radius: 50%;
  background-color: var(--swatch-color);
  border: 1px solid var(--swatch-border);
  box-shadow: 0 0 4px color-mix(in oklab, var(--accent) 50%, transparent);
  transition: var(--transition-env);
}

/* Halo layer – same glow system as siblings */
#swatch-dot::after {
  content: "";
  position: absolute;
  inset: -3px;            /* halo reach around a 7 px core */
  border-radius: 50%;
  background: var(--swatch-color);
  opacity: 0.6;
  filter: blur(4px);
  transition: inherit;
}

/* Colorless state for pristine mode */
#swatch-dot[data-state="colorless"],
[data-theme="pristine"] #swatch-dot {
  background: transparent;
  border-color: #ccc;
  box-shadow: none;
}
#swatch-dot[data-state="colorless"]::after,
[data-theme="pristine"] #swatch-dot::after {
  background: transparent;
}

/* ========================== --
   Dropdown Menu Discipline
-- ========================== */
#themeMenu {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  grid-template-rows: repeat(4, 32px);
  gap: 0.5em;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.25em);
  background: var(--panel-bg);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius: 0.4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 2500;
  list-style: none;
  padding: 0.5em;
  width: calc((32px * 5) + (0.5em * 5) + 0.75em);
  height: calc((32px * 4) + (0.5em * 4) + 0.75em);
  justify-items: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--transition-env, ease), transform 0.25s var(--transition-env, ease);
}

#themeMenu.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-0.5em);
}

/* ========================== --
         Swatch Buttons
-- ========================== */
#themeMenu button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--fg), transparent 60%);
  background-color: var(--accent);
  cursor: pointer;
  transition: transform 0.25s var(--transition-env, ease),
              box-shadow 0.25s var(--transition-env, ease),
              border-color 0.25s var(--transition-env, ease);
}

#themeMenu button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent), white 40%);
  border-color: var(--accent);
}

#themeMenu button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#themeMenu button.active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/** ======================================== --
            --- Pause Button --- 
--- ======================================== */
#pauseButton {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/** ======================================== --
            --- Fly Blind Button --- 
--- ======================================== */
#flyBlindBtn {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/** ======================================== --
              --- Hint Button --- 
--- ======================================== */
#hintBtn {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/** ======================================== --
          --- Pencil Marks Button --- 
--- ======================================== */
#snyderBtn {
  display: inline-flex;       /* give it a layout box */
  align-items: center;        /* center dot and label */
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 0.4rem;
  padding: 0.25em 0.6em;
  transition: var(--transition-env);
}

/* ======================================= 
         Snyder Toggle Indicator
   ======================================= */

/* ========================================================== --
              Universal Tool-Tip bubble Feng Shui
-- ========================================================== */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4em 0.6em;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid color-mix(in oklab, var(--fg) 40%, var(--bg) 60%);
  border-radius: 0.4em;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
[data-tooltip]:hover::after {
  opacity: 1;
}

/** ======================================== 
                --- StoryBook --- 
    ======================================== */
.storybook {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 0.5em;
  border-radius: 0.25rem;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  color: #333;
}
.storybook-title { font-weight: bold; margin-bottom: 0.25em; }
.storybook-steps {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/* /snippet/not_a_file */
/* 💎 Sudoku Paradise — Help Center Button Styles (Diamond Edition)
   Harmonized with Feng Shui palette and Pristine ergonomics.
   Non-intrusive accent, visible in dark/light themes alike.  */

#helpCenterPanel {
  display: inline-block;
  margin-left: 0.75rem;
}

#helpCenterBtn {
  font-family: var(--font-ui, 'Segoe UI', sans-serif);
  font-size: 0.95rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--fg) 30%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--panel-bg) 90%, transparent);
  color: var(--fg);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

#helpCenterBtn:hover {
  background: color-mix(in oklab, var(--accent) 25%, var(--panel-bg));
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

#helpCenterBtn:active {
  transform: translateY(0);
  box-shadow: none;
}