/* ISENGRID — components: panels, parchment, buttons, tooltip, modal, toast,
   tabs, chips, sliders, knotwork divider. Owner: WP-E. ARTBIBLE §8.2/§8.3.
   --knotwork is a runtime dataURL pattern set by main.js at boot. */

/* ── wood/stone panel ───────────────────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, var(--ui-wood-top), var(--ui-wood-bot));
  border: 2px solid var(--ui-border);
  box-shadow: inset 0 1px 0 var(--ui-bevel-hi), inset 0 -1px 0 var(--ui-bevel-lo);
  border-radius: 8px;
}

.parch-well {
  background: var(--parch);
  box-shadow: inset 0 0 24px var(--parch-dark);
  color: var(--parch-ink);
  border-radius: 6px;
  padding: 8px 10px;
}

.knot-divider {
  height: 12px;
  background-image: var(--knotwork);
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.9;
  margin: 6px 0;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  font: inherit;
  font-size: 0.95rem;
  color: var(--parch);
  background: linear-gradient(180deg, #6b5d4a, #4a3f33);
  border: 1px solid var(--ink-warm);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: filter 80ms ease, box-shadow 80ms ease, transform 80ms ease;
  user-select: none;
}
.btn:hover:not(:disabled) { box-shadow: 0 0 8px #ffb34788; filter: brightness(1.1); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.92); }
.btn:focus-visible { outline: 2px solid var(--amber-focus); outline-offset: 1px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #241a08;
  border-color: #5c4a16;
  font-weight: 600;
}
.btn.danger { background: linear-gradient(180deg, #8a4438, #5c2c24); }
/* §14 sell-undo guardrail (review item 35): 100%-refund window on the sell button */
.btn.danger.undo { background: linear-gradient(180deg, #6d6038, #4a3d20); border-color: var(--gold); }
.undo-tag { font-size: 0.78em; color: var(--gold-lit); letter-spacing: 0.02em; }
.btn.ghost { background: transparent; border-color: var(--ui-bevel-hi); }
.btn.small { padding: 3px 9px; font-size: 0.85rem; }
.btn.icon-btn { padding: 4px 9px; min-width: 34px; }
.btn.active { box-shadow: inset 0 0 0 2px var(--amber-focus); }

/* generic micro pop (gold/seidr/lives counters, wave label) */
.pop { animation: ui-pop 220ms ease-out; }
@keyframes ui-pop { 0% { transform: scale(1); } 35% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; }
.tab {
  font: inherit; font-size: 0.9rem; color: var(--parch-dark);
  background: linear-gradient(180deg, #463a2e, #352b21);
  border: 1px solid var(--ui-border); border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 5px 14px; cursor: pointer;
}
.tab.active { color: var(--gold-lit); background: linear-gradient(180deg, #5a4a38, #463a2e); }

/* ── tooltip (ARTBIBLE §8.2 anatomy) ────────────────────────────────────── */
#tooltip {
  background: var(--parch);
  color: var(--parch-ink);
  border: 1.5px solid var(--ink-warm);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(26, 20, 48, 0.55), inset 0 0 18px var(--parch-dark);
  padding: 8px 11px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.tip-title {
  font-family: var(--font-flavor); font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 1.05rem; color: var(--parch-ink);
  border-bottom: 1px solid var(--parch-dark); padding-bottom: 2px; margin-bottom: 4px;
}
.tip-line { margin-top: 2px; }
.tip-line.flavor { font-style: italic; color: #5c4a32; margin-top: 5px; }
.tip-line.dim { color: #6e5b40; }
.tip-line.warn { color: #8a5a18; }
.tip-line.bad { color: var(--invalid-red); }
.tip-line.good { color: #4f8f3e; }
.tip-line.riddle { color: #5a4a6e; }

/* ── modal / overlay veil ───────────────────────────────────────────────── */
.modal-veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 20, 48, 0.55);
  animation: veil-in 160ms ease-out;
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  min-width: 300px; max-width: min(480px, 92vw);
  max-height: 88vh; overflow: auto;
  padding: 18px 20px;
  animation: modal-in 180ms ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-title {
  font-family: var(--font-flavor); font-variant: small-caps; letter-spacing: 0.08em;
  font-size: 1.35rem; color: var(--gold-lit); margin-bottom: 10px; text-align: center;
}
.modal-body { margin: 8px 0 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.modal-actions.col { flex-direction: column; align-items: stretch; }

/* fields */
.field-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.field-row > span { width: 90px; color: var(--parch-dark); }
.field {
  flex: 1; font: inherit; color: var(--parch-ink);
  background: var(--parch); border: 1px solid var(--ink-warm); border-radius: 4px;
  padding: 5px 8px;
}
.field:focus-visible { outline: 2px solid var(--amber-focus); }
.auth-rules { font-size: 0.8rem; color: var(--parch-dark); margin: 6px 0; }
.auth-err { min-height: 1.1em; font-size: 0.85rem; }
.auth-err.bad { color: #ff9d8a; }

/* settings rows */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 7px 0; }
.set-label { color: var(--parch-dark); }
.set-danger { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.set-row select, .fame-board-select {
  font: inherit; color: var(--parch); background: #463a2e;
  border: 1px solid var(--ui-border); border-radius: 4px; padding: 3px 6px;
}
.set-row input[type="range"] { width: 140px; }

/* checkbox + range accents */
input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
input[type="range"] { accent-color: var(--gold); }

/* ── toasts ─────────────────────────────────────────────────────────────── */
.toast {
  background: var(--parch); color: var(--parch-ink);
  border: 1.5px solid var(--ink-warm); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(26, 20, 48, 0.5);
  padding: 8px 14px; margin-top: 8px; max-width: 300px;
  font-size: 0.9rem;
  animation: toast-in 250ms ease-out;
}
.toast.out { opacity: 0; transform: translateX(20px); transition: opacity 400ms, transform 400ms; }
.toast.discovery { border-color: var(--gold); box-shadow: 0 0 14px #ffc23d66; }
.toast.bad { border-color: var(--invalid-red); }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ── rune chips (bench + sockets) ───────────────────────────────────────── */
.chip {
  position: relative;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, #8c7f6d 0%, #75695a 45%, #574e42 100%);
  border: 2px solid var(--ink-warm);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--stone-hi), 0 2px 3px rgba(26, 20, 48, 0.4);
  cursor: grab;
  font: inherit;
  padding: 0;
  touch-action: none;
}
.chip:hover { box-shadow: inset 0 1px 0 var(--stone-hi), 0 0 8px #ffb34766; }
.chip.empty {
  background: rgba(43, 33, 26, 0.55);
  border: 2px dashed #4a3f33; box-shadow: none; cursor: default;
}
.chip.selected, .chip.in-anvil { outline: 2px solid var(--amber-focus); }
.chip.dragging { opacity: 0.35; }
.chip.fuse-target { outline: 2px solid var(--aurora-green); box-shadow: 0 0 12px #57d9a388; }
.chip.mini { width: 40px; height: 40px; }
.chip.socketed { cursor: default; }
.chip-glyphs { display: flex; align-items: baseline; gap: 1px; }
.chip-glyph { font-size: 24px; line-height: 1; text-shadow: 0 0 6px currentColor, 0 1px 0 #1d1822; }
.chip-glyph.g1 { font-size: 17px; opacity: 0.92; }
.chip-glyph.g2 { font-size: 13px; opacity: 0.85; }
.chip-glyph.dim { color: var(--snow-shadow); text-shadow: none; }
.chip-grade {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 11px; font-weight: 700; color: var(--gold-lit);
  text-shadow: 0 1px 0 #1d1822;
}
.chip.drag-clone {
  position: fixed; z-index: 1500; pointer-events: none;
  transform: translate(-50%, -60%) scale(1.08);
  box-shadow: 0 6px 16px rgba(26, 20, 48, 0.6), 0 0 10px #ffb34755;
}

/* ── tuning sliders (rune-tipped handles, ARTBIBLE §8.2) ────────────────── */
.tune-row { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 6px; margin: 5px 0; }
.tune-name { font-size: 0.82rem; color: var(--parch-dark); }
.tune-val { text-align: right; font-size: 0.85rem; }
.tune-slider {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: #241c14;
  border: 1px solid var(--ui-border); cursor: pointer;
}
.tune-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 18px;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold-deep));
  border: 1.5px solid var(--ink-warm);
  border-radius: 3px 3px 7px 7px;
  box-shadow: 0 1px 2px rgba(26, 20, 48, 0.5);
}
.tune-slider::-moz-range-thumb {
  width: 14px; height: 17px;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold-deep));
  border: 1.5px solid var(--ink-warm);
  border-radius: 3px 3px 7px 7px;
}
.tune-slider.power::-webkit-slider-thumb { background: linear-gradient(180deg, #ff9f3f, #8a2c0d); }
.tune-slider.rate::-webkit-slider-thumb { background: linear-gradient(180deg, #9fdcff, #4f8794); }
.tune-slider.range::-webkit-slider-thumb { background: linear-gradient(180deg, #b6e34b, #4f7f63); }
.tune-slider.power::-moz-range-thumb { background: linear-gradient(180deg, #ff9f3f, #8a2c0d); }
.tune-slider.rate::-moz-range-thumb { background: linear-gradient(180deg, #9fdcff, #4f8794); }
.tune-slider.range::-moz-range-thumb { background: linear-gradient(180deg, #b6e34b, #4f7f63); }

.budget-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--parch-dark); margin-top: 4px; }
.budget-bar { flex: 1; height: 8px; border-radius: 4px; background: #241c14; border: 1px solid var(--ui-border); overflow: hidden; }
.budget-fill { height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-lit)); transition: width 90ms linear; }
.budget-label { font-size: 0.82rem; }

/* selects inside panels */
.target-select {
  width: 100%; font: inherit; font-size: 0.88rem; color: var(--parch);
  background: #463a2e; border: 1px solid var(--ui-border); border-radius: 4px; padding: 4px 6px;
}

/* toggle rows */
.toggle-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 0.88rem; cursor: pointer; }

/* generic stat rows */
.stat-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; padding: 1px 0; }
.stat-name { color: #6e5b40; }

/* scrollbars (panel-toned) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ui-wood-bot); }
::-webkit-scrollbar-thumb { background: #5a4a38; border-radius: 5px; border: 2px solid var(--ui-wood-bot); }