/* THE TRADE TICKET'S LOOK: dense, tabular numbers, the ThinkOrSwim field grid,
   and one rule above all others: A DISABLED CONTROL IS NOT A MISSING ONE. It
   stays visible, dimmed, with its reason as the tooltip and in the gaps list,
   because the reason is the information. */
.ticket { font-size: 12px; color: var(--text); }
.ticket .tkmuted { color: var(--muted); font-size: 11px; }
.ticket .tktabs {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.ticket .tktab {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font: 700 11px/1 var(--font); letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 8px; border-bottom: 2px solid transparent;
}
.ticket .tktab.on { color: var(--text); border-bottom-color: var(--cyan); }
.ticket .tkcount { font-size: 9.5px; color: var(--muted); margin-left: 3px; }
.ticket .tkquote {
  margin-left: auto; font: 11px var(--font);
  color: var(--muted); text-align: right;
}
.ticket .tkrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.ticket .tkactions button {
  flex: 1 1 auto; border-radius: var(--radius); padding: 7px 6px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); background: var(--chip);
  color: var(--text); cursor: pointer; letter-spacing: .04em;
}
.ticket .tkactions button.buy { border-color: var(--long); color: var(--long); }
.ticket .tkactions button.sell { border-color: var(--short); color: var(--short); }
.ticket .tkactions button.armed {
  background: none; color: var(--gold); border-color: var(--gold);
}
.ticket button[disabled], .ticket select[disabled], .ticket input[disabled] {
  opacity: .45; cursor: not-allowed;
}
.ticket .tkgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; margin-bottom: 8px;
}
.ticket .tkfld label {
  display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ticket .tkfld input, .ticket .tkfld select, .ticket .tkmini, .ticket .tklegs input, .ticket .tklegs select {
  width: 100%; box-sizing: border-box;
  background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); border-radius: var(--radius); padding: 5px 6px;
  font: 12px var(--font);
}
.ticket .tkmini { width: auto; cursor: pointer; font-family: var(--font); font-size: 11px; }
.ticket .tkmini:hover:not([disabled]) { border-color: var(--muted); }
.ticket .tkstep { display: flex; gap: 0; }
.ticket .tkstep button {
  background: var(--chip); border: 1px solid var(--line); color: var(--text);
  width: 26px; cursor: pointer; font-size: 14px; border-radius: var(--radius) 0 0 6px;
}
.ticket .tkstep button:last-child { border-radius: 0 6px 6px 0; }
.ticket .tkstep input { border-radius: 0; text-align: center; border-left: 0; border-right: 0; }
.ticket .tkpreset {
  background: var(--chip); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 2px 9px; cursor: pointer; font: 11px var(--font);
}
.ticket .tkpreset.on { color: var(--text); border-color: var(--cyan); }
.ticket .tktemplate .tkfld { flex: 1 1 140px; }
.ticket .tklegs { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 11px; }
.ticket .tklegs th {
  text-align: left; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 2px 4px; border-bottom: 1px solid var(--line);
}
.ticket .tklegs td { padding: 3px 4px; vertical-align: middle; font-family: var(--font); }
.ticket .tklegs td.side-stop { color: var(--short); }
.ticket .tklegs td.side-target { color: var(--long); }
.ticket .tklegs input { width: 5.5em; padding: 3px 5px; }
.ticket .tkflags { gap: 14px; align-items: center; }
.ticket .tkflags input { width: auto; margin-right: 4px; }
.ticket .tkexpect {
  font: 12px var(--font); background: var(--panel2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; margin-top: 4px;
}
.ticket .tkexpect.stale { border-color: var(--short); color: var(--short); }
.ticket .tkexpect b { color: var(--text); }
.ticket .tklaw { font-size: 11.5px; margin-top: 6px; }
.ticket .tklaw.ok { color: var(--long); }
.ticket .tklaw.bad { color: var(--short); font-weight: 600; }
.ticket .tkreview {
  font: 11.5px/1.5 var(--font); background: var(--panel2);
  border: 1px solid var(--line2); border-radius: var(--radius); padding: 8px 10px;
  white-space: pre-wrap; margin-top: 8px; max-height: 14rem; overflow-y: auto;
}
.ticket .tkreview[hidden] { display: none; }
.ticket .tksendrow { margin-top: 8px; }
.ticket .tksend {
  flex: 1 1 auto; background: var(--accent); color: var(--on-accent); font-weight: 700;
  border: 0; border-radius: var(--radius); padding: 9px 12px; cursor: pointer; letter-spacing: .04em;
}
.ticket .tksend.armed { background: var(--gold); color: var(--ground); }
.ticket .tkout {
  font: 11px/1.45 var(--font); white-space: pre-wrap; margin-top: 8px;
  max-height: 14rem; overflow-y: auto; color: var(--muted);
}
.ticket .tkout.bad { color: var(--short); }
.ticket .tkout.good { color: var(--long); }
.ticket .tkcaret {
  display: inline-block; margin-top: 10px; font-size: 10.5px; color: var(--cyan);
  cursor: pointer; user-select: none;
}
.ticket .tkgaps {
  font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line);
  margin-top: 6px; padding-top: 6px;
}
.ticket .tkgaps[hidden] { display: none; }
.ticket .tkgaps b { color: var(--text); font-weight: 600; }
.ticket .tkgaps div { margin-bottom: 4px; }
/* R31 B52 part 4: a field with no guarded path never shows; the "?" by the tabs opens
   the popover that holds the longer words (the B50 chart info pattern). */
.ticket .tknever { display: none !important; }
.ticket .tkinfo {
  margin-left: 6px; width: 22px; height: 22px; min-height: 0; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid var(--accent-ink); color: var(--accent-ink);
  background: none; font: 700 11px var(--font); cursor: pointer;
}
.ticket .tkinfo[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ticket .tkinfopop {
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card);
  padding: 8px 10px; margin: 6px 0; font-size: 11px; color: var(--muted); box-shadow: var(--shadow);
}
.ticket .tkinfopop[hidden] { display: none; }
.ticket .tkinfopop b { color: var(--text); }
.ticket .tkinfopop div { margin-bottom: 4px; }
.ticket .tksend.notready { opacity: .6; }
.ticket .tksaved {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; margin-bottom: 6px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px;
}
.ticket .tksaved .tkname { font-weight: 700; }
.ticket .tksaved .tkspec { color: var(--muted); font-family: var(--font); flex: 1 1 100%; }
#tk-protect { margin-left: auto; display: flex; gap: 6px; }

/* On a phone the four-across field grid is two across, so a label and its
   input stay readable at 390px. */
@media (max-width: 640px) {
  .ticket .tkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket .tkstep button { width: 40px; }
  /* Nothing under 12px and no tap target under 40px (round 4). */
  .ticket .tkmuted, .ticket .tktab, .ticket .tkcount, .ticket .tkquote, .ticket .tkactions button,
  .ticket .tkfld label, .ticket .tkmini, .ticket .tkpreset, .ticket .tklegs, .ticket .tklegs th,
  .ticket .tklaw, .ticket .tkreview, .ticket .tkout, .ticket .tkcaret, .ticket .tkgaps,
  .ticket .tksaved { font-size: 12px; }
  .ticket .tkpreset, .ticket .tkmini, .ticket .tkstep button { min-height: 40px; }
  .ticket .tkcaret { display: inline-flex; align-items: center; min-height: 40px; }
  .ticket .tkinfo { width: 40px; height: 40px; font-size: 14px; }
  .ticket .tkinfopop { font-size: 12px; }
  .ticket .tkflags label { display: inline-flex; align-items: center; min-height: 40px; }
  /* Round 4, item 3: the ticket's buttons full width with 14px text, so a
     thumb lands on the one it meant. The stepper's minus and plus keep their
     place beside the quantity. */
  .ticket .tkactions button, .ticket .tksendrow button, .ticket .tktemplate button,
  .ticket #tk-protect button { flex: 1 1 100%; width: 100%; font-size: 14px; }
  .ticket #tk-protect { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .ticket .tkpreset { flex: 1 1 auto; font-size: 14px; }
}

/* R18b: the Manual desk in SHADOW, said at the top of the TRADE panel. */
.tkshadow { border: 1px solid var(--gold); border-radius: 6px; padding: 6px 8px;
  margin-bottom: 8px; font-size: 12px; }
.tkshadowtag { display: inline-block; background: var(--gold); color: var(--bg);
  font-weight: 800; letter-spacing: .06em; padding: 1px 6px; border-radius: 3px; }
.tkshadowfig { margin: 4px 0; font-variant-numeric: tabular-nums; }
.tkkind { margin-left: 4px; max-width: 8.5em; }