/* militarymovers.org — app surface.
   The other pages are pages. This one is a tool: it takes your inputs and
   returns your numbers, your dates, and your list. Nothing here is prose. */

.app{max-width:1080px;margin:0 auto;padding:0 28px}

/* ---- setup bar ---- */
.setup{background:var(--card);border:1px solid var(--hair);border-radius:5px;
  padding:22px 24px;box-shadow:var(--shadow);margin:26px 0 0}
.setup h2{font-size:19px;margin:0 0 3px;max-width:none;letter-spacing:-.018em}
.setup .hint{font-size:14.5px;color:var(--slate);margin:0 0 18px;max-width:none}
.grid5{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;align-items:end}
.f label{display:block;margin-bottom:6px}
.f input,.f select{font-family:inherit;font-size:16px;padding:11px 12px;width:100%;
  border:1px solid var(--hair);border-radius:3px;background:var(--paper);color:var(--ink)}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ---- summary chips (shown after setup) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;align-items:center}
.chip{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--brass-soft);color:var(--brass);padding:7px 12px;border-radius:99px;font-weight:600}
.chip.edit{background:transparent;border:1px solid var(--hair);color:var(--slate);cursor:pointer;font-weight:500}

/* ---- panels ---- */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin:20px 0 0}
.panel{background:var(--card);border:1px solid var(--hair);border-radius:6px;
  padding:24px;box-shadow:var(--shadow);min-width:0}
.panel.wide{grid-column:1/-1}
.panel h3{font-size:12px;font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:0 0 16px}
.money{display:block;font-weight:700;font-variant-numeric:tabular-nums;color:var(--brass);
  font-size:clamp(40px,7vw,60px);line-height:.94;letter-spacing:-.04em;margin:0}
.money-cap{font-size:15px;color:var(--slate);margin:8px 0 0;max-width:34ch}
.rows{margin:18px 0 0;border-top:1px solid var(--hair-soft)}
.row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--hair-soft);font-size:15.5px}
.row span:first-child{color:var(--slate)}
.row span:last-child{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.src{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--slate);
  margin:14px 0 0;line-height:1.6;word-break:break-word}
.src a{color:var(--slate)}

/* ---- timeline ---- */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--hair-soft)}
.tl li:last-child{border-bottom:0}
.tl .d{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink)}
.tl .t{font-size:15.5px;line-height:1.35;min-width:0}
.tl .t em{display:block;font-style:normal;font-size:13px;color:var(--slate);margin-top:2px}
.tl .c{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;font-weight:600}
.c.soon{color:var(--hold)}.c.now{color:#B3261E}.c.past{color:var(--slate);opacity:.6}
.c.ok{color:var(--slate)}
:root[data-theme="dark"] .c.now,
:root:not([data-theme="light"]) .c.now{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c.now{color:#FF8A80}}

/* ---- checklist ---- */
.prog{height:5px;background:var(--hair);border-radius:99px;overflow:hidden;margin:0 0 4px}
.prog i{display:block;height:100%;background:var(--brass);width:0;transition:width .2s}
.prog-cap{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin:0 0 18px}
.phase{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin:20px 0 8px}
.phase:first-of-type{margin-top:0}
.ck{display:flex;gap:11px;align-items:flex-start;padding:8px 0;cursor:pointer;font-size:15.5px;line-height:1.4}
.ck input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--go);cursor:pointer}
.ck.done span{text-decoration:line-through;color:var(--slate)}
.ck em{display:block;font-style:normal;font-size:13px;color:var(--slate);margin-top:2px}

/* ---- carrier lookup, compact ---- */
.look{display:flex;gap:9px;flex-wrap:wrap}
.look input{flex:1 1 190px;font-family:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--hair);border-radius:3px;background:var(--paper);color:var(--ink)}
.look button{margin-top:0;flex:0 0 auto}
.verdict{margin:18px 0 0;padding:16px 18px;border-radius:4px;border-left:3px solid var(--slate)}
.verdict.go{background:var(--accent-soft);border-left-color:var(--go)}
.verdict.caution{background:var(--hold-soft);border-left-color:var(--hold)}
.verdict.stop{background:var(--hold-soft);border-left-color:#B3261E}
.verdict b{display:block;font-size:17px;margin-bottom:4px;letter-spacing:-.01em}
.verdict p{font-size:14.5px;margin:0;max-width:none}

.tools{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.tools .btn{margin-top:0;font-size:15px;padding:11px 20px}
.empty{font-size:15.5px;color:var(--slate);margin:0}

@media (max-width:620px){
  .app{padding-left:20px;padding-right:20px}
  .panel{padding:20px}
  .tl li{grid-template-columns:74px 1fr;row-gap:2px}
  .tl .c{grid-column:2;justify-self:start}
}
@media print{
  .topbar,.setup,.tools,.look,footer,.chip.edit{display:none!important}
  .panel{box-shadow:none;break-inside:avoid;border-color:#999}
  body{background:#fff;font-size:12px}
}

/* The tool wears the same clothes as the rest of the site. */
.setup{position:relative;overflow:hidden}
.setup::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-hair))}
.setup h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:24px;letter-spacing:-.01em}
.panel h3{color:var(--brass)}
.money-cap{color:var(--slate)}