/* ==========================================================================
   Design Controls Panel — shared by every DiBlasi page version.
   See design-panel.js for how to add control groups. The page styles each
   option off html[data-<group id>="value"] (e.g. "Highlight style" in the
   page's style.css); this file only styles the panel itself.

   Compact layout: a tab per group (Style / Color); only the active tab's
   options show. Option hints are tooltips.
   ========================================================================== */
.dc {
  --dc-width: 212px;
  --dc-bg: #FFFFFF;
  --dc-surface: #F4F5F7;
  --dc-line: #E1E3E7;
  --dc-text: #1E2228;      /* Graphite */
  --dc-muted: #646B75;
  --dc-accent: #1C479E;    /* Brand Blue */
  --dc-lime: #DCEF6A;      /* Lime: primary button hover */
  /* Sample chips follow the page's current highlight colour (fallback: lime) */
  --dc-hl: var(--highlight, #DCEF6A);
  --dc-hl-ink: var(--highlight-ink, #1E2228);
  --dc-hl-text: var(--highlight-text, #DCEF6A);

  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  color: var(--dc-text);
  font: 400 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  transform: translate(calc(-1 * var(--dc-width)), -50%);
}
.dc.is-open { transform: translate(0, -50%); }
.dc.is-ready { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

/* Out of the way while the full-screen mobile menu is open */
html.is-menu-open .dc { display: none; }

.dc *, .dc *::before, .dc *::after { box-sizing: border-box; }

.dc__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dc__panel {
  width: var(--dc-width);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--dc-bg);
  border: 1px solid var(--dc-line);
  border-left: 0;
  box-shadow: 0 12px 40px rgba(30, 34, 40, .18);
}

/* ---------- Tabs ---------- */
.dc__tabs {
  display: flex;
  border-bottom: 1px solid var(--dc-line);
}
.dc__tabbtn {
  flex: 1;
  padding: 10px 8px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--dc-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.dc__tabbtn:hover { color: var(--dc-text); }
.dc__tabbtn[aria-selected="true"] { color: var(--dc-accent); border-bottom-color: var(--dc-accent); }
.dc__tabbtn:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: -2px; }

/* ---------- Group (one per tab) ---------- */
.dc__pane[hidden] { display: none; }
.dc__group { margin: 0; padding: 10px; border: 0; }

.dc__options { display: flex; flex-direction: column; gap: 4px; }

.dc__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--dc-line);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.dc__option:hover { background: var(--dc-surface); }
.dc__option:has(.dc__input:checked) { border-color: var(--dc-accent); background: var(--dc-surface); box-shadow: inset 3px 0 0 var(--dc-accent); }
.dc__option:has(.dc__input:focus-visible) { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dc__input { position: absolute; opacity: 0; pointer-events: none; }

.dc__option-label { font-weight: 500; }

/* ---------- Sample chip: a live preview of each highlight style ---------- */
.dc__sample {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 24px;
  border: 1px solid var(--dc-line);
  background: var(--dc-bg);
}
.dc__sample-word { font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--dc-text); }
.dc__sample--behind .dc__sample-word { padding: 2px 3px 3px; background: var(--dc-hl); color: var(--dc-hl-ink); }
.dc__sample--underline .dc__sample-word {
  padding-bottom: 3px;
  background: linear-gradient(var(--dc-hl), var(--dc-hl)) 0 100% / 100% 3px no-repeat;
}
.dc__sample--text .dc__sample-word { color: var(--dc-hl-text); }
.dc__sample--none .dc__sample-word { font-weight: 400; }

/* ---------- Colour swatches (one row of chips) ---------- */
.dc__options--swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dc__option--swatch { padding: 3px; gap: 0; }
.dc__option--swatch:has(.dc__input:checked) { box-shadow: none; outline: 2px solid var(--dc-accent); outline-offset: 1px; }
.dc__swatch { display: block; width: 100%; aspect-ratio: 1; background: var(--dc-swatch); }
.dc__current { margin: 8px 0 0; color: var(--dc-muted); font-weight: 500; }

/* ---------- One-line selection summary ---------- */
.dc__summary {
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--dc-line);
  background: var(--dc-surface);
  color: var(--dc-muted);
  font-size: 11px;
}

/* ---------- Footer actions ---------- */
.dc__foot {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--dc-line);
  background: var(--dc-bg);
}

.dc__btn {
  padding: 6px 8px;
  border: 1px solid var(--dc-line);
  border-radius: 0;
  background: var(--dc-bg);
  color: var(--dc-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.dc__btn:hover { border-color: var(--dc-text); }
.dc__btn:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dc__btn--primary { border-color: var(--dc-accent); background: var(--dc-accent); color: #FFFFFF; }
.dc__btn--primary:hover { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-text); }

.dc__btn--quiet { color: var(--dc-muted); }

.dc__status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--dc-accent);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}
.dc__foot:not(.has-status) .dc__status { display: none; }

/* ---------- Toggle tab (left edge) ---------- */
.dc__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 7px;
  border: 1px solid var(--dc-line);
  border-left: 0;
  border-radius: 0;
  background: var(--dc-bg);
  color: var(--dc-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 4px 6px 20px rgba(30, 34, 40, .14);
  cursor: pointer;
}
.dc__tab:hover { color: var(--dc-accent); }
.dc__tab:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dc__tab-label { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Sliders icon */
.dc__tab-icon {
  position: relative;
  width: 14px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 1px / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 9px / 100% 1.5px no-repeat;
}
.dc__tab-icon::before,
.dc__tab-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--dc-bg);
}
.dc__tab-icon::before { top: -0.5px; left: 2px; }
.dc__tab-icon::after { top: 7.5px; right: 2px; }

/* Phones: the tab sits in the bottom-left corner (clear of page text) and the
   panel opens upward from there. */
@media (max-width: 600px) {
  .dc { top: auto; bottom: 16px; align-items: flex-end; transform: translateX(calc(-1 * var(--dc-width))); }
  .dc.is-open { transform: none; }
  .dc__tab { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dc.is-ready, .dc__option, .dc__btn, .dc__tabbtn { transition: none; }
}