/* Layout: search card → shipment switcher (2+ results) → status hero with 4-stage progress →
   two columns: timeline (main) + key stats + parcel facts (aside); single column under 880px */
:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#ECEFF5; --line:#DCE1EA;
  --ink:#121A2B; --muted:#586277; --faint:#8B93A6;
  --accent:#2B4FD4; --accent-soft:#E5EAFD; --on-accent:#FFFFFF;
  --ok:#11764B; --ok-soft:#DFF3E8;
  --warn:#955700; --warn-soft:#FFF0D6;
  --danger:#B42330; --danger-soft:#FDE6E8;
  --shadow-c:rgba(18,26,43,.08);
  --shadow:0 1px 2px rgba(18,26,43,.05), 0 8px 24px rgba(18,26,43,.05);
  --font-display:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D121C; --surface:#151B28; --surface-2:#1C2333; --line:#293245;
    --ink:#E7EBF3; --muted:#A0A9BC; --faint:#6E788F;
    --accent:#86A0FF; --accent-soft:#1D284A; --on-accent:#0D121C;
    --ok:#4FCB8F; --ok-soft:#12301F;
    --warn:#F0B14E; --warn-soft:#33260F;
    --danger:#FF7D86; --danger-soft:#3A161B;
    --shadow-c:rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D121C; --surface:#151B28; --surface-2:#1C2333; --line:#293245;
  --ink:#E7EBF3; --muted:#A0A9BC; --faint:#6E788F;
  --accent:#86A0FF; --accent-soft:#1D284A; --on-accent:#0D121C;
  --ok:#4FCB8F; --ok-soft:#12301F;
  --warn:#F0B14E; --warn-soft:#33260F;
  --danger:#FF7D86; --danger-soft:#3A161B;
  --shadow-c:rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.55 var(--font-body); -webkit-font-smoothing:antialiased;
  padding-block:max(28px, env(safe-area-inset-top, 0px)) max(56px, env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
img{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
.detail{display:flex; flex-direction:column; gap:20px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* Page header */
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 24px}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
h1{margin:4px 0 0; font:700 28px/1.2 var(--font-display); letter-spacing:-.02em; text-wrap:balance}
.page-head p{margin:0; color:var(--muted); font-size:13px}

/* Search form */
.search{padding:18px 20px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow)}
@media (max-width:640px){.search{padding:16px}}
.field-label{font-size:13px; font-weight:600}
.search-row{display:flex; flex-wrap:wrap; gap:10px}
.input{
  flex:1 1 260px; min-width:0; color:var(--ink); background:var(--surface-2);
  font:500 16px/1.4 var(--font-mono); letter-spacing:.02em;
  border:1px solid var(--line); border-radius:10px; padding:11px 14px;
}
.input::placeholder{color:var(--faint); font-family:var(--font-body); font-weight:400; letter-spacing:0}
.input:focus{outline:2px solid var(--accent); outline-offset:1px; background:var(--surface)}
.btn-primary{
  font:600 15px/1 var(--font-body); color:var(--on-accent); background:var(--accent);
  border:0; border-radius:10px; padding:0 24px; min-height:46px; cursor:pointer;
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:480px){.btn-primary{flex:1 1 100%}}
.hint{margin:0; font-size:12.5px; color:var(--faint)}
.form-error{margin:0; color:var(--danger); font-size:13.5px}

/* Shipment switcher */
.tickets{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
@media (max-width:640px){.tickets{grid-template-columns:minmax(0,1fr)}}
.ticket{
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s;
}
.ticket:hover{border-color:var(--faint)}
.ticket[aria-selected="true"]{border-color:var(--prog); box-shadow:0 0 0 1px var(--prog), var(--shadow)}
.ticket:focus-visible, .btn:focus-visible, .seg button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ticket-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.carrier{font-size:12px; font-weight:600; color:var(--muted)}
.ticket-no{font:600 19px/1.2 var(--font-mono); letter-spacing:.03em; overflow-wrap:anywhere}
.ticket-route{font-size:13px; color:var(--muted); overflow-wrap:anywhere}
.mini{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.mini span{height:4px; border-radius:2px; background:var(--surface-2)}
.mini span.on{background:var(--prog)}

/* Status semantics */
.is-ok{--prog:var(--ok); --pill-bg:var(--ok-soft); --pill-fg:var(--ok)}
.is-transit{--prog:var(--accent); --pill-bg:var(--accent-soft); --pill-fg:var(--accent)}
.is-cancel, .is-error{--prog:var(--danger); --pill-bg:var(--danger-soft); --pill-fg:var(--danger)}
.is-loading{--prog:var(--faint); --pill-bg:var(--surface-2); --pill-fg:var(--muted)}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--pill-bg); color:var(--pill-fg); white-space:nowrap;
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.is-loading .pill::before{display:none}
.spinner{display:inline-block; width:11px; height:11px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent}
.spinner.big{width:28px; height:28px; border-width:3px; color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .spinner{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
}

/* Cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); min-width:0}
.btn{
  font:inherit; font-size:12px; font-weight:600; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:4px 10px; cursor:pointer;
}
.btn:hover{border-color:var(--faint)}

/* Empty, loading and error states */
.state-card{padding:40px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.state-card h2{margin:0; font:600 19px/1.35 var(--font-display); text-wrap:balance}
.state-card p{margin:0; max-width:56ch; color:var(--muted); font-size:14px}
.state-card.is-error h2{color:var(--danger)}
.empty-note{margin:0; padding:16px 20px; color:var(--muted); font-size:14px}

/* Hero */
.hero{padding:22px 24px; display:flex; flex-direction:column; gap:22px; box-shadow:var(--shadow)}
@media (max-width:640px){.hero{padding:18px 16px}}
.hero-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
.hero-status{min-width:0; flex:1 1 360px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.hero h2{margin:4px 0 0; font:700 26px/1.2 var(--font-display); letter-spacing:-.015em; text-wrap:balance}
.hero-sub{color:var(--muted); font-size:14px; margin:0}
.hero-sub strong{color:var(--ink); font-weight:600}
.idbox{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
@media (max-width:640px){.idbox{align-items:flex-start}}
.idrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.idrow .mono{font-size:16px; font-weight:600; letter-spacing:.03em}

/* Progress stepper */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.step{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 4px}
.step::before{content:""; position:absolute; top:11px; right:50%; width:100%; height:3px; background:var(--surface-2)}
.step:first-child::before{display:none}
.step.done::before, .step.current::before{background:var(--prog)}
.step-dot{
  position:relative; z-index:1; width:24px; height:24px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line);
  display:grid; place-items:center; color:var(--surface);
}
.step.done .step-dot{background:var(--prog); border-color:var(--prog)}
.step.current .step-dot{border-color:var(--prog); box-shadow:0 0 0 5px var(--pill-bg)}
.step.current .step-dot::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--prog)}
.step-label{font-size:13px; font-weight:600; line-height:1.3}
.step:not(.done):not(.current) .step-label{color:var(--faint)}
.step-time{font-size:12px; color:var(--muted); font-family:var(--font-mono)}
@media (prefers-reduced-motion:no-preference){
  .step.current .step-dot{animation:ring 2.2s ease-in-out infinite}
  @keyframes ring{0%,100%{box-shadow:0 0 0 2px var(--pill-bg)} 50%{box-shadow:0 0 0 8px var(--pill-bg)}}
}

/* Key stats: 2×2 card at the top of the aside; the gap shows the line color as dividers */
.stats{margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); overflow:hidden}
.stat{background:var(--surface); padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-width:0}
.stat dt{font-size:12px; color:var(--muted)}
.stat dd{margin:0; font:600 17px/1.3 var(--font-display); font-variant-numeric:tabular-nums}

/* Notice & delivery proof */
.note{display:flex; gap:10px; padding:12px 14px; border-radius:10px; background:var(--warn-soft); font-size:14px; line-height:1.5}
.note svg{flex:none; color:var(--warn); margin-top:2px}
.proofs{display:flex; flex-direction:column; gap:8px}
.proofs-label{font-size:12px; color:var(--muted)}
.proofs-row{display:flex; flex-wrap:wrap; gap:8px}
.proofs img{display:block; width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}

/* Two-column layout */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start}
@media (max-width:880px){.layout{grid-template-columns:minmax(0,1fr)}}
/* The timeline card adds nothing to the row height (height:0), then fills the row the aside sets
   (min-height:100%), so it is never taller than the right column; the event list scrolls inside. */
.tl-card{position:relative; align-self:stretch; height:0; min-height:100%; display:flex; flex-direction:column; overflow:hidden}
.tl-card #tl{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain}
/* Scroll hint: fades the last visible rows and says how many events are still below */
.tl-more{
  position:absolute; left:0; right:0; bottom:0; height:84px; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px;
  background:linear-gradient(to bottom, transparent, var(--surface) 72%);
  border-radius:0 0 var(--radius) var(--radius);
}
.tl-more-btn{
  pointer-events:auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font:600 12.5px/1 var(--font-body); color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; box-shadow:0 2px 8px var(--shadow-c);
}
.tl-more-btn::after{content:"↓"; color:var(--accent); font-weight:700}
.tl-more-btn:hover{border-color:var(--faint)}
.tl-more-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .tl-more-btn::after{animation:nudge 1.6s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)}}
}
@media (max-width:880px){
  .tl-card{height:auto; min-height:0}
  .tl-card #tl{overflow:visible}
}
.aside{display:flex; flex-direction:column; gap:20px; min-width:0}
.panel-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; padding:14px 20px; border-bottom:1px solid var(--line);
}
.panel-head h3{margin:0; font:600 16px/1.3 var(--font-display)}
.controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.seg{display:inline-flex; background:var(--surface-2); border-radius:9px; padding:3px}
.seg button{
  font:inherit; font-size:12px; font-weight:600; border:0; background:transparent; color:var(--muted);
  padding:5px 10px; border-radius:7px; cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px var(--shadow-c)}
.toggle{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer}
.toggle input{accent-color:var(--accent); width:15px; height:15px; margin:0}

/* Timeline */
.tl{list-style:none; margin:0; padding:8px 20px 20px}
@media (max-width:640px){.tl{padding:8px 14px 16px}}
.tl > li{display:grid; grid-template-columns:52px 24px minmax(0,1fr); column-gap:12px}
@media (max-width:480px){.tl > li{grid-template-columns:44px 20px minmax(0,1fr); column-gap:8px}}
.rail{position:relative; display:flex; justify-content:center}
.rail::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:var(--line)}
.tl > li.pre .rail::before{display:none}
.tl > li.start .rail::before{top:20px}
.tl > li.end .rail::before{bottom:calc(100% - 20px)}
.tl > li.start.end .rail::before{display:none}

.day-label{
  padding:16px 0 2px; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.gap .rail::before{background:repeating-linear-gradient(to bottom, var(--faint) 0 3px, transparent 3px 7px)}
.gap-label{padding:8px 0; font-size:12.5px; color:var(--muted)}
.gap-label span{display:inline-block; background:var(--surface-2); padding:2px 9px; border-radius:6px}
.gap.long .gap-label span{background:var(--warn-soft); color:var(--warn); font-weight:500}

.ev{--dot:var(--faint); --dot-soft:var(--surface-2)}
.ev.k-delivered{--dot:var(--ok); --dot-soft:var(--ok-soft)}
.ev.k-out{--dot:var(--accent); --dot-soft:var(--accent-soft)}
.ev.k-accepted{--dot:var(--ink)}
.ev-time{padding-block:10px; text-align:right; font:500 13px/1.4 var(--font-mono); font-variant-numeric:tabular-nums}
.ev-time small{display:block; color:var(--faint); font-size:11px}
.dot{
  position:relative; z-index:1; margin-top:14px; width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2px solid var(--dot);
}
.ev.k-delivered .dot, .ev.k-out .dot, .ev.k-accepted .dot{background:var(--dot)}
.ev.latest .dot{width:16px; height:16px; margin-top:12px; background:var(--dot); box-shadow:0 0 0 4px var(--dot-soft)}
.ev-body{padding-block:10px; min-width:0}
.ev-title{font-weight:600; font-size:15px; line-height:1.4; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.ev.latest .ev-title{font-size:16px}
.code{font:600 11px/1 var(--font-mono); padding:3px 6px; border-radius:5px; background:var(--surface-2); color:var(--muted); letter-spacing:.04em}
.ev-en{font-size:13px; color:var(--muted)}
.ev-meta{margin-top:5px; display:flex; flex-direction:column; gap:1px; font-size:13px; color:var(--muted); overflow-wrap:anywhere}
.office{color:var(--ink); font-weight:500}
.office .mono{font-size:12px; color:var(--muted); margin-right:6px}
.ev-note{margin-top:4px; font-size:13px; color:var(--muted); font-style:italic}

/* Facts list */
.facts{margin:0; padding:4px 20px 12px}
.facts > div{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px}
.facts > div:last-child{border-bottom:0}
.facts dt{color:var(--muted); flex:none}
.facts dd{margin:0; text-align:right; font-weight:500; min-width:0; overflow-wrap:anywhere}