/* ═══════════════════════════════════════════════════════
   toolkit — dark theme
   Kanagawa Wave. Structurally identical to styles/light/style.css —
   only the palette block below differs between the two.
   ═══════════════════════════════════════════════════════ */

/* ── palette ─────────────────────────────────────────── */
:root {
  --sumiInk0:  #16161d;
  --sumiInk1:  #1f1f28;
  --sumiInk2:  #2a2a37;
  --sumiInk3:  #363646;
  --sumiInk4:  #54546d;
  --fujiWhite: #dcd7ba;
  --oldWhite:  #c8c093;
  --fujiGray:  #727169;
  --crystalBlue:  #7e9cd8;
  --springBlue:   #7fb4ca;
  --waveAqua:     #7aa89f;
  --springGreen:  #98bb6c;
  --carpYellow:   #e6c384;
  --roninYellow:  #ff9e3b;
  --surimiOrange: #ffa066;
  --sakuraPink:   #d27e99;
  --oniViolet:    #957fb8;
  --autumnRed:    #c34043;

  --mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--sumiInk0);
  color: var(--fujiWhite);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--springBlue); }

/* ── layout ──────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 168px;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.ad {
  position: sticky;
  top: 24px;
  align-self: start;
  height: 600px;
  border: 1px dashed var(--sumiInk4);
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--sumiInk4) 13%, transparent) 9px 10px);
  color: var(--fujiGray);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  user-select: none;
}

main { min-width: 0; }

/* ── header ──────────────────────────────────────────── */
header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sumiInk3);
}
h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--carpYellow);
}
h1 .sigil { width: 16px; height: 16px; vertical-align: -3px; }
.tagline { margin: 0; color: var(--fujiGray); font-size: 12.5px; }

/* ── loader (shown only once an operation exceeds ~1.5s) ── */
/* Plain setTimeout-driven display toggle — safe now that every wasm codec
   call actually runs in js/worker.js (see callWorker() in app.js), so the
   main thread this timer runs on never blocks, regardless of browser.
   Reparented into whichever .tabpanel is active (see app.js) so it
   overlays just that panel — hence .tabpanel needing position:relative. */
.loader {
  container-type: size;
  container-name: loader;
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--sumiInk0) 88%, transparent);
  border: 1px solid var(--sumiInk3);
  border-radius: 8px;
  text-align: center;
}
.loader.show { display: flex; }
.loader-status { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.loader svg { width: 26px; height: 26px; color: var(--crystalBlue); flex: none; animation: spin .8s linear infinite; }
.loader .msg { color: var(--fujiWhite); font-size: 13px; margin: 0; text-align: center; }
/* Short container (e.g. the image tab's panel before a preview has ever
   opened) — the vertical stack doesn't fit comfortably, so put the
   spinner inline to the left of the label instead. */
@container loader (max-height: 140px) {
  .loader-status { flex-direction: row; }
  .loader svg { width: 20px; height: 20px; }
}
.loader-cancel {
  margin-top: 4px;
  padding: 6px 16px;
  background: var(--sumiInk2);
  border: 1px solid var(--sumiInk3);
  border-radius: 5px;
  color: var(--oldWhite);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.loader-cancel:hover { background: var(--sumiInk3); border-color: var(--sumiInk4); color: var(--fujiWhite); }
.loader-cancel:focus-visible { outline: 2px solid var(--crystalBlue); outline-offset: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── theme switch ────────────────────────────────────── */
.theme-switch {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--sumiInk1);
  border: 1px solid var(--sumiInk3);
  border-radius: 7px;
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--fujiGray);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.theme-switch svg { width: 14px; height: 14px; }
.theme-switch button:hover { color: var(--fujiWhite); background: var(--sumiInk2); }
.theme-switch button[aria-pressed="true"] { background: var(--sumiInk3); color: var(--carpYellow); }
.theme-switch button:focus-visible { outline: 2px solid var(--crystalBlue); outline-offset: 1px; }

/* ── tabs ────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sumiInk3);
}
.tab {
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fujiGray);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--fujiWhite); }
.tab[aria-selected="true"] { color: var(--carpYellow); border-bottom-color: var(--carpYellow); }
.tab:focus-visible { outline: 2px solid var(--crystalBlue); outline-offset: 1px; }
.tabpanel { position: relative; } /* anchors the .loader overlay */

/* the image tab has no toolbar above it, so its panel needs its own
   fully-rounded top edge instead of the toolbar+panel pairing below */
#tab-image .panel { display: flex; border-radius: 8px 8px 0 0; border-bottom: none; }

/* ── toolbar ─────────────────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  background: var(--sumiInk1);
  border: 1px solid var(--sumiInk3);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: var(--sumiInk2);
  border: 1px solid var(--sumiInk3);
  border-radius: 5px;
  color: var(--oldWhite);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
}
.tool svg { width: 15px; height: 15px; flex: none; }
.tool:hover  { background: var(--sumiInk3); color: var(--fujiWhite); border-color: var(--sumiInk4); }
.tool:active { transform: translateY(1px); }
.tool:focus-visible { outline: 2px solid var(--crystalBlue); outline-offset: 1px; }
.tool[aria-pressed="true"] {
  background: var(--sumiInk3);
  border-color: var(--crystalBlue);
  color: var(--fujiWhite);
}

/* ── format dropdown (split-button: Format + caret + menu) ──────── */
.dropdown { position: relative; display: inline-flex; }
.dropdown .tool:first-child { border-radius: 5px 0 0 5px; }
.dropdown .caret { border-radius: 0 5px 5px 0; border-left: none; padding: 7px 8px; }
.dropdown .caret svg { width: 13px; height: 13px; transition: transform .12s; }
.dropdown .caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 4px;
  background: var(--sumiInk1);
  border: 1px solid var(--sumiInk3);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
/* author rules beat the UA stylesheet even at equal specificity, so plain
   .menu{display:flex} above silently defeats the hidden attribute without
   this — must stay after the base .menu rule */
.menu[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--oldWhite);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.menu-item svg { width: 14px; height: 14px; flex: none; }
.menu-item:hover { background: var(--sumiInk2); color: var(--fujiWhite); }
.menu-item:focus-visible { outline: 2px solid var(--crystalBlue); outline-offset: -2px; }
.menu-sep { height: 1px; background: var(--sumiInk3); margin: 4px 6px; }

/* per-action icon accents — keyed off [data-act]/[data-panel] rather than
   .tool specifically, so the same rules also color menu-item icons in the
   format dropdown */
.accent                  { color: var(--c, var(--crystalBlue)); }
[data-act="b64enc"]  .accent { --c: var(--springGreen);  }
[data-act="b64dec"]  .accent { --c: var(--sakuraPink);   }
[data-act="qpenc"]   .accent { --c: var(--waveAqua);     }
[data-act="qpdec"]   .accent { --c: var(--oniViolet);    }
[data-act="autofmt"] .accent { --c: var(--carpYellow);   }
[data-act="htmlfmt"] .accent { --c: var(--surimiOrange); }
[data-act="xmlfmt"]  .accent { --c: var(--roninYellow);  }
[data-act="jsonfmt"] .accent { --c: var(--springGreen);  }
[data-act="jsfmt"]   .accent { --c: var(--sakuraPink);   }
[data-act="json2yaml"] .accent { --c: var(--waveAqua);   }
[data-act="yaml2json"] .accent { --c: var(--oniViolet);  }
[data-panel="enc"]   .accent { --c: var(--carpYellow);   }
[data-act="copy"]    .accent { --c: var(--springBlue);   }
[data-act="clear"]   .accent { --c: var(--autumnRed);    }

.sep { width: 1px; background: var(--sumiInk3); margin: 2px 4px; }
.spacer { flex: 1 1 auto; }

/* ── panels (image / encoding) ───────────────────────── */
.panel {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--sumiInk1);
  border-left: 1px solid var(--sumiInk3);
  border-right: 1px solid var(--sumiInk3);
  border-top: 1px solid var(--sumiInk3);
  font-size: 12.5px;
  color: var(--oldWhite);
}
.panel.open { display: flex; }
.panel .label { color: var(--fujiGray); }

select, .filebtn, .go {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
  background: var(--sumiInk2);
  color: var(--fujiWhite);
  border: 1px solid var(--sumiInk3);
  border-radius: 5px;
  cursor: pointer;
}
select:hover, .filebtn:hover, .go:hover { border-color: var(--sumiInk4); }
select:focus-visible, .filebtn:focus-visible, .go:focus-visible {
  outline: 2px solid var(--crystalBlue); outline-offset: 1px;
}
select:disabled, .filebtn:disabled, .go:disabled,
select:disabled:hover, .filebtn:disabled:hover, .go:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--fujiGray);
  background: var(--sumiInk1);
  border-color: var(--sumiInk3);
}
.go { color: var(--springGreen); border-color: color-mix(in srgb, var(--springGreen) 35%, transparent); }
.go:hover { background: color-mix(in srgb, var(--springGreen) 10%, transparent); }
input[type=file] { display: none; }
.fname { color: var(--waveAqua); }

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fujiGray);
}
.toolbar .check { align-self: center; font-size: 12.5px; }
.check input[type=checkbox] {
  display: inline;
  accent-color: var(--crystalBlue);
}

/* ── editor ──────────────────────────────────────────── */
.editor {
  position: relative;
  background: var(--sumiInk1);
  border: 1px solid var(--sumiInk3);
  border-radius: 0 0 8px 8px;
}
textarea {
  display: block;
  width: 100%;
  min-height: 380px;
  resize: vertical;
  padding: 18px 20px;
  background: transparent;
  border: none;
  color: var(--fujiWhite);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  tab-size: 4;
}
textarea:focus { outline: none; }
textarea::placeholder { color: var(--sumiInk4); }
.editor:focus-within { border-color: var(--crystalBlue); }

.statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  border-top: 1px solid var(--sumiInk3);
  background: var(--sumiInk2);
  border-radius: 0 0 7px 7px;
  font-size: 11.5px;
  color: var(--fujiGray);
}
.statusbar b { color: var(--oldWhite); font-weight: 500; }
.msg { margin-left: auto; text-align: right; }
.msg.ok   { color: var(--springGreen); }
.msg.err  { color: var(--autumnRed); }
.msg.info { color: var(--carpYellow); }

/* ── preview ─────────────────────────────────────────── */
.preview {
  display: none;
  margin-top: 16px;
  padding: 14px;
  background: var(--sumiInk1);
  border: 1px solid var(--sumiInk3);
  border-radius: 8px;
}
.preview.open { display: block; }
.preview img {
  max-width: 100%;
  max-height: 320px;
  display: block;
  border-radius: 4px;
  background:
    conic-gradient(from 90deg at 50% 50%,
      var(--sumiInk2) 25%, var(--sumiInk3) 0 50%,
      var(--sumiInk2) 0 75%, var(--sumiInk3) 0) 0 0/16px 16px;
}
.preview .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--fujiGray);
}
.preview .meta b { color: var(--oldWhite); font-weight: 500; }
.dl {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--crystalBlue) 40%, transparent);
  border-radius: 5px;
  color: var(--crystalBlue);
  text-decoration: none;
  font-size: 12.5px;
}
.dl:hover { background: color-mix(in srgb, var(--crystalBlue) 10%, transparent); }

@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .ad { display: none; }
}