@import "./tokens.css";

/* ============================================================
   alih-daya (etalase) — shared base styles

   Generic, reused by /dashboard/: type scale, buttons, card, pill,
   container, section rhythm. Nothing landing-specific belongs above
   the "LANDING-ONLY" marker near the bottom of this file.

   Every colour / space / radius / font comes from tokens.css. No hex,
   no invented px outside the token scale.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, li, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---- layout ---------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.section {
  padding-block: var(--space-16);
}

.section__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: var(--text-body-lg);
  color: var(--ink-2);
  max-width: var(--measure-lead);
  margin-bottom: var(--space-8);
}

@media (min-width: 960px) {
  .section { padding-block: var(--space-24); }
}

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-6);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  /* Ink, NOT Ember. Ember means "attention needed here" on this surface, and a
     solid Ember button out-shouts the one genuinely urgent thing on the page,
     an unfilled Pos. Spending the heat source on a call to action steals the
     meaning the severity ladder depends on. */
  background: var(--n-900);
  color: var(--n-50);
  box-shadow: var(--elev-1);
}

@media (hover: hover) {
  .btn-primary:hover { filter: brightness(0.94); }
}

/* ---- card --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
}

/* ---- pill (severity + neutral) ------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
}

.pill--kosong {
  background: var(--sev-kosong-soft);
  color: var(--sev-kosong-text);
}

.pill--tunggu {
  background: var(--sev-tunggu-soft);
  color: var(--sev-tunggu-text);
}

.pill--calm {
  background: var(--n-100);
  color: var(--muted);
}

/* ===========================================================
   LANDING-ONLY — hero, board preview, chain diagram, faq, etc.
   =========================================================== */

.site-head {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}

/* The mesindev lockup, reproduced from the real components rather than
   approximated: fkd/mesindev/site/components/Mark.tsx (lowercase Instrument
   Serif "m" + an accent cursor bar, "a prompt awaiting input, no gear drawn")
   and Wordmark.tsx (Instrument Serif, lowercase, letter-spacing -0.03em).
   Instrument Serif appears here and nowhere else on the page. */
.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink);
}

.lockup__word {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.lockup__cursor {
  display: block;
  flex-shrink: 0;
  width: 9px;
  height: 3px;
  background: var(--accent);
}

.site-foot__link {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero {
  padding-block: var(--space-8) var(--space-6);
}

.hero__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: 1.08;
  color: var(--ink);
  max-width: var(--measure-display);
  margin-bottom: var(--space-3);
}

.hero__sub {
  font-size: var(--text-body-lg);
  color: var(--ink-2);
  max-width: var(--measure-lead);
  margin-bottom: var(--space-4);
}

/* DESKTOP IS NOT MOBILE STRETCHED. On a phone the only axis is vertical order,
   so the promise and the proof are read one after the other. A wide screen adds
   adjacency, and adjacency means the visitor reads the claim WHILE looking at
   the thing that proves it. Stretching the preview to 1040px instead would put
   two rows across a full page width and read as an empty table. */
@media (min-width: 960px) {
  .hero { padding-block: var(--space-24) var(--space-16); }
  .hero__inner {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: var(--space-16);
    align-items: center;
  }
  .hero__h1 { font-size: var(--text-display); }
  .hero__sub { font-size: var(--text-h3); }
  .board-preview-wrap { display: none; }
}

/* ---- board preview ---- */

.hero__show { padding-bottom: var(--space-16); }

@media (min-width: 960px) {
  .hero__show { padding-bottom: 0; }
}

.board-preview {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-2);
  overflow: hidden;
}

.board-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.board-preview__title {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink);
}

.board-preview__slot {
  font-size: var(--text-mono);
  color: var(--muted);
}

.board-preview__list {
  display: flex;
  flex-direction: column;
}

.pos-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.pos-row:last-child { border-bottom: none; }

/* No coloured left rule; see dashboard.css. The tint and the named state
   carry it, and the bar was a third encoding of the same fact. */
.pos-row--kosong { background: var(--sev-kosong-soft); }
.pos-row--tunggu { background: var(--sev-tunggu-soft); }

/* On a tinted row the pill's own fill is the same colour as the row, so the
   chip was invisible markup doing nothing. The state reads as a plain label in
   its severity colour, which is one less box on the page. */
.pos-row .pill {
  margin-bottom: 2px;
  background: none;
  padding-inline: 0;
}

.pos-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.pos-row__where {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
}

.pos-row__what {
  font-size: var(--text-small);
  color: var(--muted);
}

.pos-row--calm {
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-small);
  padding-block: var(--space-3);
}

.board-preview__caveat {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--faint);
  font-style: italic;
}

/* ---- chain diagram ---- */

.chain-svg {
  width: 100%;
  height: auto;
  margin-top: var(--space-8);
}

.chain-svg__label {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--muted);
}

.chain-svg__label--live { fill: var(--ink); font-weight: 500; }

/* What each stop answers. The diagram's whole job is that these three
   questions are one row, not three systems. */
.chain-svg__step {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--muted);
}

/* ---- cocok untuk ---- */

.fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.fit-card {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fit-card__h3 {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.fit-card__p {
  font-size: var(--text-small);
  color: var(--muted);
}

@media (min-width: 960px) {
  .fit-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- yang dashboard ini tolak ---- */

.refuse-list {
  display: flex;
  flex-direction: column;
}

.refuse-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}

.refuse-item__what {
  font-weight: 600;
  color: var(--ink);
}

.refuse-item__why {
  font-size: var(--text-small);
  color: var(--muted);
}

/* ---- faq ---- */

.faq-item {
  border-top: 1px solid var(--border);
  padding-block: var(--space-4);
}

.faq-item__q {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--muted);
}

.faq-item[open] .faq-item__q::before { content: "–"; }

.faq-item__a {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--muted);
  max-width: var(--measure-prose);
}

/* ---- tentang ---- */

.link-door {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border-strong);
}

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

.closing {
  padding-block: var(--space-16);
  background: var(--bg-deep);
}

.closing__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.closing__line {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  max-width: var(--measure-lead);
  color: var(--ink);
}

@media (min-width: 960px) {
  .closing__inner { align-items: center; text-align: center; }
  .closing__line { font-size: var(--text-h2); }
}

/* ---- footer ---- */

.site-foot {
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}

.site-foot__line {
  font-size: var(--text-small);
  color: var(--faint);
}

/* ---- process steps (Prototipe ini, dan yang setelahnya) ------------------ */

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
  counter-reset: none;
}

.steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.steps__n {
  flex: none;
  width: 28px;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--muted);
  padding-top: 2px;
}

.steps__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.steps__h {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--ink);
}

.steps__t {
  color: var(--ink-2);
  max-width: var(--measure-prose);
}

@media (min-width: 960px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
  .steps__item { flex-direction: column; gap: var(--space-2); }
}

/* ---- the seven screens, as doors ---------------------------------------- */

.screens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.screens__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.screens__item b { font-weight: 600; color: var(--ink); }
.screens__item span { font-size: var(--text-small); color: var(--muted); }

@media (hover: hover) {
  .screens__item:hover b { text-decoration: underline; text-underline-offset: 3px; }
}

@media (min-width: 960px) {
  .screens { grid-template-columns: 1fr 1fr; column-gap: var(--space-16); }
}