/* ============================================================
   Shipstar Design System — tokens + base atoms + modal shell
   Clean / cool Stripe·Linear·Mercury feel on warm brand accents.
   ============================================================ */

:root{
  /* Brand */
  --brand:#FF9264; --brand-deep:#C76B3D; --brand-soft:#FFE8D8; --accent:#E0533D;
  /* Surfaces */
  --bg:#F7F6F3; --bg-elev:#FFFFFF; --bg-2:#F1EFEA;
  /* Foreground */
  --fg:#0B1220; --fg-2:#4B5468; --fg-3:#7A8294;
  /* Lines */
  --border:#E8E6E1; --border-2:#F1EFEA;
  /* Semantic */
  --green:#1A8754; --green-soft:#DEF1E6; --amber:#C8761E; --amber-soft:#FBEAD3;
  --red:#C8362F; --red-soft:#FADEDA; --blue:#1F4FD9; --blue-soft:#E1EAFB;
  /* Layout */
  --sidebar-w:232px; --topbar-h:56px;
  /* Radius + shadow scale (Stripe-ish, restrained) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.04);
  --sh-2:0 4px 12px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --sh-3:0 12px 32px rgba(11,18,32,.10), 0 4px 10px rgba(11,18,32,.06);
  --sh-pop:0 24px 60px rgba(11,18,32,.22), 0 8px 18px rgba(11,18,32,.12);
  /* Easing */
  --ease:cubic-bezier(.2,.8,.2,1);
  /* z layers */
  --z-modal:1000; --z-toast:2000; --z-confirm:3000;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-tight:"Inter Tight","Inter",-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3,h4,h5{font-family:var(--font-tight);font-weight:700;letter-spacing:-.018em;margin:0;color:var(--fg);}
.num,.tnum{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
::selection{background:var(--brand-soft);color:var(--brand-deep);}
a{color:inherit;text-decoration:none;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font);font-size:13.5px;font-weight:550;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 15px;height:38px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease), background .15s var(--ease),
             box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s;
  user-select:none;
}
.btn:active{transform:scale(.975);}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.btn-primary{background:var(--fg);color:#fff;box-shadow:var(--sh-1);}
.btn-primary:hover{background:#1b2536;box-shadow:var(--sh-2);}
.btn-brand{background:var(--brand);color:#3a1d0c;box-shadow:0 1px 2px rgba(199,107,61,.3);}
.btn-brand:hover{background:#ff814b;box-shadow:0 6px 18px rgba(255,146,100,.4);}
.btn-ghost{background:var(--bg-elev);color:var(--fg);border-color:var(--border);}
.btn-ghost:hover{background:var(--bg-2);border-color:#dcd9d2;}
.btn-soft{background:var(--bg-2);color:var(--fg-2);}
.btn-soft:hover{background:#e9e6df;color:var(--fg);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:#b22e28;box-shadow:0 6px 18px rgba(200,54,47,.3);}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;}
.btn-lg{height:46px;padding:0 22px;font-size:15px;border-radius:var(--r-md);}
.btn-block{width:100%;}

/* spinner */
.spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;
  border-top-color:transparent;animation:spin .6s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Form atoms ---------- */
.lbl{display:block;font-size:12.5px;font-weight:550;color:var(--fg-2);margin-bottom:6px;}
.inp{
  width:100%;height:40px;padding:0 12px;font-family:var(--font);font-size:14px;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--fg);transition:border-color .15s, box-shadow .15s;outline:none;
}
.inp:hover{border-color:#dcd9d2;}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
textarea.inp{height:auto;padding:10px 12px;resize:vertical;line-height:1.5;}
select.inp{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A8294' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.field-hint{font-size:11.5px;color:var(--fg-3);margin-top:5px;}

/* ---------- Pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  font-size:11.5px;font-weight:600;border-radius:100px;letter-spacing:.005em;white-space:nowrap;}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-green{background:var(--green-soft);color:#0f6b40;}
.pill-amber{background:var(--amber-soft);color:#9a5b16;}
.pill-red{background:var(--red-soft);color:#a82a24;}
.pill-blue{background:var(--blue-soft);color:#1a40b0;}
.pill-brand{background:var(--brand-soft);color:var(--brand-deep);}
.pill-gray{background:var(--bg-2);color:var(--fg-2);}
.pill-fg{background:#11203522;color:var(--fg);}

/* ---------- KV rows ---------- */
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--border-2);}
.kv:last-child{border-bottom:none;}
.kv-k{font-size:12.5px;color:var(--fg-3);font-weight:500;}
.kv-v{font-size:13.5px;color:var(--fg);font-weight:550;text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- Info callout ---------- */
.callout{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-size:12.5px;
  line-height:1.55;align-items:flex-start;}
.callout-icn{flex:0 0 auto;width:16px;height:16px;margin-top:1px;}
.callout-green{background:var(--green-soft);color:#0f6b40;}
.callout-amber{background:var(--amber-soft);color:#9a5b16;}
.callout-red{background:var(--red-soft);color:#a82a24;}
.callout-blue{background:var(--blue-soft);color:#1a40b0;}

/* ---------- Skeleton ---------- */
.sk{background:linear-gradient(100deg,var(--bg-2) 30%,#eceae4 50%,var(--bg-2) 70%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:6px;}
@keyframes shimmer{to{background-position:-200% 0;}}

/* ====================================================================
   MODAL SHELL — the one shell every modal in the app uses
   ==================================================================== */
.modal-backdrop{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(20,18,16,.55);
  backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-backdrop.confirm{z-index:var(--z-confirm);}

.modal{
  background:var(--bg-elev);border-radius:var(--r-lg);width:100%;
  box-shadow:var(--sh-pop);display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);overflow:hidden;position:relative;
  transform:translateY(10px) scale(.985);
  transition:transform .24s var(--ease);
}
.modal-backdrop.in .modal{transform:none;}

.modal-sm{max-width:400px;} .modal-md{max-width:560px;}
.modal-lg{max-width:720px;} .modal-xl{max-width:920px;}

.modal-head{padding:18px 20px 14px;display:flex;gap:13px;align-items:flex-start;
  border-bottom:1px solid var(--border-2);flex:0 0 auto;}
.modal-head-icn{flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-deep);}
.modal-eyebrow{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;
  color:var(--fg-3);margin-bottom:3px;}
.modal-title{font-size:17px;font-family:var(--font-tight);font-weight:700;line-height:1.25;}
.modal-sub{font-size:12.5px;color:var(--fg-3);margin-top:3px;line-height:1.45;}
.modal-x{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:none;
  background:transparent;color:var(--fg-3);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s,color .15s;}
.modal-x:hover{background:var(--bg-2);color:var(--fg);}

.modal-body{padding:20px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;}
.modal-body::-webkit-scrollbar{width:9px;}
.modal-body::-webkit-scrollbar-thumb{background:#dedbd4;border-radius:6px;border:2px solid var(--bg-elev);}

.modal-foot{padding:14px 20px;border-top:1px solid var(--border-2);flex:0 0 auto;
  display:flex;gap:10px;justify-content:flex-end;align-items:center;background:var(--bg-elev);}
.modal-foot-spread{justify-content:space-between;}

/* drag handle (bottom-sheet affordance) */
.modal-grip{display:none;}

/* ----- Right-side drawer (slides from right) ----- */
.drawer-backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(20,18,16,.5);
  backdrop-filter:blur(4px);display:flex;justify-content:flex-end;}
.drawer{width:640px;max-width:96vw;height:100%;background:var(--bg-elev);box-shadow:var(--sh-pop);
  display:flex;flex-direction:column;transform:translateX(24px);transition:transform .26s var(--ease);overflow:hidden;}
.drawer-backdrop.in .drawer{transform:none;}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border-2);display:flex;align-items:flex-start;gap:12px;flex:0 0 auto;}
.drawer-body{padding:20px 22px;overflow-y:auto;flex:1 1 auto;}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--border-2);display:flex;gap:10px;justify-content:flex-end;flex:0 0 auto;background:var(--bg-elev);}
@media (max-width:560px){ .drawer{width:100%;transform:translateY(24px);} .drawer-backdrop.in .drawer{transform:none;} }

/* ----- Bottom sheet on small screens ----- */
@media (max-width:560px){
  .modal-backdrop{align-items:flex-end;padding:0;}
  .modal,.modal-sm,.modal-md,.modal-lg,.modal-xl{
    max-width:100%;max-height:92vh;border-radius:20px 20px 0 0;
    transform:translateY(100%);transition:transform .26s var(--ease),opacity .2s var(--ease);
  }
  .modal-backdrop.in .modal{transform:translateY(0);}
  .modal-grip{display:flex;justify-content:center;padding:8px 0 2px;flex:0 0 auto;cursor:grab;}
  .modal-grip::before{content:"";width:38px;height:4px;border-radius:100px;background:#d8d4cc;}
  .modal-head{padding-top:8px;}
}

/* ---------- Tabs (in-modal) ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);position:relative;}
.tab{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:550;color:var(--fg-3);padding:10px 13px;position:relative;
  transition:color .15s;}
.tab:hover{color:var(--fg-2);}
.tab.active{color:var(--fg);}
.tab-ink{position:absolute;bottom:-1px;height:2px;background:var(--brand);border-radius:2px;
  transition:left .25s var(--ease), width .25s var(--ease);}
@keyframes tabFade{from{transform:translateY(5px);}to{transform:none;}}
.tab-panel{animation:tabFade .22s var(--ease);}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:var(--fg);color:#fff;padding:11px 16px;border-radius:var(--r-md);font-size:13px;
  font-weight:500;box-shadow:var(--sh-3);display:flex;align-items:center;gap:9px;
  animation:toastUp .25s var(--ease);pointer-events:auto;}
@keyframes toastUp{from{transform:translateY(12px);}to{transform:none;}}

/* ---------- Copy chip ---------- */
.copybtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;background:none;
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg);padding:3px 8px;border-radius:6px;
  transition:background .15s;}
.copybtn:hover{background:var(--bg-2);}
.copybtn .ic{color:var(--fg-3);}

/* ---------- Timeline + progress + preview table (shared by detail modals) ---------- */
.tl{position:relative;padding-left:24px;}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border);}
.tl-row{position:relative;padding:0 0 16px;}
.tl-row:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:-22px;top:2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-elev);background:var(--fg-3);box-shadow:0 0 0 1px var(--border);}
.tl-dot.done{background:var(--green);box-shadow:0 0 0 1px var(--green-soft);}
.tl-dot.now{background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);}
.tl-t{font-size:13px;font-weight:600;color:var(--fg);}
.tl-meta{font-size:11.5px;color:var(--fg-3);font-variant-numeric:tabular-nums;margin-top:1px;}
.progress{height:7px;background:var(--bg-2);border-radius:100px;overflow:hidden;}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-deep));border-radius:100px;transition:width .25s var(--ease);}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}
}