/* Manifest identity for the homepage, shared vocabulary with the app
   dashboard: Plex Sans Condensed headlines, Plex Mono labels and data,
   status stamps. Colors are variables so light and glass themes only have
   to swap the variables, never re-target the markup. */
:root {
  --mf-ink: #e2e8f0;
  --mf-muted: #94a3b8;
  --mf-line: rgba(148, 163, 184, 0.22);
  --mf-panel: rgba(11, 22, 29, 0.72);
  --mf-teal: #2dd4bf;
  --mf-sky: #38bdf8;
  --mf-amber: #fbbf24;
  --mf-green: #4ade80;
}
html[data-theme="light"] {
  --mf-ink: #1f2933;
  --mf-muted: #5b6672;
  --mf-line: rgba(31, 41, 51, 0.16);
  --mf-panel: rgba(255, 255, 255, 0.78);
  --mf-teal: #0f766e;
  --mf-sky: #0369a1;
  --mf-amber: #b45309;
  --mf-green: #15803d;
}

h1, h2 {
  font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif !important;
  letter-spacing: -0.012em;
}
h1 { font-weight: 700 !important; }

.mf-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mf-teal);
  border-bottom: 1px dashed var(--mf-line);
  padding-bottom: .55em;
}
.mf-eyebrow .sep { opacity: .45; }

/* "Today's manifest" band */
.mf-band { padding: 0 1.5rem; margin-top: -2.5rem; position: relative; z-index: 20; }
.mf-sheet {
  max-width: 64rem; margin: 0 auto;
  background: var(--mf-panel);
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.mf-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px dashed var(--mf-line);
  font: 500 11px/1.2 'IBM Plex Mono', ui-monospace, monospace !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mf-muted);
}
.mf-head .title { color: var(--mf-teal); }
.mf-head .note { margin-left: auto; text-transform: none; letter-spacing: 0; }
.mf-rows { list-style: none; margin: 0; padding: 0; }
.mf-row {
  display: grid; align-items: center; gap: .35rem 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr) 13.5rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--mf-line);
}
.mf-row:first-child { border-top: 0; }
.mf-po { font: 500 13px/1.2 'IBM Plex Mono', ui-monospace, monospace !important; color: var(--mf-ink); font-variant-numeric: tabular-nums; }
.mf-who { min-width: 0; }
.mf-who b { display: block; font-weight: 600; color: var(--mf-ink); font-size: 14px; }
.mf-who span {
  display: block; color: var(--mf-muted); font-size: 13px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mf-stamp-cell { justify-self: end; }
.mf-stamp {
  display: inline-flex; align-items: center; gap: .45em;
  font: 600 11px/1 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif !important;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor; border-radius: 4px; padding: 5px 8px 4px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
.mf-stamp::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mf-stamp[data-s="awaiting"] { color: var(--mf-sky); }
.mf-stamp[data-s="confirmed"] { color: var(--mf-green); }
.mf-stamp[data-s="delayed"] { color: var(--mf-amber); }
.mf-stamp[data-s="shipped"] { color: #a5b4fc; }
html[data-theme="light"] .mf-stamp[data-s="shipped"] { color: #4338ca; }

/* The one moving part: a fresh stamp lands like it was pressed onto paper. */
.mf-stamp.is-new { animation: mf-press .42s cubic-bezier(.16, 1, .3, 1) both; }
.mf-who span.is-new { animation: mf-fade .5s ease-out both; }
@keyframes mf-press {
  0% { transform: scale(1.35) rotate(-4deg); opacity: 0; }
  60% { transform: scale(.96) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes mf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mf-stamp.is-new, .mf-who span.is-new { animation: none; }
}

@media (max-width: 640px) {
  .mf-band { margin-top: -1.5rem; padding: 0 1rem; }
  .mf-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "po stamp" "who who"; }
  .mf-po { grid-area: po; }
  .mf-who { grid-area: who; }
  .mf-stamp-cell { grid-area: stamp; }
  .mf-who span { white-space: normal; }
  .mf-head .note { margin-left: 0; }
}

/* App-style status stamps for the demo dashboard (same look as the real
   app's StatusPill): keeps the existing Tailwind color classes, swaps the
   round chip for an outlined stamp. */
.mf-stamp-app {
  display: inline-flex; align-items: center; white-space: nowrap;
  font: 600 11px/1 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif !important;
  letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 4px; padding: 4px 7px 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
.mf-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 13px; }
td { font-variant-numeric: tabular-nums; }
thead th { font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif !important; letter-spacing: .06em; }