.bottom-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.patrol-heading { display: none; }
body[data-view="patrol"] .patrol-heading { display: block; }
body[data-view="patrol"] .toolbar-title h1:not(.patrol-heading),
body[data-view="patrol"] #locate-current,
body[data-view="patrol"] .toolbar-actions { display: none; }
.patrol-view { position: fixed; inset: 60px 0 calc(52px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 0; }
.patrol-view[hidden] { display: none; }
.patrol-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 12px; }
.patrol-summary { flex: 0 0 auto; }
.patrol-summary strong { grid-column: 1 / -1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#patrol-progress { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
#patrol-diversity { grid-column: 1 / -1; color: #13754e; font-size: 12px; overflow-wrap: anywhere; }
#patrol-phase { color: #155eef; font-weight: 700; }
.patrol-map-wrap { position: relative; width: 100%; flex: 1 1 0; min-height: 0; }
#patrol-map { width: 100%; height: 100%; min-height: 0; }
.patrol-more { position: absolute; right: 12px; top: 62px; z-index: 600; }
.patrol-more summary { display: grid; place-items: center; width: 42px; height: 42px; cursor: pointer; background: white; border: 1px solid var(--line); border-radius: 6px; font-size: 24px; list-style: none; box-shadow: 0 1px 5px #0003; }
.patrol-more summary::-webkit-details-marker { display: none; }
.patrol-more-panel { position: fixed; top: 100px; right: 12px; width: min(280px, calc(100vw - 24px)); padding: 8px; background: white; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 3px 14px #0003; }
.patrol-more-panel .patrol-handoff { padding: 0; }
.patrol-more-panel .patrol-footnote { padding: 8px 0 0; }
.patrol-follow { position: absolute; right: 12px; top: 12px; z-index: 500; width: 42px; height: 42px; padding: 0; background: white; color: #155eef; font-size: 24px; box-shadow: 0 1px 5px #0003; }
.patrol-follow.active { background: #eaf1ff; }
.patrol-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 12px; font-size: 12px; }
.patrol-legend span::before { content: ""; display: inline-block; width: 16px; height: 4px; margin-right: 5px; vertical-align: middle; }
.outbound-key::before { background: #155eef; }
.inbound-key::before { background: #159765; }
.visited-key::before { background: #8b949e; }
.cooldown-key::before { background: #a66a06; }
.position-key::before { background: #e54949; height: 8px; width: 8px; border-radius: 50%; }
.gym-key::before { background: #35434d; height: 8px; width: 8px; border-radius: 50%; }
.patrol-status { margin: 0; padding: 6px 12px; flex: 0 0 52px; min-height: 52px; font-size: 13px; line-height: 20px; overflow: hidden; overflow-wrap: anywhere; box-sizing: border-box; }
.patrol-legend, .patrol-controls { flex: 0 0 auto; }
.patrol-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 12px; }
.patrol-controls button { min-height: 44px; padding: 8px 4px; }
.patrol-controls button:enabled { background: var(--control-color, #155eef); border-color: var(--control-color, #155eef); color: #fff; font-weight: 700; }
#patrol-joystick, #patrol-pause.is-resume { --control-color: #13754e; }
#patrol-pause { --control-color: #946200; }
#patrol-cancel-route, #patrol-stop { --control-color: #b42318; }
.patrol-controls button:enabled:hover { filter: brightness(.9); }
.patrol-controls button:enabled:active { filter: brightness(.8); }
.patrol-controls button:focus-visible { outline: 3px solid #20252b; outline-offset: 2px; }
.patrol-controls button:disabled { background: #e4e7eb; border-color: #cbd0d6; color: #69717d; opacity: 1; cursor: not-allowed; filter: none; }
.patrol-control-group { flex: 0 0 auto; border-top: 1px solid var(--line); background: #fff; }
.patrol-control-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 12px 0; font-size: 12px; }
.patrol-control-heading span { text-align: right; color: #155eef; min-width: 0; overflow-wrap: anywhere; }
.patrol-route-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.patrol-control-group .patrol-controls { padding-top: 5px; }
#patrol-plan-dialog button[hidden], #patrol-plan-busy[hidden] { display: none; }
#patrol-plan-dialog button { margin-top: 4px; margin-bottom: 8px; min-height: 44px; }
#patrol-plan-walk { background: #155eef; color: white; }
.patrol-plan-busy { height: 4px; margin: 0 14px 12px; background: #e6ecf3; overflow: hidden; }
.patrol-plan-busy::after { content: ""; display: block; width: 30%; height: 100%; background: #159765; animation: patrol-planning 1.2s ease-in-out infinite alternate; }
@keyframes patrol-planning { from { transform: translateX(0); } to { transform: translateX(233%); } }
@media (prefers-reduced-motion: reduce) { .patrol-plan-busy::after { animation: none; width: 100%; } }
.patrol-handoff { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 8px 12px; }
.patrol-handoff[hidden] { display: none; }
.patrol-action { display: flex; align-items: center; justify-content: center; padding: 10px 12px; min-height: 44px; background: #155eef; border-radius: 6px; color: white; text-decoration: none; font-size: 14px; font-weight: 700; }
.patrol-action:hover { background: #124fc8; }
.patrol-footnote { margin: 0; padding: 8px 12px 16px; font-size: 12px; color: var(--muted); }
.patrol-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.patrol-settings-grid label { display: grid; gap: 6px; font-size: 14px; }
.patrol-settings-grid input { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  body[data-view="patrol"] main { padding: var(--mobile-settings-toolbar-height) 0 var(--mobile-tabs-height); }
  body[data-view="patrol"] .toolbar-top { grid-template-columns: 1fr; }
  body[data-view="patrol"] .toolbar-title h1 { grid-column: 1; grid-row: 1; }
  .patrol-view { inset: var(--mobile-settings-toolbar-height) 0 var(--mobile-tabs-height); height: auto; padding: 0; overflow: hidden; }
  .patrol-settings-grid { grid-template-columns: 1fr; }
  .bottom-tabs button { font-size: 13px; padding: 6px 2px; }
}
@media (max-height: 600px) {
  .patrol-summary { padding: 5px 10px; gap: 3px 8px; }
  #patrol-diversity { display: none; }
  .patrol-legend { padding: 4px 10px; gap: 4px 10px; }
  .patrol-controls { padding: 4px 10px; }
}