/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: custom "Filament"
 * เขียนแบบ mobile-first — กฎฐานคือหน้าจอโทรศัพท์ แล้วค่อยขยายที่ 40rem ขึ้นไป
 * ทุกสีและทุกฟอนต์อ้าง token จาก tokens.css ไม่มีค่าลอย
 */

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

/* คลาสหลายตัวตั้ง display ไว้ ซึ่งชนะแอตทริบิวต์ hidden ตามลำดับความจำเพาะ */
[hidden] { display: none !important; }

html, body { overflow-x: clip; margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-tight);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

.shell {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}

.hint { font-size: var(--text-sm); color: var(--color-ink-3); max-width: var(--measure); }
.num { font-variant-numeric: tabular-nums; }

/* ── nav ───────────────────────────────────────────────────── */

.masthead { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }

.masthead__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xs) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
}
.wordmark__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-ink-3);
}

.masthead__link {
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--color-accent-ink);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

/* ── announcement ──────────────────────────────────────────── */

.announce {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.announce > div {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xs) var(--gutter);
}

/* ── hero (index) ──────────────────────────────────────────── */

.hero {
  padding-block: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: start;
}
.hero h1 { font-size: var(--text-display); max-width: 14ch; }
.hero p { color: var(--color-ink-2); max-width: var(--measure); }

.hero__art {
  align-self: center;
  width: min(220px, 62vw);
  margin-block: var(--space-2xs) var(--space-xs);
}

/* ── หน้าหลัก ──────────────────────────────────────────────── */

.home-hero {
  padding-block: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.home-hero__text { display: flex; flex-direction: column; gap: var(--space-sm); align-items: start; }
.home-hero h1 { font-size: var(--text-display); }
.home-lede { color: var(--color-ink-2); max-width: var(--measure); }
.home-lede strong { color: var(--color-ink); font-weight: 500; }

.home-hero__art { align-self: center; width: min(240px, 66vw); }

.home-cta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); width: 100%; }
.home-cta .btn { flex: 1 1 14rem; text-align: center; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; }
.home-cta--single { margin-top: var(--space-md); }
.home-cta--single .btn { flex: 0 1 auto; }

.home-note { margin-top: var(--space-2xs); }

/* ── ขั้นตอนการสั่งงาน ────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
}
.steps__no {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  flex-shrink: 0;
}
.steps li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.steps b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); }
.steps span { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── form ──────────────────────────────────────────────────── */

.lookup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 100%;
  max-width: 30rem;
}

.field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }

.field > label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
}

input[type="text"] {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-strong) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
input[type="text"]::placeholder { color: var(--color-ink-3); text-transform: none; letter-spacing: .02em; }
input[type="text"]:hover:not(:disabled) { background: var(--color-paper-3); }
input[type="text"]:focus-visible { border-color: var(--color-accent); background: var(--color-paper); }
input[type="text"]:disabled { opacity: .6; cursor: not-allowed; }
input[type="text"][aria-invalid="true"] { border-color: var(--color-alert); }

.btn {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-paper);
  background: var(--color-accent);
  border: var(--rule-strong) solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  min-height: var(--tap);
  width: 100%;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[data-state="loading"] { opacity: .7; cursor: progress; }

.btn--quiet {
  color: var(--color-accent-ink);
  background: transparent;
  border-color: var(--color-rule-strong);
  box-shadow: none;
  width: auto;
}
.btn--quiet:hover:not(:disabled) { background: var(--color-accent-soft); border-color: var(--color-accent); }

.form-msg { font-size: var(--text-sm); color: var(--color-alert); margin-top: var(--space-3xs); }
.form-msg:empty { display: none; }

/* ── sections ──────────────────────────────────────────────── */

.section { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.section__head { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-sm); }
.section__head h2 { font-size: var(--text-xl); }

/* ── ขั้นตอนงาน: ไอคอนนำ ข้อความตาม ──────────────────────── */

.stages { display: flex; flex-direction: column; gap: var(--space-3xs); }

.stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
}

.stage__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--color-idle-soft);
  color: var(--color-idle);
}
.stage__icon svg { width: 1.125rem; height: 1.125rem; }

.stage__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stage__name { font-size: var(--text-base); font-weight: 500; }
.stage__hint { font-size: var(--text-sm); color: var(--color-ink-2); }

.stage--done .stage__icon { background: var(--color-good-soft); color: var(--color-good); }
.stage--done .stage__name { color: var(--color-ink-2); }

.stage--todo .stage__name { color: var(--color-ink-3); }
.stage--todo .stage__icon { opacity: .75; }

.stage--now {
  background: var(--color-active-soft);
  box-shadow: var(--shadow-soft);
}
.stage--now .stage__icon { background: var(--color-active); color: var(--color-paper); }
.stage--now .stage__name { font-weight: 600; color: var(--color-ink); }

/* หัวฉีดของขั้นที่กำลังทำ ขยับเบา ๆ ให้รู้ว่ายังเดินอยู่ */
.stage--now .stage__icon svg { animation: nudge 2.4s var(--ease-in-out) infinite; }

.stage--exception .stage__icon { background: var(--color-warn-soft); color: var(--color-warn); }
.stage--exception.stage--now { background: var(--color-warn-soft); }
.stage--exception.stage--now .stage__icon { background: var(--color-warn); color: var(--color-paper); }

@keyframes nudge {
  0%, 70%, 100% { transform: translateY(0); }
  80%           { transform: translateY(-2px); }
  90%           { transform: translateY(1px); }
}

/* ── หัวหน้าสถานะ ─────────────────────────────────────────── */

.order-head { padding-block: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }

.order-code {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.order-status { display: flex; flex-direction: column; gap: var(--space-2xs); }

.order-status__top { display: flex; align-items: center; gap: var(--space-xs); }

.order-status__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--color-idle-soft);
  color: var(--color-idle);
}
.order-status__icon svg { width: 1.5rem; height: 1.5rem; }
.order-status[data-tone="active"] .order-status__icon { background: var(--color-active-soft); color: var(--color-active); }
.order-status[data-tone="good"]   .order-status__icon { background: var(--color-good-soft);   color: var(--color-good); }
.order-status[data-tone="warn"]   .order-status__icon { background: var(--color-warn-soft);   color: var(--color-warn); }
.order-status[data-tone="alert"]  .order-status__icon { background: var(--color-alert-soft);  color: var(--color-alert); }

.order-status h1 { font-size: var(--text-display-s); }

/* แถบความคืบหน้าแบบชั้นไฟลาเมนต์ */
.progress-bar {
  display: flex;
  gap: 3px;
  align-items: center;
}
.progress-bar i {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
}
.progress-bar i[data-fill="done"] { background: var(--color-good); }
.progress-bar i[data-fill="now"]  { background: var(--color-active); }

.progress { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

.order-note {
  background: var(--color-paper-2);
  border-left: var(--rule-strong) solid var(--color-rule-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-xs) var(--space-sm);
  max-width: var(--measure);
}
.order-note[data-tone="active"] { border-left-color: var(--color-active); background: var(--color-active-soft); }
.order-note[data-tone="warn"]   { border-left-color: var(--color-warn);   background: var(--color-warn-soft); }
.order-note[data-tone="alert"]  { border-left-color: var(--color-alert);  background: var(--color-alert-soft); }

/* ── ตารางรายละเอียด ──────────────────────────────────────── */

.spec {
  margin: 0;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-sm);
}
.spec__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-sm);
  padding-block: var(--space-2xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.spec__row:first-child { border-top: 0; }
.spec__key { font-size: var(--text-sm); color: var(--color-ink-3); }
.spec__val {
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
  text-align: right;
}
.spec__val[data-type="tracking"], .spec__val[data-type="code"] { font-family: var(--font-mono); }

/* ── timeline ──────────────────────────────────────────────── */

.timeline { display: flex; flex-direction: column; gap: var(--space-2xs); }
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
}
.event__icon {
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-pill);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--color-paper-3); color: var(--color-ink-2);
}
.event__icon svg { width: .9rem; height: .9rem; }
.event__body { display: flex; flex-direction: column; min-width: 0; }
.event__name { font-weight: 500; }
.event__at { font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.event__note { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── verify ────────────────────────────────────────────────── */

.verify {
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.verify p { font-size: var(--text-sm); color: var(--color-ink-2); }
.verify form { display: flex; flex-direction: column; gap: var(--space-2xs); }

/* ── เครื่องพิมพ์กำลังทำงาน ───────────────────────────────── */

.loading {
  padding-block: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.printer { width: min(230px, 64vw); height: auto; display: block; }

.pr-body   { fill: var(--color-paper-2); stroke: var(--color-rule-strong); stroke-width: 2; }
.pr-glass  { fill: var(--color-accent-soft); stroke: var(--color-rule); stroke-width: 1.5; opacity: .45; }
.pr-rail   { fill: var(--color-rule-strong); }
.pr-head-box { fill: var(--color-accent); }
.pr-nozzle { stroke: var(--color-ink-2); stroke-width: 2.5; stroke-linecap: round; }
.pr-bed    { fill: var(--color-ink-3); }
.pr-feet   { stroke: var(--color-rule-strong); stroke-width: 3; stroke-linecap: round; }
.pr-spool-disc  { fill: var(--color-active-soft); stroke: var(--color-active); stroke-width: 2; }
.pr-spool-hub   { fill: var(--color-active); }
.pr-spool-spoke { stroke: var(--color-active); stroke-width: 1.6; stroke-linecap: round; }
.pr-filament { stroke: var(--color-active); stroke-width: 1.8; fill: none; stroke-linecap: round; opacity: .8; }
.pr-layer  { fill: var(--color-active); }
.pr-layer-2 { fill: color-mix(in oklch, var(--color-active) 88%, var(--color-paper)); }
.pr-layer-3 { fill: var(--color-active); }
.pr-layer-4 { fill: color-mix(in oklch, var(--color-active) 88%, var(--color-paper)); }
.pr-led    { fill: var(--color-good); }

/* หัวฉีดวิ่งซ้ายขวา คานไต่ขึ้นตามชั้น สปูลหมุน ชิ้นงานโผล่ทีละชั้น */
.pr-head   { animation: head-sweep 2.2s var(--ease-in-out) infinite; }
.pr-gantry { animation: gantry-rise 5s var(--ease-in-out) infinite; }
.pr-spool  { animation: spool-spin 4s linear infinite; transform-origin: 116px 18px; }
.pr-led    { animation: led-blink 2.4s var(--ease-in-out) infinite; }

/* สองชั้นล่างอยู่ตั้งแต่เฟรมแรก — loader โผล่มาไม่กี่วินาที ถ้าเริ่มจากเครื่องเปล่า
   ลูกค้าจะไม่ทันเห็นว่ามันกำลังพิมพ์อะไรอยู่ */
.pr-layer-1, .pr-layer-2 { opacity: 1; }
.pr-layer-3, .pr-layer-4 { opacity: 0; animation: layer-in 5s linear infinite; }
.pr-layer-3 { animation-delay: .6s; }
.pr-layer-4 { animation-delay: 2.4s; }

@keyframes head-sweep {
  0%, 100% { transform: translateX(-22px); }
  50%      { transform: translateX(22px); }
}
/* คานไต่ขึ้นตามชั้นที่กำลังพิมพ์ แล้ววนกลับไปเริ่มชิ้นใหม่ */
@keyframes gantry-rise {
  0%,  12% { transform: translateY(27px); }   /* กำลังพิมพ์ชั้น 3 */
  45%, 62% { transform: translateY(20px); }   /* ขึ้นชั้น 4 */
  88%,100% { transform: translateY(27px); }
}
@keyframes spool-spin { to { transform: rotate(360deg); } }
@keyframes led-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes layer-in {
  0%, 3%   { opacity: 0; }
  4%, 97%  { opacity: 1; }
  100%     { opacity: 0; }
}

.loading__text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }
.loading__note { font-size: var(--text-sm); color: var(--color-ink-3); max-width: 26ch; }

/* ── ข้อมูลเก่า / แจ้งเตือน ───────────────────────────────── */

.stale {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  background: var(--color-warn-soft);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-md);
}
.stale strong { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--color-warn); }
.stale span { font-size: var(--text-sm); color: var(--color-ink-2); }

.notice {
  padding-block: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}
.notice__icon {
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--color-paper-3); color: var(--color-ink-3);
}
.notice__icon svg { width: 1.75rem; height: 1.75rem; }
.notice h1 { font-size: var(--text-2xl); }
.notice p { color: var(--color-ink-2); max-width: 32ch; }

/* ── footer ────────────────────────────────────────────────── */

.colophon { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-xl); }
.colophon > div {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter) var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.colophon a { color: var(--color-ink-2); white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }

/* ── reveal ────────────────────────────────────────────────── */

[data-reveal] { animation: rise var(--dur-slow) var(--ease-out) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── จอกว้างขึ้น ──────────────────────────────────────────── */

@media (min-width: 40rem) {
  .lookup { flex-direction: row; align-items: flex-end; gap: var(--space-2xs); }
  .lookup .field { flex: 1 1 auto; }
  .btn { width: auto; }
  .verify form { flex-direction: row; align-items: flex-end; }
  .verify .field { flex: 1 1 12rem; }
  .hero { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
  .home-hero { flex-direction: row; align-items: center; gap: var(--space-lg); }
  .home-hero__text { flex: 1 1 22rem; }
  .home-hero__art { flex: 0 0 auto; width: 220px; }
  .home-cta .btn { flex: 0 1 auto; }
  .hero > :not(.hero__art) { flex: 1 1 22rem; }
  .hero__art { flex: 0 0 auto; width: 200px; align-self: center; }
  .order-status { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-sm); }
  .stage { padding: var(--space-2xs) var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* ภาพเครื่องพิมพ์หยุดนิ่งในท่าที่อ่านออก ไม่ใช่ท่ากลางคัน */
  .pr-layer { opacity: 1 !important; }
  .pr-head, .pr-gantry, .pr-spool { transform: none !important; }
}