/* The tag application planner (/apply/) and the state deadline pages */
.planner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.planner .check, .planner .states, .planner button { grid-column: 1 / -1; }
.planner .check { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.planner input[type="number"] { width: 100%; }
.states { border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
.states legend { font-weight: 700; padding: 0 4px; }
.states .st { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; }
.states .st label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.states .st input[type="number"] { padding: 8px; }
.states .st small { grid-column: 1 / -1; color: var(--muted); font-weight: 400; font-size: 13px; margin-top: -4px; }
.ap-state { border-top: 1px solid var(--line); padding: 20px 0 6px; }
.ap-state > h2 { margin: 0 0 6px; }
.ap-group { margin: 18px 0 8px; }
.ap-group h3 { font-size: 19px; margin: 0 0 6px; }
.ap-hunt { background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 12px; margin: 10px 0; }
.ap-hunt h4 { margin: 0 0 4px; font-size: 16px; }
.ap-hunt h4 code { font-family: var(--mono, monospace); font-size: 15px; }
.ap-hunt p { margin: 4px 0; font-size: 15px; }
.ap-hunt .meta { color: var(--muted); font-size: 14px; }
.ap-hunt table { font-size: 14px; margin: 6px 0; }
.ap-hunt td, .ap-hunt th { padding: 4px 6px; }
.ap-hunt .src { font-size: 13px; color: var(--muted); }
.ap-hunt .act { margin-top: 8px; }
.ap-more { margin: 6px 0 14px; }
.ap-warn { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--muted); font-size: 15px; }
.wait { margin: 24px 0; }
.wait > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.wait label { flex: 1 1 220px; }
/* Phone width: nothing in the form may push the page wider than the screen */
.planner { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.planner select, .planner input[type="number"], .states select { min-width: 0; max-width: 100%; width: 100%; }
.planner label, .states .st, .states .st label { min-width: 0; }
.planner input[type="checkbox"], .states input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 0; }
.states .st label { justify-content: flex-start; }
.planner .check { justify-content: flex-start; }
.ap-hunt h4, .ap-hunt p { overflow-wrap: anywhere; }