/* ============================================================
   CustomsOS product page. Everything is scoped under #csos, so the short
   class names are safe. Loaded after product-page.css, which holds what the
   product pages share (base, chips, stamp, node, rail, hero frame, question
   stack and meter, turning point, FAQ, final CTA). The 02 steps, 03 inbox,
   06 capabilities, 07 before/after, 08 tabs and 09 timeline rules follow
   terminalos.css.

   Colour meaning is fixed: red = a missing document or a charge growing,
   amber = a check needed (HS code, quantity mismatch), blue/cyan = CustomsOS
   working, green = present and correct; gold = what a person does. Gold is
   never used for anything CustomsOS does. Check and cross icons and words
   always carry the meaning too.

   Motion: markup renders in its finished state. The page script "arms" a
   section before animating it, and arming only ever changes opacity,
   visibility or transform, so nothing shifts. Logical properties throughout
   (RTL); the port drawing is always left to right.
   ============================================================ */

/* ---------- base ---------- */

/* ---------- base ---------- */

/* The -ink colours are the ones dark enough to read as small text on their
   own tint (AA); the plain ones are for fills, stripes and dots. */
/* Container tints for the port drawing. */
#csos {
  --cs-crit-ink: #b42318;
  --cs-c0: #3d6bff;
  --cs-c1: #6f8fff;
  --cs-c2: #22a6b8;
  --cs-c3: #5468d6;
  --cs-c4: #2bc0a6;
  --cs-cyan: #22d3ee;
  --cs-cyan-ink: #0e7490;
  --cs-grey: #5a6382;
  --cs-warn: #f59e0b;
  --cs-warn-ink: #92400e;
}

/* Severity chips */
#csos .sv-crit {
  --st-c: var(--cs-crit-ink);
  --st-bg: var(--nlm-danger-soft);
}

#csos :is(.sv-high, .sv-med) {
  --st-c: var(--cs-warn-ink);
  --st-bg: rgb(245 158 11 / 16%);
}

#csos .sv-low {
  --st-c: var(--nlm-fg-2);
  --st-bg: var(--nlm-gray-100);
}

#csos .sv-done {
  --st-c: var(--nlm-success);
  --st-bg: var(--nlm-success-soft);
}

#csos .dark .sv-crit {
  --st-c: #ff8a8a;
  --st-bg: rgb(239 68 68 / 16%);
}

#csos .dark :is(.sv-high, .sv-med) {
  --st-c: #fbbf24;
  --st-bg: rgb(245 158 11 / 14%);
}

/* Facts TerminalOS pulled out */
#csos .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#csos .pill {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 999px;
  padding: 5px 11px;
}

#csos .dark .pill {
  color: #fff;
  background: rgb(61 107 255 / 22%);
}

#csos .btn-s {
  font-size: 13px;
  padding: 8px 14px;
}

#csos .dr-a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* A decision taken stays gold: it is the human's action. */
#csos .is-taken:disabled {
  opacity: 1;
  cursor: default;
  transform: none;
  box-shadow: none;
}

#csos .auth {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

#csos .auth-l {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--nlm-navy-400);
  margin-inline-end: 4px;
}

#csos .auth-b {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 6px;
  padding: 4px 10px;
}

/* ---------- 01 the questions ---------- */

#csos .qa {
  height: 104px;
}

#csos .qn {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--nlm-danger);
  margin-bottom: 8px;
}

#csos .qchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#csos .qchip {
  font: inherit;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#csos .qchip[aria-pressed="true"] {
  color: #fff;
  background: var(--nlm-navy-900);
  border-color: var(--nlm-navy-900);
}

/* the meter */
#csos .meter-h {
  margin: 0 0 14px;
}

#csos .meter-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

#csos .meter-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#csos .meter-rows dd {
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-weight: 600;
  white-space: nowrap;
  color: #ff8a8a;
}

#csos .meter-x {
  display: block;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-navy-400);
}

#csos .qrate {
  margin-top: 0;
}

#csos .qrate input {
  width: 112px;
}

/* ---------- what if ---------- */

#csos .turn-flow {
  gap: 6px;
}

#csos .turn-flow li {
  font-size: 13.5px;
  padding: 7px 12px;
}

#csos .turn-q + .turn-q {
  margin-top: 10px;
}

#csos .seg-d {
  border-color: rgb(255 255 255 / 24%);
}

#csos .seg-d button {
  color: var(--nlm-navy-300);
}

#csos .seg-d button[aria-pressed="true"] {
  color: var(--nlm-navy-950);
  background: #fff;
}

#csos .flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

#csos .flow-ai {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  color: #fff;
}

#csos .flow-ai .node {
  width: 52px;
  height: 52px;
}

#csos .flow-ai .node-core {
  width: 40px;
  height: 40px;
}

#csos .flow-ai .node-core :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
}

#csos .flow-replay {
  padding-inline: 12px 16px;
}

#csos .flow-replay :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#csos .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#csos .step {
  background: var(--nlm-navy-800);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 14px;
  padding: 20px 18px;
  transition: border-color 0.35s, opacity 0.35s;
}

#csos .step.is-done {
  border-color: rgb(34 197 94 / 45%);
}

#csos .step.is-gold.is-done {
  border-color: var(--pq-gold);
}

#csos .flow.is-armed .step:not(.is-done) {
  opacity: 0.45;
}

#csos .step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#csos .step .ico {
  width: 36px;
  height: 36px;
  background: rgb(61 107 255 / 18%);
  color: var(--pq-ai);
}

#csos .step.is-gold .ico {
  background: rgb(227 178 60 / 18%);
  color: var(--pq-gold);
}

#csos .step-n {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-navy-400);
}

#csos .step h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0 0 8px;
}

#csos .step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nlm-navy-300);
  margin: 0;
}

#csos .ck-i {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(255 255 255 / 25%);
  color: transparent;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

#csos .ck-i :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#csos .step.is-done .ck-i {
  background: var(--pq-ok);
  border-color: var(--pq-ok);
  color: #fff;
}

#csos .step.is-gold.is-done .ck-i {
  background: var(--pq-gold);
  border-color: var(--pq-gold);
  color: var(--pq-gold-ink);
}

#csos .flow.is-armed .step.is-done .ck-i {
  animation: pq-pop 0.4s var(--nlm-ease-soft);
}

/* ---------- 03 see it work: bar and counters ---------- */

#csos .day-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

#csos .day-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#csos .day-n {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

#csos .day-n li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nlm-fg-2);
}

#csos .day-n b {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--nlm-fg-1);
}

[dir="rtl"] #csos .day-n b.ltr {
  text-align: end;
}

#csos .day-n .is-bad b {
  color: var(--nlm-danger);
}

#csos .day-n .is-ai b {
  color: var(--nlm-signal-ink);
}

#csos .drawer {
  position: relative;
  min-height: 620px;
  margin-top: 14px;
}

/* ---------- 04 tabs ---------- */

#csos .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

#csos .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#csos .tab :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#csos .tab[aria-selected="true"] {
  color: #fff;
  background: var(--nlm-navy-900);
  border-color: var(--nlm-navy-900);
}

#csos .vp {
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 32px);
  animation: pq-rise 0.45s var(--nlm-ease-soft);
}

#csos .vq {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--nlm-fg-1);
  margin: 0 0 18px;
}

#csos .vnote {
  font-size: 13px;
  font-style: italic;
  color: var(--nlm-fg-3);
  margin: 14px 0 0;
}

#csos .vp .qctl output {
  color: var(--nlm-fg-1);
}

/* Tables */
#csos .sc-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
}

#csos .sc {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

#csos .sc :is(th, td) {
  text-align: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nlm-line);
  white-space: nowrap;
}

#csos .sc thead th {
  font-family: var(--nlm-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
}

#csos .sc tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

#csos .sc tr.is-sel {
  background: rgb(61 107 255 / 5%);
}

/* ---------- 06 capabilities ---------- */

#csos .cloud {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#csos .cloud li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid rgb(61 107 255 / 35%);
  border-radius: 999px;
  padding: 8px 15px;
}

#csos .cloud :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--nlm-signal);
}

#csos .cloud.is-armed li {
  opacity: 0;
  transform: translateY(8px) scale(0.94);
}

#csos .cloud.is-armed.is-in li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--nlm-ease), transform 0.45s var(--nlm-ease-soft);
  transition-delay: calc(var(--i) * 60ms);
}

#csos .feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#csos .feat {
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.25s var(--nlm-ease), box-shadow 0.25s var(--nlm-ease);
}

#csos .feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--nlm-shadow-md);
}

#csos .feat h3 {
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--nlm-fg-1);
  margin: 12px 0 6px;
}

#csos .feat p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--nlm-fg-2);
  margin: 0;
}

#csos .roles {
  margin-top: clamp(24px, 3vw, 36px);
}

#csos .roles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#csos .roles li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 12px;
}

#csos .roles b {
  font-family: var(--nlm-font-display);
  font-size: 13.5px;
  color: var(--nlm-fg-1);
}

/* ---------- 07 before / after ---------- */

#csos .out-sw {
  margin-bottom: 20px;
}

#csos .out-g {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

#csos .core {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 13.5px;
  line-height: 1.35;
}

#csos .core :is(th, td) {
  text-align: start;
  font-weight: 500;
  padding: 9px 12px;
  background: var(--nlm-navy-900);
  border-block: 1px solid var(--nlm-line-dark);
  transition: color 0.4s var(--nlm-ease), opacity 0.4s var(--nlm-ease);
}

#csos .core :is(th, td):first-child {
  border-inline-start: 1px solid var(--nlm-line-dark);
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}

#csos .core :is(th, td):last-child {
  border-inline-end: 1px solid var(--nlm-line-dark);
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
}

#csos .core thead th {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-navy-400);
  background: transparent;
  border-color: transparent;
  padding-block: 0 2px;
}

#csos .core thead th:is(:first-child, :last-child) {
  border-color: transparent;
}

#csos .core td {
  position: relative;
  padding-inline-start: 32px;
}

#csos .core td :is(svg, i[data-lucide]) {
  position: absolute;
  top: calc(50% - 7px);
  inset-inline-start: 10px;
  width: 14px;
  height: 14px;
  color: var(--nlm-navy-600);
}

/* Reactive, there is no AI action and no outcome to show: the cells
   stay, empty. */
#csos .core :is(.c-ai, .c-out) > * {
  transition: opacity 0.4s var(--nlm-ease), visibility 0s;
}

#csos .c-pain {
  color: var(--nlm-navy-400);
  text-decoration: line-through;
  text-decoration-color: rgb(255 255 255 / 30%);
}

#csos .c-ai {
  color: var(--pq-ai);
}

#csos .c-out {
  color: #5ee08a;
  font-weight: 600;
}

/* The last row is the human one: readable in both states, its outcome gold. */
#csos .is-human .c-pain {
  color: #fff;
  text-decoration: none;
}

#csos .is-human .c-ai {
  color: var(--nlm-navy-400);
}

#csos .is-human .c-out {
  color: var(--pq-gold);
}

#csos [data-state="before"] tr:not(.is-human) .c-pain {
  color: #ff8a8a;
  text-decoration-color: transparent;
}

/* Before FleetOS there is no AI action and no outcome to show: the cells
   stay, empty. */

#csos [data-state="before"] tr:not(.is-human) :is(.c-ai, .c-out) > * {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--nlm-ease), visibility 0s 0.4s;
}

/* The morning clearance brief */
#csos .report {
  position: relative;
  background: var(--nlm-navy-900);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 16px;
  overflow: hidden;
  color: var(--nlm-navy-300);
}

#csos .report-b {
  padding: clamp(18px, 2vw, 24px);
}

#csos .report-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#csos .report-h strong {
  font-family: var(--nlm-font-display);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

/* The brief's values are phrases, not single numbers: one per row. */
#csos .kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

#csos .kpis li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  background: rgb(255 255 255 / 5%);
  border-radius: 10px;
  padding: 10px 12px;
}

#csos .kpis li:first-child {
  grid-column: 1 / -1;
}

#csos .kpis b {
  flex: 0 1 auto;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  text-align: end;
  color: #fff;
}

#csos .kpis li:first-child b {
  font-size: 28px;
}

#csos .kpis .is-bad b {
  color: #ff8a8a;
}

#csos .kpis .is-warn b {
  color: #fbbf24;
}

#csos .kpis .is-ok b {
  color: #5ee08a;
}

#csos .report-n {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-style: italic;
  color: var(--nlm-navy-400);
}

#csos .blind {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgb(8 9 31 / 72%);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#csos .blind b {
  display: block;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

#csos .blind p {
  max-width: 34ch;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nlm-navy-300);
}

#csos [data-state="before"] .blind {
  opacity: 1;
  visibility: visible;
}

/* ---------- 08 who it's for ---------- */

#csos .tabp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 36px);
  animation: pq-rise 0.45s var(--nlm-ease-soft);
}

#csos .tabp h3 {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--nlm-fg-1);
  margin: 16px 0 10px;
}

#csos .tabp p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nlm-fg-2);
  margin: 0;
}

#csos .ex {
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 18px;
}

#csos .tabp .ex-l {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
  margin-bottom: 12px;
}

#csos .tabp .ex-q .alert {
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 17px);
  padding: 12px 14px;
}

/* ---------- 09 getting started ---------- */

#csos .tl-wrap {
  position: relative;
}

#csos .tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}

#csos .tl-line {
  position: absolute;
  top: 21px;
  inset-inline: 21px;
  height: 2px;
  background: var(--nlm-signal);
  transform-origin: 0 50%;
}

[dir="rtl"] #csos .tl-line {
  transform-origin: 100% 50%;
}

#csos .tl li {
  position: relative;
}

#csos .tl-dot {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #fff;
  background: var(--nlm-navy-900);
  box-shadow: 0 0 0 6px #fff;
}

#csos .tl-dot :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
}

#csos .tl h3 {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--nlm-fg-1);
  margin: 0 0 8px;
}

#csos .tl p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nlm-fg-2);
  margin: 0;
}

/* ---------- closing ---------- */

#csos .final .h2 {
  max-width: 24ch;
  margin-bottom: 16px;
}

#csos .cta-note {
  max-width: 46ch;
  margin: 0 auto 32px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--nlm-navy-300);
}

/* Twelve documents, pulled into the line and the wordmark. */
#csos .cv-t {
  top: calc(50% - 7px);
  inset-inline-start: calc(50% - 7px);
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: var(--cs-c1);
  border: 0;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 12%);
}

#csos .also {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 30px 0 0;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--nlm-navy-400);
}

#csos .also a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  padding: 5px 12px;
  transition: border-color 0.2s, background 0.2s;
}

#csos .also a:hover {
  border-color: var(--nlm-signal);
  background: var(--nlm-signal);
}

@media (width <= 1180px) {
  #csos .feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #csos .roles ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (width <= 980px) {
  #csos .steps,
  #csos .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The meter rides the bottom of the screen here (see product-page.css), so it
     is kept short: the four figures sit two by two. */
  #csos .meter-l {
    margin-bottom: 4px;
  }

  #csos .meter-h {
    font-size: 22px;
    margin: 0 0 8px;
  }

  #csos .meter-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  #csos .meter-rows > div {
    flex-direction: column;
    gap: 1px;
  }

  #csos .meter-x {
    display: none;
  }
}

@media (width <= 640px) {
  #csos .tl-line {
    display: none;
  }

  #csos .day-ctl {
    width: 100%;
  }

  #csos .day-ctl :is(.btn-n, .btn-g) {
    flex: 1;
    justify-content: center;
  }

  #csos .seg {
    flex-wrap: wrap;
    border-radius: 16px;
  }

  #csos .kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The table reads as stacked cards: pain, then what the AI does, then the outcome. */
  #csos .core,
  #csos .core tbody,
  #csos .core tr,
  #csos .core :is(th, td) {
    display: block;
  }

  #csos .core thead {
    display: none;
  }

  #csos .core tr {
    margin-bottom: 8px;
    background: var(--nlm-navy-900);
    border: 1px solid var(--nlm-line-dark);
    border-radius: 10px;
    padding: 8px 4px;
  }

  #csos .core tbody :is(th, td),
  #csos .core tbody :is(th, td):is(:first-child, :last-child) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-block: 4px;
  }
}

#csos .display {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}

/* The H1 names the product for search; the display line is the headline. */
#csos .hero-h.cs-h1 {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--nlm-navy-300);
  margin-bottom: 12px;
}

#csos .btns {
  flex-wrap: wrap;
}

/* ---------- what if ---------- */
#csos .turn-already {
  margin: 0;
  font-family: var(--nlm-font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nlm-navy-300);
}

#csos .turn.is-armed:not(.is-on) .turn-already {
  color: var(--nlm-fg-3);
}

/* ---------- 03 see it work: the morning inbox ---------- */
#csos .day-n li.is-ok b {
  color: var(--nlm-success);
}

#csos .ib-g {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#csos .inbox {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 16px;
  overflow: hidden;
}

#csos .inbox-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
  border-bottom: 1px solid var(--nlm-line);
}

#csos .mails {
  position: absolute;
  inset: 41px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#csos .mail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  text-align: start;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--nlm-line);
  border-inline-start: 3px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

#csos .mail:hover {
  background: var(--nlm-gray-50);
}

#csos .mail:focus-visible {
  outline-offset: -3px;
}

#csos .mail.is-sel {
  background: var(--nlm-signal-soft);
}

#csos .mail-f {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#csos .mail-s {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--nlm-fg-1);
}

#csos .mail-p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--nlm-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#csos .mail-st {
  display: none;
  align-items: center;
  gap: 5px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  color: var(--nlm-success);
}

#csos .mail-st :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#csos .mail.is-unread {
  border-inline-start-color: var(--nlm-signal);
}

#csos .mail.is-unread .mail-s {
  font-weight: 600;
}

#csos .mail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nlm-signal-soft);
  opacity: 0;
  pointer-events: none;
}

#csos .mail.is-scan::after {
  animation: cs-scan 0.5s ease-in-out;
}

#csos .mail.is-done .mail-st {
  display: inline-flex;
}

#csos .mail.is-skip .mail-st {
  color: var(--nlm-fg-3);
}

#csos .dr-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--nlm-fg-3);
}

#csos .dr-body.is-blank {
  visibility: hidden;
}

#csos .kv {
  margin: 0;
  font-size: 12.5px;
}

#csos .kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--nlm-line);
}

#csos .kv > div:last-child {
  border-bottom: 0;
}

#csos .kv dt {
  color: var(--nlm-fg-3);
}

#csos .kv dd {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  text-align: end;
  color: var(--nlm-fg-1);
}

#csos .is-q {
  font-weight: 800;
  color: var(--nlm-fg-3);
}

#csos .dr-skip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--nlm-fg-3);
}

#csos .dr-mail-t {
  margin-bottom: 8px;
}

#csos .quote {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nlm-fg-2);
  background: var(--nlm-gray-50);
  border-inline-start: 3px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 10px 12px;
}

#csos .quote-h {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#csos .mk {
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 4px;
  padding: 0 3px;
}

#csos .dr-reply {
  margin-bottom: 12px;
}

#csos .dr-draft {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
  border: 1px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 10px 12px;
}

#csos [data-d-actions][hidden],
#csos [data-d-reply][hidden] {
  display: none;
}
/* ---------- 08 who it's for: the sample email ---------- */
#csos .ex-mail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-inline-start: 3px solid var(--nlm-signal);
  border-radius: 10px;
  padding: 10px 12px;
}

#csos .ex-mail :is(svg, i[data-lucide]) {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--nlm-signal);
}


/* ---------- the requirement checklist, attachments, HS pill (02, 03) ---------- */
#csos .cks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#csos .ck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-inline-start: 3px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 8px 12px;
  transition: opacity 0.3s var(--nlm-ease), transform 0.3s var(--nlm-ease), border-color 0.3s, background 0.3s;
}

#csos .ck-s {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  transition: opacity 0.25s;
}

#csos .ck-s :is(svg, i[data-lucide]) {
  width: 13px;
  height: 13px;
}

#csos .ck:is(.is-present, .is-confirmed) {
  border-inline-start-color: var(--nlm-success);
}

#csos .ck:is(.is-present, .is-confirmed) .ck-s {
  color: var(--nlm-success);
  background: var(--nlm-success-soft);
}

#csos .ck.is-missing {
  border-inline-start-color: var(--nlm-danger);
  background: rgb(239 68 68 / 5%);
}

#csos .ck.is-missing .ck-s {
  color: var(--cs-crit-ink);
  background: var(--nlm-danger-soft);
}

#csos .ck.is-check {
  border-inline-start-color: var(--cs-warn);
}

#csos .ck.is-check .ck-s {
  color: var(--cs-warn-ink);
  background: rgb(245 158 11 / 16%);
}

/* Being built from the rules: cyan, no verdict yet. */
#csos .ck.is-build {
  border-inline-start-color: var(--cs-cyan);
  background: rgb(34 211 238 / 6%);
}

#csos .ck.is-build .ck-s {
  opacity: 0;
}

#csos .ck.is-hide {
  opacity: 0;
  transform: translateY(6px);
}

#csos .att {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 8px;
  padding: 5px 9px;
}

#csos .att :is(svg, i[data-lucide]) {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--nlm-danger);
}

#csos .att.is-drop {
  animation: cs-drop 0.35s var(--nlm-ease-soft) both;
}

#csos .att.is-btn {
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

#csos .att.is-btn:hover {
  border-color: var(--nlm-signal);
}

#csos .att.is-btn[aria-pressed="true"] {
  border-color: var(--nlm-signal);
  background: var(--nlm-signal-soft);
}

#csos .hs-pill {
  display: inline-block;
  font-family: var(--nlm-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--nlm-fg-1);
  background: var(--nlm-gray-100);
  border-radius: 6px;
  padding: 3px 8px;
}

#csos .hs-pill.is-old {
  color: var(--cs-warn-ink);
  background: rgb(245 158 11 / 16%);
  text-decoration: line-through;
}

#csos .hs-pill.is-new {
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
}

/* Green "received" / "file complete" marks: CustomsOS's result, not a decision. */
#csos .okst {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nlm-font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nlm-success);
  background: var(--nlm-success-soft);
  border: 1.5px solid var(--nlm-success);
  border-radius: 7px;
  padding: 5px 9px;
}

#csos .okst :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
}

#csos .okst.is-big {
  font-size: 13px;
  rotate: -3deg;
  padding: 7px 12px;
}

/* ---------- hero ---------- */

/* The hero stage: the teaser. The static frame (no script, reduced motion) is
   the end of frame 5: every row green, the message sent, FILE COMPLETE. */
#csos .stage.csh {
  padding: 14px;
  overflow: hidden;
}

#csos .csh-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#csos .csh-port {
  position: relative;
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
  overflow: hidden;
  transition: opacity 0.5s var(--nlm-ease);
}

#csos .pt {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
}

#csos .pt-sea {
  fill: rgb(61 107 255 / 14%);
}

#csos .pt-quay {
  fill: rgb(255 255 255 / 22%);
}

#csos .pt-hull {
  fill: var(--nlm-navy-700);
}

#csos .pt-bridge {
  fill: var(--nlm-navy-500);
}

#csos .pt-crane path {
  fill: none;
  stroke: rgb(255 255 255 / 35%);
  stroke-width: 3;
}

#csos .pt-c.c0 {
  fill: var(--cs-c0);
}

#csos .pt-c.c1 {
  fill: var(--cs-c2);
}

#csos .pt-c.c2 {
  fill: var(--cs-c3);
}

#csos .pt-c.c3 {
  fill: var(--cs-c4);
}

#csos .pt-wait {
  fill: var(--nlm-danger);
}

#csos .csh-alerts {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

#csos .csh-alerts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--nlm-danger);
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 6px 16px rgb(239 68 68 / 30%);
  opacity: 0;
}

#csos .csh-alerts :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#csos .csh-tick {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-navy-300);
  background: rgb(10 12 40 / 80%);
  border: 1px solid rgb(239 68 68 / 50%);
  border-radius: 8px;
  padding: 5px 9px;
  opacity: 0;
  transition: opacity 0.4s;
}

#csos .csh-tick b {
  font-size: 14px;
  letter-spacing: 0;
  color: #ff8a8a;
}

#csos .csh-g {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#csos .csh-mail {
  position: relative;
  color: var(--nlm-fg-1);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  transition: opacity 0.5s var(--nlm-ease), filter 0.5s;
}

#csos .csh-mh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#csos .csh-mh b {
  color: var(--nlm-fg-1);
}

#csos .csh-mh :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--nlm-signal);
}

#csos .csh-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

#csos .csh-atts .att {
  font-size: 11px;
  padding: 3px 7px;
}

#csos .att.is-new {
  border-color: var(--nlm-success);
  background: var(--nlm-success-soft);
}

#csos .csh-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#csos .csh-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  border: 1px solid var(--nlm-line);
  border-inline-start: 3px solid var(--nlm-success);
  border-radius: 8px;
  padding: 5px 8px;
  transition: border-color 0.3s, background 0.3s;
}

#csos .csh-rows b {
  grid-area: 1 / 2;
  justify-self: end;
  transition: opacity 0.3s;
}

#csos .csh-bad {
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--cs-crit-ink);
  background: var(--nlm-danger-soft);
  border-radius: 999px;
  padding: 2px 7px;
  opacity: 0;
}

#csos .csh-bad.is-warn {
  color: var(--cs-warn-ink);
  background: rgb(245 158 11 / 16%);
}

#csos .csh-ok {
  display: inline-flex;
  color: var(--nlm-success);
}

#csos .csh-ok :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#csos .csh-cursor {
  position: absolute;
  inset-block-start: 40px;
  inset-inline-start: 30%;
  color: var(--nlm-navy-900);
  opacity: 0;
}

#csos .csh-cursor :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
  fill: #fff;
}

#csos .csh-forgot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.02em;
  color: var(--nlm-fg-2);
  background: rgb(240 242 248 / 88%);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.4s;
}

#csos .csh-ai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.5s var(--nlm-ease);
}

#csos .csh-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nlm-font-display);
  font-size: 14px;
  color: #fff;
}

#csos .csh-node .node {
  --node: 34px;
}

#csos .csh-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#csos .csh-ticks li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--nlm-navy-300);
}

#csos .csh-ticks :is(svg, i[data-lucide]) {
  width: 13px;
  height: 13px;
  color: var(--cs-cyan);
  opacity: 0;
  transition: opacity 0.25s;
}

#csos .csh-ticks li.is-done {
  color: #fff;
}

#csos .csh-ticks li.is-done :is(svg, i[data-lucide]) {
  opacity: 1;
}

#csos .csh-msg {
  font-size: 11.5px;
  line-height: 1.4;
  color: #fff;
  background: rgb(34 211 238 / 10%);
  border: 1px solid rgb(34 211 238 / 45%);
  border-radius: 10px;
  padding: 8px 10px;
  transition: opacity 0.4s, transform 0.5s var(--nlm-ease-soft);
}

#csos .csh-msg p {
  margin: 0;
}

#csos .csh-msg .csh-to {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-cyan);
}

#csos .csh-msg .csh-to :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#csos .csh-stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#csos .csh-reveal {
  margin: 0 0 6px;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px);
  color: #fff;
  text-align: center;
}

#csos .fh-end {
  position: absolute;
  inset: -14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--nlm-navy-950);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#csos .fh-word {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  color: #fff;
}

#csos .fh-by {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nlm-navy-300);
}

/* The frames. 1: the port and its alerts. */
#csos .csh[data-f="1"] :is(.csh-mail, .csh-ai),
#csos .csh:is([data-f="2"], [data-f="3"]) .csh-ai {
  opacity: 0;
}

#csos .csh[data-f="1"] .csh-alerts li {
  animation: cs-slam 0.35s var(--nlm-ease-soft) both;
  animation-delay: calc(0.45s * var(--i) - 0.06s * var(--i) * var(--i));
}

#csos .csh:is([data-f="1"], [data-f="2"], [data-f="3"]) .csh-tick {
  opacity: 1;
}

#csos .csh:is([data-f="2"], [data-f="3"], [data-f="4"], [data-f="5"]) .csh-port {
  opacity: 0.45;
}

/* 2-4: the rows read red. 2: opened by hand, row by row. */
#csos .csh:is([data-f="2"], [data-f="3"], [data-f="4"]) .csh-rows li {
  border-inline-start-color: var(--nlm-danger);
}

#csos .csh:is([data-f="2"], [data-f="3"], [data-f="4"]) .csh-rows li:last-child {
  border-inline-start-color: var(--cs-warn);
}

#csos .csh:is([data-f="2"], [data-f="3"], [data-f="4"]) .csh-ok {
  opacity: 0;
}

#csos .csh:is([data-f="3"], [data-f="4"]) .csh-bad {
  opacity: 1;
}

#csos .csh[data-f="2"] .csh-bad {
  animation: cs-in 0.3s both;
  animation-delay: calc(0.9s + 0.4s * var(--i));
}

#csos .csh[data-f="2"] .csh-rows li {
  animation: cs-in 0.3s both;
  animation-delay: calc(0.6s + 0.4s * var(--i));
}

#csos .csh[data-f="2"] .csh-cursor {
  opacity: 1;
  animation: cs-cursor 2.2s var(--nlm-ease) both;
}

/* 3: frozen. */
#csos .csh[data-f="3"] .csh-forgot {
  opacity: 1;
}

/* 4: CustomsOS reads the new email; the gaps glow. */
#csos .csh[data-f="4"] .csh-rows li:not(:last-child) {
  background: rgb(239 68 68 / 7%);
}

#csos .csh:is([data-f="1"], [data-f="2"], [data-f="3"], [data-f="4"]) :is(.csh-msg, .csh-stamps) {
  opacity: 0;
  transform: translateX(calc(-12px * var(--dir, 1)));
}

/* 5: the message out, the reply in, green. */
#csos .csh[data-f="5"] .csh-msg {
  animation: cs-in 0.45s both;
}

#csos .csh[data-f="5"] .csh-rows li {
  transition-delay: calc(1.2s + 0.15s * var(--i));
}

#csos .csh[data-f="6"] .fh-end {
  opacity: 1;
  visibility: visible;
}

/* ---------- 01 the questions: the pain loops ---------- */

/* Q1: a container waits, the days and the SAR count up. */
#csos .qa-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--nlm-fg-3);
}

#csos .qa-box :is(svg, i[data-lucide]) {
  width: 34px;
  height: 34px;
  color: var(--nlm-danger);
}

#csos .qa-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--nlm-fg-2);
}

#csos .qa-roll {
  display: inline-flex;
  flex-direction: column;
  height: 1.3em;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.3;
}

#csos .qa-roll > span {
  display: block;
}

#csos .qa-roll > span:first-child {
  animation: cs-roll3 3.6s steps(1, end) infinite;
}

#csos b.qa-roll {
  font-family: var(--nlm-font-mono);
  font-size: 20px;
  color: var(--nlm-danger);
}

/* Q2: the code flips and the amendment lands. */
#csos .qa-hs {
  display: inline-flex;
  flex-direction: column;
  height: 1.4em;
  overflow: hidden;
  font-family: var(--nlm-font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nlm-fg-1);
  background: var(--nlm-gray-100);
  border-radius: 8px;
  padding: 2px 10px;
}

#csos .qa-hs > span:first-child {
  animation: cs-flip 3.6s var(--nlm-ease) infinite;
}

#csos .qa-amend {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cs-crit-ink);
  border: 2px solid var(--nlm-danger);
  border-radius: 6px;
  padding: 4px 8px;
  rotate: -8deg;
  animation: cs-stampdrop 3.6s var(--nlm-ease-soft) infinite;
}

/* Q3: arrival day, and the note nobody saw. */
#csos .qa-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 8px 12px;
}

#csos .qa-cal :is(svg, i[data-lucide]) {
  width: 22px;
  height: 22px;
  color: var(--nlm-fg-3);
}

#csos .qa-note {
  font-size: 12px;
  font-weight: 700;
  color: var(--cs-crit-ink);
  background: var(--nlm-danger-soft);
  border-radius: 6px;
  padding: 6px 9px;
  rotate: 4deg;
  animation: cs-wiggle 2.4s ease-in-out infinite;
}

/* Q4: the thread grows. */
#csos .qa-thread {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--nlm-fg-2);
}

#csos .qa-thread > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  animation: cs-thread 4.8s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 0.9s);
}

#csos .qa-thread :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
  color: var(--nlm-fg-3);
}

/* Q5: one PDF at a time while the clock spins. */
#csos .qa-pdfs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
}

#csos .qa-pdfs > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--nlm-fg-3);
  border-radius: 6px;
  padding: 2px 6px;
  animation: cs-open 3.6s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 1.2s);
}

#csos .qa-pdfs :is(svg, i[data-lucide]) {
  width: 13px;
  height: 13px;
  color: var(--nlm-danger);
}

#csos .qa-clk :is(svg, i[data-lucide]) {
  width: 30px;
  height: 30px;
  color: var(--nlm-fg-3);
  animation: cs-spin 3s linear infinite;
}

/* ---------- turning point: we forgot to ask ---------- */
#csos .turn-mail {
  width: min(100%, 360px);
  color: var(--nlm-fg-1);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--nlm-shadow-md);
  transition: opacity 0.6s var(--nlm-ease);
}

#csos .turn.is-on .turn-mail {
  opacity: 0.5;
}

#csos .turn-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#csos .turn-rows li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  border: 1px solid var(--nlm-line);
  border-inline-start: 3px solid var(--nlm-danger);
  border-radius: 8px;
  padding: 4px 8px;
}

#csos .turn-rows b {
  font-family: var(--nlm-font-mono);
  font-size: 9.5px;
  color: var(--cs-crit-ink);
}

#csos .turn-rows b.is-warn {
  color: var(--cs-warn-ink);
}

#csos .turn-rows li:last-child {
  border-inline-start-color: var(--cs-warn);
}

/* ---------- 02 the solution: the requirement checker ---------- */
#csos .rq {
  margin-bottom: 30px;
}

#csos .rq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

#csos .sol .qchip {
  color: #fff;
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 20%);
}

#csos .sol .qchip[aria-pressed="true"] {
  color: var(--nlm-navy-950);
  background: #fff;
  border-color: #fff;
}

#csos .rq-g {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  background: var(--nlm-gray-50);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 22px);
}

#csos .rq-list .panel-t,
#csos .rq-att .panel-t {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#csos .rq-list .panel-t :is(svg, i[data-lucide]),
#csos .rq-att .panel-t :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
}

/* Seven rows is the longest sample: the list keeps that height. */
#csos .rq-list .cks {
  min-height: calc(7 * 40px);
}

#csos .rq-res {
  margin: 12px 0 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--cs-crit-ink);
}

#csos .rq-att {
  position: relative;
  display: flex;
  flex-direction: column;
}

#csos .rq-atts {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 90px;
}

#csos .rq-node {
  align-self: center;
  margin-top: auto;
  padding-top: 16px;
  opacity: 0.35;
  transition: opacity 0.3s;
}

#csos .rq.is-busy .rq-node {
  opacity: 1;
}

#csos .rq-note {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nlm-navy-300);
}

#csos .rq-note :is(svg, i[data-lucide]) {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
}

/* ---------- 03 see it work: the clearance inbox ---------- */
#csos .day-n .is-warn b {
  color: var(--cs-warn-ink);
}

#csos .mail-s :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
  margin-inline-end: 4px;
  vertical-align: -1px;
  color: var(--nlm-fg-3);
}

#csos .mail.is-new {
  animation: cs-in 0.45s var(--nlm-ease-soft) both;
}

#csos .mail.is-reply .mail-st {
  color: var(--nlm-success);
}

#csos .mail[hidden] {
  display: none;
}

#csos .lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-self: stretch;
}

#csos .lane {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-block-start: 3px solid var(--nlm-line-strong);
  border-radius: 14px;
  padding: 10px;
  min-height: 300px;
}

#csos .lane-done {
  border-block-start-color: var(--nlm-success);
}

#csos .lane-wait {
  border-block-start-color: var(--nlm-danger);
}

#csos .lane-check {
  border-block-start-color: var(--cs-warn);
}

#csos .lane-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlm-fg-2);
}

#csos .lane-h :is(svg, i[data-lucide]) {
  flex: none;
  width: 14px;
  height: 14px;
}

#csos .lane-done .lane-h :is(svg, i[data-lucide]) {
  color: var(--nlm-success);
}

#csos .lane-wait .lane-h :is(svg, i[data-lucide]) {
  color: var(--nlm-danger);
}

#csos .lane-check .lane-h :is(svg, i[data-lucide]) {
  color: var(--cs-warn);
}

#csos .lane-h b {
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--nlm-fg-1);
}

#csos .lane-b {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

#csos .fc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font: inherit;
  text-align: start;
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 9px;
  padding: 7px 9px;
  cursor: pointer;
  animation: cs-in 0.35s var(--nlm-ease-soft) both;
  transition: border-color 0.2s, background 0.2s;
}

#csos .fc:hover {
  border-color: var(--nlm-signal);
}

#csos .fc.is-sel {
  border-color: var(--nlm-signal);
  background: var(--nlm-signal-soft);
}

#csos .fc-r {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#csos .fc.is-skip .fc-r {
  font-family: inherit;
  font-weight: 500;
  color: var(--nlm-fg-3);
}

#csos .fc-c {
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#csos .fly-env {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--nlm-signal);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgb(61 107 255 / 35%);
}

#csos .fly-env svg {
  width: 15px;
  height: 15px;
}

#csos .dr-skip[hidden],
#csos .dr-empty[hidden] {
  display: none;
}

#csos .dr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

#csos .dr-t {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  font-size: 15px;
  color: var(--nlm-fg-2);
}

#csos .dr-t b {
  font-family: var(--nlm-font-mono);
  color: var(--nlm-fg-1);
}

#csos .dr-t :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
  color: var(--nlm-signal);
}

#csos .eta-pill {
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 999px;
  padding: 4px 11px;
}

#csos .dr-kv {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 14px;
  margin-bottom: 16px;
}

#csos .dr-kv > div {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  border-bottom: 0;
  border-inline-start: 1px solid var(--nlm-line);
  padding-inline-start: 10px;
}

#csos .dr-kv dd {
  text-align: start;
  white-space: normal;
}

#csos .dr-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 16px;
}

#csos .dr-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

#csos .dr-read {
  background: var(--nlm-gray-50);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
  min-height: 132px;
}

#csos .dr-read-t {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nlm-signal-ink);
}

#csos .xc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#csos .xc li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--nlm-fg-2);
  border-inline-start: 3px solid var(--nlm-success);
  padding-block: 3px;
  padding-inline: 10px 0;
}

#csos .xc b {
  font-weight: 600;
  text-align: end;
  color: var(--nlm-success);
}

#csos .xc li.is-bad {
  border-inline-start-color: var(--nlm-danger);
}

#csos .xc li.is-bad b {
  color: var(--cs-crit-ink);
}

#csos .xc li.is-warn {
  border-inline-start-color: var(--cs-warn);
}

#csos .xc li.is-warn b {
  color: var(--cs-warn-ink);
}

#csos .dr-msg {
  border-top: 1px solid var(--nlm-line);
  padding-top: 14px;
}

#csos .dr-msg .panel-t {
  display: block;
}

#csos .dr-text {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
  background: rgb(34 211 238 / 5%);
  border: 1px solid var(--cs-cyan-ink);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}

#csos .dr-text[hidden],
#csos .dr-none[hidden],
#csos .dr-flag[hidden],
#csos .dr-sent[hidden],
#csos [data-d-approve][hidden],
#csos .dr-done[hidden] {
  display: none;
}

#csos .dr-none {
  margin: 0;
  font-size: 13.5px;
  color: var(--nlm-fg-3);
}

#csos .dr-send {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}

#csos .dr-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nlm-success);
}

#csos .dr-sent :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

/* A setting, not a warning: grey when off, on a light panel. */
#csos .dr-sw {
  font-size: 13px;
  color: var(--nlm-fg-1);
  background: #fff;
  border-color: var(--nlm-line-strong);
}

#csos .dr-sw[aria-checked="false"] .qsw-k {
  background: var(--nlm-fg-3);
}

#csos .dr-flag {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--cs-warn-ink);
}

#csos .dr-done {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--nlm-line);
}

#csos .dr-ready {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nlm-success);
}

#csos .dr-done .dr-a {
  margin-inline-start: auto;
}

#csos .dr-note {
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#csos .auto-note {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nlm-fg-2);
}

#csos .auto-note summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#csos .auto-note summary :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

#csos .auto-note[open] summary :is(svg, i[data-lucide]) {
  transform: rotate(180deg);
}

#csos .auto-note p {
  max-width: 780px;
  margin: 8px 0 0;
}

/* ---------- 04 before the ship docks ---------- */

/* Tab A: the readiness board. Each risk carries a word as well as a colour. */
#csos .bd-b {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font: inherit;
  text-align: start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

#csos .bd-b b {
  font-family: var(--nlm-font-mono);
  font-size: 12.5px;
  color: var(--nlm-signal-ink);
  text-decoration: underline;
  text-decoration-color: rgb(61 107 255 / 35%);
  text-underline-offset: 3px;
}

#csos .bd-b span {
  font-size: 12px;
  font-weight: 400;
  color: var(--nlm-fg-3);
}

#csos .bd tr.is-sel {
  background: rgb(61 107 255 / 6%);
}

#csos .bd-r {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#csos .bd-bar {
  position: relative;
  width: 70px;
  height: 7px;
  background: var(--nlm-gray-100);
  border-radius: 999px;
  overflow: hidden;
}

#csos .bd-bar i {
  position: absolute;
  inset: 0;
  inset-inline-end: auto;
  width: calc(var(--f) * 100%);
  background: var(--rk, var(--nlm-fg-3));
  border-radius: 999px;
  transition: width 0.5s var(--nlm-ease);
}

#csos .rk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rk-ink, var(--nlm-fg-2));
}

#csos .rk i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rk, var(--nlm-fg-3));
}

#csos .rk-crit {
  --rk: var(--nlm-danger);
  --rk-ink: var(--cs-crit-ink);
}

#csos .rk-warn {
  --rk: var(--cs-warn);
  --rk-ink: var(--cs-warn-ink);
}

#csos .rk-track {
  --rk: var(--nlm-fg-3);
  --rk-ink: var(--nlm-fg-2);
}

#csos .rk-ok {
  --rk: var(--nlm-success);
  --rk-ink: var(--nlm-success);
}

#csos .bd-d {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-inline-start: 4px solid var(--rk);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--nlm-fg-2);
}

#csos .bd-d p {
  margin: 0 0 6px;
}

#csos .bd-dt b {
  font-family: var(--nlm-font-mono);
  color: var(--nlm-fg-1);
}

#csos .bd-miss > span:first-child {
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#csos .bd-call {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
}

#csos .bd-call[hidden] {
  display: none;
}

#csos .bd-rem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--cs-crit-ink);
}

#csos .bd-rem :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

/* Tab B: HS codes. */
#csos .hsl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#csos .hsx {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-block-start: 3px solid var(--cs-warn);
  border-radius: 14px;
  padding: 14px;
}

#csos .hsx.is-ok {
  border-block-start-color: var(--nlm-success);
}

#csos .hsx-d {
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--nlm-fg-1);
}

#csos .hsx-codes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#csos .hsx-codes .hs-pill {
  font-size: 14px;
}

#csos .hsx-codes > :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
  color: var(--nlm-fg-3);
}

#csos .hsx-same {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nlm-success);
}

#csos .hsx-same :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
}

#csos .hsx-r {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nlm-fg-2);
}

#csos .hsx-conf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#csos .hsx-bar {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--nlm-gray-100);
  border-radius: 999px;
  overflow: hidden;
}

#csos .hsx-bar i {
  position: absolute;
  inset: 0;
  inset-inline-end: auto;
  width: calc(var(--f) * 100%);
  background: var(--nlm-signal);
}

#csos .hsx-conf b {
  color: var(--nlm-fg-1);
}

#csos .hsx .dr-a {
  margin-top: auto;
}

/* Tab C: duty and VAT. */
#csos .du-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

#csos .du-in .panel-t {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#csos .du-in .panel-t :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
  color: var(--nlm-signal);
}

#csos .du-in .qrate input {
  width: 130px;
}

#csos .du-rows {
  margin: 0 0 12px;
}

#csos .du-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nlm-line);
  font-size: 14px;
  color: var(--nlm-fg-2);
}

#csos .du-rows dd {
  margin: 0;
}

#csos .du-rows output {
  font-family: var(--nlm-font-mono);
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#csos .du-tot {
  font-weight: 700;
}

#csos .du-tot output {
  font-size: 20px;
  color: var(--nlm-signal-ink);
}

#csos .du-wait {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--cs-crit-ink);
}

#csos .du-wait :is(svg, i[data-lucide]) {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

/* ---------- 05 inbox to release ---------- */
#csos .fo {
  --p: 1;

  max-width: 860px;
}

#csos .fo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

#csos .fo-file {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 14px;
  color: var(--nlm-navy-300);
}

#csos .fo-file b {
  font-family: var(--nlm-font-mono);
  color: #fff;
}

#csos .fo-file :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
  color: var(--cs-cyan);
}

#csos .fo-st {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The line the file travels, filled as far as it has come. */
#csos .fo-st::before,
#csos .fo-st::after {
  content: "";
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 17px;
  width: 2px;
  height: calc(100% - 36px);
  background: rgb(255 255 255 / 12%);
}

#csos .fo-st::after {
  height: calc((100% - 36px) * var(--p));
  background: var(--cs-cyan);
  transition: height 0.6s var(--nlm-ease);
}

#csos .fo-s {
  position: relative;
  display: grid;
  grid-template-columns: 36px 96px minmax(0, 1fr);
  grid-template-areas:
    "n w t"
    "n w d";
  gap: 0 12px;
  align-items: center;
  color: var(--nlm-navy-300);
  opacity: 0.45;
  transition: opacity 0.35s, color 0.35s;
}

#csos .fo-s.is-done,
#csos .fo-s.is-on {
  opacity: 1;
}

#csos .fo-n {
  grid-area: n;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--nlm-navy-300);
  background: var(--nlm-navy-900);
  border: 1.5px solid rgb(255 255 255 / 18%);
  transition: background 0.35s, border-color 0.35s, color 0.35s;
}

#csos .fo-n :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#csos .fo-s.is-ai:is(.is-done, .is-on) .fo-n {
  color: var(--nlm-navy-950);
  background: var(--cs-cyan);
  border-color: var(--cs-cyan);
}

#csos .fo-s.is-gold:is(.is-done, .is-on) .fo-n {
  color: var(--pq-gold-ink);
  background: var(--pq-gold);
  border-color: var(--pq-gold);
}

#csos .fo-s:not(.is-ai, .is-gold):is(.is-done, .is-on) .fo-n {
  color: #fff;
  border-color: rgb(255 255 255 / 45%);
}

#csos .fo-s.is-on .fo-n {
  box-shadow: 0 0 0 6px rgb(34 211 238 / 18%);
}

#csos .fo-w {
  grid-area: w;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
}

#csos .fo-s b {
  grid-area: t;
  font-family: var(--nlm-font-display);
  font-size: 15.5px;
  color: #fff;
}

#csos .fo-d {
  grid-area: d;
  font-size: 13.5px;
}

#csos .fo-s small {
  grid-area: t;
  justify-self: end;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-cyan);
}

#csos .fo-s.is-gold small {
  color: var(--pq-gold);
}

#csos .fo-cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 21px);
  color: #fff;
  transition: opacity 0.4s;
}

#csos .fo-cap :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
  color: var(--nlm-success);
}

#csos .fo-cap em {
  font-family: var(--nlm-font-body, inherit);
  font-size: 13px;
  font-weight: 400;
  color: var(--nlm-navy-400);
}

#csos .fo-cap.is-off {
  opacity: 0;
  transform: none;
}

/* ---------- motion ---------- */
@keyframes cs-scan {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes cs-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cs-drop {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cs-slam {
  0% {
    opacity: 0;
    transform: scale(1.35);
  }

  60% {
    opacity: 1;
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes cs-cursor {
  0% {
    transform: translate(0, 0);
  }

  40% {
    transform: translate(-30px, 8px);
  }

  70% {
    transform: translate(10px, 40px);
  }

  100% {
    transform: translate(40px, 76px);
  }
}

@keyframes cs-roll3 {
  0%,
  100% {
    margin-block-start: 0;
  }

  33% {
    margin-block-start: -1.3em;
  }

  66% {
    margin-block-start: -2.6em;
  }
}

@keyframes cs-flip {
  0%,
  45% {
    margin-block-start: 0;
  }

  55%,
  100% {
    margin-block-start: -1.4em;
  }
}

@keyframes cs-stampdrop {
  0%,
  50% {
    opacity: 0;
    transform: scale(1.6);
  }

  60%,
  95% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes cs-wiggle {
  0%,
  100% {
    rotate: 4deg;
  }

  50% {
    rotate: -3deg;
  }
}

@keyframes cs-thread {
  0% {
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes cs-open {
  0% {
    color: var(--nlm-fg-1);
    background: var(--nlm-signal-soft);
  }

  33%,
  100% {
    color: var(--nlm-fg-3);
    background: transparent;
  }
}

@keyframes cs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- responsive (CustomsOS objects) ---------- */
@media (width <= 1180px) {
  #csos .day-n {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #csos .lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #csos .lane {
    min-height: 180px;
  }

  #csos .dr-kv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
  }
}

@media (width <= 980px) {
  #csos .rq-g,
  #csos .dr-g,
  #csos .du-g,
  #csos .out-g,
  #csos .tabp {
    grid-template-columns: minmax(0, 1fr);
  }

  #csos .hsl {
    grid-template-columns: minmax(0, 1fr);
  }

  #csos .rq-list .cks {
    min-height: 0;
  }

  #csos .drawer {
    min-height: 0;
  }
}

@media (width <= 760px) {
  #csos .ib-g {
    grid-template-columns: minmax(0, 1fr);
  }

  #csos .inbox {
    min-height: 360px;
  }

  #csos .csh-g {
    grid-template-columns: minmax(0, 1fr);
  }

  #csos .csh-alerts li {
    font-size: 8.5px;
  }

  #csos .fo-s {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "n t"
      "n w"
      "n d";
  }

  #csos .fo-s small {
    justify-self: start;
    grid-area: auto;
    grid-column: 2;
  }
}

@media (width <= 640px) {
  #csos .day-n {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #csos .steps,
  #csos .feats,
  #csos .tl {
    grid-template-columns: minmax(0, 1fr);
  }

  #csos .dr-kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #csos .lane {
    min-height: 0;
  }

  #csos .bd-bar {
    width: 44px;
  }

  #csos .dr-sw {
    flex-basis: 100%;
  }
}

/* Company names are Latin in both languages; in Arabic they take their own
   direction, so "Gulf Build Co." keeps its full stop at the end. */
#csos :is(.fc-c, .bd-b span, .mail-f > span:first-child, [data-d="customer"], [data-bd-cust], .dr-read dd, .csh-mh b) {
  unicode-bidi: plaintext;
}