/* Final readability pass: product simulations must remain legible at every breakpoint. */

.kasa-screen-head b { font-size: clamp(7px, .68vw, 10px); }
.kasa-screen-head small { font-size: clamp(7px, .6vw, 9px); }
.kasa-tile b { font-size: clamp(8px, .72vw, 11px); }
.kasa-cart > span { font-size: clamp(7px, .58vw, 9px); }
.kasa-cart p { font-size: clamp(6.5px, .56vw, 8px); }
.kasa-cart > div small { font-size: clamp(6px, .5vw, 8px); }
.kasa-cart > div b { font-size: clamp(11px, 1vw, 15px); }
.kasa-cart button { font-size: clamp(7px, .58vw, 9px); }

.team-planner__week small { font-size: 8px; }
.team-planner__actions > span { font-size: 8px; }
.team-planner__actions > b { font-size: 9px; }
.team-planner__metrics small { font-size: 8px; }
.team-planner__metrics strong { font-size: 12px; }
.team-schedule__days > span,
.team-schedule__days > b { font-size: 8px; }
.team-person b { font-size: 10px; }
.team-person small { font-size: 8px; }
.team-cell--off > small { font-size: 8px; }
.team-shift { font-size: 9px; }
.team-shift small { font-size: 7.5px; }
.team-cell--gap b { font-size: 7.5px; }
.team-cell--gap small { font-size: 7px; }
.team-planner__alert b,
.team-planner__sync b { font-size: 9px; }
.team-planner__alert small,
.team-planner__sync small { font-size: 7.5px; }
.team-planner__publish { font-size: 8.5px; }

@media (max-width: 700px) {
  #tab-extensions .module-tab__lockup { gap: 4px; }
  #tab-extensions .module-tab__lockup img { width: 48px; }
  #tab-extensions .module-tab__lockup strong {
    overflow: visible;
    font-size: 11px;
    text-overflow: clip;
  }

  .kasa-screen--large { width: 74%; }
  .kasa-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4%;
  }
  .kasa-tile:nth-child(n+5) { display: none; }
  .kasa-screen-head b { font-size: 8px; }
  .kasa-screen-head small { font-size: 7px; }
  .kasa-tile b { font-size: 9px; }
  .kasa-cart > span { font-size: 7px; }
  .kasa-cart p { display: none; }
  .kasa-cart > div { display: grid; align-content: end; }
  .kasa-cart > div small { font-size: 6.5px; }
  .kasa-cart > div b { font-size: 11px; }
  .kasa-cart button { padding-block: 8px; font-size: 7.5px; }
  .kasa-config-features span { font-size: 8px; }
  .kasa-config-visual figcaption span { font-size: 8px; }
  .kasa-config-visual figcaption strong { font-size: 9px; }

  .team-planner__header {
    grid-template-columns: minmax(72px, auto) minmax(92px, 1fr) auto;
  }
  .team-planner__brand b { font-size: 9px; }
  .team-planner__week small { font-size: 7px; }
  .team-planner__week strong { font-size: 11px; }
  .team-planner__actions > b { min-height: 28px; font-size: 8px; }
  .team-planner__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-planner__metrics > span { padding: 7px 9px; }
  .team-planner__metrics > span:nth-child(2),
  .team-planner__metrics > span:nth-child(4) { display: none; }
  .team-planner__metrics small { font-size: 7px; }
  .team-planner__metrics strong { font-size: 10px; }
  .team-schedule__days,
  .team-schedule__row { grid-template-columns: 96px repeat(2, minmax(0, 1fr)); }
  .team-schedule__days > :nth-child(n+4),
  .team-schedule__row > .team-cell:nth-child(n+4) { display: none; }
  .team-schedule__row:nth-child(n+5) { display: none; }
  .team-schedule__days > span,
  .team-schedule__days > b { font-size: 7.5px; }
  .team-schedule__days small { width: 16px; height: 16px; font-size: 8px; }
  .team-person { gap: 6px; padding-inline: 6px; }
  .team-person > i { width: 25px; height: 25px; font-size: 8px; }
  .team-person b { font-size: 9px; }
  .team-person small { font-size: 7.5px; }
  .team-shift { min-height: 34px; padding-left: 7px; font-size: 8.5px; }
  .team-shift small { font-size: 7px; }
  .team-cell--off > small,
  .team-cell--gap b { font-size: 7.5px; }
  .team-cell--gap small { font-size: 7px; }
  .team-planner__alert b { font-size: 8.5px; }
  .team-planner__alert small { font-size: 7px; }
  .team-planner__publish { font-size: 7.5px; }
}

@media (min-width: 701px) and (max-width: 940px) {
  .team-schedule__days,
  .team-schedule__row { grid-template-columns: 120px repeat(5, minmax(0, 1fr)); }
  .team-schedule__days > :nth-child(n+7),
  .team-schedule__row > .team-cell:nth-child(n+7) { display: none; }
}