/* Loxley Phase 3 — light design tokens / layout shell.
   Served as /web/shell.css on :4664. Progressive; does not replace Orb visual language. */
:root {
  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* typography */
  --fs-xs: 11px; /* was 9.5 — layout readability */
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --tracking-lbl: .18em;
  /* panels */
  --panel-bg: #000000;
  --panel-elev: #0C0E12;
  --panel-border: #2F3336;
  --panel-radius: 12px;
  --panel-pad: var(--sp-3);
  /* focus */
  --focus-ring: #CCFF00;
  --focus-glow: 0 0 0 1px #CCFF00, 0 0 0 3px rgba(204, 255, 0, .22);
  /* radar UX */
  --radar-loading: var(--dim, #8B98A5);
  --radar-error: var(--bad, #FF5000);
  --radar-empty: var(--faint, #71767B);
  --radar-stale: var(--warn, #F5A623);
}

/* focus rings — keyboard / form controls */
.shell-focusable:focus-visible,
.netbtn:focus-visible,
.padchip:focus-visible,
.walletbar .btn:focus-visible,
.search:focus-within,
.token-detail a:focus-visible,
.landing .enter:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
}

/* panel primitive */
.shell-panel {
  background: var(--panel-elev);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
}

/* ---------- Token Detail panel ---------- */
.token-detail {
  display: none;
  margin: 0 14px 8px;
  padding: 10px 14px;
  background: var(--panel-elev);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  font-family: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink, #E7E9EA);
}
.token-detail.is-open,
.token-detail[data-open="1"] {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
}
.token-detail .td-title {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  border-bottom: 1px solid var(--line2, #22262A);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.token-detail .td-sym {
  font-family: var(--sans, "DM Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: #CCFF00;
  letter-spacing: -.02em;
}
.token-detail .td-name { color: var(--dim, #8B98A5); font-size: var(--fs-sm); }
.token-detail .td-life {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-lbl);
  text-transform: uppercase;
  color: var(--accent, #CCFF00);
  border: 1px solid rgba(204, 255, 0, .35);
  border-radius: 999px;
  padding: 2px 8px;
}
.token-detail dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
}
.token-detail dt {
  color: var(--faint, #71767B);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.token-detail dd {
  margin: 0;
  color: var(--ink, #E7E9EA);
  word-break: break-all;
}
.token-detail dd a { color: #CCFF00; text-decoration: none; }
.token-detail dd a:hover { text-decoration: underline; }
.token-detail .td-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: var(--fs-xs);
  color: var(--faint, #71767B);
  border-top: 1px solid var(--line2, #22262A);
  padding-top: 6px;
}
.token-detail .td-meta b { color: var(--dim, #8B98A5); font-weight: 500; }
.token-detail .td-na { color: var(--faint, #71767B); font-style: italic; }

/* ---------- Radar UX states ---------- */
.radar-state {
  display: none;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 1.45;
  border: 1px dashed var(--line, #2F3336);
  color: var(--dim, #8B98A5);
}
.radar-state[data-show="1"] { display: block; }
.radar-state[data-kind="loading"] { color: var(--radar-loading); border-style: solid; border-color: rgba(139, 152, 165, .35); }
.radar-state[data-kind="error"] { color: var(--radar-error); border-color: rgba(255, 80, 0, .4); }
.radar-state[data-kind="empty"] { color: var(--radar-empty); }
.radar-state[data-kind="stale"] { color: var(--radar-stale); border-color: rgba(245, 166, 35, .4); }
#cardRadar[data-radar-state="loading"] #radarTag,
#cardRadar[data-radar-state="error"] #radarTag,
#cardRadar[data-radar-state="empty"] #radarTag,
#cardRadar[data-radar-state="stale"] #radarTag {
  letter-spacing: .12em;
}
.padrow .padchip {
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.padrow .padchip.on {
  box-shadow: inset 0 0 0 1px rgba(204, 255, 0, .35);
}

/* ---------- Council confidence / N/A ---------- */
.council-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin: 4px 0 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: var(--faint, #71767B);
  letter-spacing: .06em;
}
.council-meta .conf-hint b { color: var(--dim, #8B98A5); font-weight: 600; }
.council-meta .conf-hint[data-level="high"] b { color: var(--good, #00C805); }
.council-meta .conf-hint[data-level="mid"] b { color: var(--warn, #F5A623); }
.council-meta .conf-hint[data-level="low"] b { color: var(--bad, #FF5000); }
.council-meta .conf-hint[data-level="na"] b { color: var(--faint, #71767B); }
.roster .verd.na {
  opacity: .92;
  max-width: 9.5em;
  white-space: normal;
  line-height: 1.25;
  text-align: right;
}

/* ---------- Landing polish ---------- */
.landing .strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 520px;
}
.landing .chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, #2F3336);
  color: var(--dim, #8B98A5);
  background: #0A0D12;
}
.landing .chip b { color: #CCFF00; font-weight: 700; }
.landing .enter { /* keep CTA prominent */
  min-width: 160px;
  text-align: center;
}

/* ---------- Mobile-ish breakpoints (375 / 390 / 430) without full redesign ---------- */
@media (max-width: 430px) {
  .token-detail.is-open,
  .token-detail[data-open="1"] {
    grid-template-columns: 1fr;
    margin: 0 8px 6px;
    padding: 8px 10px;
  }
  .landing .brand { font-size: 32px; }
  .landing .tag { font-size: 10px; max-width: 320px; }
  .walletbar { max-width: 160px; }
  .netbar .netbtn, .padrow .padchip { font-size: 9px; padding: 5px 7px; }
}
@media (max-width: 390px) {
  .landing .brand { font-size: 28px; }
  .token-detail .td-sym { font-size: 14px; }
}
@media (max-width: 375px) {
  .landing { padding: 20px 14px; gap: 14px; }
  .landing .enter { padding: 10px 22px; font-size: 13px; }
}

/* ---------- Trade Preview panel ---------- */
.trade-preview {
  display: none;
  margin: 0 14px 8px;
  padding: 12px 14px;
  background: var(--panel-elev);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  font-family: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink, #E7E9EA);
}
.trade-preview.is-open,
.trade-preview[data-open="1"] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}
.trade-preview .tp-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
}
.trade-preview .tp-title {
  font-size: var(--fs-md);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #CCFF00;
}
.trade-preview .tp-status {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim, #8B98A5);
  border: 1px solid var(--panel-border);
  padding: 3px 8px;
  border-radius: 999px;
}
.trade-preview .tp-status[data-mode="error"] { color: var(--bad, #FF5000); border-color: var(--bad, #FF5000); }
.trade-preview .tp-status[data-mode="paper"],
.trade-preview .tp-status[data-mode="preview"] { color: #CCFF00; border-color: rgba(204,255,0,.35); }
.trade-preview .tp-status[data-mode="awaiting_wallet"] { color: var(--warn, #F5A623); }
.trade-preview dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
}
.trade-preview dt { color: var(--faint, #71767B); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.trade-preview dd { margin: 0; word-break: break-all; }
.trade-preview .tp-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trade-preview .tp-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.trade-preview .tp-form input,
.trade-preview .tp-form select {
  background: #000;
  border: 1px solid var(--panel-border);
  color: var(--ink, #E7E9EA);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
}
.trade-preview .tp-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.trade-preview .tp-arm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--warn, #F5A623);
}
.trade-preview .tp-arm input:disabled + span,
.trade-preview .tp-arm:has(input:disabled) {
  opacity: .65;
}
.trade-preview .tp-risk {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--warn, #F5A623);
  line-height: 1.4;
}
.trade-preview .tp-live-reason {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--bad, #FF5000);
}
.trade-preview .tp-error {
  grid-column: 1 / -1;
  color: var(--bad, #FF5000);
  font-size: 11px;
}
.trade-preview .btn {
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--panel-border);
  background: #0A0D12;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
}
.trade-preview .btn.primary {
  border-color: #CCFF00;
  color: #CCFF00;
}
.trade-preview .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.walletbar .btn.trade-open {
  border-color: rgba(204, 255, 0, .45);
  color: #CCFF00;
}
@media (max-width: 430px) {
  .trade-preview.is-open,
  .trade-preview[data-open="1"] {
    grid-template-columns: 1fr;
    margin: 0 8px 6px;
  }
}

/* ---------- Locale toggle ---------- */
.lang-toggle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #0A0D12;
  color: var(--dim, #8B98A5);
  cursor: pointer;
  min-height: 32px;
}
.lang-toggle:hover { color: #CCFF00; border-color: rgba(204, 255, 0, .45); }
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.landing .lang-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border-color: var(--panel-border);
  color: #CCFF00;
}

/* ---------- Mobile layout 375 / 390 / 430 ---------- */
@media (max-width: 430px) {
  /* stack product panels */
  .token-detail.is-open,
  .token-detail[data-open="1"],
  .trade-preview.is-open,
  .trade-preview[data-open="1"] {
    grid-template-columns: 1fr;
    margin: 0 8px 6px;
    padding: 10px 12px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* wallet bar wraps + readable */
  .walletbar {
    max-width: 100% !important;
    width: 100%;
    align-items: stretch;
  }
  .walletbar .wrow {
    justify-content: flex-start;
    gap: 8px;
  }
  .walletbar .wmeta,
  .walletbar .wmsg {
    max-width: 100%;
    text-align: left;
  }

  /* touch targets ≥44px where feasible */
  .walletbar .btn,
  .trade-preview .btn,
  .lang-toggle,
  .netbar .netbtn,
  .padrow .padchip,
  .landing .enter {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
    font-size: 11px;
  }
  .trade-preview .tp-form input,
  .trade-preview .tp-form select {
    min-height: 44px;
    font-size: 14px;
  }
  .trade-preview .tp-arm {
    min-height: 44px;
    align-items: center;
  }
  .trade-preview .tp-arm input {
    width: 20px;
    height: 20px;
  }

  /* radar readable on narrow */
  .radar-state {
    font-size: 11px;
    line-height: 1.5;
    padding: 10px 12px;
  }
  #cardRadar .ch .t { font-size: 11px; }
  #rlist { font-size: 11px; }

  /* collapse dense desktop-only chrome (desk.test uses 1080 — unaffected) */
  .topstats[data-desk-dense="1"] .tstat.aux,
  .topstats[data-desk-dense="1"] #tSpark,
  .topstats[data-desk-dense="1"] .tstat.px canvas {
    display: none !important;
  }
  .topstats {
    flex-wrap: wrap;
    gap: 6px;
  }
  .topstats .tstat { min-width: 0; }
  .desk .top {
    flex-wrap: wrap;
    gap: 8px;
  }
  .searchwrap { width: 100%; order: 5; }
  .walletbar { order: 4; }
  .netbar { width: 100%; order: 3; }

  /* hide secondary desktop chrome */
  .desk .aurora { opacity: .35; pointer-events: none; }
  .logo canvas { width: 48px; height: 48px; }
  .logo .sub { font-size: 9px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 390px) {
  .landing .brand { font-size: 28px; }
  .token-detail .td-sym { font-size: 14px; }
  .trade-preview .tp-title { font-size: 12px; }
  .topstats .btn#sndBtn,
  .topstats .btn.con-btn {
    /* keep reachable but compact row */
    min-height: 44px;
  }
  /* stack net + pad chips with wrap already; tighten */
  .netbar .netbtn, .padrow .padchip {
    font-size: 10px;
  }
}

@media (max-width: 375px) {
  .landing { padding: 20px 14px; gap: 14px; }
  .landing .enter { padding: 12px 22px; font-size: 13px; }
  .landing .tag { font-size: 10px; max-width: 300px; }
  .token-detail.is-open,
  .token-detail[data-open="1"],
  .trade-preview.is-open,
  .trade-preview[data-open="1"] {
    margin: 0 4px 6px;
    max-height: min(48vh, 380px);
  }
  .walletbar .btn { padding: 10px 10px; }
}

/* Prefer reduced motion for locale / panel transitions if any */
@media (prefers-reduced-motion: reduce) {
  .padrow .padchip { transition: none; }
}

/* ---------- Desk layout docking overrides (desk-layout.css companion) ---------- */
@media (min-width: 1100px) {
  .col-right .token-detail,
  .col-right .trade-preview {
    margin: 0 !important;
    max-height: none;
  }
  .col-right .token-detail.is-open,
  .col-right .token-detail[data-open="1"],
  .col-right .trade-preview.is-open,
  .col-right .trade-preview[data-open="1"] {
    grid-template-columns: 1fr !important;
  }
  .council-meta { font-size: 11px; }
}


/* Mobile trade labels: flex-column was stacking every text node */
@media (max-width: 767px) {
  .trade-preview .tp-form label {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 2px 6px;
    letter-spacing: 0.04em;
  }
  .trade-preview .tp-form label > input,
  .trade-preview .tp-form label > select {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
  }
}