/* Phone layouts share the desktop surfaces, but reserve space for touch,
   the software keyboard, and the plan content above the chat dock. */
.mobile-filter-toggle, .mobile-filter-done, .mobile-chat-toggle {display:none}
@media (max-width:700px) {
  html {-webkit-text-size-adjust:100%; scroll-padding-top:76px}
  .tn-header .nav {min-height:60px}
  .tn-header .tn-mobile > summary,
  .tn-header .tn-workspace-close {width:44px; height:44px; min-height:44px}
  .tn-header .tn-primary {min-height:44px}
  .tn-header .tn-mobile-panel {
    width:min(320px,calc(100vw - 24px));
    max-height:calc(var(--tn-visible-height,100dvh) - 80px);
    padding:8px;
  }
  .tn-header .tn-mobile-panel a {min-height:44px; font-size:14px}
  html.appfull .tn-header .tn-primary {display:none}
  input:not([type="checkbox"]):not([type="range"]):not([type="radio"]),
  select, textarea,
  .composer-shell .ci-input, .composer-shell .ci-costs input,
  .person .tobacco, .trudy-compose textarea {
    font-size:16px;
    min-height:44px;
  }
  button, summary, a {touch-action:manipulation}
  .foot-col a, .article-nav nav a, .source-list a {min-height:44px}
  .shell {padding-left:16px; padding-right:16px}
  .mast {padding-top:20px; padding-bottom:24px}
  .mast__lede, .feature-card p, .journey-card p,
  .resource-feature p, .resource-topics p, .tool-row__copy p {font-size:13px; line-height:1.65}
  .feature-card, .resource-feature__copy, .journey-card {padding:18px}
  .tool-row__action, .resource-action, .journey-action, .primary-link,
  .tools-guide__button, .tool-open {min-height:44px; font-size:12px}
  .tool-workspace__bar {gap:8px; padding:0 8px}
  .tool-workspace__bar > span:nth-child(2) {min-width:0; overflow-wrap:anywhere}
  .tool-workspace iframe {height:76svh; min-height:420px}
  .trudy-chat {padding:16px}
  .trudy-prompts button {min-height:44px; font-size:12px}
  .trudy-compose button {width:44px; height:44px; border-radius:5px}
  .trudy-log {max-height:45svh}
  .foot-inner {gap:24px 16px}
  .foot-bottom {align-items:flex-start; flex-wrap:wrap}

  /* Real plan filters collapse, rather than making visitors scroll past them
     before they can see the prepopulated plans. Without JS they stay visible. */
  body[data-surface="plans"] .shell {display:block; padding:10px 12px 28px}
  .mobile-filter-toggle, .mobile-filter-done {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:44px; padding:10px 12px; margin:0 0 12px;
    border:1px solid var(--mac-edge); border-radius:6px;
    background:var(--mac-control); color:var(--ink); font:600 13px var(--mac-ui);
    box-shadow:var(--mac-inset),var(--mac-card-shadow); text-align:left;
  }
  .mobile-filter-toggle span {font-size:12px; font-weight:400; color:var(--ink-2)}
  body[data-surface="plans"] .side:not([hidden]) {display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:16px; width:100%}
  body[data-surface="plans"] .side[hidden] {display:none!important}
  .mobile-filter-done {margin:0; justify-content:center}
  body[data-surface="plans"] .cards--tiles {grid-template-columns:minmax(0,1fr); gap:12px}
  body[data-surface="plans"] .plan {padding:14px}
  .plan__name {font-size:14px; line-height:1.45}
  .plan__carrier {flex-wrap:wrap; gap:8px}
  .plan__head > div:first-child {min-width:0}
  .plan__head .price {flex-shrink:0}
  .crow .t-meta, .crow b {font-size:12px}
  .tally {flex-wrap:wrap; gap:6px 10px}
  .tally__side {flex-basis:100%; justify-content:flex-end}
  .sortrow {gap:8px; align-items:center}
  .stab, .vbtn, .qfchip, .pick, .plan__foot .ghost,
  .tgl, .mchip, .addlink, .person .x, .chip .x,
  .top .solid, .top .ghost, .top .modebtn {min-height:44px}
  .vbtn, .person .x {min-width:44px}
  .person {grid-template-columns:64px minmax(0,1fr) 44px}
  .person .rel {min-height:44px; font-size:16px}
  .mchips {flex-wrap:wrap; gap:6px}
  input[type="range"] {height:44px}
  input[type="range"]::-webkit-slider-thumb {width:20px; height:20px; margin-top:-10px}
  input[type="range"]::-moz-range-thumb {width:20px; height:20px; border:0; border-radius:50%; background:var(--ink)}
  .cmp {min-height:44px; font-size:12px}
  .cmp input {width:18px; height:18px}
  .plan__foot {gap:10px; flex-wrap:wrap}
  .cmpbar {max-width:calc(100vw - 24px); bottom:max(12px,env(safe-area-inset-bottom)); flex-wrap:wrap}
  .cmpview__panel {max-width:calc(100vw - 20px); max-height:calc(var(--tn-visible-height,100dvh) - 24px); overflow:auto; padding:12px}

  /* Chat can be minimized, and the iframe ends above it instead of under it. */
  html.appfull .composer-wrap {
    width:calc(100% - 16px); max-width:none; left:8px; right:8px;
    bottom:calc(var(--tn-keyboard-inset,0px) + max(8px,env(safe-area-inset-bottom)));
  }
  html.appfull .composer-shell {
    max-height:calc(var(--tn-visible-height,100dvh) - 80px);
    overflow:auto; overscroll-behavior:contain;
  }
  html.appfull .preview-wrap.max {
    bottom:calc(var(--tn-keyboard-inset,0px) + var(--tn-dock-height,64px) + max(16px,env(safe-area-inset-bottom) + 8px))!important;
  }
  html.appfull .mobile-chat-toggle {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    min-height:44px; padding:6px 10px; border:1px solid #cdd1d7;
    border-radius:5px; background:var(--mac-control); color:#303740;
    font:500 12px var(--mac-ui);
  }
  html.appfull .composer-shell .composer-header {gap:8px; padding-bottom:4px}
  html.appfull.chat-minimized .composer-shell .composer-header {padding-bottom:0}
  html.appfull.chat-minimized .composer-shell .composer-surface,
  html.appfull.chat-minimized .composer-shell .ct-log,
  html.appfull.chat-minimized .composer-shell .app-state-trigger {display:none}
  html.appfull.chat-minimized .composer-shell .chat-heading {display:block; font-size:13px}
  html.appfull .composer-shell .ci-input {font-size:16px; min-height:44px}
  html.appfull .composer-shell .ct-log {max-height:min(120px,20dvh)}
  html.appfull .composer-shell .ct-q, html.appfull .composer-shell .ct-a {font-size:13px}
  html:root .composer-shell .composer-actions {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px}
  html:root .composer-shell .ca-left, html:root .composer-shell .ca-right {display:contents}
  html:root .composer-shell .ca-left .mkt-dd {grid-column:1/3; grid-row:1; margin:0; min-width:0}
  html:root .composer-shell .ca-left .mkt-btn {min-height:44px; font-size:12px; width:100%; justify-content:flex-start}
  html:root .composer-shell .ca-right > .ca-chip {grid-column:3; grid-row:1; width:44px; height:44px}
  html:root .composer-shell .ca-right > .ci-send {grid-column:4; justify-self:end; grid-row:1; width:44px; height:44px; min-height:44px}
  html:root .composer-shell .ca-left > .ca-chip {grid-row:2; width:100%; height:44px; min-height:44px; justify-content:center}
  html:root .composer-shell .ci-costs input {min-height:44px; font-size:16px}
  html:root .composer-shell .ci-hint {min-height:36px}
  .composer-shell .ci-results {max-height:180px; overflow-y:auto}
  .composer-shell .ci-results button {min-height:44px}
}
@media (max-width:380px) {
  .tn-header .tn-brand {font-size:17px}
  .tn-header .tn-primary {padding:0 8px}
  .resource-feature {display:flex; flex-direction:column}
  .resource-feature__art {min-height:100px; height:100px; border-right:0}
  .resource-feature__art .object-art {width:92px; height:92px}
  .costrows {grid-template-columns:1fr}
}
@media (max-width:700px) and (max-height:500px) {
  html.appfull .composer-shell .ct-log {max-height:70px}
  html.appfull .composer-shell .composer-surface {gap:0}
}