/* GLY1 Field Manual — responsive/mobile-first presentation layer
   Loaded last so it can safely correct legacy desktop-first rules. */

/* Safe defaults at every viewport size */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}
img, svg, video, canvas {
  max-width: 100%;
}
.view,
.view > *,
.route-dashboard,
.briefing-panel,
.clean-stage-hero,
.clean-stage-copy,
.clean-assessment,
.clean-section,
.clean-coach,
.clean-today,
.clean-chatgpt,
.clean-quick-win,
.guide-hero,
.guide-grid,
.guide-section,
.tool-panel,
.tool-grid,
.tool-card,
.officer-grid,
.officer-panel,
.knowledge-update-center,
.knowledge-workflow-grid,
.approved-tip-card,
.approved-tip-body,
.system-dialog-content,
.modal-body {
  min-width: 0;
  max-width: 100%;
}
p, li, h1, h2, h3, h4, strong, small, label, button, td, th {
  overflow-wrap: anywhere;
}
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Phone / narrow tablet: content is designed for this first. */
@media (max-width: 767px) {
  :root {
    --header-h: 60px;
    --radius-xl: 18px;
    --radius-lg: 15px;
    --radius-md: 12px;
  }

  body {
    font-size: 16px;
    line-height: 1.58;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  h1 { font-size: clamp(2rem, 10vw, 2.85rem); line-height: 1.08; }
  h2 { font-size: clamp(1.4rem, 7vw, 1.9rem); line-height: 1.16; }
  h3 { font-size: 1.08rem; line-height: 1.25; }
  p { line-height: 1.62; }

  /* Access screen */
  .gate {
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    align-items: center;
  }
  .gate-card {
    width: 100%;
    padding: 22px 18px;
    border-radius: 18px;
  }
  .gate-brand-row { gap: 10px; margin-bottom: 10px; }
  .gate-alliance-emblem { width: 58px; height: 58px; }
  .gate-lastz-logo { width: min(168px, 52vw); height: auto; }
  .gate-card h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
  .gate-copy { margin-bottom: 1.25rem; }
  .input-row { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .gate-form .button { width: 100%; }

  /* Compact top bar; primary navigation lives at the bottom. */
  .topbar {
    height: calc(var(--header-h) + env(safe-area-inset-top) + 8px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: calc(env(safe-area-inset-top) + 8px) 10px 0;
    box-sizing: border-box;
  }
  .brand { min-width: 0; gap: 7px; padding: 0; }
  .brand img { width: 34px; height: 34px; flex: 0 0 auto; }
  .brand span { min-width: 0; }
  .brand strong { font-size: .82rem; white-space: nowrap; }
  .brand small { display: none; }
  .top-actions { gap: 5px; min-width: 0; }
  .top-actions #searchButton { display: inline-grid; }
  .top-actions .icon-button {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .top-actions .icon-button:last-child { display: none; }
  .profile-pill {
    min-width: 0;
    width: auto;
    max-width: 88px;
    height: 36px;
    padding: 4px 8px;
    border-radius: 9px;
  }
  .profile-pill span { font-size: .78rem; white-space: nowrap; }
  .profile-pill small { display: none; }

  .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    z-index: 300;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: none;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #3b4651;
    border-radius: 0;
    background: rgba(15, 21, 26, .98);
    box-shadow: 0 -8px 24px rgba(0,0,0,.22);
    overflow: visible;
  }
  .nav-button {
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 9px;
    font-size: clamp(.65rem, 2.8vw, .76rem);
    line-height: 1.05;
    white-space: nowrap;
  }
  .nav-button img { width: 27px; height: 27px; }

  /* Full-width content with consistent breathing room. */
  main { width: 100%; margin: 0; }
  .view {
    width: 100%;
    margin: 0;
    padding: 16px 14px 28px;
    min-height: calc(100dvh - var(--header-h));
  }
  .page-heading { padding: 8px 0 18px; }
  .page-heading h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .page-heading > p:last-child { font-size: .98rem; }

  /* HQ setup */
  .profile-setup {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 10px 0 22px;
    background-position: center;
  }
  .setup-copy h1 { max-width: none; }
  .setup-copy p { font-size: 1rem; }
  .hq-form { padding: 16px; border-radius: 16px; }
  .hq-control { grid-template-columns: 48px minmax(0,1fr) 48px; gap: 7px; }
  .hq-control button { height: 50px; border-radius: 11px; }
  .hq-control input { height: 60px; font-size: 2rem; }

  /* Main briefing hero */
  .clean-dashboard > * + * { margin-top: 14px; }
  .clean-stage-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
    min-height: 0;
    border-radius: 17px;
  }
  .clean-stage-copy h1 { font-size: clamp(2rem, 10vw, 2.75rem); max-width: none; }
  .clean-stage-copy .stage-subtitle { font-size: .98rem; }
  .stage-meta { gap: 6px; flex-wrap: wrap; }
  .stage-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .stage-actions .button,
  .stage-actions .text-button { width: 100%; text-align: center; }
  .stage-image-slot { min-height: 170px; border-radius: 14px; }
  .image-slot-copy { padding: 18px; }
  .stage-hq-badge { width: 66px; height: 66px; }

  /* Profile strip and resource shortcuts */
  .clean-profile-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 15px;
  }
  .profile-strip-main { grid-template-columns: 1fr; gap: 10px; }
  .profile-meter { max-width: none; width: 100%; }
  .personalisation-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .personalisation-actions .button { width: 100%; }

  .game-resource-dock {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    overflow: visible;
  }
  .resource-dock-label {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 4px 2px 7px;
  }
  .game-resource-dock button {
    min-width: 0;
    width: 100%;
    min-height: 58px;
    padding: 8px;
  }
  .game-resource-dock img { width: 34px; height: 34px; }

  /* Four briefing sections fit without sideways clipping. */
  .briefing-tabs {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px;
    padding: 5px;
    overflow: visible;
  }
  .briefing-tab {
    min-width: 0;
    padding: .66rem .35rem;
    text-align: center;
    font-size: .8rem;
  }
  .briefing-panel { margin-top: 14px; }

  /* Cards and assessment */
  .clean-assessment { grid-template-columns: 1fr; border-radius: 17px; }
  .clean-assessment-main,
  .clean-next-breakthrough,
  .clean-strengths { padding: 18px; }
  .clean-assessment-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .clean-verdict { grid-template-columns: 1fr; gap: 5px; padding: 15px 18px; }
  .clean-at-glance { grid-template-columns: 1fr; gap: 10px; }
  .clean-stat-card { min-height: 0; padding: 17px; }
  .compact-stat { text-align: left; }
  .compact-stat .big-number { font-size: 2.35rem; }

  .clean-section,
  .clean-coach,
  .clean-today,
  .clean-quick-win,
  .clean-chatgpt { padding: 17px; border-radius: 15px; }
  .clean-coach { grid-template-columns: 1fr; gap: 16px; }
  .coach-actions,
  .clean-moves,
  .clean-systems,
  .clean-media-row,
  .knowledge-article-grid,
  .next-moves-grid,
  .systems-grid,
  .support-grid { grid-template-columns: 1fr; }
  .coach-actions button { padding: 13px; }
  .system-card { min-height: 0; }
  .clean-systems .system-card { min-height: 250px; }
  .clean-today { grid-template-columns: 1fr; gap: 14px; }
  .today-clock { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .clean-today > .button { width: 100%; }
  .clean-quick-win,
  .clean-chatgpt { grid-template-columns: 1fr; gap: 12px; }

  /* Recognisable approved tips / Field Notes */
  .approved-tips-heading { display: block; }
  .approved-tip-count { display: inline-flex; margin-top: 6px; }
  .approved-tip-list { gap: 10px; }
  .approved-tip-card { padding: 14px; border-radius: 14px; }
  .approved-tip-head { gap: 6px; }
  .approved-tip-card h3 { font-size: 1.02rem; }
  .approved-tip-lead { font-size: .92rem; line-height: 1.58; }
  .approved-tip-body { line-height: 1.62; }
  .essential-note-grid { grid-template-columns: 1fr; }

  /* Mechanics / tools navigation remains swipeable, never clipped. */
  .system-nav,
  .tool-nav {
    width: calc(100% + 28px);
    margin-left: -14px;
    padding: 4px 14px 12px;
    gap: 7px;
    scroll-padding-inline: 14px;
    -webkit-overflow-scrolling: touch;
  }
  .system-tab,
  .tool-tab { padding: .62rem .8rem; font-size: .8rem; }

  .guide-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 17px;
    border-radius: 16px;
  }
  .guide-hero h2 { font-size: 1.8rem; }
  .guide-visual { min-height: 150px; }
  .guide-grid { grid-template-columns: 1fr; gap: 10px; }
  .guide-section { padding: 16px; }
  .guide-section.full { grid-column: auto; }
  .simple-item { grid-template-columns: 1fr; gap: 3px; }

  .tool-panel { padding: 17px; border-radius: 16px; }
  .tool-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-card { padding: 14px; }
  .vehicle-step { grid-template-columns: 48px minmax(0,1fr); gap: 10px; padding: 12px; }
  .vehicle-step b:last-child { grid-column: 2; }
  .copy-box textarea { padding-right: .85rem; min-height: 230px; }
  .copy-box .button { position: static; width: 100%; margin-top: 8px; }
  .counter-wheel { width: min(300px, 100%); }
  .counter-node { width: 88px; min-height: 62px; font-size: .69rem; }

  /* Tables scroll as a unit instead of disappearing off-screen. */
  .hq-plan-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .8rem;
  }
  .hq-plan-table th,
  .hq-plan-table td { padding: .68rem .55rem; }

  /* Forms and player scan */
  .form-grid,
  .quick-profile-grid,
  .core-number-grid { grid-template-columns: 1fr; }
  .hero-row { grid-template-columns: 1fr; gap: 8px; }
  .hero-name-field { grid-column: auto; }
  .hero-row label span { white-space: normal; }
  .hero-remove { width: 100%; justify-self: stretch; }
  .scan-steps { grid-template-columns: 1fr; }
  .studio-intro { align-items: flex-start; flex-direction: column; }
  .studio-footer,
  .clean-studio-footer { flex-direction: column-reverse; align-items: stretch; }
  .studio-footer .button,
  .studio-footer-secondary .button { width: 100%; }
  .studio-footer-secondary { display: grid; grid-template-columns: 1fr; }

  /* Knowledge / updates */
  .knowledge-status-card,
  .knowledge-import-card,
  .knowledge-preview-card { padding: 17px; }
  .knowledge-meta-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .knowledge-meta-list span { min-width: 0; }
  .knowledge-workflow-grid { grid-template-columns: 1fr; }
  .knowledge-import-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .knowledge-preview-stats { grid-template-columns: 1fr; }
  .knowledge-publish-note { flex-direction: column; align-items: stretch; padding: 16px; }

  /* Officer/update area */
  .officer-heading,
  .officer-grid { grid-template-columns: 1fr; }
  .officer-heading { display: grid; align-items: start; }
  .note-card { grid-template-columns: 1fr; }
  .source-cards { grid-template-columns: 1fr; }

  /* Dialogs use the available mobile viewport rather than a desktop box. */
  dialog,
  .modal-card,
  .search-modal,
  .system-dialog,
  .clean-profile-dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto;
    border-radius: 15px;
  }
  .system-dialog-shell { max-height: calc(100dvh - 16px); }
  .system-dialog-head {
    grid-template-columns: 36px minmax(0,1fr) 36px;
    gap: 8px;
    padding: 10px 12px;
  }
  .system-dialog-icon { width: 36px; height: 36px; border-radius: 10px; }
  .system-dialog-content,
  .modal-body { padding: 14px; }
  .modal-head { padding: 12px 14px; }
  .search-head { grid-template-columns: 28px minmax(0,1fr) 36px; gap: 5px; padding: 9px; }
  .search-head input { min-width: 0; font-size: 1rem; }
  .search-results { max-height: calc(100dvh - 90px); }

  .toast {
    left: 10px;
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    transform: translateY(18px);
    width: auto;
    text-align: center;
  }
  .toast.show { transform: none; }

  footer {
    width: calc(100% - 28px);
    margin: 0 14px;
    padding: 22px 0 12px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Very small phones */
@media (max-width: 374px) {
  .view { padding-inline: 10px; }
  .system-nav, .tool-nav { width: calc(100% + 20px); margin-left: -10px; padding-inline: 10px; }
  .nav-button { font-size: .62rem; }
  .nav-button img { width: 25px; height: 25px; }
  .profile-pill { max-width: 76px; padding-inline: 6px; }
  .game-resource-dock { grid-template-columns: 1fr 1fr; }
  .clean-stage-hero, .clean-section, .clean-coach, .clean-today, .clean-quick-win, .clean-chatgpt { padding: 15px; }
}

/* Tablet: two-column layouts where they are genuinely useful. */
@media (min-width: 768px) and (max-width: 1099px) {
  .view { width: min(100% - 32px, var(--max)); }
  .clean-stage-hero { grid-template-columns: 1fr; }
  .stage-image-slot { min-height: 240px; }
  .clean-systems { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .knowledge-article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Large displays: use space without stretching reading lines too far. */
@media (min-width: 1280px) {
  :root { --max: 1280px; }
  .view { width: min(var(--max), calc(100% - 64px)); }
  .clean-stage-hero { gap: 42px; }
  .clean-stage-copy .stage-subtitle,
  .assessment-summary,
  .section-title-row p,
  .guide-hero p { max-width: 72ch; }
  .approved-tip-list { gap: 1rem; }
}

@media (min-width: 1680px) {
  :root { --max: 1360px; }
  .view { width: min(var(--max), calc(100% - 96px)); }
}