/* ==========================================================================
   CANNASPACE PRAGUE — Delivery Status
   Single-view status page. Mobile-first; widens to two columns >= 900px.
   Sections: 1 tokens · 2 reset · 3 layout · 4 header · 5 tabs
             · 6 rows · 7 footer · 8 responsive
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --c-bg:            #2b2554;   /* page ground, outside the card */
  --c-surface:       #3d3573;   /* card ground */
  --c-surface-alt:   #5B4FA1;   /* header ground behind the photo */
  --c-shade:         20, 16, 46;/* near-black used for header scrims (rgb parts) */
  --c-accent:        #CCDC33;   /* brand lime */
  --c-accent-rgb:    204, 220, 51;
  --c-ink:           #ffffff;
  --c-ink-70:        rgba(255,255,255,0.72);
  --c-ink-60:        rgba(255,255,255,0.60);
  --c-ink-45:        rgba(255,255,255,0.45);
  --c-hairline:      rgba(255,255,255,0.14);
  --c-outline:       rgba(255,255,255,0.25);

  --font-stack: 'PP Neue Machina', 'Space Grotesk', system-ui, sans-serif;

  --fs-title:   34px;
  --fs-row:     15px;
  --fs-body:    12.5px;
  --fs-sub:     12px;
  --fs-label:   12px;
  --fs-badge:    9px;
  --fs-meta:    9.5px;

  --track-label: 0.14em;   /* tracking on all-caps labels */

  --sp-gutter:  24px;      /* card side padding */
  --sp-row:     15px;      /* vertical row padding */

  --card-max:  414px;      /* raise to ~860px to run two columns on desktop */
}

/* 2 · Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--c-bg);
  font-family: var(--font-stack);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-ink); }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* 3 · Layout ------------------------------------------------------------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

.card {
  width: 100%;
  max-width: var(--card-max);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  color: var(--c-ink);
}

/* 4 · Header ------------------------------------------------------------- */
.card__header {
  position: relative;
  padding: 26px var(--sp-gutter) 22px;
  background:
    /* bottom scrim — keeps the progress bar legible over the photo */
    linear-gradient(to top,
      rgba(var(--c-shade), 0.92) 0%,
      rgba(var(--c-shade), 0.68) 18%,
      rgba(var(--c-shade), 0.28) 34%,
      rgba(var(--c-shade), 0) 46%),
    /* left scrim — protects the logo and title */
    linear-gradient(100deg,
      rgba(43, 37, 84, 0.94) 0%,
      rgba(43, 37, 84, 0.80) 40%,
      rgba(43, 37, 84, 0.42) 66%,
      rgba(43, 37, 84, 0.12) 100%),
    url('../assets/header-bg.jpg') center right / cover no-repeat,
    var(--c-surface-alt);
}

/* Mission-control grid overlay */
.card__header-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 34px 34px;
}

.card__header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.card__brandline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.card__logo { height: 30px; width: auto; }

.card__version {
  padding-top: 4px;
  font-weight: 700;
  font-size: var(--fs-badge);
  letter-spacing: 0.2em;
  color: var(--c-ink-70);
}

.card__title { margin: 0; }
h2.track__name { font-size: var(--fs-label); }

.card__title-line {
  display: block;
  font-weight: 800;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.card__title-line--accent { color: var(--c-accent); }

/* Progress -------------------------------------------------------------- */
.progress { display: flex; flex-direction: column; gap: 9px; }

.progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.progress__label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.88);
}

.progress__value {
  font-weight: 800;
  font-size: var(--fs-row);
  letter-spacing: 0.02em;
  color: var(--c-accent);
  /* lime halo + tight dark edge so the number holds over the photo */
  text-shadow: 0 0 14px rgba(var(--c-accent-rgb), 0.55),
               0 0 4px rgba(var(--c-shade), 0.9);
}

.progress__track { height: 6px; background: rgba(255,255,255,0.5); }
.progress__fill  { height: 100%; width: 0; background: var(--c-accent); transition: width 300ms ease; }

/* 5 · Tabs --------------------------------------------------------------- */
.tabs {
  padding: 16px var(--sp-gutter) 0;
  display: flex;
  gap: 7px;
}

.tab {
  /* asymmetric padding compensates for trailing letter-spacing and the
     unused descender space under all-caps text — optical, not geometric */
  padding: 8.5px 11px 7px 12.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font: inherit;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--track-label);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  color: var(--c-ink-70);
  border-radius: 0;
}

.tab:hover { color: var(--c-ink); border-color: rgba(255,255,255,0.5); }

.tab[aria-selected="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-surface);
}

/* 6 · Tracks & rows ------------------------------------------------------ */
.tracks {
  padding: 8px var(--sp-gutter) 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 40px;
  align-items: start;
}

.track { display: flex; flex-direction: column; }
.track[hidden] { display: none; }

.track__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 22px 0 10px;
}

.track__num {
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--c-accent);
}

.track__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--c-ink);
}

.item { border-top: 1px solid var(--c-hairline); padding: var(--sp-row) 0; }
.item:last-child { border-bottom: 1px solid var(--c-hairline); }

.item__main {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 14px;
  align-items: start;
}

a.item__main:hover .item__name { color: var(--c-accent); }

/* Tick ------------------------------------------------------------------- */
.tick {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 1px;
  font-weight: 800;
  font-size: var(--fs-label);
  color: var(--c-surface);
  background: var(--c-accent);
}

.tick--muted { background: rgba(255,255,255,0.32); }          /* done, but ongoing */
.tick--open  { background: none; border: 1px solid rgba(255,255,255,0.4); }

.item__text { display: block; }

.item__name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-row);
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.item__name--muted { color: var(--c-ink-70); }

.item__desc {
  display: block;
  margin-top: 4px;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-ink-60);
  text-wrap: pretty;
}

/* Badges ----------------------------------------------------------------- */
.item__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.badge {
  padding: 5.5px 6px 4px 7.3px;   /* optical centering — see .tab */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  font-size: var(--fs-badge);
  letter-spacing: var(--track-label);
  color: var(--c-ink-45);
  border: 1px solid var(--c-outline);
}

.badge--live { color: var(--c-accent); border-color: rgba(var(--c-accent-rgb), 0.6); }

.item__arrow { font-weight: 700; font-size: 13px; color: var(--c-accent); }

/* Sub-items covered by a parent deliverable ------------------------------ */
.subitems {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 0 34px;
  padding-left: 14px;
  border-left: 1px solid rgba(var(--c-accent-rgb), 0.35);
  list-style: none;
}

.subitem {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: baseline;
}

.subitem__tick { font-weight: 800; font-size: 11px; color: var(--c-accent); }

.subitem__text {
  font-weight: 300;
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
}

/* Status pill ------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 5.5px 8px 4px 9.3px;
  border: 1px solid rgba(var(--c-accent-rgb), 0.5);
  background: rgba(var(--c-accent-rgb), 0.1);
}

.pill__dot {
  width: 5px;
  height: 5px;
  background: var(--c-accent);
  position: relative;
  top: -1px;   /* aligns the square to the caps' optical centre */
}

.pill__text {
  font-weight: 700;
  font-size: var(--fs-badge);
  letter-spacing: var(--track-label);
  line-height: 1;
  color: rgba(var(--c-accent-rgb), 0.9);
}

/* 7 · Footer ------------------------------------------------------------- */
.card__footer {
  padding: 20px var(--sp-gutter) 26px;
  border-top: 1px solid var(--c-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.card__meta {
  font-weight: 300;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgba(255,255,255,0.4);
}

.card__signature { height: 26px; width: auto; opacity: 0.28; }

/* 8 · Responsive --------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --card-max: 860px; }
  .tracks { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}