:root {
  /* surfaces — warm paper */
  --bg: #F4F2EC;
  --panel: #FFFFFF;
  --panel-2: #F9F7F2;
  --hover: #EFEDE6;
  --stripe: #FBFAF6;

  /* hairlines */
  --line: #E4E1D8;
  --line-strong: #D3D0C5;

  /* text — cooler, higher contrast ramp */
  --ink-0: #0E1116;
  --ink-1: #262A33;
  --ink-2: #525862;
  --ink-3: #858A93;
  --ink-4: #B6B9C0;

  /* accent — slightly deeper, less candy */
  --orange: #E8611F;
  --orange-2: #C94B0D;
  --orange-soft: #FBE2D1;
  --orange-ink: #6F2A06;

  /* brand — truck green (Jones fleet paint) */
  --pine-0: #16281F;     /* sidebar ink  */
  --pine-1: #1F3A2D;     /* sidebar base */
  --pine-2: #2B5040;     /* hover / rail */
  --pine-3: #7DA594;     /* dim text on green */
  --pine-ink: #DCE7E1;   /* body text on green */

  /* status — muted, flat */
  --ok: #1B7D4B;
  --ok-soft: #DCEBE0;
  --warn: #A67200;
  --warn-soft: #F3E7C4;
  --crit: #A62018;
  --crit-soft: #F1D5D1;
  --info: #1C5AA6;
  --info-soft: #D6E3F1;

  /* radii */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;

  /* type */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink-0); font-family: var(--font-sans); font-size: 13px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
body { min-height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--info); text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* page + chrome */
.page { min-height: 100vh; padding: 28px; background:
  radial-gradient(1100px 600px at 85% -25%, #EAE6DC 0%, transparent 60%),
  var(--bg);
}
.chrome {
  width: min(1380px, 100%); margin: 0 auto;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 20px 50px -20px rgba(20,20,20,0.15), 0 60px 120px -60px rgba(20,20,20,0.1);
}
.chrome__bar {
  height: 34px; display: flex; align-items: center; gap: 12px;
  padding: 0 12px; background: #ECEBE6; border-bottom: 1px solid var(--line-strong);
}
.chrome__dots { display: flex; gap: 6px; }
.chrome__dot { width: 11px; height: 11px; border-radius: 50%; background: #C9C8C2; }
.chrome__dot:nth-child(1) { background: #E8695E; }
.chrome__dot:nth-child(2) { background: #E4AE3A; }
.chrome__dot:nth-child(3) { background: #3CC25A; }
.chrome__tab { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 22px; border-radius: 4px; font-size: 11.5px; color: var(--ink-1); background: #FFFFFF; border: 1px solid var(--line); }
.chrome__url { flex: 1; height: 22px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 11.5px; color: var(--ink-2); font-family: var(--font-mono); }

/* app layout */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 820px; background: var(--bg); }
.sidebar { background: var(--pine-1); color: var(--pine-ink); padding: 0; display: flex; flex-direction: column; position: relative; }
.sidebar::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(520px 160px at 0% 0%, rgba(255,255,255,0.05), transparent 70%),
  linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.22) 100%);
}
.sidebar > * { position: relative; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand__mark { width: 30px; height: 30px; border-radius: 4px; background: var(--orange); display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px; letter-spacing: -0.03em; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 4px rgba(0,0,0,0.25); }
.brand__logo { display: block; height: 22px; width: auto; color: #fff; }
.brand__meta { font-size: 9.5px; color: var(--pine-3); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; font-family: var(--font-mono); font-weight: 500; }
.brand__name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.brand__co { font-size: 10px; color: var(--pine-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

.nav-group__label { font-size: 10px; color: #7A9185; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 16px 6px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 16px; color: #C8CBD1; font-size: 12.5px; font-weight: 500; white-space: nowrap; position: relative; }
.nav-item > span:not(.nav-item__count) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item svg { flex-shrink: 0; color: #8A909A; }
.nav-item { color: #CCD7D1; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(232,97,31,0.16); color: #fff; }
.nav-item.active svg { color: var(--orange); }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); }
.nav-item__count { margin-left: auto; font-size: 10.5px; color: #9FB3A9; font-family: var(--font-mono); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 9px; }

.sidebar__footer { margin-top: auto; padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.12); }
.user-chip { display: flex; gap: 10px; align-items: center; }
.user-chip__name { color: #fff; font-size: 12px; font-weight: 500; }
.user-chip__role { color: #6C727E; font-size: 10.5px; }

/* topbar */
.topbar { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.crumb strong { color: var(--ink-0); font-weight: 600; }
.crumb .sep { color: var(--ink-4); }
.search { margin-left: auto; width: 300px; height: 30px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--ink-3); font-size: 12px; }
.search .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line); background: #fff; color: var(--ink-3); }
.iconbtn { width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); background: #fff; position: relative; }
.iconbtn:hover { background: var(--hover); color: var(--ink-0); }
.iconbtn__dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* content */
.content { padding: 24px 28px 40px; background: var(--bg); min-height: calc(100vh - 82px); }
.content--bleed { padding: 0; min-height: calc(100vh - 48px); background: #0D1014; }

/* atoms */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.card__pad { padding: 20px 22px; }
.card__head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.card__title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.012em; }
.card__sub { font-size: 11.5px; color: var(--ink-3); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 30px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--ink-1); border: 1px solid var(--line-strong); background: #fff; }
.btn:hover { background: var(--hover); }
.btn--primary { color: #fff; background: var(--orange); border-color: var(--orange-2); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 1px 2px rgba(216,79,16,0.25); }
.btn--primary:hover { background: var(--orange-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--hover); color: var(--ink-0); }
.btn--sm { height: 26px; padding: 0 9px; font-size: 11.5px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; height: 20px; border-radius: 3px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; border: 1px solid transparent; }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pill--ok { color: var(--ok); background: var(--ok-soft); border-color: #B8DDC4; }
.pill--ok .pill__dot { background: var(--ok); }
.pill--warn { color: var(--warn); background: var(--warn-soft); border-color: #ECD88C; }
.pill--warn .pill__dot { background: var(--warn); }
.pill--crit { color: var(--crit); background: var(--crit-soft); border-color: #EEB6B1; }
.pill--crit .pill__dot { background: var(--crit); }
.pill--info { color: var(--info); background: var(--info-soft); border-color: #B9CFEB; }
.pill--info .pill__dot { background: var(--info); }
.pill--neutral { color: var(--ink-2); background: var(--panel-2); border-color: var(--line-strong); }
.pill--neutral .pill__dot { background: var(--ink-3); }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--crit { background: var(--crit); }
.dot--muted { background: var(--ink-4); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line-strong); background: var(--panel-2); }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-1); vertical-align: middle; }
.tbl tr:hover td { background: var(--stripe); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-variant-numeric: tabular-nums; color: var(--ink-0); text-align: right; font-feature-settings: "tnum"; }
.tbl .muted { color: var(--ink-3); }
.tbl .link { color: var(--info); font-weight: 500; }
.tbl .link:hover { text-decoration: underline; cursor: pointer; }

.grid { display: grid; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.028em; color: var(--ink-0); margin: 0; line-height: 1.1; }
.h1--sans { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.024em; color: var(--ink-0); margin: 0; }
.h1--serif { font-family: var(--font-serif); font-size: 40px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-0); margin: 0; line-height: 1.05; }
.h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-0); margin: 0; letter-spacing: -0.012em; }
.h3 { font-size: 13px; font-weight: 600; color: var(--ink-0); margin: 0; letter-spacing: -0.008em; }
.eyebrow { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.muted { color: var(--ink-3); }
.muted2 { color: var(--ink-2); }

.kpi__label { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.kpi__value { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.028em; color: var(--ink-0); font-variant-numeric: tabular-nums; margin-top: 8px; line-height: 1; }
.kpi__delta { font-size: 11.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; }
.kpi__delta.up { color: var(--ok); }
.kpi__delta.down { color: var(--crit); }

.bar { height: 6px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.bar__fill { height: 100%; background: var(--orange); }
.bar__fill--ok { background: var(--ok); }
.bar__fill--warn { background: var(--warn); }
.bar__fill--crit { background: var(--crit); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.tabs__item { padding: 9px 14px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs__item:hover { color: var(--ink-0); }
.tabs__item.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #fff; }
.seg__item { padding: 5px 12px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; border-right: 1px solid var(--line); }
.seg__item:last-child { border-right: 0; }
.seg__item.active { background: var(--ink-0); color: #fff; }

.input { height: 30px; border-radius: 4px; background: #fff; border: 1px solid var(--line-strong); padding: 0 10px; color: var(--ink-0); font-size: 12px; }
.input:focus { outline: none; border-color: var(--orange); }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(20,22,28,0.35); z-index: 50; animation: fade 160ms both; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; background: #fff; border-left: 1px solid var(--line-strong); box-shadow: -30px 0 60px -20px rgba(20,20,20,0.25); animation: slideIn 200ms cubic-bezier(.2,.8,.2,1) both; display: flex; flex-direction: column; }

/* Alternative drawer placements — chosen per record type */
.drawer--bottom { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; border-left: 0; border-top: 1px solid var(--line-strong); border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 -24px 60px -20px rgba(20,20,20,0.25); animation: slideUp 260ms cubic-bezier(.2,.8,.2,1) both; }
.drawer--bottom::before { content: ''; display: block; width: 40px; height: 4px; background: var(--line-strong); border-radius: 2px; margin: 8px auto 0; }
.drawer--modal { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; width: 620px; max-height: 86vh; transform: translate(-50%, -50%); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); animation: modalIn 220ms cubic-bezier(.2,.8,.2,1) both; }
.drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line-strong); box-shadow: 30px 0 60px -20px rgba(20,20,20,0.25); animation: slideInLeft 200ms cubic-bezier(.2,.8,.2,1) both; }
.drawer--modal .drawer__body { max-height: calc(86vh - 120px); }
.drawer--bottom .drawer__body { max-height: calc(72vh - 120px); }

.drawer__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.drawer__body { padding: 22px 24px 30px; overflow-y: auto; flex: 1; }
.drawer__body--flush { padding: 0; }
.drawer__foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel-2); }
.drawer__foot .btn { justify-content: center; }
@keyframes slideIn     { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideUp     { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes modalIn     { from { transform: translate(-50%, -50%) scale(0.97); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.clickable:hover { background: var(--stripe); }
.link { cursor: pointer; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20,22,28,0.5); display: grid; place-items: center; z-index: 50; opacity: 1; }

.kanban { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kanban__col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; min-height: 280px; display: flex; flex-direction: column; }
.kanban__head { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.kanban__list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kanban__card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 10px; cursor: pointer; transition: border-color 120ms; }
.kanban__card:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.mini-tag { display: inline-block; font-size: 10px; padding: 2px 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); letter-spacing: 0.02em; }
.modal { width: 720px; background: #fff; border-radius: 8px; border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -10px rgba(20,20,20,0.3); animation: rise 200ms cubic-bezier(.2,.8,.2,1) both; overflow: hidden; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tweaks { position: fixed; right: 20px; bottom: 20px; width: 240px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 14px; font-size: 12px; box-shadow: 0 20px 40px -10px rgba(20,20,20,0.2); z-index: 100; }
.tweaks h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tweaks label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--ink-1); }
.tweaks input[type=range] { width: 110px; }

/* specific */
.dense-list > * + * { border-top: 1px solid var(--line); }
.banner { padding: 10px 18px; background: var(--orange-soft); border: 1px solid #F4C29B; border-radius: 4px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--orange-ink); }

/* Date chip — stenciled shipping-label style date */
.date-chip { display: inline-flex; flex-direction: column; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; background: #fff; font-family: var(--font-mono); line-height: 1; min-width: 36px; text-align: center; }
.date-chip__mo { font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; padding: 2px 4px 1px; background: var(--pine-1); color: #fff; text-transform: uppercase; }
.date-chip__dy { font-size: 13px; font-weight: 600; color: var(--ink-0); padding: 3px 4px 4px; letter-spacing: -0.01em; }
.date-chip--lg { min-width: 46px; }
.date-chip--lg .date-chip__mo { font-size: 9.5px; padding: 3px 6px; }
.date-chip--lg .date-chip__dy { font-size: 18px; padding: 5px 6px 6px; }
.date-chip--warn .date-chip__mo { background: var(--crit); }
.date-chip--warn .date-chip__dy { color: var(--crit); }
.date-chip--orange .date-chip__mo { background: var(--orange); }
.date-chip--dim { opacity: 0.55; }
.date-chip--today { outline: 2px solid var(--orange); outline-offset: -2px; }

/* drill-down */
.drill-num:hover { background: rgba(242,108,44,0.08); }
.drill-backdrop { position: fixed; inset: 0; background: rgba(15,17,22,0.18); z-index: 200; animation: drill-fade 140ms ease-out; }
.drill-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; background: var(--panel); border-left: 1px solid var(--line-strong); z-index: 201; display: flex; flex-direction: column; box-shadow: -20px 0 40px -16px rgba(20,20,20,0.18); animation: drill-slide 220ms cubic-bezier(0.2,0.7,0.2,1); }.drill-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); height: 48px; flex-shrink: 0; }
.drill-panel__body { flex: 1; overflow-y: auto; }
.drill-section { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.drill-section__title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.drill-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.drill-row:last-child { border-bottom: 0; }
.drill-row--click { cursor: pointer; }
.drill-row--click:hover { background: var(--stripe); }
@keyframes drill-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drill-slide { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }