/* ============================================================
   THEME TOKENS
   Each palette only overrides the base colours; the soft / ring
   variants derive from them with color-mix so every highlight
   follows the palette automatically.
   ============================================================ */
:root{
  --bg:#0e1116; --bg2:#151a22; --bg3:#1c232e; --bg4:#222b38; --line:#26303d;
  --tx:#e6edf5; --mut:#8d9bb0; --ghost:#4a586b;
  --acc:#4da3ff; --acc2:#7cf0c0; --on-acc:#04121f;
  --warn:#ffcf6b; --err:#ff7b7b;
  --shadow:rgba(0,0,0,.62);
  --rad:12px;

  /* text scale - driven by the Text size control */
  --scale:1;
  --fs-base:calc(15px * var(--scale));
  --fs-input:calc(17px * var(--scale));

  /* one height shared by every header control so they line up */
  --ctl-h:calc(20px + 15px * var(--scale));
  /* one height shared by the three fields and the swap button */
  --field-h:calc(var(--fs-input) * 1.5 + 28px);

  --acc-soft:color-mix(in srgb, var(--acc) 12%, transparent);
  --acc2-soft:color-mix(in srgb, var(--acc2) 12%, transparent);
  --acc-ring:color-mix(in srgb, var(--acc) 22%, transparent);
  --acc2-ring:color-mix(in srgb, var(--acc2) 26%, transparent);
  --acc-glow:color-mix(in srgb, var(--acc) 30%, transparent);
  --warn-soft:color-mix(in srgb, var(--warn) 10%, transparent);
  --warn-line:color-mix(in srgb, var(--warn) 28%, transparent);
  --row-line:color-mix(in srgb, var(--line) 70%, transparent);
}
html[data-theme="ocean"]{
  --bg:#0b1220; --bg2:#111c2e; --bg3:#17253a; --bg4:#1e2f48; --line:#25374f;
  --tx:#e4eefb; --mut:#8ba2be; --ghost:#4b6280;
  --acc:#38bdf8; --acc2:#5eead4; --on-acc:#04141c;
}
html[data-theme="emerald"]{
  --bg:#0a1410; --bg2:#111f19; --bg3:#172a21; --bg4:#1f372b; --line:#26402f;
  --tx:#e6f5ec; --mut:#8db0a0; --ghost:#4d6e5e;
  --acc:#34d399; --acc2:#a7f3d0; --on-acc:#04150f;
}
html[data-theme="violet"]{
  --bg:#110d1a; --bg2:#1a1426; --bg3:#231b33; --bg4:#2d2342; --line:#382a4f;
  --tx:#efe9fb; --mut:#a595c0; --ghost:#6a5a85;
  --acc:#a78bfa; --acc2:#f0abfc; --on-acc:#130a22;
}
html[data-theme="amber"]{
  --bg:#14100a; --bg2:#1e1811; --bg3:#292017; --bg4:#352a1e; --line:#423523;
  --tx:#f6eee0; --mut:#b5a284; --ghost:#75654a;
  --acc:#f59e0b; --acc2:#fcd34d; --on-acc:#1a1204;
  --warn:#fca5a5;
}
html[data-theme="rose"]{
  --bg:#160d12; --bg2:#20141b; --bg3:#2b1c25; --bg4:#382531; --line:#452e3b;
  --tx:#f9e9f0; --mut:#bf94a6; --ghost:#7d5566;
  --acc:#fb7185; --acc2:#fda4af; --on-acc:#1c0710;
}
html[data-theme="graphite"]{
  --bg:#101214; --bg2:#181b1f; --bg3:#20242a; --bg4:#2a2f36; --line:#333941;
  --tx:#e8ebee; --mut:#98a1ab; --ghost:#5b636d;
  --acc:#c9d1d9; --acc2:#8fb8d8; --on-acc:#0d0f11;
}
html[data-theme="daylight"]{
  --bg:#f4f6fa; --bg2:#ffffff; --bg3:#eef1f6; --bg4:#e3e8f0; --line:#d3dae4;
  --tx:#152233; --mut:#5d6b7f; --ghost:#a6b1c0;
  --acc:#1f6feb; --acc2:#0d8f6f; --on-acc:#ffffff;
  --warn:#a86800; --err:#c1392b;
  --shadow:rgba(21,34,51,.18);
}
html[data-theme="parchment"]{
  --bg:#f7f3ea; --bg2:#fffdf8; --bg3:#f1ebdd; --bg4:#e8e0cd; --line:#ddd3bf;
  --tx:#2a2418; --mut:#6d6353; --ghost:#aba18c;
  --acc:#b45309; --acc2:#15803d; --on-acc:#fffdf8;
  --warn:#92610a; --err:#b3261e;
  --shadow:rgba(60,50,30,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--tx);
  font:var(--fs-base)/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{
  max-width:1080px;margin:0 auto;
  padding:26px max(20px, env(safe-area-inset-right)) 70px max(20px, env(safe-area-inset-left));
}

/* ---------- header ---------- */
header{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.mark{width:calc(52px * var(--scale));height:calc(52px * var(--scale));
  flex:0 0 calc(52px * var(--scale));border-radius:14px;
  background:linear-gradient(140deg,var(--acc) 0%,var(--acc2) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(27px * var(--scale));font-weight:800;color:var(--on-acc);letter-spacing:-1px;
  box-shadow:0 6px 20px var(--acc-glow)}
h1{font-size:calc(38px * var(--scale));margin:0;letter-spacing:-1.2px;font-weight:750;line-height:1.05}
h1 span{color:var(--acc)}
.tagline{color:var(--mut);font-size:calc(14px * var(--scale));margin-top:4px}
.spacer{flex:1}
.opts{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.opt{display:flex;flex-direction:column;gap:5px;min-width:0}

/* one row: label text + info button, kept together so the icon always sits
   right after the words regardless of label width */
.labrow{display:flex;align-items:center;gap:5px;min-width:0}
.labrow>label,.labrow>.llab{
  font-size:calc(10px * var(--scale));color:var(--mut);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.4;
  white-space:nowrap;
}

/* ---------- info icon + tooltip ---------- */
.info{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:0 0 15px;
  border:1px solid var(--ghost);border-radius:50%;
  background:none;padding:0;margin:0;
  color:var(--mut);
  font-family:ui-serif,Georgia,"Times New Roman",serif;
  font-style:normal;
  font-weight:700;
  font-size:8px;
  line-height:1;
  cursor:help;
  position:relative;
  transition:border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.info:hover,.info:focus-visible{outline:none;border-color:var(--acc);color:var(--acc)}
.info::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 9px);
  left:-4px;
  transform:translateY(-3px);
  background:var(--bg3);
  color:var(--tx);
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px 12px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:calc(12px * var(--scale));
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
  white-space:normal;
  width:max-content;
  max-width:260px;
  box-shadow:0 14px 40px var(--shadow);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:90;
  pointer-events:none;
}
.info:hover::after,.info:focus-visible::after{opacity:1;visibility:visible;transform:translateY(0)}
/* rightmost two columns grow leftwards so the bubble never runs off screen */
.opt:nth-last-child(-n+2) .info::after{left:auto;right:-4px}

/* segmented control - height matched to the selects */
.seg{display:flex;height:var(--ctl-h);background:var(--bg2);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.segbtn{background:none;border:0;color:var(--mut);padding:0 12px;font:inherit;
  font-size:calc(13px * var(--scale));cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.segbtn.active{background:var(--acc);color:var(--on-acc);font-weight:600}
.segbtn.on{background:var(--acc2);color:var(--on-acc);font-weight:600}

/* native select restyled so its label sits dead centre on every browser */
.selwrap{position:relative;display:block}
.selwrap::after{content:"";position:absolute;right:11px;top:50%;margin-top:-2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--mut);pointer-events:none}
select{
  width:100%;height:var(--ctl-h);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--bg2);color:var(--tx);border:1px solid var(--line);border-radius:9px;
  padding:0 28px 0 11px;margin:0;
  font:inherit;font-size:calc(13px * var(--scale));line-height:normal;
}
select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring)}
select option{background:var(--bg2);color:var(--tx)}

/* ---------- converter row ---------- */
.conv{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);padding:16px;margin-bottom:14px}
.fields{display:grid;
  grid-template-columns:minmax(110px,150px) minmax(0,1fr) 72px minmax(0,1fr);
  gap:10px;align-items:end}
.field{position:relative;min-width:0}
.flab{display:block;font-size:calc(11px * var(--scale));color:var(--mut);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;line-height:1.5}
.finput{width:100%;height:var(--field-h);background:var(--bg3);border:1px solid var(--line);
  border-radius:10px;color:var(--tx);font:inherit;font-size:var(--fs-input);padding:0 14px}
.finput:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring);background:var(--bg4)}
.finput::placeholder{color:var(--ghost)}
.finput.locked{border-color:var(--acc2);box-shadow:0 0 0 3px var(--acc2-ring)}
#val{font-variant-numeric:tabular-nums}
.ghost{position:absolute;left:15px;right:14px;bottom:0;
  height:var(--field-h);display:flex;align-items:center;
  font-size:var(--fs-input);color:var(--ghost);
  pointer-events:none;white-space:nowrap;overflow:hidden}
.ghost b{color:transparent}
.caret{position:absolute;right:12px;bottom:calc(var(--field-h)/2 - 7px);
  color:var(--mut);font-size:11px;pointer-events:none}
.finput.hascaret{padding-right:30px}

/* the swap cell holds only the button; align-items:end on the grid makes its
   bottom edge sit on the same line as the inputs, so it centres between them */
.f-swap{align-self:end;display:flex}
.swapbtn{width:100%;height:var(--field-h);border-radius:10px;background:var(--bg3);
  border:1px solid var(--line);color:var(--tx);font-size:calc(17px * var(--scale));cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0;line-height:1}
.swapbtn:hover{border-color:var(--acc);color:var(--acc)}
.swapbtn:active{background:var(--bg4)}
.swaptxt{display:none;font-size:calc(14px * var(--scale))}

.clearbtn{position:absolute;right:8px;bottom:calc(var(--field-h)/2 - 12px);
  width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg4);color:var(--mut);font-size:14px;line-height:1;
  cursor:pointer;display:none;align-items:center;justify-content:center;padding:0 0 1.5px}
.clearbtn.show{display:flex}
.clearbtn:hover{color:var(--err);border-color:var(--err)}

/* ---------- combobox dropdown ---------- */
.drop{display:none;position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);
  max-height:min(50vh,360px);overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:0 18px 46px var(--shadow)}
.drop.open{display:block}
.dgroup{position:sticky;top:0;z-index:1;background:var(--bg3);border-bottom:1px solid var(--line);
  padding:6px 13px;font-size:calc(10px * var(--scale));text-transform:uppercase;
  letter-spacing:.09em;color:var(--mut);font-weight:600}
.ditem{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;
  border-bottom:1px solid var(--row-line)}
.ditem:last-child{border-bottom:0}
.ditem:hover,.ditem.sel{background:var(--bg4)}
.ditem.cur{background:var(--acc-soft)}
.dsym{font-weight:600;min-width:92px;color:var(--acc2);flex-shrink:0}
.dname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcat{font-size:calc(11px * var(--scale));color:var(--mut);flex-shrink:0}
.dbadge{display:inline-block;font-size:calc(9px * var(--scale));
  background:var(--acc);color:var(--on-acc);
  border-radius:4px;padding:2px 5px;font-weight:700;vertical-align:middle;
  letter-spacing:.04em;line-height:1;white-space:nowrap}
.dtick{font-size:calc(10px * var(--scale));color:var(--acc);border:1px solid var(--acc);border-radius:4px;padding:0 5px}
.denter{font-size:calc(10px * var(--scale));color:var(--acc2);border:1px solid var(--acc2);border-radius:4px;padding:0 5px}
.dhint{padding:9px 13px;font-size:calc(12px * var(--scale));color:var(--mut);font-style:italic}
mark{background:var(--acc-ring);color:inherit;border-radius:2px;padding:0 1px}

/* ---------- result ---------- */
.result{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);
  padding:20px 22px;margin-bottom:16px;transition:box-shadow .2s}
.result.flash{box-shadow:0 0 0 3px var(--acc2-ring)}
.result.pending #resOut{color:var(--mut)}
.reshead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.resline{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;min-width:0}
#resIn{font-size:calc(17px * var(--scale));color:var(--mut)}
.eq{font-size:calc(17px * var(--scale));color:var(--mut)}
#resOut{font-size:calc(40px * var(--scale));font-weight:650;letter-spacing:-1px;
  line-height:1.05;cursor:pointer;word-break:break-word}
#resOut:hover{color:var(--acc2)}
#resOut sup{font-size:.5em;letter-spacing:0}
#resUnit{font-size:calc(19px * var(--scale));color:var(--acc2);font-weight:600;padding-bottom:5px}
.acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.abtn{background:var(--bg3);border:1px solid var(--line);color:var(--tx);border-radius:9px;
  padding:7px 12px;font:inherit;font-size:calc(13px * var(--scale));cursor:pointer;white-space:nowrap}
.abtn:hover{border-color:var(--acc);color:var(--acc)}
#resMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:calc(13px * var(--scale))}
.chip{background:var(--bg3);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font-size:calc(12px * var(--scale));color:var(--acc2)}
.muted{color:var(--mut)}
#rate{font-size:calc(12px * var(--scale));color:var(--mut);margin-top:8px;font-variant-numeric:tabular-nums}
#rate sup{font-size:.75em}
#warn .warnrow{margin-top:10px;font-size:calc(13px * var(--scale));color:var(--warn);
  background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:9px;padding:8px 12px}
code{background:var(--bg3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:calc(12px * var(--scale))}

/* ---------- layout / panels ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;min-width:0}
.ptitle{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:calc(12px * var(--scale));text-transform:uppercase;letter-spacing:.08em;color:var(--mut);flex-wrap:wrap}
.ptitle .spacer{flex:1}
.ptitle .hint{text-transform:none;letter-spacing:0}
.linkbtn{background:none;border:0;color:var(--acc);font:inherit;font-size:calc(12px * var(--scale));
  cursor:pointer;padding:0;text-transform:none;letter-spacing:0}
.linkbtn:hover{text-decoration:underline}
.ctable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ctable tr{border-bottom:1px solid var(--row-line);cursor:pointer}
.ctable tr:last-child{border-bottom:0}
.ctable tr:hover{background:var(--bg3)}
.ctable tr.hit{background:var(--acc2-soft)}
.ctable tr.src{background:var(--acc-soft);cursor:default}
.ctable td{padding:8px 16px}
.ctable sup{font-size:.75em}
.tsym{width:150px;font-weight:600;color:var(--acc2)}
/* keep the region badge clear of the coloured symbol text */
.tsym .dbadge{margin-left:9px}
.tval{text-align:right;width:200px}
.tname{color:var(--mut);font-size:calc(13px * var(--scale))}

/* pins panel */
#pins{padding:12px 14px;display:flex;gap:8px;flex-wrap:wrap}
.pinchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 12px;font-size:calc(13px * var(--scale));cursor:pointer}
.pinchip:hover{border-color:var(--acc)}
.pindel{background:none;border:0;color:var(--mut);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.pindel:hover{color:var(--err)}
.empty{color:var(--mut);font-size:calc(13px * var(--scale));font-style:italic}
#pins .empty{padding:2px 0}

#hist{max-height:420px;overflow:auto;-webkit-overflow-scrolling:touch}
.hrow{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--row-line);cursor:pointer}
.hrow:hover{background:var(--bg3)}
.hrow.fresh{animation:pop .5s ease}
@keyframes pop{from{background:var(--acc2-ring)}to{background:transparent}}
.hmain{flex:1;min-width:0}
.hlabel{font-size:calc(13px * var(--scale));font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlabel sup{font-size:.75em}
.hq{font-size:calc(11px * var(--scale));color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpinbtn,.hdel{background:none;border:0;color:var(--mut);cursor:pointer;font-size:15px;padding:0 3px}
.hpinbtn:hover{color:var(--acc)}
.hdel:hover{color:var(--err)}
#hist .empty{padding:14px;display:block}

#toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);opacity:0;max-width:min(92vw,520px);
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:10px 16px;
  font-size:calc(13px * var(--scale));color:var(--tx);text-align:center;
  transition:.22s;pointer-events:none;z-index:99;box-shadow:0 10px 30px var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- footer notes ---------- */
.notes{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  font-size:calc(12px * var(--scale));color:var(--mut);line-height:1.85}
.notes h3{font-size:calc(10px * var(--scale));text-transform:uppercase;letter-spacing:.09em;
  color:var(--mut);margin:0 0 6px;font-weight:600}
.notes b{color:var(--tx)}
.notes .statusline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
#ratesTxt.live{color:var(--acc2)}
#ratesTxt.stale{color:var(--warn)}
kbd{background:var(--bg3);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  padding:1px 5px;font:inherit;font-size:calc(11px * var(--scale));color:var(--tx);white-space:nowrap}

/* ============================================================
   RESPONSIVE
   980  - side panels drop under the table
   820  - swap becomes a full-width bar between From and To
   700  - header controls become a tidy 2-up grid
   560  - phone: table rows restack, inputs forced to 16px so iOS
          does not zoom on focus
   ============================================================ */
@media(max-width:980px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .side{flex-direction:row;flex-wrap:wrap}
  .side>.panel{flex:1 1 320px}
}
@media(max-width:820px){
  .fields{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"val" "from" "swap" "to";gap:12px}
  .f-val{grid-area:val}.f-from{grid-area:from}.f-swap{grid-area:swap}.f-to{grid-area:to}
  .f-swap{align-self:stretch}
  .swapbtn{height:calc(var(--field-h) * .78)}
  .swaptxt{display:inline}
  .f-val .finput{max-width:100%}
}
@media(max-width:700px){
  .wrap{padding:18px max(14px, env(safe-area-inset-right)) 56px max(14px, env(safe-area-inset-left))}
  header{gap:14px;align-items:stretch}
  .brand{gap:12px}
  h1{font-size:calc(30px * var(--scale))}
  .tagline{font-size:calc(13px * var(--scale))}
  .mark{width:calc(44px * var(--scale));height:calc(44px * var(--scale));
    flex-basis:calc(44px * var(--scale));font-size:calc(23px * var(--scale))}
  .spacer{display:none}
  .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;width:100%}
  .opt{min-width:0}
  .seg{width:100%}
  .segbtn{flex:1 1 0;min-width:0;padding:0 6px}
  .notes{grid-template-columns:1fr;gap:14px}
  .side{flex-direction:column}
  .conv{padding:14px}
  .result{padding:16px 16px}

  /* tooltips dock to the bottom of the viewport on phones */
  .info::after{
    position:fixed;
    top:auto;
    left:max(14px, env(safe-area-inset-left));
    right:max(14px, env(safe-area-inset-right));
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    transform:translateY(8px);
    text-align:center;
  }
  .info:hover::after,.info:focus-visible::after{transform:translateY(0)}
}
@media(max-width:560px){
  /* iOS zooms any focused input under 16px - clamp the field text */
  .finput{font-size:max(16px, var(--fs-input))}
  .ghost{font-size:max(16px, var(--fs-input))}

  .reshead{gap:10px}
  .resline{gap:8px}
  #resOut{font-size:calc(32px * var(--scale))}
  .acts{margin-left:0;width:100%}
  .acts .abtn{flex:1 1 0;min-height:38px;text-align:center}

  /* conversion table restacks: symbol + value on one line, name beneath */
  .ctable,.ctable tbody,.ctable tr,.ctable td{display:block;width:auto}
  .ctable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;row-gap:1px;padding:10px 14px;align-items:baseline}
  .ctable td{padding:0}
  .tsym{grid-column:1;grid-row:1;width:auto}
  .tval{grid-column:2;grid-row:1;width:auto;text-align:right;
    font-size:calc(16px * var(--scale));white-space:nowrap}
  .tname{grid-column:1 / -1;grid-row:2;font-size:calc(11px * var(--scale))}

  .ptitle{padding:11px 14px}
  .ptitle .hint{flex-basis:100%;font-size:calc(11px * var(--scale))}
  .drop{max-height:min(46vh,300px)}
  .dcat{display:none}
  .dsym{min-width:72px}
  .hlabel{white-space:normal}
  .hq{white-space:normal}
  .pinchip,.hpinbtn,.hdel,.pindel{min-height:30px}
}
@media(max-width:380px){
  .opts{grid-template-columns:1fr}
  .segbtn{font-size:calc(12px * var(--scale))}
}