/* Direction: ShipSync — royal blue operations console, crisp white cards, vibrant cyan actions */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f1f5fb;
  --surface: #ffffff;
  --surface-2: #e5eaf0;
  --border: #dae2f0;
  --border-strong: #a9b3b9;
  --ink: #10236b;
  --muted: #56658a;
  --accent: #06b6d4;
  --accent-hover: #059bb4;
  --accent-ink: #01191e;
  --accent-text: #0d6b84;
  --accent-strong: #066f81;
  --accent-soft: #d0ecf6;
  --accent-border: #87d9e9;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d7e7e4;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eae2de;
  --warning-strong: #994607;
  --danger: #dc2626;
  --danger-ink: #ffffff;
  --danger-soft: #eedce1;
  --danger-strong: #ba2020;
  --chart-1: #1d9ab3;
  --chart-2: #917bd3;
  --chart-3: #a05290;
  --chart-4: #ce6d53;
  --chart-5: #836f06;
  --chart-6: #329d63;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --shadow-card: 0 1px 2px rgba(16, 35, 107, 0.06), 0 6px 20px rgba(16, 35, 107, 0.06);
  --x-sidebar: #1d3fbb;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #010d10;
  --surface: #1a2528;
  --surface-2: #0e191c;
  --border: #252f31;
  --border-strong: #4d5658;
  --ink: #f1f5fb;
  --muted: #91989d;
  --accent: #06b6d4;
  --accent-hover: #2bc1da;
  --accent-ink: #01191e;
  --accent-text: #06b6d4;
  --accent-strong: #06b6d4;
  --accent-soft: #02323b;
  --accent-border: #035968;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #05261a;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #281c0e;
  --warning-strong: #c57a40;
  --danger: #dc2626;
  --danger-ink: #ffffff;
  --danger-soft: #311315;
  --danger-strong: #e45656;
  --chart-1: #06b6d4;
  --chart-2: #acb9fa;
  --chart-3: #ba6aa9;
  --chart-4: #fb9c84;
  --chart-5: #9e861d;
  --chart-6: #70d597;
}

.sidebar { position: fixed; inset: 0 auto 0 0; width: 16.5rem; z-index: 50; background: linear-gradient(180deg, var(--x-sidebar), color-mix(in srgb, var(--x-sidebar) 80%, var(--ink))); color: var(--x-on-photo); transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar.open { transform: none; }
.scrim { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--ink) 55%, transparent); display: none; }
.scrim.open { display: block; }
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; height: 100vh; transform: none; flex: none; }
  .scrim, .scrim.open { display: none; }
}
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: .75rem; font-weight: 500; font-size: .92rem; color: color-mix(in srgb, var(--x-on-photo) 82%, transparent); transition: background .15s, color .15s; }
.nav-link:hover { background: color-mix(in srgb, var(--x-on-photo) 12%, transparent); color: var(--x-on-photo); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .65rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.pill-green { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pill-amber { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.pill-red { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.pill-blue { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.pill-cyan { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.pill-grey { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.tag-sample { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: .4rem; font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); vertical-align: middle; }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .7rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl a:not(.btn) { color: var(--accent-text); font-weight: 600; }
.tbl a:not(.btn):hover { text-decoration: underline; }

.flash { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 500; margin-bottom: 1.25rem; }
.flash-ok { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.flash-err { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.kpi { position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -1.5rem; top: -1.5rem; width: 5rem; height: 5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, transparent); pointer-events: none; }
.kpi-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }

.bar { transition: height .5s ease, width .5s ease; }
.track { height: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
.track > span { display: block; height: 100%; border-radius: 999px; }

.tl { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.tl-step { position: relative; padding: 0 0 1.5rem 2.6rem; min-height: 3rem; }
.tl-step::before { content: ""; position: absolute; left: .95rem; top: 1.9rem; bottom: -.1rem; width: 2px; background: var(--border); }
.tl-step:last-child::before { display: none; }
.tl-step.done::before { background: var(--accent); }
.tl-dot { position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--surface); color: var(--muted); font-size: .75rem; }
.tl-step.done .tl-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tl-step.current .tl-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); }
.tl-step.bad .tl-dot { background: var(--danger); border-color: var(--danger); color: var(--x-on-photo); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 20%, transparent); }
@media (min-width: 768px) {
  .tl { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .tl-step { padding: 2.7rem .5rem 0 0; }
  .tl-step::before { left: 1.9rem; right: 0; top: .95rem; bottom: auto; width: auto; height: 2px; }
}

dialog.modal { width: min(46rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.fgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid .span2 { grid-column: span 2; } }
.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--canvas) 94%, transparent); border-bottom: 1px solid var(--border); }
.auth-art { background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 45%), linear-gradient(160deg, var(--x-sidebar), color-mix(in srgb, var(--x-sidebar) 60%, var(--ink))); color: var(--x-on-photo); }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) { .bar, .sidebar { transition: none; } }