/* KTS v1.5.6 — mobile app coherence pass
   Purpose: make the installed PWA feel like one mobile app instead of a desktop site
   squeezed into a phone. Loaded last. No JS/data behavior changes. */

@media (max-width: 680px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* Shared spacing/touch rhythm */
  :where(.app-page, .plain-page, .policy-page, .security-page, .home-v110) {
    --kts-mobile-edge: 12px;
    --kts-mobile-card-pad: 16px;
  }
  :where(button, .btn, a.btn, input, select, textarea, summary) { min-width: 0; }
  :where(button, .btn, a.btn, summary) { min-height: 44px; }
  :where(input, select) { min-height: 46px; }
  :where(textarea) { min-height: 110px; }
  :where(h1, h2, h3, p, span, strong, small, label, em, b) { overflow-wrap: anywhere; }

  /* ---------- Installed app / dashboard shell ---------- */
  body.app-page .app-header {
    position: relative !important;
    inset: auto !important;
    min-height: 64px;
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  body.app-page .app-header .brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  body.app-page .app-header .brand strong {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  body.app-page .app-header .brand strong > span { display: none !important; }
  body.app-page .app-header .brand-mark {
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }
  body.app-page .app-header .header-actions {
    flex: 0 0 auto;
    gap: 6px !important;
  }
  /* Redundant destinations already exist in the app nav; keep account/logout visible. */
  body.dashboard-v110 .app-header .header-actions > a[href*="policy-center"],
  body.dashboard-v110 .app-header .header-actions > a[href*="security-center"] {
    display: none !important;
  }
  body.app-page .app-header .header-actions .btn {
    padding: 9px 10px !important;
    min-height: 40px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  body.dashboard-v110 .product-app-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border-radius: 0 !important;
  }
  body.dashboard-v110 .product-app-nav::-webkit-scrollbar { display: none; }
  body.dashboard-v110 .product-app-nav :is(button, a) {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  body.dashboard-v110 .product-app-nav .nav-test-note,
  body.dashboard-v110 .product-app-nav .nav-spacer { display: none !important; }

  body.dashboard-v110 .test-mode-strip {
    padding: 8px 12px !important;
    gap: 7px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    flex-wrap: wrap;
  }
  body.dashboard-v110 .test-mode-strip > span:last-child { flex-basis: calc(100% - 20px); }

  body.dashboard-v110 .app-shell {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 10px auto 32px !important;
    padding-top: 0 !important;
    gap: 12px !important;
  }
  body.dashboard-v110 :is(.panel, .workflow-hero, .record-list-panel, .workflow-detail-panel,
    .booking-command-bar, .booking-inbox-panel, .booking-detail-panel, .booking-calendar-panel,
    .product-onboarding, .today-task-section) {
    border-radius: 18px !important;
  }

  /* Today hero: one clear action block, no visual competition. */
  body.dashboard-v110 .workflow-hero {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: hidden;
  }
  body.dashboard-v110 .workflow-hero-copy,
  body.dashboard-v110 .workflow-actions-card {
    padding: 18px 16px !important;
  }
  body.dashboard-v110 .today-heading-row {
    align-items: flex-start !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .today-heading-row h1 {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
  }
  body.dashboard-v110 .today-heading-row .text-action {
    flex: 0 0 auto;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  body.dashboard-v110 .workflow-hero-copy > p:not(.eyebrow) {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
  body.dashboard-v110 .today-purpose {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
  body.dashboard-v110 .today-purpose span {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7px 8px !important;
    font-size: 11px !important;
  }
  body.dashboard-v110 .workflow-actions-card > .btn.primary { width: 100% !important; }
  body.dashboard-v110 .workflow-secondary-actions,
  body.dashboard-v110 .extra-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .workflow-secondary-actions .btn,
  body.dashboard-v110 .extra-actions .btn { width: 100% !important; }

  /* Onboarding becomes a simple vertical checklist. */
  body.dashboard-v110 .product-onboarding {
    padding: 16px !important;
    gap: 12px !important;
  }
  body.dashboard-v110 .product-onboarding-head,
  body.dashboard-v110 .product-onboarding-footer {
    align-items: flex-start !important;
    gap: 10px !important;
    flex-direction: column !important;
  }
  body.dashboard-v110 .onboarding-progress { width: 100% !important; }
  body.dashboard-v110 .onboarding-steps-v110 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .onboarding-step-v110 {
    grid-template-columns: 34px minmax(0,1fr) auto !important;
    gap: 9px !important;
    padding: 12px !important;
  }
  body.dashboard-v110 .onboarding-step-v110 button {
    grid-column: 2 / -1 !important;
    width: 100% !important;
  }

  /* Summary cards stay scannable on a phone. */
  body.dashboard-v110 .today-task-heading {
    gap: 8px !important;
    align-items: flex-end !important;
  }
  body.dashboard-v110 .today-task-heading h2 { font-size: 20px !important; }
  body.dashboard-v110 .summary-grid.workflow-summary,
  body.dashboard-v110 #bookingWorkspace .booking-summary-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .summary-card.task-card,
  body.dashboard-v110 #bookingWorkspace .booking-summary-card {
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }
  body.dashboard-v110 .summary-card.task-card strong,
  body.dashboard-v110 #bookingWorkspace .booking-summary-card strong {
    font-size: 24px !important;
  }
  body.dashboard-v110 .summary-card.task-card em,
  body.dashboard-v110 .summary-card.task-card b,
  body.dashboard-v110 #bookingWorkspace .booking-summary-card em {
    font-size: 10px !important;
  }

  body.dashboard-v110 .dashboard-mode-switch {
    padding: 14px !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.dashboard-v110 .dashboard-mode-switch .mode-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  /* Booking workspace: everything becomes a single reading column. */
  body.dashboard-v110 #bookingWorkspace :is(.booking-main-grid, .booking-filter-grid) {
    grid-template-columns: 1fr !important;
  }
  body.dashboard-v110 .booking-command-bar,
  body.dashboard-v110 .booking-inbox-panel,
  body.dashboard-v110 .booking-detail-panel,
  body.dashboard-v110 .booking-calendar-panel {
    padding: 14px !important;
  }
  body.dashboard-v110 .booking-command-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .booking-command-actions > * { width: 100% !important; }
  body.dashboard-v110 .booking-view-tabs,
  body.dashboard-v110 .workflow-tabbar,
  body.dashboard-v110 .kts-detail-tabs {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  body.dashboard-v110 :is(.booking-view-tabs, .workflow-tabbar, .kts-detail-tabs)::-webkit-scrollbar { display: none; }
  body.dashboard-v110 :is(.booking-view-tabs, .workflow-tabbar, .kts-detail-tabs) button {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  /* Records: list first, selected record below. */
  body.dashboard-v110 .dashboard-layout.workflow-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.dashboard-v110 .record-list-panel,
  body.dashboard-v110 .workflow-detail-panel { padding: 14px !important; }
  body.dashboard-v110 .workflow-toolbar,
  body.dashboard-v110 .workflow-detail-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  body.dashboard-v110 .toolbar-actions.compact-actions,
  body.dashboard-v110 .workflow-detail-toolbar > .btn {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .toolbar-actions.compact-actions .btn { width: 100% !important; }
  body.dashboard-v110 .filter-bar.workflow-searchbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  body.dashboard-v110 .filter-bar.workflow-searchbar label { margin-top: 4px !important; }
  body.dashboard-v110 .record-list { max-height: none !important; }
  body.dashboard-v110 .detail-header-status { width: 100% !important; }

  /* Settings/manual forms: never try to keep desktop columns. */
  body.dashboard-v110 :is(.manual-record-form, #shopForm, .support-grid .shop-panel .grid, .grid) {
    grid-template-columns: 1fr !important;
  }
  body.dashboard-v110 :is(.manual-record-form, #shopForm) > .full { grid-column: 1 !important; }
  body.dashboard-v110 .support-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  body.dashboard-v110 .support-grid .panel { padding: 14px !important; }
  body.dashboard-v110 .template-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.dashboard-v110 .template-toolbar > span { width: 100% !important; }
  body.dashboard-v110 .template-toolbar .btn {
    flex: 1 1 calc(50% - 6px) !important;
    padding-inline: 8px !important;
    font-size: 11px !important;
  }
  body.dashboard-v110 .actions,
  body.dashboard-v110 .save-actions-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.dashboard-v110 .actions .btn,
  body.dashboard-v110 .save-actions-inline .btn { width: 100% !important; }

  /* ---------- Public booking/consent/app forms ---------- */
  body.booking-v107 .app-shell,
  body.booking-public-page .app-shell,
  body.app-page:not(.workflow-dashboard) .app-shell {
    width: calc(100% - 20px) !important;
    margin-inline: auto !important;
  }
  body.booking-v107 .booking-public-layout,
  body.booking-v107 .booking-public-form,
  body.app-page:not(.workflow-dashboard) .grid {
    grid-template-columns: 1fr !important;
  }
  body.booking-v107 :is(.hero-panel, .booking-public-layout > .panel, .booking-form-section),
  body.app-page:not(.workflow-dashboard) .panel {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  body.app-page:not(.workflow-dashboard) .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.app-page:not(.workflow-dashboard) .actions .btn { width: 100% !important; }

  /* ---------- Public / policy / pricing pages ---------- */
  .home-v110 .product-section { padding: 60px 18px !important; }
  .home-v110 .product-hero { padding-inline: 18px !important; }
  .home-v110 .product-hero h1 {
    font-size: clamp(38px, 11vw, 48px) !important;
    line-height: 1.02 !important;
  }
  .home-v110 :is(.problem-grid, .education-grid, .pillar-grid, .resource-grid, .feature-list,
    .preparation-layout, .legal-note-section) {
    grid-template-columns: 1fr !important;
  }
  .home-v110 .record-journey { grid-template-columns: 1fr !important; }
  .home-v110 :is(.product-hero-actions, .product-cta-actions, .home-paid-beta-actions) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .home-v110 :is(.product-hero-actions, .product-cta-actions, .home-paid-beta-actions) .btn {
    width: 100% !important;
  }

  :where(.plain-page, .policy-page, .security-page) .page-shell,
  :where(.plain-page, .policy-page, .security-page) main,
  :where(.plain-page, .policy-page, .security-page) .app-shell {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  :where(.plain-page, .policy-page, .security-page) :is(.panel, .policy-card, .tool-card, .offer-card,
    .policy-status-panel, .security-panel, .security-card) {
    border-radius: 18px !important;
  }
  :where(.plain-page, .policy-page, .security-page) :is(.tool-actions, .actions) {
    gap: 8px !important;
  }
}

@media (max-width: 430px) {
  body.dashboard-v110 .app-header .header-actions > a[href*="change-password"] { display: none !important; }
  body.dashboard-v110 .workflow-secondary-actions,
  body.dashboard-v110 .extra-actions,
  body.dashboard-v110 .booking-command-actions,
  body.dashboard-v110 .toolbar-actions.compact-actions {
    grid-template-columns: 1fr !important;
  }
  body.dashboard-v110 .summary-grid.workflow-summary,
  body.dashboard-v110 #bookingWorkspace .booking-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  body.dashboard-v110 .today-purpose { grid-template-columns: 1fr 1fr !important; }
  body.dashboard-v110 .template-toolbar .btn { flex-basis: 100% !important; }
}

@media (max-width: 350px) {
  body.dashboard-v110 .summary-grid.workflow-summary,
  body.dashboard-v110 #bookingWorkspace .booking-summary-grid,
  body.dashboard-v110 .today-purpose,
  body.dashboard-v110 .dashboard-mode-switch .mode-buttons {
    grid-template-columns: 1fr !important;
  }
}