/* MasterCraft — Milieu flagship system.
   Light premium surfaces, Midnight Navy hero, one accent (Milieu Blue),
   dense operational cards. All values come from the tokens below. */

:root {
  /* Color — built on the Milieu brand kit (assets/palette.txt) */
  --ink: #0a1d37;         /* Midnight Navy: headings, dark panel */
  --bg: #f5f7fa;          /* Page canvas */
  --paper: #ffffff;       /* Cards, header, controls */
  --surface: #eef1f5;     /* Quiet fills */
  --line: #e4e8ee;        /* Card hairlines */
  --line-strong: #d3dae3; /* Inputs, dividers */
  --muted: #5c6b7f;       /* Secondary text */
  --blue: #0f69f0;        /* The accent */
  --blue-deep: #0b54c4;
  --blue-soft: #e8f1fe;   /* Accent tint, focus ring */
  --green-bg: #e7fbdb;    /* Live chip */
  --green-ink: #0c3e26;
  --green-line: #c2f0a6;
  --red: #d90429;         /* Error only */
  --on-dark: #f2f6fb;
  --on-dark-muted: #aebfd6;

  /* Per-app identity tokens */
  --dot-photocraft: #0f69f0;   --dot-vectorcraft: #00a896;
  --dot-designcraft: #5e60ce;  --dot-figcraft: #3d348b;
  --dot-lightcraft: #e85d04;   --dot-pdfcraft: #d90429;
  --dot-soundcraft: #0c3e26;   --dot-cadcraft: #4f5d75;
  --dot-gridcraft: #ffe12d;    --dot-wordcraft: #0a1d37;
  --dot-deckcraft: #acff7d;    --dot-effectcraft: #bcbec0;
  --dot-filmcraft: #000000;
  --dot-boardcraft: #7b2cbf;   --dot-postercraft: #e5006a;
  --dot-layercraft: #00b4d8;   --dot-clipcraft: #2dc653;

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2rem, 5vw, 3rem);
  --fs-h2: clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-body: 0.9375rem;
  --fs-sm: 0.84rem;
  --fs-xs: 0.72rem;

  /* Spacing (4px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Form */
  --container: 1200px;
  --r-1: 6px; --r-2: 10px; --r-3: 14px;
  --sh-1: 0 1px 2px rgba(10, 29, 55, 0.05);
  --sh-2: 0 4px 14px -2px rgba(10, 29, 55, 0.12);
  --sh-3: 0 16px 36px -12px rgba(10, 29, 55, 0.30);

  /* Motion */
  --ease: 150ms ease;

  /* Z-index scale */
  --z-nav: 100;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 {
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.5em;
  letter-spacing: -0.025em;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--blue-soft); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--s-3);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
}
.brand img { height: 22px; width: auto; display: block; }
.brand-divider { width: 1px; height: 20px; background: var(--line-strong); }
.brand-name { font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 20px;
  border-radius: var(--r-1);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease),
              border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.button-primary {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(15, 105, 240, 0.65);
}
.button-primary:hover { background: var(--blue-deep); color: #ffffff; transform: translateY(-1px); }
.button-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button-outline:hover { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.button[disabled], .button[aria-disabled="true"] {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- Hero: Midnight Navy panel ---------- */

.hero {
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--ink);
}
.hero h1 { color: #ffffff; max-width: 18ch; }
.hero .eyebrow { color: #6ea8ff; }

/* ---------- Filter field ---------- */

.field input {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: 8px 12px;
  width: 230px;
  max-width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ---------- Sections ---------- */

.section { padding: var(--s-7) 0 var(--s-8); scroll-margin-top: 72px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section-head p { margin: 0; color: var(--muted); max-width: 52ch; font-size: var(--fs-sm); }

/* ---------- Launch cards ---------- */

.app-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s-3);
}
.app-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 118px;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.app-row:hover {
  color: var(--ink);
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-3);
}
.app-row:active { transform: translateY(-1px); box-shadow: var(--sh-2); }
.app-row:focus-visible { outline-offset: -2px; }
.app-row.is-hidden { display: none; }

.app-row-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.app-row-icon { width: 44px; height: 44px; flex: none; border-radius: 10px; }
@media (max-width: 767px) { .app-row-icon { width: 36px; height: 36px; } }
.app-row-name {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-row:hover .app-row-name { color: var(--blue); }
.app-row-meta { color: var(--muted); font-size: var(--fs-sm); }
.app-row-meta .app-peer { display: block; font-size: var(--fs-xs); }
.app-row-end { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.app-row-arrow { color: var(--muted); transition: transform var(--ease), color var(--ease); }
.app-row:hover .app-row-arrow { color: var(--blue); transform: translateX(3px); }

/* Per-app dot palette (identity surfaces). */
.dot-photocraft  { background: var(--dot-photocraft); }
.dot-vectorcraft { background: var(--dot-vectorcraft); }
.dot-designcraft { background: var(--dot-designcraft); }
.dot-figcraft    { background: var(--dot-figcraft); }
.dot-lightcraft  { background: var(--dot-lightcraft); }
.dot-pdfcraft    { background: var(--dot-pdfcraft); }
.dot-soundcraft  { background: var(--dot-soundcraft); }
.dot-cadcraft    { background: var(--dot-cadcraft); }
.dot-gridcraft   { background: var(--dot-gridcraft); }
.dot-wordcraft   { background: var(--dot-wordcraft); }
.dot-deckcraft   { background: var(--dot-deckcraft); }
.dot-effectcraft { background: var(--dot-effectcraft); }
.dot-filmcraft   { background: var(--dot-filmcraft); }

/* ---------- Status chips ---------- */

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.chip-live { background: var(--green-bg); color: var(--green-ink); border: 1px solid var(--green-line); }
.chip-soon { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-5);
  background: var(--paper);
}
.footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.footer-strip img { height: 30px; width: auto; }

/* Plugin mount point: styled by the site, filled by plugins */
.plugin-slot:empty { display: none; }

/* ---------- 404 ---------- */

.error-page { padding: 96px 0; text-align: left; }
.error-page h1 { margin-bottom: var(--s-3); }
.error-page p { max-width: 56ch; }
.error-dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.error-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: var(--sh-1);
  transition: transform var(--ease);
}
.error-dot:hover { transform: scale(1.2); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .app-row-meta .app-peer { display: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 var(--s-4); }
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .section { padding: var(--s-6) 0 var(--s-7); }
  .section-head .field, .field input { width: 100%; }
  .app-index { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
  .app-row { padding: var(--s-3); min-height: 104px; }
  .app-row-name { font-size: 0.92rem; }
}