/* Semantic tokens: light is the default, dark follows the OS setting. */
:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --line: #d9dce2;
  --text: #1d1f24;
  --text-2: #5d6270;
  --accent: #4f5fe8;
  --accent-ink: #ffffff;
  --success: #1f8a56;
  --danger: #c8323f;
  --on-semantic: #ffffff;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171b;
    --surface: #1e2025;
    --surface-2: #272a31;
    --line: #33363e;
    --text: #e6e7ea;
    --text-2: #9a9ea8;
    --accent: #8193ff;
    --accent-ink: #0d1033;
    --success: #4cc38a;
    --danger: #f0616d;
    --on-semantic: #0b0c0f;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  padding-inline: 16px;
  padding-block: clamp(24px, 6vw, 56px);
}
input, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { max-width: 640px; margin: 0 auto; display: grid; gap: 20px; }
.brand { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-2); }

/* picker */
.picker { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 10px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-size: 12px; color: var(--text-2); }
.field input, .field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.field input:invalid { border-color: var(--danger); }
.btn-now {
  align-self: end;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  cursor: pointer;
}
.btn-now:hover { filter: brightness(1.08); }

/* status chip */
.status {
  margin: 0;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 13px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status[data-kind="danger"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* format list */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 12px 14px; }
.row + .row { border-top: 1px solid var(--line); }
.pv { font-size: 15px; min-width: 0; }
.cd { font: 13px var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copy {
  min-width: 76px;
  min-height: 34px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.copy:hover:not(:disabled) { border-color: var(--accent); }
.copy:disabled { cursor: default; opacity: .5; }
.copy[data-state="ok"]  { background: var(--success); border-color: var(--success); color: var(--on-semantic); opacity: 1; }
.copy[data-state="err"] { background: var(--danger);  border-color: var(--danger);  color: var(--on-semantic); opacity: 1; }

/* skeleton: shown until app.js fills the rows */
.app[data-loading] .sk {
  display: inline-block;
  min-width: var(--skw, 10ch);
  color: transparent;
  border-color: transparent;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  opacity: 1;
  animation: shimmer 1.3s linear infinite;
}
.app[data-loading] .pv::after { content: "\00a0"; }
.app[data-loading] .cd { --skw: 17ch; }
.app[data-loading] .row:nth-child(1) .pv { --skw: 9ch; }
.app[data-loading] .row:nth-child(2) .pv { --skw: 6ch; }
.app[data-loading] .row:nth-child(3) .pv { --skw: 8ch; }
.app[data-loading] .row:nth-child(4) .pv { --skw: 9ch; }
.app[data-loading] .row:nth-child(5) .pv { --skw: 15ch; }
.app[data-loading] .row:nth-child(6) .pv { --skw: 22ch; }
.app[data-loading] .row:nth-child(7) .pv { --skw: 30ch; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .app[data-loading] .sk { animation: none; }
  .copy { transition: none; }
}

@media (max-width: 620px) {
  .picker { grid-template-columns: 1fr 1fr; }
  .btn-now { grid-column: 2; }
  .row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .cd { grid-row: 2; }
  .copy { grid-row: 1 / span 2; grid-column: 2; }
  .app[data-loading] .row .pv { --skw: 60%; }
  .app[data-loading] .cd { --skw: 15ch; }
}