/* In-Trade Log on the web — only what differs from the Mac panel (style.css is her Mac file, untouched).
   Always open, no pill, fills the screen up to 720px, works down to 320px (iPad Slide Over). */
html { background: #0d0b12; height: 100%; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  background: #0d0b12;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
body.light { background: #ece5f3; }
html:has(body.light) { background: #ece5f3; }

#pill, body.pill #pill { display: none !important; }
body.pill #panel { display: flex; }
#panel { position: relative; width: 100%; max-width: 720px; flex: 1 1 auto; min-height: 0; height: auto; }
#btnCollapse { display: none; }
#head, #head:active { cursor: default; }
#body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-x: hidden; }

button, .sec > .h, .lrow, .jline, .sday, .row-click { touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; }
.sec > .c { overflow-x: auto; }
.web-code { font-family: var(--mono); font-size: 11.5px; color: var(--fg); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; margin-top: 8px; word-break: break-all; -webkit-user-select: all; user-select: all; }

/* the narrow screen: Slide Over and phones */
@media (max-width: 420px) {
  #body { padding: 8px 8px 14px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .nums { gap: 4px; }
  .nums > div { padding: 5px 5px; }
  .nums .v { font-size: 12.5px; }
  th, td { padding: 4px 2px; font-size: 11px; }
  .lp { min-width: 0; }
  .grow { gap: 6px; }
  .jsum { gap: 4px; }
  .jsum b { font-size: 13px; }
  #tabs button { font-size: 11px; }
}