/* core.resp.css - the revamp's touch, pointer and phone adjustments.
   Every selector is scoped under the class tsa on <html> (or is a :root
   token), and base.html links this sheet only on a page that opts in:
   {% block html_class %}tsa{% endblock %} in the page template. Keep it that
   way when editing - an unscoped rule here restyles every opted-in page, and
   a page's own rules must be scoped the same way to compete with these. */
/* The responsive layer. Splices LAST in every prototype, after that
   prototype's own rules, so a touch override is never outranked by a
   base rule that happens to be declared later. */
@media(pointer:coarse){
  /* One token, raised once: every control that shares a row grows together.
     Setting each height on its own is how 43.6px happened the first time. */
  :root{--ctl:48px; --ctl-sm:48px;}
  .tsa .btn-xs{padding-inline:16px;}
  .tsa .seg{padding:1px;}
  .tsa .seg button{height:calc(var(--ctl-sm) - 4px); padding-inline:17px;}
  .tsa .iconbtn.sm{width:44px; height:44px;}
  .tsa .cbox{min-width:44px; min-height:44px;}
  .tsa .tbl .sym a{min-height:44px; min-width:44px; padding-inline:10px; margin-inline:-10px;}
  .tsa .protobar a{min-width:44px;}
  .tsa .protobar a{display:inline-flex; align-items:center; min-height:44px;}
}
/* the footer's own links are sized by shell.css */
@media(pointer:fine){
  .tsa .protobar a{display:inline-block; padding:5px 0;}
}
@media(max-width:640px){
  .tsa .lead, .tsa .help, .tsa .empty p, .tsa .top .sub, .tsa .mut, .tsa .protonote, .tsa .tbl, .tsa .facts, .tsa .keys .k, .tsa .posgrid .v, .tsa .appopt .ds, .tsa .comp .ch .tot{font-size:1rem;}
  .tsa .tbl th{font-size:.72rem;}
  .tsa .posgrid .k, .tsa .tbl td .cl{font-size:.82rem;}
}
@media(prefers-reduced-motion:reduce){
  .tsa *{transition:none !important; animation:none !important;}
}