/* ithubseva core - mobile safety net shared by every portal.
   Only fixes things that break on a phone; it does not restyle the portals. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
pre, code, kbd { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
a, button, [role=button], input, select, textarea, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
.ith-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 820px) {
  body { overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; }
  /* 16px stops iPhone from zooming into a field, and keeps text readable */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea { font-size: 16px !important; max-width: 100%; }
  input[type=date], input[type=time], input[type=datetime-local], input[type=month] { min-width: 0; max-width: 100%; }
  /* comfortable tap size */
  button, .btn, [type=submit], [type=button], select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) { min-height: 40px; }
  /* dialogs fit the screen */
  .modal-dialog { margin: .5rem auto; max-width: calc(100vw - 1rem); }
  dialog { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); overflow: auto; }
  .modal, .modal-body, dialog { -webkit-overflow-scrolling: touch; }
  /* inline multi-column layouts collapse (3+ columns -> 1) */
  [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  .row > [class*="col-"]:not([class*="col-sm"]):not([class*="col-xs"]):not(.col):not(.col-auto) { min-width: 0; }
  h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr 1fr; }
  .btn-group, .toolbar, .actions { flex-wrap: wrap; }
}