/* DX Pro — live demo page (demo.html). Builds on site.css tokens.
   Finger-first: every control is at least 44 px; drag handles use touch-action: none. */

.demo-hero { padding: 56px 0 24px; }
.demo-note { font-size: .92rem; color: var(--faint); max-width: 760px; }
.hints { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.hints li { font: 500 .85rem/1.4 var(--sans); color: var(--dim); background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: 8px 14px; }
.hints b { color: var(--accent); font-weight: 600; }
#layout { padding-top: 40px; }

/* ── Mock application window ───────────────────────── */
.app {
  background: #03050a; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(57, 224, 200, .06);
}
.app-title {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #070b12;
  border-bottom: 1px solid var(--line); font: 700 .92rem var(--sans); color: var(--text);
}
.app-title .mark {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #1a7f9a); color: #021014; font: 800 .62rem var(--mono);
}
.app-title .sub { color: var(--faint); font-weight: 500; }
.app-title .win { margin-left: auto; color: var(--faint); letter-spacing: .6em; font-size: .8rem; }
.app-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #060a10; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.tab {
  min-height: var(--hit); min-width: 64px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line2);
  background: transparent; color: var(--dim); font: 600 .95rem var(--sans); cursor: pointer; touch-action: manipulation;
}
.tab[aria-selected="true"] { background: rgba(57, 224, 200, .12); color: var(--accent); border-color: var(--accent); }
.app-status {
  font: 500 .8rem/1.4 var(--mono); color: var(--dim); padding: 7px 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #05080d;
}
.app-status b { color: var(--accent); font-weight: 600; }
.app-status .tx { color: var(--hot); font-weight: 700; }

.dock {
  position: relative; margin: 8px; min-height: 440px; border-radius: 8px;
  background-color: #04070c;
  background-image: linear-gradient(to right, rgba(57, 224, 200, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(57, 224, 200, .045) 1px, transparent 1px);
}
.dock.editing {
  background-image: linear-gradient(to right, rgba(57, 224, 200, .14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(57, 224, 200, .14) 1px, transparent 1px);
}
.ghost { position: absolute; border: 2px dashed var(--accent); border-radius: 10px; background: rgba(57, 224, 200, .07); pointer-events: none; z-index: 1; }
.ghost[hidden] { display: none; }

.wdg {
  position: absolute; display: flex; flex-direction: column; overflow: hidden; z-index: 2;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease, box-shadow .15s;
}
.wdg.dragging, .wdg.sizing { transition: box-shadow .15s; z-index: 20; box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px var(--accent); }
.wdg.fresh { box-shadow: 0 0 0 2px var(--accent2); }
.wdg-bar {
  flex: 0 0 var(--hit); height: var(--hit); display: flex; align-items: center; gap: 6px; padding: 0 0 0 12px;
  background: linear-gradient(#152131, #101925); border-bottom: 1px solid var(--line);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.wdg.dragging .wdg-bar { cursor: grabbing; }
.wdg-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wdg-bar .ttl { flex: 1; min-width: 0; font: 700 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdg-bar .ttl::before { content: "⠿ "; color: var(--faint); }
.wdg-x {
  position: relative; overflow: hidden; flex: 0 0 var(--hit); width: var(--hit); height: var(--hit); border: 0; background: transparent;
  color: var(--faint); font-size: .8rem; cursor: pointer; touch-action: none; display: grid; place-items: center;
}
.wdg-x span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); }
.wdg-x::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--hot); }
.wdg-x.holding { color: var(--hot); }
.wdg-x.holding::after { width: 100%; transition: width .65s linear; }
.wdg-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 8px 18px; display: flex; flex-direction: column; gap: 8px; }
.wdg-body.flush { padding: 0; overflow: hidden; }
.wdg-grip {
  position: absolute; right: 0; bottom: 0; width: var(--hit); height: var(--hit); z-index: 3; touch-action: none; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 62%, rgba(57, 224, 200, .55) 62% 66%, transparent 66% 74%,
    rgba(57, 224, 200, .55) 74% 78%, transparent 78% 86%, rgba(57, 224, 200, .55) 86% 90%, transparent 90%);
}

/* Console keys */
.key {
  min-height: var(--hit); min-width: var(--hit); padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2);
  background: #0b1320; color: var(--text); font: 600 .86rem/1.1 var(--mono); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.key:focus-visible, .dg:focus-visible, .knob:focus-visible, .pad:focus-visible, .spot:focus-visible, .dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.key small { font-size: .66rem; color: var(--faint); font-weight: 500; }
.key.on { background: rgba(57, 224, 200, .16); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(57, 224, 200, .25) inset; }
.key.act { background: rgba(255, 181, 71, .16); border-color: var(--accent2); color: var(--accent2); }
.key.off { color: var(--faint); border-style: dashed; }
.key.hot { border-color: rgba(255, 93, 115, .6); color: #ff9aa9; }
.key.hot.on, .key.flash-tx { background: rgba(255, 93, 115, .25); border-color: var(--hot); color: #ffd0d7; box-shadow: 0 0 16px rgba(255, 93, 115, .5); }
.key.flash { background: rgba(57, 224, 200, .3); }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.keys.wide { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row .key { flex: 1 1 auto; }
.lbl { font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.big-f { font: 700 1.05rem var(--mono); color: var(--accent); text-align: center; }

/* Panadapter */
.pan { position: relative; flex: 1; min-height: 0; background: #03060c; touch-action: pan-y; cursor: crosshair; }
.pan canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pan-spots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pan-tag { position: absolute; transform: translateX(-50%); font: 600 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 4px;
  background: rgba(3, 6, 12, .78); border: 1px solid var(--line2); white-space: nowrap; color: var(--text); }
.pan-tag.CW { border-color: var(--blue); } .pan-tag.SSB { border-color: var(--accent2); }
.pan-tag.FT8, .pan-tag.FT4, .pan-tag.RTTY { border-color: var(--ok); }

/* VFO */
.vfo-digits { display: flex; align-items: stretch; justify-content: center; gap: 2px; }
.dg {
  position: relative; flex: 1 1 0; max-width: 50px; min-width: 0; height: 88px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: linear-gradient(#0a1420 50%, #08101a 50%); color: var(--accent); font: 700 clamp(1.5rem, 4.2vw, 2.6rem)/1 var(--mono);
  cursor: pointer; touch-action: manipulation; user-select: none; text-shadow: 0 0 14px rgba(57, 224, 200, .45);
}
.dg::before, .dg::after { position: absolute; left: 0; right: 0; font-size: .55rem; color: var(--faint); text-shadow: none; }
.dg::before { content: "▲"; top: 4px; } .dg::after { content: "▼"; bottom: 4px; }
.dg.lead { color: #1d3a44; text-shadow: none; }
.dg.bump { border-color: var(--accent); }
.vfo-dot { align-self: flex-end; padding-bottom: 14px; font: 700 1.6rem var(--mono); color: var(--accent); }
.vfo-sub { display: flex; justify-content: space-between; gap: 8px; font: 500 .8rem var(--mono); color: var(--dim); flex-wrap: wrap; }

/* Wheel */
.wheel { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-height: 0; }
.knob-wrap { flex: 1; min-height: 90px; width: 100%; display: grid; place-items: center; }
.knob {
  width: min(100%, 190px); aspect-ratio: 1; max-height: 100%; border-radius: 50%; touch-action: none; cursor: grab; position: relative;
  background: radial-gradient(circle at 50% 38%, #2a3a4e, #0d151f 62%, #070b11 100%);
  border: 2px solid var(--line2); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 6px #0a121c, 0 0 0 7px rgba(57, 224, 200, .25);
}
.knob::before { content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .05) 0 4deg, transparent 4deg 12deg); }
.knob i { position: absolute; left: 50%; top: 9%; width: 14%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, var(--accent), #127e70); box-shadow: 0 0 12px var(--accent); }

/* S-meter, SR traces */
.meter-cv, .sr-cv { width: 100%; flex: 1; min-height: 40px; background: #03060c; border-radius: 6px; max-width: none; }

/* Cluster */
.spots { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; }
.spot {
  display: grid; grid-template-columns: 74px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  min-height: var(--hit); padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: #0a111b; color: var(--text);
  font: 500 .8rem/1.25 var(--mono); cursor: pointer; touch-action: manipulation;
}
.spot b { font-weight: 700; }
.spot .c { grid-column: 1 / 3; color: var(--faint); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot .tm { color: var(--faint); font-size: .72rem; text-align: right; }
.spot.on { border-color: var(--accent2); background: rgba(255, 181, 71, .08); }
.spot.new { animation: spotIn .6s ease; }
@keyframes spotIn { from { background: rgba(57, 224, 200, .25); } }
.tag { font: 700 .66rem/1 var(--mono); padding: 3px 6px; border-radius: 4px; justify-self: end; }
.tag.CW { color: var(--blue); background: rgba(89, 168, 255, .12); }
.tag.SSB { color: var(--accent2); background: rgba(255, 181, 71, .12); }
.tag.FT8, .tag.FT4, .tag.RTTY { color: var(--ok); background: rgba(91, 227, 125, .12); }

/* Range sliders — 44 px tall touch strip */
input[type=range].slide { width: 100%; height: var(--hit); margin: 0; background: transparent; accent-color: var(--accent); touch-action: pan-y; cursor: pointer; }

/* Keyer */
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; min-height: 80px; }
.pad {
  border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(#152131, #0b131e); color: var(--text);
  font: 800 1.2rem var(--mono); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; min-height: 80px;
}
.pad.down { background: rgba(57, 224, 200, .22); border-color: var(--accent); color: var(--accent); }
.cw-out { font: 600 .95rem/1.3 var(--mono); color: var(--accent); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: clip; direction: rtl; text-align: left; }
.cw-led { width: 12px; height: 12px; border-radius: 50%; background: #1b2735; display: inline-block; vertical-align: middle; }
.cw-led.on { background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }

/* Clock */
.clock { flex: 1; display: grid; place-content: center; text-align: center; }
.clock b { font: 700 clamp(1.4rem, 3.6vw, 2.2rem)/1.1 var(--mono); color: var(--accent); }
.clock span { font: 500 .78rem var(--mono); color: var(--dim); }

/* Stream Deck */
.deck { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px; background: #000; border-radius: 10px; flex: 1; }
.deck .key { min-width: 0; padding: 0 2px; font-size: .7rem; border-radius: 10px; background: #111a26; aspect-ratio: auto; }

/* Long-press tip */
.tip {
  position: fixed; z-index: 300; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: #0f1b29;
  border: 1px solid var(--accent); color: var(--text); font: 500 .9rem/1.4 var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; left: 0; top: 0;
}
.tip.show { opacity: 1; transform: none; }

/* Palette sheet */
.sheet-back { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .62); display: grid; place-items: center; padding: 16px; }
.sheet-back[hidden] { display: none; }
.sheet { width: min(560px, 100%); max-height: min(82vh, 760px); display: flex; flex-direction: column; background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; flex: 1; }
.pal-list { overflow-y: auto; padding: 10px; display: grid; gap: 8px; }
.pal-item {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; text-align: left; min-height: 60px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; touch-action: manipulation; font: inherit;
}
.pal-item:focus-visible { outline: 2px solid var(--accent); }
.pal-item .ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(57, 224, 200, .1); color: var(--accent); font: 700 1.1rem var(--mono); }
.pal-item b { display: block; }
.pal-item span.d { font-size: .86rem; color: var(--dim); }

/* ── FT8 / FT4 station ─────────────────────────────── */
.ft { margin-top: 24px; }
.ft-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #060a10; }
.seg { display: inline-flex; gap: 4px; }
.ft-dial { font: 600 .9rem var(--mono); color: var(--dim); margin-left: auto; }
.ft-utc { font: 700 1.05rem var(--mono); color: var(--accent); min-width: 6.5em; text-align: right; }
.ft-cycle { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ft-cycle-bar { flex: 1; height: 14px; border-radius: 7px; background: #0b1320; border: 1px solid var(--line); overflow: hidden; }
.ft-cycle-bar i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 7px; }
.ft-cycle-bar.tx i { background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.ft-slot { font: 600 .82rem var(--mono); color: var(--dim); min-width: 11em; text-align: right; }
.ft-slot.tx { color: #ff9aa9; }
.ft-wf { padding: 8px; border-bottom: 1px solid var(--line); }
.ft-wf canvas { width: 100%; height: 170px; border-radius: 6px; max-width: none; cursor: crosshair; touch-action: manipulation; }
.ft-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; }
.ft-pane { padding: 10px; min-width: 0; }
.ft-pane + .ft-pane { border-left: 1px solid var(--line); }
.ft-pane h3 { font: 700 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 4px 0 8px; }
.dl-head, .dl { display: grid; grid-template-columns: 4.6em 2.6em 2.8em 3.6em 1fr; gap: 6px; align-items: center; font: 500 .8rem/1.2 var(--mono); }
.dl-head { color: var(--faint); padding: 0 8px 6px; font-size: .7rem; }
.dlist { height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: #03060c; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.dlist.short { height: 190px; }
.dl { width: 100%; min-height: var(--hit); padding: 4px 8px; text-align: left; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #cfd9e5; cursor: pointer; touch-action: manipulation; }
.dl span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl.cq { background: rgba(91, 227, 125, .09); color: #9cf0b2; }
.dl.me { background: rgba(255, 93, 115, .16); color: #ffb3bf; }
.dl.dx { border-color: rgba(255, 181, 71, .55); }
.dl.tx { background: rgba(255, 181, 71, .12); color: #ffd79c; cursor: default; }
.dl-sep { font: 500 .7rem var(--mono); color: var(--faint); text-align: center; padding: 3px 0; border-top: 1px dashed var(--line); margin-top: 2px; }
.dl-empty { color: var(--faint); font: 500 .85rem var(--sans); padding: 14px; text-align: center; }
.ft-st { margin-top: 12px; display: grid; gap: 10px; }
.ft-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ft-who div { background: #0a111b; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.ft-who b { display: block; font: 700 .92rem var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-who .me b { color: var(--accent); }
.ft-txs { display: grid; gap: 4px; }
.ft-txs .key { flex-direction: row; justify-content: flex-start; gap: 10px; width: 100%; font-size: .82rem; text-align: left; }
.ft-txs .key small { font-size: .7rem; min-width: 2.4em; color: var(--faint); }
.ft-txs .key.next { border-color: var(--accent2); background: rgba(255, 181, 71, .1); color: #ffd79c; }
.ft-txs .key.sending { border-color: var(--hot); background: rgba(255, 93, 115, .2); color: #ffd0d7; }
.ft-ctl { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.ft-ctl .key { font-size: .84rem; }
.ft-status { padding: 10px 14px; border-top: 1px solid var(--line); font: 500 .9rem/1.4 var(--sans); color: var(--dim); min-height: 44px; background: #05080d; }
.ft-status.warn { color: var(--accent2); }
.ft-status.good { color: var(--ok); }
.ft-log { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 18px; }
.ft-log > *, .ft-main > * { min-width: 0; }
.ft-log h3 { font-size: 1rem; }
.ft-log table { min-width: 560px; }
.ft-log td, .ft-log th { padding: 9px 10px; font-family: var(--mono); font-size: .8rem; }
textarea.adif { width: 100%; height: 220px; resize: vertical; background: #03060c; color: #bfeee4; border: 1px solid var(--line2);
  border-radius: 10px; padding: 10px; font: 500 .76rem/1.45 var(--mono); }

@media (max-width: 900px) {
  .ft-main, .ft-log { grid-template-columns: 1fr; }
  .ft-pane + .ft-pane { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .dl-head, .dl { grid-template-columns: 2.4em 3.2em 1fr; font-size: .76rem; }
  .dl-head span:nth-child(1), .dl span:nth-child(1), .dl-head span:nth-child(3), .dl span:nth-child(3) { display: none; }
  .ft-who { grid-template-columns: 1fr 1fr; }
  .ft-dial { margin-left: 0; }
  .app-title .sub { display: none; }
  .dock { margin: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .wdg { transition: none; }
}