/* The ship panel, everywhere it is mounted.
 *
 * index.html shows it in an overlay; coin.html shows the same markup as a
 * standalone page for one contract address. Both link this file, next to the
 * markup they both mount from ship-panel.js, so there is ONE copy of what the
 * panel looks like rather than two that drift.
 *
 * Nothing here is new. Every rule was moved out of index.html's inline <style>
 * — moved, not copied — so the app page is styled by this file too and a change
 * here cannot be true on one page and false on the other.
 *
 * Three sections, in cascade order:
 *
 *   1. THE TOKENS. A panel drawn in a different palette is not the same panel.
 *      coin.html carried its own near-copy of index.html's :root and two values
 *      had already drifted (--gold was #f2c46b there against #e8b33d here, and
 *      --bg-card-2 #12173a against #1c2250), which would have shown up as a
 *      differently-coloured multiplier and a differently-shaded amount box.
 *      One copy, here.
 *
 *   2. THE PRIMITIVES THE PANEL SHARES WITH THE BOARD. .btn, .badge, .tick,
 *      .pair, .coin-ava, .mono, <code>. The board uses them too, which is why
 *      they live in a file the board's page also links rather than being
 *      duplicated under a .sheet prefix.
 *
 *   3. THE PANEL ITSELF. .ovl, .sheet, .statrow, .stat, .panes, .pane, .tabs,
 *      .amt, .kv, .curvebox, and the chain layer's .chainfacts and .txout.
 *
 * The board (.grid, .card, .feat, .statstrip, .lb) and the launch wizard (#wiz)
 * stay in index.html: they are that page's, not the panel's.
 *
 * Load order matters on coin.html: this file comes AFTER mutiny.css, whose own
 * :root, .btn and <code> it deliberately overrides for the panel's sake.
 */

/* ───────── 1. tokens ───────── */
:root {
  --bg:        #0e1231;
  --bg-card:   #161b40;
  --bg-card-2: #1c2250;
  --bg-inset:  #0a0d26;
  --ink:       #f4efe2;
  --ink-2:     #a8aed4;
  --ink-3:     #6b719c;
  --accent:    #e0a33e;
  --accent-2:  #f2c46b;
  --sea:       #69aac1;
  --line:      rgba(168, 174, 212, 0.12);
  --line-2:    rgba(168, 174, 212, 0.22);
  --wood-1:    #7a4a25;
  --wood-2:    #5e371b;
  --wood-3:    #3c2210;
  --good:      #2fd67b;
  --bad:       #ff5f7a;
  --gold:      #e8b33d;
  --r: 8px;
}

/* ───────── 2. shared primitives ───────── */
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #f2c46b 0%, #e0a33e 55%, #c88a28 100%);
  color: #2a1706; font-weight: 700;
  border: 0; border-radius: var(--r); padding: 9px 16px; font-size: 14px;
  box-shadow: 0 2px 0 #7a4a25, 0 4px 10px rgba(0,0,0,0.4);
}
.btn:hover { background: linear-gradient(180deg, #f7d284 0%, #eab254 55%, #d29532 100%); }
.btn.ghost {
  background: var(--bg-card); color: var(--ink); border: 1px solid var(--line-2); font-weight: 600;
}
.btn.ghost:hover { border-color: var(--accent); }
.btn.small { padding: 8px 14px; font-size: 13.5px; }
.btn.big { padding: 13px 22px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; }

.coin-ava {
  width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; font-size: 22px;
  background: var(--bg-inset); border: 1px solid var(--line-2);
}
.coin-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tick { color: var(--sea); font-weight: 700; }
.pair { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.pair .pico {
  width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; background: #b8323e; color: #fff; flex: none;
}
.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--ink-2);
  border-radius: 999px; padding: 2.5px 9px;
}
.badge.gold { color: var(--gold); border-color: rgba(232,179,61,.4); }

/* Written for a reader who has to be able to check the claim: every address is
   printed in full and wraps rather than truncating, because a half signature is
   worse than none. */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  overflow-wrap:anywhere;word-break:break-word}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  overflow-wrap:anywhere;word-break:break-word;color:var(--ink);
  background:none;border:0;padding:0}

/* ───────── 3. the panel ───────── */
.ovl {
  position: fixed; inset: 0; background: rgba(4,9,11,0.72); backdrop-filter: blur(3px);
  display: none; z-index: 50; overflow-y: auto; padding: 40px 20px;
}
.ovl.open { display: block; }
.sheet {
  max-width: 980px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 18px;
  padding: 28px;
}
.sheet .head { display: flex; align-items: center; gap: 14px; }
.sheet .head .coin-ava { width: 54px; height: 54px; font-size: 27px; }
.sheet .head h2 { font-size: 24px; }
.sheet .close {
  margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--ink-2);
  width: 38px; height: 38px; border-radius: var(--r); font-size: 16px;
}
.sheet .close:hover { color: var(--ink); border-color: var(--accent); }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 0; }
.stat { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat .k { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat .v { font-size: 22px; font-weight: 800; margin-top: 3px; letter-spacing: -0.01em; }
.stat .v.gold { color: var(--gold); }
.stat .v.pos { color: var(--good); }

.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pane { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.pane h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; }
.pane .hint { color: var(--ink-3); font-size: 13px; margin: 0 0 14px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button {
  flex: 1; background: none; border: 1px solid var(--line-2); color: var(--ink-2);
  border-radius: var(--r); padding: 9px 0; font-weight: 700; font-size: 14px;
}
.tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #2a1706; }
.amt {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 10px;
}
.amt input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink);
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.amt .unit { color: var(--ink-3); font-weight: 600; font-size: 13.5px; }
.amt .max { background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 12.5px; padding: 4px; }
.kv { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); padding: 5px 2px; }
.kv b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kv .gold { color: var(--gold); }
.pane .btn { width: 100%; justify-content: center; margin-top: 12px; }
.pane select {
  width: 100%; background: var(--bg-card-2); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: var(--r); padding: 11px 12px; font-size: 14.5px; font-weight: 600;
}
.divide { border-top: 1px solid var(--line); margin: 16px 0; }
.curvebox { margin-top: 22px; }
.curvebox figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.curvebox b { color: var(--ink); }
svg { display: block; width: 100%; height: auto; overflow: visible; }
.tickt { fill: var(--ink-3); font-size: 10.5px; font-family: Sora, sans-serif; }
.curvelab { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: Sora, sans-serif; }

/* what the chain says about the open mutiny */
.chainfacts{margin:16px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-inset);font-size:13px;line-height:1.55;
  color:var(--ink-2)}
.chainfacts.off{border-style:dashed}
.chainfacts.on{border-color:rgba(47,214,123,.28)}
.chainfacts p{margin:8px 0 0}
.cfhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;color:var(--ink);
  font-size:13px;margin:0 0 8px}
.cfhead:not(:first-child){margin-top:16px}
.cfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px 18px}
.cfkv{display:flex;justify-content:space-between;gap:12px;min-width:0;
  padding:5px 0;border-bottom:1px dashed var(--line)}
.cfkv span{color:var(--ink-3);white-space:nowrap}
.cfkv b{text-align:right;min-width:0;color:var(--ink);font-weight:600}
.cfrisk{margin-top:14px}
.badge.risk{background:rgba(255,95,122,.14);border-color:rgba(255,95,122,.40);color:#ffb3c1}
.badge.good{background:rgba(47,214,123,.13);border-color:rgba(47,214,123,.36);color:#8ff0bd}

.riskrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-bottom:1px dashed var(--line);line-height:1.5}
.riskrow:last-child{border-bottom:0}
.riskrow b{color:var(--ink)}
.riskrow.ack{cursor:pointer}
.riskrow input{margin:3px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.riskdot{flex:0 0 auto;width:8px;height:8px;margin:6px 0 0;border-radius:50%;
  background:var(--bad)}
.riskrow.none{color:var(--good);border-bottom:0}

/* what the last transaction did */
.txout{margin:14px 0 0;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-inset);font-size:13px;line-height:1.55;color:var(--ink-2)}
.txout.ok{border-color:rgba(47,214,123,.34)}
.txout.bad{border-color:rgba(255,95,122,.38)}
.txout.pending{border-color:rgba(105,170,193,.34)}
.txout.off,.txout.muted{border-style:dashed}
.txhead{font-weight:700;color:var(--ink);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.txout.ok .txhead{color:var(--good)}
.txout.bad .txhead{color:var(--bad)}
.txnote{margin:6px 0 0}
.txnote a{color:var(--sea)}
.txkv{display:flex;justify-content:space-between;gap:12px;min-width:0;padding:5px 0;
  border-bottom:1px dashed var(--line)}
.txkv span{color:var(--ink-3);white-space:nowrap}
.txkv b{text-align:right;min-width:0;color:var(--ink);font-weight:600}
.txlogs{margin-top:10px}
.txlogs summary{cursor:pointer;color:var(--sea)}
.txlogs pre{margin:8px 0 0;padding:10px;max-height:260px;overflow:auto;
  background:#070a1d;border:1px solid var(--line);border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.spin{width:12px;height:12px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(105,170,193,.3);border-top-color:var(--sea);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ───────── narrow screens ─────────
   The two breakpoints below are slices of index.html's, kept at their original
   widths and in their original order relative to the rules above. */
@media (max-width: 860px) { .panes { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ovl { padding: 20px 12px; }
  .sheet { padding: 20px 16px; }
}