/* Sparkfire: the table workshop (editor, My tables, the shared gallery and
   sharing), in the same neon as the rest. Uses the variables in styles.css. */

/* ---------- the editor ---------- */
.ws-editor {
  position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column;
  padding: var(--sat) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background: radial-gradient(120% 60% at 50% 30%, #140d2e, #05040c 70%);
}
body.ws-open #btn-pause, body.ws-open #home { visibility: hidden; }
body.ws-open .toast { bottom: auto; top: calc(var(--sat) + 62px); max-width: calc(100% - 32px); text-align: center; }
.ws-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.ws-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 16, 44, 0.7); border: 1px solid var(--line); }
.ws-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ws-icon:disabled { opacity: 0.35; }
.ws-name {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 14px; text-align: center;
  font: 400 23px/1 var(--neon); color: #fff; letter-spacing: 0.03em;
  background: rgba(10, 8, 24, 0.6); border: 1px solid var(--line); outline: none;
  text-shadow: 0 0 10px rgba(46, 242, 255, 0.6);
  user-select: text; -webkit-user-select: text;
}
.ws-name:focus { border-color: var(--cyan); box-shadow: 0 0 14px rgba(46, 242, 255, 0.35); }
.ws-stage { position: relative; flex: 1; min-height: 200px; }
.ws-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.ws-status {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 6px 14px 6px 30px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 6, 20, 0.88);
  font-weight: 700; font-size: 14px; line-height: 1.25; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-status::before { content: ''; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ws-status[data-kind='good'] { color: #78ffaa; border-color: rgba(120, 255, 170, 0.6); }
.ws-status[data-kind='warn'] { color: #ffd77a; border-color: rgba(255, 215, 122, 0.6); }
.ws-status[data-kind='bad'] { color: #ff8a98; border-color: rgba(255, 90, 110, 0.7); box-shadow: 0 0 14px rgba(255, 90, 110, 0.3); }

.ws-dock {
  flex: none; padding: 10px 14px calc(var(--sab) + 10px); border-radius: 22px 22px 0 0;
  background: var(--glass); border-top: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(120, 80, 255, 0.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ws-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin: 0 auto 10px; max-width: 320px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.ws-tabs button { min-height: 34px; border: 0; border-radius: 9px; background: transparent; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: var(--mute); }
.ws-tabs button[aria-selected='true'] { background: rgba(46, 242, 255, 0.14); color: #dffcff; box-shadow: inset 0 0 0 1px rgba(46, 242, 255, 0.55); }
/* A fixed height, so switching tabs never resizes the table above. */
.ws-pane { height: 172px; overflow-y: auto; overscroll-behavior: contain; }
.ws-feel { padding-right: 2px; }

.ws-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ws-tools button {
  min-height: 58px; padding: 6px 2px 4px; border-radius: 14px; border: 1px solid rgba(var(--tc), 0.35);
  background: rgba(var(--tc), 0.06); color: rgb(var(--tc)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.ws-tools svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(var(--tc), 0.8)); }
.ws-tools span { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.ws-tools button[aria-checked='true'] { border-color: rgb(var(--tc)); background: rgba(var(--tc), 0.18); box-shadow: 0 0 16px rgba(var(--tc), 0.45), inset 0 0 12px rgba(var(--tc), 0.2); }

.ws-pane[data-pane='build'] { display: flex; flex-direction: column; overflow: hidden; }
.ws-inspect { margin-top: 8px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ws-insp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-insp-head h4 { margin: 0; font: 400 20px/1.1 var(--neon); color: #fff; }
.ws-insp-head small { font: 600 13px var(--ui); color: var(--mute); }
.ws-hint { margin: 4px 0 0; color: var(--mute); font-size: 14px; line-height: 1.35; }
.ws-hint b { color: var(--ink); }

.ws-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; min-height: 44px; }
.ws-field > span { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; white-space: nowrap; }
.ws-field > span b { font-weight: 700; color: #dffcff; }
.ws-field > span small { font-size: 12px; font-weight: 500; color: var(--mute); white-space: normal; }
.ws-field > span:has(b) { flex-direction: row; gap: 6px; align-items: baseline; }
.ws-field input[type='range'] { flex: 1; max-width: 200px; accent-color: var(--cyan); height: 28px; }
.ws-field select {
  min-height: 40px; max-width: 200px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(20, 16, 44, 0.9); color: var(--ink); font: 600 15px var(--ui);
}
.ws-seg { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ws-seg button { min-width: 44px; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-weight: 700; font-size: 14px; }
.ws-seg button[aria-checked='true'], .ws-seg button[aria-pressed='true'] { border-color: var(--cyan); color: #dffcff; background: rgba(46, 242, 255, 0.1); box-shadow: 0 0 10px rgba(46, 242, 255, 0.35); }
.ws-swatches { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.ws-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); background: rgb(var(--sw)); box-shadow: 0 0 10px rgba(var(--sw), 0.55); }
.ws-swatches button[aria-checked='true'] { border-color: #fff; box-shadow: 0 0 0 2px #05040c, 0 0 0 4px rgb(var(--sw)), 0 0 18px rgba(var(--sw), 0.8); }

.ws-actions { display: grid; grid-template-columns: 0.8fr 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.ws-actions .btn { min-height: 46px; padding: 6px 8px; font-size: 15px; }
.ws-actions .btn[hidden] { display: block !important; visibility: hidden; }

/* ---------- My tables, in the picker ---------- */
.ws-make { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.ws-make .btn { min-height: 44px; font-size: 14px; }
.ws-mine-title { margin: 14px 0 2px; font: 400 22px var(--neon); color: #fff; text-transform: none; letter-spacing: 0.02em; }
.ws-empty { margin: 0; color: var(--mute); font-size: 14px; }
.ws-card-wrap { position: relative; }
.ws-card-wrap .card { padding-right: 52px; }
.ws-edit {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(46, 242, 255, 0.5); background: rgba(10, 8, 24, 0.8); box-shadow: 0 0 10px rgba(46, 242, 255, 0.25);
}
.ws-edit svg { width: 18px; height: 18px; fill: none; stroke: #dffcff; stroke-width: 2; stroke-linejoin: round; }

/* ---------- the gallery ---------- */
.ws-gallery { min-height: min(700px, calc(100% - 40px)); display: flex; flex-direction: column; }
.ws-gallery .actions { margin-top: auto; }
.ws-sub { margin: -4px 0 12px; text-align: center; color: var(--mute); font-size: 14px; }
.ws-sort { justify-content: center; margin-bottom: 10px; }
.ws-sort button { flex: 1; max-width: 160px; }
.ws-code { display: flex; gap: 8px; margin-bottom: 12px; }
.ws-code input, .ws-link input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(10, 8, 24, 0.7); color: var(--ink); font: 700 16px var(--ui); letter-spacing: 0.08em; outline: none;
  user-select: text; -webkit-user-select: text;
}
.ws-code input:focus, .ws-link input:focus { border-color: var(--cyan); }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ws-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 8px; border-radius: 16px; text-align: left;
  border: 1px solid var(--line); background: rgba(20, 16, 44, 0.6); min-width: 0;
}
.ws-tile canvas { width: 100%; aspect-ratio: 2 / 3; height: auto; border-radius: 10px; background: #070614; }
.ws-tile b { font: 400 17px/1.15 var(--neon); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.ws-tile small { color: var(--mute); font-size: 12px; font-weight: 600; }
.ws-tile.saved { border-color: rgba(120, 255, 170, 0.5); }
.ws-tile.saved small::after { content: ' · saved'; color: #78ffaa; }
.ws-note { grid-column: 1 / -1; margin: 18px 0; text-align: center; color: var(--mute); }
.ws-offline { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; text-align: center; color: var(--mute); }
.ws-offline svg { width: 44px; height: 44px; fill: none; stroke: var(--magenta); stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 61, 240, 0.6)); }
.ws-offline p { margin: 0; max-width: 300px; }

.ws-detail { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 14px; align-items: start; }
.ws-detail canvas { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 12px; background: #070614; box-shadow: 0 0 24px rgba(120, 80, 255, 0.25); }
.ws-detail h2 { text-align: left; margin-bottom: 6px; font-size: 28px; overflow-wrap: anywhere; }
.ws-detail .ws-sub { text-align: left; margin: 0 0 8px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-chips span { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(160, 170, 255, 0.35); font-size: 12px; font-weight: 600; color: #cfd6ff; }
.ws-codeish { font-weight: 700; color: var(--ink); letter-spacing: 0.06em; }
.ws-bad { color: #ff8a98; font-weight: 600; }
.btn:disabled { opacity: 0.45; }

/* ---------- sharing ---------- */
.ws-vis { display: grid; gap: 8px; }
.ws-vis button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(20, 16, 44, 0.6); text-align: left; }
.ws-vis b { font: 400 21px var(--neon); color: #fff; }
.ws-vis span { color: var(--mute); font-size: 14px; }
.ws-vis button[aria-checked='true'] { border-color: var(--magenta); box-shadow: 0 0 16px rgba(255, 61, 240, 0.35), inset 0 0 14px rgba(255, 61, 240, 0.1); }
.ws-vis + .ws-sub { margin: 10px 0 0; }
.ws-codebox { display: flex; flex-direction: column; align-items: center; margin: 4px 0 12px; }
.ws-codebox small { color: var(--mute); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }
.ws-codebox b { font: 400 40px/1.1 var(--neon); letter-spacing: 0.08em; color: #ffe9fd; text-shadow: 0 0 8px var(--magenta), 0 0 22px var(--magenta); }
.ws-link { display: flex; gap: 8px; }
.ws-link input { font-size: 13px; letter-spacing: 0; }
.ws-msg { min-height: 1.3em; margin: 10px 0 0; text-align: center; color: #ffd77a; font-weight: 600; }

@media (max-height: 700px) {
  .ws-pane { height: 140px; }
  .ws-tools button { min-height: 50px; }
  .ws-tools svg { width: 22px; height: 22px; }
}