/* ===== SIZES: touch targets (Portal UI cleanup 2/4) =====
   Loaded after themes.css, so these win over equal-specificity size rules in panels/components.
   Sizes are tokens from tokens.css, never per theme:
   --pb-tap 44px (phone layout, max-width:1024px, and touch screens), --pb-tap-desktop 40px,
   --pb-hit = whichever is in force (tokens.css switches it in the phone media query).
   Rule: no control may take another control's clicks. An invisible hit box is only used on controls
   with room around them; anything stacked or packed next to another control gets its real size.
   Theme quick buttons (28px) are left as they are: PR 4 replaces them with one menu.
   Chat cards (cards.css, --pc-*) meet 44px on their own and are not touched here. */

/* Isolated controls: a centred, invisible ::before of at least --pb-hit. min(0px, ...) never shrinks. */
.tn-btn,.tn-logout,.topnav-dock,.model-badge,.ctx-pill,.chat-subtab,.live-clock-widget,.dock-btn,.ch-search,
.poke-btn,.c-task-btn,.c-send-circle,.const-subtab,.inbox-sync-btn,.profile-share-btn,.bm-add,.chm-more{position:relative}
.tn-btn::before,.tn-logout::before,.topnav-dock::before,.model-badge::before,.ctx-pill::before,
.chat-subtab::before,.live-clock-widget::before,.dock-btn::before,.ch-search::before,.poke-btn::before,
.c-task-btn::before,.c-send-circle::before,.const-subtab::before,.inbox-sync-btn::before,
.profile-share-btn::before,.bm-add::before,.chm-more::before{
  content:"";position:absolute;
  top:min(0px,calc((100% - var(--pb-hit)) / 2));bottom:min(0px,calc((100% - var(--pb-hit)) / 2));
  left:min(0px,calc((100% - var(--pb-hit)) / 2));right:min(0px,calc((100% - var(--pb-hit)) / 2))
}
/* + after a bookmark: the box stays inside the 4px gap and grows to the right instead (still 40 wide, no overlap). */
.bm-item + .bm-add::before{left:-4px;right:-14px}
/* A positioned host paints over its static children: lift interactive children above it. */
.topic-selector-pill .ts-x{position:relative;z-index:1}

/* Stacked or packed controls: real size. Growth is a few px per row on desktop. */
.tn-icon,.c-btn,.view-toggle-btn,.ft-collapse-btn button,.profile-key-toggle,.profile-key-copy,
.tasks-pill{min-width:var(--pb-hit);min-height:var(--pb-hit)}
.sidebar-item,.topic-selector-pill,.settings-select,.ft-btn,.files-search input,.ft-item,.ft-sec-title,
.todo-header-btn,.todo-filter,.agents-subtab,.profile-key-regen,.profile-contact-row[onclick],
.profile-avatar-btn{min-height:var(--pb-hit)}
.sidebar-group-label{min-height:var(--pb-hit);display:flex;align-items:flex-end;padding-top:0}
.files-search{padding-block:0}
/* Composer: the field itself is a full target; its own padding replaces the box padding and gap,
   so the composer grows by only a few px and the toolbar never paints over the field. */
.composer-textarea{min-height:var(--pb-hit);padding-block:8px}
.composer-box{padding-top:4px;gap:0}

/* Phone layout and touch screens: the controls themselves reach --pb-tap. */
@media (max-width:1024px),(pointer:coarse){
  .tn-icon,.theme-dropdown-btn,.ch-search,.poke-btn,.c-btn,.c-send-circle,.hmi-voice-settings-toggle{min-width:var(--pb-tap);min-height:var(--pb-tap)}
  .tn-btn,.chat-subtab,.live-clock-widget,.topic-selector-pill,.c-task-btn,.const-subtab,.gov-subtab,
  .inbox-sync-btn,.settings-select,.profile-avatar-btn,.profile-share-btn,.sidebar-item,.composer-textarea,
  .ft-item,.ft-sec-title{min-height:var(--pb-tap)}
  .composer-box{padding-top:2px}
  .tasks-filter-pills{flex-wrap:wrap}
  .mob-tab{flex:1 1 0;min-width:0;min-height:var(--pb-tap);justify-content:center}
  /* Every other control in the phone layout. :where() keeps this at zero specificity, so a component
     that sets its own min-height still decides; checkboxes and radios sit inside 44px label rows. */
  :where(button,select,[role=button],[role=tab],input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])){min-height:var(--pb-tap)}
  :where(button,[role=button],[role=tab]){min-width:var(--pb-tap)}
}
/* Narrow phones: the chat header drops the timezone label. It never wraps: under a 640px header the tools
   move into the More menu (panels.css @container chathdr), so the bar stays one row. */
@media (max-width:480px){
  #liveClockTZ{display:none}
  .agents-subtab{padding-inline:10px}
}