/* Pot Life's visual adapter. The simulation and authored catalog stay independent. */
:root {
  --navy: var(--bo-navy);
  --navy2: #0e314c;
  --brass: var(--bo-brass);
  --gold: var(--bo-gold);
  --lightgold: #d4be88;
  --slate: var(--bo-muted);
  --paper: var(--bo-paper);
  --white: var(--bo-surface);
  --line: var(--bo-line);
  --muted: var(--bo-muted);
  --radius: 10px;
  background: var(--bo-bg);
  color: var(--bo-text);
  font-family: var(--bo-font-ui);
}
#app { color: var(--bo-text); font-family: var(--bo-font-ui); }
#app .mono { font-family: var(--bo-font-mono); }
#app .hero h1, #app .page-head h1 { font-family: var(--bo-font-heading); font-weight: 700; letter-spacing: -.035em; }
#app .wordmark { font-family: var(--bo-font-ui); font-weight: 700; letter-spacing: -.025em; }
#app .brand-sub { color: var(--bo-muted); }
#app .brass { color: var(--bo-gold); }
#app .topbar { background: var(--bo-paper); }
#app .topnav, #app .segmented { background: var(--bo-bg); border: 1px solid var(--bo-line); border-radius: 8px; }
#app .topnav button, #app .segmented button { border-radius: 5px; }
#app .topnav button.active, #app .segmented button.active, #app .learn-menu button.active {
  background: var(--bo-primary); color: var(--bo-on-primary); border-color: var(--bo-primary);
}
#app .btn { background: var(--bo-primary); color: var(--bo-on-primary); border-color: var(--bo-primary); border-radius: 6px; }
#app .btn:hover { background: var(--bo-primary-hover); border-color: var(--bo-primary-hover); }
#app .btn.primary { background: var(--bo-brass); border-color: var(--bo-brass); color: #071c2e; }
#app .btn.primary:hover { background: #d4be88; border-color: #d4be88; }
#app .btn.outline, #app .btn.text { background: transparent; color: var(--bo-text); border-color: var(--bo-line); }
#app .btn.text { border-color: transparent; }
#app .btn.outline:hover { border-color: var(--bo-text); }
#app .mission, #app .panel, #app .live-metric, #app .learn-menu button, #app .quiz-card .choice {
  background: var(--bo-surface);
}
#app .mission-top { background: var(--bo-blue-soft); }
#app .mission-badge { background: var(--bo-paper); color: var(--bo-text); }
#app .choice, #app .layer, #app .worker, #app .stat, #app .bucket, #app .quiz-card { background: var(--bo-paper); }
#app .choice.selected, #app .route-choice.active { background: var(--bo-blue-soft); color: var(--bo-text); border-color: var(--bo-primary); }
#app .selected .choice-dot:after { background: var(--bo-primary); }
#app .lesson-note, #app .status-banner, #app .coach-btn { background: var(--bo-brass-soft); color: var(--bo-text); }
#app .coach-btn { border-color: var(--bo-gold); border-radius: 6px; }
#app .field input, #app .field select, #app .search {
  background: var(--bo-surface); color: var(--bo-text); border-radius: 6px;
}
#app .worker select, #app .layer select { color: var(--bo-text); }
#app option { background: var(--bo-surface); color: var(--bo-text); }
#app .worker-avatar { background: var(--bo-primary); color: var(--bo-on-primary); }
#app .stepper button.active { color: var(--bo-text); border-bottom-color: var(--bo-gold); }
#app .active .step-number { background: var(--bo-primary); color: var(--bo-on-primary); border-color: var(--bo-primary); }
#app .bar, #app .progress-track { background: var(--bo-line); }
#app .panel.dark, #app .floor-board, #app .report-header, #app .formula-box {
  background-color: #071c2e; color: var(--bo-on-dark); border-color: #294253;
}
#app .panel.dark .btn.outline { color: var(--bo-on-dark); border-color: #71838c; }
#app .panel.dark .eyebrow { color: #d4be88; }
#app .panel.dark .small-note, #app .panel.dark .check-detail { color: #bbc7ce; }
#app .hero-art { background-color: #071c2e; border-radius: 12px; }
#app .hero-flag { color: var(--bo-on-dark); }
#app .hero-art .eyebrow { color: #d4be88; }
#app .floor-board .brass { color: #d4be88; }
#app .score-ring:before { background: #071c2e; }
#app .check-mark.good { color: #071c2e; }
#app .learn-menu button.active { background: var(--bo-primary); color: var(--bo-on-primary); }
#app .learn-menu button.active .num { color: inherit; }
#app .learn-menu button.active small { color: inherit; opacity: .82; }
#app .modal-backdrop { z-index: 80; }
#app .modal { background: var(--bo-paper); color: var(--bo-text); border: 1px solid var(--bo-line); border-radius: 10px; }
#toast { z-index: 90; background: #071c2e; color: var(--bo-on-dark); }
#app .topnav button:focus-visible, #app button:focus-visible, #app a:focus-visible, #app input:focus-visible, #app select:focus-visible { outline-color: var(--bo-gold); }
#app .brand-icon { width: 36px; height: 36px; flex: none; }
#app .live-section-nav, #app .floor-pan-hint { display: none; }

/* Reviewed Academy jobs keep their quoted baseline visible beside the live plan. */
#app .campaign-connection { margin-block: 22px 4px; }
#app .campaign-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: center; gap: 24px; padding: 22px 24px;
  background: var(--bo-paper); border: 1px solid var(--bo-line);
  border-inline-start: 4px solid var(--bo-gold); border-radius: 10px;
}
#app .campaign-card > *, #app .campaign-metrics > * { min-width: 0; }
#app .campaign-card h2 { margin: 5px 0 10px; font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
#app .campaign-card p { font-size: 13px; line-height: 1.6; }
#app .campaign-actions { display: grid; gap: 10px; }
#app .campaign-actions .btn { min-height: 44px; white-space: normal; text-align: center; }
#app .campaign-metrics { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 18px 0 4px; }
#app .campaign-metrics dt { font-size: 11px; color: var(--bo-muted); margin-bottom: 4px; }
#app .campaign-metrics dd { margin: 0; font: 600 19px/1.35 var(--bo-font-mono); overflow-wrap: anywhere; }
#app .campaign-message, #app .campaign-cost-note {
  margin-top: 14px; padding: 12px 14px; border-radius: 6px;
  background: var(--bo-brass-soft); color: var(--bo-text); overflow-wrap: anywhere;
}
#app .campaign-review-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
#app .campaign-review-metrics dd { font-size: 17px; }
#app .campaign-assembly { padding-block: 14px; border-block: 1px solid var(--bo-line); font-size: 14px; }
#app .campaign-notes { padding-inline-start: 20px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#app .campaign-notes li + li { margin-top: 8px; }
#app .campaign-review-metrics + p ~ .small-note { margin-block: 14px; }
@media (max-width: 800px) {
  #app .campaign-card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #app .campaign-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #app .campaign-connection { margin-block: 16px 4px; }
  #app .campaign-card { padding: 18px 16px; }
  #app .campaign-card h2 { font-size: 21px; }
  #app .campaign-actions { grid-template-columns: minmax(0, 1fr); }
  #app .campaign-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #app .campaign-metrics dd { font-size: 16px; }
  #app .campaign-metrics dt { font-size: 11px; }
}
@media print {
  #app .campaign-connection { margin-block: 0 18px; }
  #app .campaign-card { display: block; border-color: var(--bo-line); background: white; break-inside: avoid; }
  #app .campaign-actions, #app .campaign-message { display: none; }
}

/* Let form controls and nested layouts shrink inside the available screen. */
#app .hero > *, #app .two-col > *, #app .live-layout > *,
#app .learn-layout > *, #app .mission-body, #app .layer-content,
#app .worker-info, #app .field, #app .table-wrap, #app .comparison { min-width: 0; }
#app .field input, #app .field select, #app .layer select, #app .worker select {
  min-width: 0; max-width: 100%;
}
#app .modal {
  width: 100%;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 800px) {
  #app .brand, #app .btn.small, #app .topnav button, #app .segmented button,
  #app .coach-btn, #app .help-summary, #app .toggle { min-height: 44px; }
  #app .topnav button, #app .segmented button { min-width: 44px; }
  #app .field input, #app .field select, #app .layer select, #app .worker select {
    font-size: 16px; min-height: 44px;
  }
  #app .toggle input { width: 20px; height: 20px; flex: none; }
  #app .help-summary { padding: 10px 0; }
  #app .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .learn-menu { scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
  #app .learn-menu button { font-size: 13px; scroll-snap-align: start; }
  #app .learn-menu small { display: block; font-size: 11px; }
  #app .small-note, #app .worker .worker-state, #app .layer-content small,
  #app .bucket-sub, #app .check-detail, #app .help-content { font-size: 12px; }
  #app .choice, #app .lesson-note { font-size: 14px; }
  #app .footer { font-size: 11px; }
  #app .source-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
}

@media (max-width: 640px) {
  #app .container { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  #app .topbar {
    height: auto; min-height: 0; padding: 14px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
    flex-wrap: wrap; gap: 12px;
  }
  #app .brand-icon { width: 34px; height: 34px; }
  #app .brand-sub { font-size: 8px; }
  #app .topnav { width: 100%; order: 2; padding: 0; gap: 6px; border: 0; background: transparent; }
  #app .topnav button { flex: 1; min-width: 0; font-size: 12px; padding: 10px 6px; }
  #app .hero { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  #app .hero h1 { font-size: clamp(38px, 10.5vw, 50px); }
  #app .hero p { font-size: 15px; }
  #app .hero .btn { min-height: 44px; font-size: 13px; }
  #app .hero-caption { flex-wrap: wrap; gap: 5px; font-size: 9px; }
  #app .mission-grid { grid-template-columns: minmax(0, 1fr); }
  #app .mission { display: block; }
  #app .mission-top { height: 150px; padding: 18px; border-right: 0; border-bottom: 1px solid var(--bo-line); }
  #app .mission-top .floor-svg { width: 230px; max-width: 100%; min-width: 0; height: 145px; }
  #app .mission-body { padding: 18px; }
  #app .mission-body h3 { font-size: 23px; }
  #app .mission-body p { font-size: 14px; min-height: 0; }
  #app .mission-body .eyebrow { font-size: 10px; }
  #app .mission-stats { flex-wrap: wrap; font-size: 12px; gap: 8px 16px; }
  #app .mission-footer { flex-wrap: wrap; gap: 10px; }
  #app .mission-footer .btn { font-size: 12px; min-height: 44px; padding: 10px 14px; }
  #app .panel, #app .live-side .panel { padding: 18px; }
  #app .row { flex-wrap: wrap; }
  #app .row > * { min-width: 0; }
  #app .job-head > .row { flex-wrap: nowrap; gap: 10px; }
  #app .job-head .badge-note { max-width: 88px; flex: none; text-align: center; }
  #app .job-head h2 { font-size: 24px; }
  #app .stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 18px 0 22px; }
  #app .stepper button {
    flex-direction: column; justify-content: flex-start; gap: 7px; min-width: 0;
    min-height: 78px; padding: 10px 3px; font-size: 11px; white-space: normal; line-height: 1.35;
  }
  #app .step-number { width: 22px; height: 22px; flex: none; font-size: 11px; }
  #app .field { font-size: 12px; }
  #app .field small { font-size: 11px; }
  #app .layer { align-items: flex-start; gap: 10px; padding: 12px; }
  #app .layer-no { padding-top: 2px; }
  #app .layer label { line-height: 1.5; }
  #app .worker { padding: 10px; gap: 10px; }
  #app .worker .eyebrow { font-size: 10px; }
  #app .segmented[aria-label="Crew size"] { width: 100%; }
  #app .segmented[aria-label="Crew size"] button { padding: 8px 4px; font-size: 12px; min-width: 0; }
  #app .route-options { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #app .route-choice { padding: 13px 14px; font-size: 14px; min-height: 44px; }
  #app .route-choice span { font-size: 12px; }
  #app .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .stat { padding: 12px 8px; }
  #app .stat .label { font-size: 10px; letter-spacing: .025em; overflow-wrap: anywhere; }
  #app .stat .value { font-size: 23px; }
  #app .stat .unit { display: block; font-size: 11px; margin-top: 3px; }
  #app .bottom-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  #app .bottom-actions > .row { display: grid; gap: 10px; }
  #app .bottom-actions .btn { width: 100%; min-height: 46px; font-size: 13px; }
  #app .bottom-actions .small-note { max-width: none; font-size: 12px; }
  #app .system-score { align-items: flex-start; }
  #app .system-score h3 { font-size: 18px; }
  #app .check-list li { font-size: 12px; }
  #app .budget-table { font-size: 12px; }
  #app .budget-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .budget-split small { font-size: 10px; }
  #app .data-table { font-size: 12px; }
  #app .data-table th { font-size: 11px; }
  #app .formula-box { padding: 16px; }
  #app .formula-box code { font-size: 12px; overflow-wrap: anywhere; }
  #app .material-head p, #app .material-columns ul, #app .answer-feedback { font-size: 14px; }
  #app .reference p { font-size: 13px; }
  #app .reference h4 { font-size: 15px; }
  #app .field-article .body-copy { font-size: 15px; }

  /* Keep the floor, batches and crew one tap away while the clock is running. */
  #app .live-job { padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }
  #app .live-section-nav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    position: sticky; top: calc(var(--bo-header-height, 120px) - 1px); z-index: 20;
    margin-bottom: 14px; padding: 8px 0; background: var(--bo-bg); border-bottom: 1px solid var(--bo-line);
  }
  #app .live-section-nav a {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 8px; border: 1px solid var(--bo-line); border-radius: 6px;
    background: var(--bo-paper); font-size: 13px; font-weight: 700; text-decoration: none;
  }
  #app #installation-floor, #app #mixing-station, #app #crew-station {
    scroll-margin-top: calc(var(--bo-header-height, 120px) + 76px);
  }
  #app .live-side { grid-template-columns: minmax(0, 1fr); }
  #app .floor-header { align-items: flex-start; }
  #app .floor-header > :first-child { min-width: 0; }
  #app .floor-header > :last-child { flex: none; }
  #app .floor-header h3 { font-size: 17px; }
  #app .floor-header .eyebrow { font-size: 10px; }
  #app .live-clock { font-size: 25px; }
  #app .floor-frame { display: block; height: auto; overflow-x: auto; margin: 14px 0 8px; }
  #app .floor-frame .floor-svg { width: 100%; min-width: 480px; max-width: none; height: auto; }
  #app .floor-pan-hint { display: block; margin: 4px 0 12px; color: #c8d1d9; font-size: 12px; }
  #app .floor-legend { font-size: 11px; gap: 8px 12px; }
  #app .floor-selection { font-size: 12px; }
  #app .timer-strip { gap: 7px; }
  #app .timer-strip small { font-size: 10px; line-height: 1.5; }
  #app .timer-strip span { font-size: 11px; line-height: 1.5; }
  #app .live-controls {
    position: fixed; z-index: 30; inset: auto 0 0; margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--bo-paper); border-top: 1px solid var(--bo-line); box-shadow: 0 -5px 20px #071c2e14;
  }
  #app .live-controls .btn { font-size: 12px; min-height: 44px; padding: 10px; }
  #app .live-controls .segmented { margin: 0; padding: 3px; gap: 3px; }
  #app .live-controls .segmented button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 8px 4px; font-size: 12px; }
  #app .live-controls [data-action="end-run"] { grid-column: 1 / -1; }
  #app .live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .live-metric .eyebrow { font-size: 10px; }
  #app .live-metric small { font-size: 11px; }
  #app .bucket-head { font-size: 13px; flex-wrap: wrap; gap: 6px; }
  #app .bucket-empty, #app .event { font-size: 12px; }
  #app .modal-backdrop { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  #app .modal { padding: 20px; }
  #app .modal .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #app .modal .btn { width: 100%; }
  #toast { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 480px) and (max-width: 640px) {
  #app .live-controls { grid-template-columns: minmax(0, 1fr) auto auto; }
  #app .live-controls [data-action="end-run"] { grid-column: auto; }
  #app .live-job { padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
  #toast { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 430px) {
  #app .field-grid { grid-template-columns: minmax(0, 1fr); }
  #app .material-head { flex-direction: column; }
  #app .timer-strip { grid-template-columns: minmax(0, 1fr); }
  #app .timer-strip > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 12px; }
  #app .timer-strip strong { grid-column: 2; grid-row: 1 / 3; align-self: center; white-space: nowrap; }
  #app .timer-strip span { grid-column: 1; }
  #app .report-header { flex-direction: column; }
  #app .recoat-labels { gap: 10px; font-size: 11px; line-height: 1.4; }
  #app .film-result { flex-wrap: wrap; gap: 16px 24px; }
}

/* A short landscape screen needs its height for the active job content. */
@media (max-width: 640px) and (max-height: 500px) {
  #app .live-section-nav { position: static; }
  #app .live-controls {
    position: static; margin-top: 14px; padding: 10px;
    border: 1px solid var(--bo-line); border-radius: 8px; box-shadow: none;
  }
  #app .live-job { padding-bottom: env(safe-area-inset-bottom, 0px); }
  #app #installation-floor, #app #mixing-station, #app #crew-station {
    scroll-margin-top: calc(var(--bo-header-height, 120px) + 16px);
  }
  #toast { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
@media print {
  :root { --paper: white; --muted: #586b7c; --line: #d9d5cd; }
  body[data-game], #app { background: white; color: #071c2e; }
  #app .panel, #app .report-header, #app .panel.dark { background: white !important; color: #071c2e !important; border-color: #d9d5cd; }
  #app .panel.dark .small-note, #app .panel.dark .eyebrow, #app .panel.dark .check-detail { color: #586b7c; }
}

/* Custom floor authoring and visual after-action tools share the training palette. */
#app .mode-picker { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(200px, 1fr); align-items: center; gap: 22px; }
#app .rescue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
#app .rescue-grid > h2 { grid-column: 1 / -1; }
#app .rescue-grid .panel { display: flex; flex-direction: column; align-items: flex-start; }
#app .rescue-grid .btn { margin-top: auto; }
#app .rescue-grid p { margin-bottom: 20px; }
#app .rescue-brief { border-inline-start: 4px solid var(--bo-gold); }
#app .modal:has(.layout-editor), #app .modal:has(.job-plan-sheet) { max-width: 1000px; }
#app .layout-scroll { overflow-x: auto; max-width: 100%; padding: 12px 4px; }
#app .layout-grid { display: grid; gap: 4px; width: max-content; }
#app .layout-tile { width: 44px; height: 44px; border: 1px dashed var(--bo-muted); border-radius: 4px; background: var(--bo-paper); color: var(--bo-muted); font: 700 17px/1 var(--bo-font-ui); }
#app .layout-tile.filled { background: var(--bo-primary); color: var(--bo-on-primary); border-style: solid; }
#app .layout-tile.selected { box-shadow: inset 0 0 0 3px var(--bo-gold); }
#app .layout-editor .field input { min-height: 44px; }
#app .field input[readonly] { background: var(--bo-blue-soft); }
#app .sheet-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#app .job-plan-sheet { margin-block: 24px; font-size: 13px; line-height: 1.6; }
#app .job-plan-sheet svg { display: block; width: 100%; max-height: 350px; margin-block: 16px; }
#app .job-plan-sheet h3 { margin-block: 18px 8px; }
#app .job-plan-sheet ul, #app .job-plan-sheet ol { padding-inline-start: 22px; }
#app .job-plan-sheet li { margin-block: 6px; overflow-wrap: anywhere; }
#app .job-plan-sheet table { width: 100%; border-collapse: collapse; margin-block: 12px; }
#app .job-plan-sheet th, #app .job-plan-sheet td { text-align: left; border-bottom: 1px solid var(--bo-line); padding: 8px; }
#app .job-plan-sheet dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
#app .job-plan-sheet dl div { display: flex; justify-content: space-between; gap: 14px; }
#app .job-plan-sheet dd { margin: 0; font-family: var(--bo-font-mono); }
#app .job-plan-sheet footer { border-top: 1px solid var(--bo-line); margin-top: 18px; padding-top: 12px; font-size: 12px; }
#app .replay-floor { max-width: 720px; padding: 16px; margin-top: 14px; }
#app .replay-floor .floor-svg { width: 100%; min-width: 0; height: auto; max-height: 420px; }
#app [data-replay-frame] { width: 100%; min-height: 44px; accent-color: var(--bo-gold); }
#app .material-flow { display: flex; height: 24px; background: var(--bo-line); margin-block: 12px; border: 1px solid var(--bo-line); }
#app .material-flow .placed { background: var(--bo-primary); }
#app .material-flow .wasted { background: repeating-linear-gradient(45deg,#c5ae79 0 3px,#496072 3px 6px); }
#app .material-flow .remaining { background: #8ca0ad; }
#app .crew-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
#app .crew-flow > span { flex: 1 1 85px; text-align: center; background: var(--bo-blue-soft); border: 1px solid var(--bo-line); padding: 8px; font-size: 11px; }
#app .crew-flow strong { display: block; font: 700 22px var(--bo-font-mono); margin-top: 6px; }
@media (max-width: 640px) {
 #app .mode-picker, #app .rescue-grid, #app .sheet-layout, #app .job-plan-sheet dl { grid-template-columns: minmax(0, 1fr); }
 #app .modal .layout-grid { display: grid; }
 #app .modal .layout-tile { width: 44px; }
 #app .job-plan-sheet { font-size: 12px; }
 #app .job-plan-sheet th, #app .job-plan-sheet td { padding: 6px 3px; }
}
@media print {
 body.printing-plan > *:not(#game-content), body.printing-plan #game-content > *:not(#app), body.printing-plan #app > *:not(#modal) { display: none !important; }
 body.printing-plan #modal { display: block; position: static; background: white; padding: 0; }
 body.printing-plan #modal .modal { max-height: none; overflow: visible; border: 0; padding: 0; width: 100%; max-width: none; }
 body.printing-plan #modal .modal > *:not(#job-plan-sheet) { display: none !important; }
 body.printing-plan #job-plan-sheet { color: #071c2e; margin: 0; }
 body.printing-plan #job-plan-sheet section, body.printing-plan #job-plan-sheet table { break-inside: avoid; }
 #app [data-replay-frame], #app [data-replay-coat] { display: none; }
 #app .replay-floor { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}