/* Reading and touch controls for the phone-sized terminal. */
@media (max-width: 600px) {
  .js .desktop-header {
    height: calc(32px + env(safe-area-inset-top, 0px));
    width: calc(100% - 28px);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .desktop-brand { font-size: 9px; letter-spacing: .05em; }
  .desktop-header .availability { font-size: 9px; }
  .js .monitor-stage {
    height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .monitor-screen::after { box-shadow: inset 0 0 3px #0003; }
  .monitor-stage .bar { min-height: 44px; padding-inline: 12px; }
  .monitor-stage .bar .id { font-size: 11px; }
  .monitor-stage .bar .bar-host { display: none; }
  .monitor-stage .bar .k { width: 40px; height: 40px; min-height: 40px; padding: 10px; }
  .monitor-stage .rail { gap: 6px; padding: 6px 8px; scrollbar-width: none; }
  .monitor-stage .rail-item {
    flex: 0 0 auto; min-height: 42px; padding: 8px 10px;
    font-size: 11px; border-radius: 6px;
  }
  .monitor-stage .workspace { grid-template-rows: 34px minmax(0, 1fr) auto; }
  .monitor-stage .workspace-tab { padding-inline: 14px; font-size: 11px; }
  .monitor-stage .workspace-help { min-width: 44px; min-height: 34px; font-size: 11px; }
  .monitor-stage .log { padding: 20px 16px 28px; scroll-padding-block: 18px; }
  .monitor-stage .intro .name { max-width: none; font-size: clamp(32px, 9.5vw, 38px); line-height: 1.13; }
  .monitor-stage .intro .about { font-size: 14px; line-height: 1.65; }
  .monitor-stage .intro .who { font-size: 12px; line-height: 1.65; color: var(--mid); }
  .monitor-stage .intro .cta { width: 100%; margin-top: 18px; padding-top: 0; }
  .monitor-stage .intro .cta .k { min-height: 48px; padding: 12px; }
  .monitor-stage .cta-cmd { font-size: 12px; }
  .monitor-stage .cta-note { max-width: 13ch; white-space: normal; font-size: 10px; line-height: 1.4; }
  .monitor-stage .did-title > button { min-height: 36px; font-size: 14px; }
  .monitor-stage .did-description { font-size: 13px; line-height: 1.6; }
  .monitor-stage .intro .intro-note { font-size: 12px; }
  .monitor-stage .skills-compact .skills-list { font-size: 12px; gap: 10px; }
  .monitor-stage .skills-compact .skills-list dt { font-size: 11px; }
  .monitor-stage .skills-projects { gap: 3px; }
  .monitor-stage .skills-projects button { min-height: 40px; padding: 8px; font-size: 11px; }
  .monitor-stage .skills-heading h2 { font-size: 14px; }
  .monitor-stage .skills-caption, .monitor-stage .skills-note { font-size: 12px; }
  .monitor-stage .skills-compact .skills-legend { font-size: 11px; gap: 8px 12px; }
  .monitor-stage .prompt-area { padding: 8px; }
  .monitor-stage .prompt { min-height: 48px; }
  .monitor-stage .prompt-enter { min-width: 40px; height: 40px; }
  .monitor-stage .prompt input, .monitor-stage .prompt .suggest { font-size: 16px; }
  .monitor-stage .prompt input::placeholder { font-size: 12px; }
  .monitor-stage .dock { padding: 4px 8px 7px; }
  .monitor-stage .dock .chip { height: 40px; min-height: 40px; padding-inline: 12px; font-size: 12px; }
  .monitor-stage .dock .chips { gap: 6px; }

  .monitor-stage[data-tv-model="plasma"] .tv-toolbar { min-height: 58px; padding: 6px 10px; gap: 8px; }
  .monitor-stage .tv-back { flex-shrink: 0; min-height: 44px; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .monitor-stage .tv-next { width: 44px; min-width: 44px; justify-content: center; }
  .monitor-stage #project-switch {
    flex: 1; min-width: 0; max-width: 150px; width: 132px; min-height: 44px;
    padding: 8px; font-size: 12px;
  }
  .monitor-stage[data-tv-model="plasma"] .tv-log { padding: 18px 12px 28px; scroll-padding-block: 12px; }
  .monitor-stage .tv-log .card { gap: 16px; }
  .monitor-stage .tv-log .card p { font-size: 14px; line-height: 1.65; }
  .monitor-stage .tv-log .card .product-name { font-size: 34px; }
  .monitor-stage .tv-log .card .claim { font-size: 24px; line-height: 1.3; }
  .monitor-stage .tv-log .card .meta { font-size: 10px; line-height: 1.65; gap: 4px 12px; }
  .monitor-stage .tv-log .card .release { justify-self: start; width: fit-content; font-size: 11px; line-height: 1.4; }
  .monitor-stage .tv-log .card .spec { gap: 6px; }
  .monitor-stage .tv-log .card .spec li { font-size: 11px; }
  .monitor-stage .tv-log .product-features { font-size: 13px; line-height: 1.65; }
  .monitor-stage .tv-log .card .links { display: flex; flex-wrap: wrap; gap: 8px; }
  .monitor-stage .tv-log .card .links .k { min-height: 44px; height: auto; font-size: 12px; padding: 10px 12px; }
  .monitor-stage .project-engineering summary { min-height: 48px; font-size: 13px; line-height: 1.5; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy { display: contents; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > * { order: 4; margin-block: 0; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > .meta { order: 0; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > .product-name { order: 1; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > .claim,
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > .release { order: 2; }
  .monitor-stage .tv-log .card[data-project="befit"] > .pin { order: 3; grid-row: auto; width: 100%; max-width: none; }
  .monitor-stage .tv-log .card[data-project="befit"] .preview-caption { display: none; }
  .monitor-stage .tv-log .card[data-project="befit"] > .project-engineering { order: 5; }
  .monitor-stage .guide-preview > iframe { border-radius: 9px; }
  .monitor-stage .log, .monitor-stage .tv-log { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

/* Cached project screens stay connected so embedded applications retain their state. */
.project-session[hidden], .ca-device[hidden] { display: none !important; }
.ex > .more, .skills-more > summary { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  .monitor-stage .tv-log .card:is([data-project="chatair"], [data-project="bot"]) .project-copy { display: contents; }
  .monitor-stage .tv-log .card:is([data-project="chatair"], [data-project="bot"]) .project-copy > * { order: 4; margin-block: 0; }
  .monitor-stage .tv-log .card:is([data-project="chatair"], [data-project="bot"]) .product-name { order: 0; }
  .monitor-stage .tv-log .card:is([data-project="chatair"], [data-project="bot"]) .claim { order: 1; }
  .monitor-stage .tv-log .card:is([data-project="chatair"], [data-project="bot"]) > .pin { order: 2; }
  .monitor-stage .tv-log .card:is([data-project="chatair"], [data-project="bot"]) > .project-engineering { order: 5; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .js .desktop-header { height: 24px; }
  .js .monitor-stage { height: calc(100dvh - 26px); }
  .monitor-stage .bar { min-height: 34px; height: 34px; padding-block: 0; }
  .monitor-stage .rail { padding: 2px 8px; }
  .monitor-stage .rail-item { min-height: 32px; padding: 4px 10px; }
  .monitor-stage .workspace { grid-template-rows: 0 minmax(0, 1fr) auto; }
  .monitor-stage .workspace-bar { visibility: hidden; overflow: hidden; }
  .monitor-stage .prompt-area { padding: 4px 8px; }
  .monitor-stage .prompt { min-height: 40px; }
  .monitor-stage .dock { display: none; }
  .monitor-stage .log { padding-block: 12px; }
}

@media (max-width: 600px) {
  .monitor-stage .tv-log .card[data-project="befit"] { gap: 10px; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > .product-name { order: 0; font-size: 26px; }
  .monitor-stage .tv-log .card[data-project="befit"] .project-copy > :is(.meta, .claim, .release) { order: 4; }
  .monitor-stage .tv-log .card[data-project="befit"] > .pin { order: 1; }
}

@media (max-width: 600px) {
  .monitor-stage .tv-log .card[data-project="bot"] { gap: 10px; }
  .monitor-stage .tv-log .card[data-project="bot"] .claim { font-size: 16px; }
  .monitor-stage .tv-log .card[data-project="bot"] .preview-caption { display: none; }
}