/* ── LKDraw editor chrome ──────────────────────────────────────────
   Styles the Fabric-based drawing editor whose DOM contract is produced
   by public/tools/design/js/engine.js (see task-5-report.md "DOM contract").
   Depends on css/shared.css being loaded first for design tokens
   (--bg, --surface, --border, --text, --muted, --accent, --radius*, --shadow*).

   Layout contract for the page author (task 7):

     <div id="lkdraw-root">
       <div class="lkdraw-toolbar"> ...[data-tool] / [data-action] buttons... </div>
       <div class="lkdraw-stage">
         <div id="lkdraw-canvas-wrap"><canvas id="lkdraw-canvas"></canvas></div>
       </div>
       <div class="lkdraw-side">
         <details class="lkdraw-panel" open id="lkdraw-inspector">
           <summary class="lkdraw-panel-title">Inspector</summary>
           ...stroke/fill/opacity/etc controls...
         </details>
         <details class="lkdraw-panel" open>
           <summary class="lkdraw-panel-title">Color</summary>
           ...#lkdraw-color-base, [data-harmony], #lkdraw-swatches, #lkdraw-recent-swatches...
         </details>
         <details class="lkdraw-panel" open>
           <summary class="lkdraw-panel-title">Layers</summary>
           <div id="lkdraw-layers"></div>
         </details>
         <details class="lkdraw-panel" open>
           <summary class="lkdraw-panel-title">Templates</summary>
           <div id="lkdraw-templates"></div>
         </details>
       </div>
     </div>

   `.lkdraw-panel` also works as a plain <div> (always expanded, no arrow) if
   collapse-on-mobile isn't wanted for a given panel — both forms are styled.
   ------------------------------------------------------------------ */

:root {
  --lkdraw-toolbar-bg:     #1c1f2e;
  --lkdraw-toolbar-fg:     #c7cbe3;
  --lkdraw-toolbar-fg-hi:  #ffffff;
  --lkdraw-toolbar-border: #2c2f45;
  --lkdraw-toolbar-hover:  rgba(255,255,255,.09);
  --lkdraw-desk-bg:        var(--surface2);
  --lkdraw-canvas-bg:      #ffffff;
}

/* ── App shell ─────────────────────────────────────────────────── */
#lkdraw-root {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 300px;
  grid-template-areas: "toolbar stage side";
  height: clamp(540px, 78vh, 820px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  color: var(--text);
}

/* ── Left toolbar: [data-tool] + [data-action] buttons ────────────── */
.lkdraw-toolbar {
  grid-area: toolbar;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 10px;
  background: linear-gradient(180deg, #232739 0%, var(--lkdraw-toolbar-bg) 46%);
  color: var(--lkdraw-toolbar-fg);
  border-right: 1px solid var(--lkdraw-toolbar-border);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.25), 2px 0 8px rgba(15,15,46,.10);
  overflow-y: auto;
  overflow-x: hidden;
}
.lkdraw-toolbar::-webkit-scrollbar { width: 6px; }
.lkdraw-toolbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }

.lkdraw-toolbar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.lkdraw-toolbar-group + .lkdraw-toolbar-group {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--lkdraw-toolbar-border);
}
.lkdraw-toolbar-sep { width: 28px; height: 1px; background: var(--lkdraw-toolbar-border); margin: 4px 0; flex-shrink: 0; }

/* Two-per-row grouped layout (Tools / Edit / Align) with a small section
   label — keeps the rail compact instead of one long single-file column. */
.lkdraw-toolbar-group.lkdraw-toolbar-group--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  justify-items: center;
}
.lkdraw-toolbar-label {
  grid-column: 1 / -1;
  width: 100%;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 1;
  text-align: left;
  padding: 0 2px;
  margin-bottom: -1px;
}

.lkdraw-toolbar [data-tool],
.lkdraw-toolbar [data-action] {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.lkdraw-toolbar [data-tool]:active,
.lkdraw-toolbar [data-action]:active { transform: translateY(1px); }
.lkdraw-toolbar [data-tool] svg,
.lkdraw-toolbar [data-action] svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Signature colored pencil (matches the sudoku/crossword brand pencil) — opt out of the monochrome line-icon rule */
.lkdraw-toolbar [data-tool="pencil"] svg.lkdraw-pencil-icon { width: 25px; height: 25px; fill: initial; stroke: none; overflow: visible; }
/* Short text labels (PNG/SVG/JSON export codes) — tidy small caps, not chunky text */
.lkdraw-glyph { font-size: .58rem; font-weight: 800; letter-spacing: .03em; }

.lkdraw-toolbar [data-tool]:hover,
.lkdraw-toolbar [data-action]:hover:not(.disabled) {
  background: var(--lkdraw-toolbar-hover);
  color: var(--lkdraw-toolbar-fg-hi);
}
.lkdraw-toolbar [data-tool]:focus-visible,
.lkdraw-toolbar [data-action]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lkdraw-toolbar-bg), 0 0 0 4px var(--accent-light, var(--accent));
}

/* Active tool state */
.lkdraw-toolbar [data-tool].is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .28);
}

/* Disabled action state (undo/redo when history is empty) */
.lkdraw-toolbar [data-action].disabled {
  opacity: .32;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Center: canvas stage ──────────────────────────────────────── */
.lkdraw-stage {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px;
  background: var(--lkdraw-desk-bg);
  overflow: auto;
  position: relative;
}

#lkdraw-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--lkdraw-canvas-bg);
  border-radius: 4px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15, 15, 46, .06);
  overflow: hidden;
}
#lkdraw-canvas-wrap canvas { display: block; }

/* ── Right column: inspector / color / layers / templates ─────────── */
.lkdraw-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
}

.lkdraw-panel { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.lkdraw-panel:last-child { border-bottom: none; }

.lkdraw-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  list-style: none;
  cursor: default;
}
.lkdraw-panel-title::-webkit-details-marker { display: none; }

/* When a panel is a <details> (collapsible drawer), give it a clickable
   summary with its own disclosure arrow and let the browser own the toggle
   state — no JS required. */
details.lkdraw-panel { padding: 0; }
details.lkdraw-panel > .lkdraw-panel-title {
  padding: 14px 16px;
  margin-bottom: 0;
  cursor: pointer;
}
details.lkdraw-panel[open] > .lkdraw-panel-title { border-bottom: 1px solid var(--border); }
details.lkdraw-panel > .lkdraw-panel-title::after {
  content: '\25BE';
  font-size: .65rem;
  opacity: .6;
  transition: transform .15s;
}
details.lkdraw-panel:not([open]) > .lkdraw-panel-title::after { transform: rotate(-90deg); }
details.lkdraw-panel > *:not(.lkdraw-panel-title) { padding: 14px 16px; }

/* Generic form controls anywhere in the side column (inspector fields,
   color-target select, font pickers, etc.) */
.lkdraw-side label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.lkdraw-side input[type="number"],
.lkdraw-side input[type="range"],
.lkdraw-side input[type="text"],
.lkdraw-side select {
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  padding: 6px 8px;
  border: 1px solid var(--border-control, #7a7fb5);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.lkdraw-side input[type="color"] {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-control, #7a7fb5);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.lkdraw-side input:focus-visible,
.lkdraw-side select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.lkdraw-side input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

/* Optional label+control row wrapper the page HTML may use */
.lkdraw-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.lkdraw-field:last-child { margin-bottom: 0; }
.lkdraw-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lkdraw-field-row label { margin-bottom: 0; flex-shrink: 0; }

/* File-picker buttons (Import JSON, Extract from image) — stretch to full
   panel width so they match the selects/inputs stacked above them. */
label[for="lkdraw-import-input"],
label[for="lkdraw-image-extract-input"] {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Two-up grid for short, related fields (color pair, radius+font-size,
   grid-toggle+zoom) — keeps the inspector compact instead of one long list. */
.lkdraw-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.lkdraw-field-pair:last-child { margin-bottom: 0; }
.lkdraw-field-pair .lkdraw-field,
.lkdraw-field-pair .lkdraw-field-row { margin-bottom: 0; }

/* Label + live value on one line (e.g. "Stroke width  6") */
.lkdraw-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lkdraw-val { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; font-size: .78rem; }

/* Slider with a value pill that rides above the thumb (e.g. stroke width,
   opacity) — the number sits where the thumb is so you always see the value
   you're landing on. Space is reserved above the track so the pill never
   collides with the field label. */
.lkdraw-slider { position: relative; padding-top: 23px; }
.lkdraw-slider-bubble {
  position: absolute;
  top: 0;
  left: 0;                       /* JS sets the real left to track the thumb */
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: .82;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 3px 9px rgba(15, 15, 46, .20);
  z-index: 3;
}
.lkdraw-slider-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}
.lkdraw-slider:hover .lkdraw-slider-bubble,
.lkdraw-slider input[type="range"]:focus-visible + .lkdraw-slider-bubble,
.lkdraw-slider.is-dragging .lkdraw-slider-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px) scale(1.06);
}

/* Hidden file inputs (image/import/extract) — visually hidden, not display:none,
   so they stay reachable via the button that opens them. */
#lkdraw-image-input,
#lkdraw-import-input,
#lkdraw-image-extract-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile-only Export shortcut in the side panel — the toolbar's export buttons
   sit at the far end of the horizontal mobile toolbar and are easy to miss. */
.lkdraw-export-mobile { display: none; }
.lkdraw-export-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lkdraw-export-grid .btn { width: 100%; text-align: center; }
@media (max-width: 820px) { .lkdraw-export-mobile { display: block; } }

/* Color harmony buttons: uniform 3-column grid so every option lines up in a
   tidy cell instead of wrapping raggedly. */
.lkdraw-harmony-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
[data-harmony] {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  padding: 12px 4px;
  min-height: 44px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
[data-harmony]:hover { border-color: var(--accent); color: var(--accent); }
[data-harmony].is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Swatch grids — .palette-sw is the class LKPalette.renderSwatches() assigns */
#lkdraw-swatches,
#lkdraw-recent-swatches,
#lkdraw-default-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
#lkdraw-swatches .palette-sw,
#lkdraw-recent-swatches .palette-sw,
#lkdraw-default-swatches .palette-sw {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  border: 1px solid rgba(15, 15, 46, .14);
  border-radius: 6px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
#lkdraw-swatches .palette-sw:hover,
#lkdraw-recent-swatches .palette-sw:hover,
#lkdraw-default-swatches .palette-sw:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(15, 15, 46, .22);
}

/* Zoom readout — adapts to whichever container (toolbar or side) it sits in */
#lkdraw-zoom-level {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  opacity: .75;
  white-space: nowrap;
}

/* Layers panel */
#lkdraw-layers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
}
.lkdraw-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .82rem;
  background: transparent;
  transition: background .12s;
}
.lkdraw-layer-row:hover { background: var(--surface2); }
.lkdraw-layer-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.lkdraw-layer-row button {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.lkdraw-layer-row button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lkdraw-layer-row button[data-action="layer-delete"]:hover { background: #dc2626; border-color: #dc2626; }

/* Templates drawer */
#lkdraw-templates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.lkdraw-template-item {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.lkdraw-template-item:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-fg); }

/* ── Responsive: side panels + toolbar collapse/stack below ~820px ── */
@media (max-width: 820px) {
  #lkdraw-root {
    grid-template-columns: 1fr;
    grid-template-areas: "toolbar" "stage" "side";
    height: auto;
    min-height: 0;
  }
  .lkdraw-toolbar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    min-width: 0;      /* let the grid item shrink so overflow-x scrolls internally instead of widening the page */
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--lkdraw-toolbar-border);
    padding: 8px;
  }
  .lkdraw-toolbar-group { flex-direction: row; width: auto; }
  .lkdraw-toolbar-group.lkdraw-toolbar-group--grid { display: flex; }
  .lkdraw-toolbar-label { display: none; }
  .lkdraw-toolbar-group + .lkdraw-toolbar-group {
    margin-top: 0;
    margin-left: 6px;
    padding-top: 0;
    padding-left: 10px;
    border-top: none;
    border-left: 1px solid var(--lkdraw-toolbar-border);
  }
  .lkdraw-toolbar-sep { width: 1px; height: 28px; margin: 0 4px; }
  .lkdraw-stage { height: 60vh; min-height: 360px; padding: 16px; }
  .lkdraw-side {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;      /* expand fully and scroll with the page instead of a nested 50vh scroll box */
    overflow-y: visible;
  }
}

@media (max-width: 480px) {
  .lkdraw-toolbar [data-tool],
  .lkdraw-toolbar [data-action] { width: 44px; height: 44px; }
  .lkdraw-stage { height: 52vh; min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  #lkdraw-root, #lkdraw-root * { transition: none !important; }
}

/* ── FAQ accordion — matches image/pdf/generators suites ──────── */
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: .98rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: '\2013'; }
.faq .faq-body { padding: 0 18px 16px; font-size: .92rem; color: var(--muted); line-height: 1.7; }
.faq .faq-body a { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Numbered how-to steps ────────────────────────────────────── */
.steps { display: grid; gap: 14px; margin-top: 18px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.step p { margin: 0; color: var(--muted); }
.step strong { color: var(--text); }

/* ── Trust row ────────────────────────────────────────────────── */
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; max-width: 760px; margin: 28px auto 0; padding: 0 20px; }
.trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.trust-item svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }