/* Components for the sync page. Tokens and base rules come from tokens.css. */

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
[hidden] { display: none !important; }

/* Header: a timber bar with a thin torch-light edge. */
.top { background: var(--sidebar); border-bottom: 1px solid var(--border); box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--accent-500) 35%, transparent); }
.top-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--s-4); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.brand-mark { image-rendering: pixelated; flex-shrink: 0; }
.brand-text { display: grid; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-18); letter-spacing: 0.08em; color: var(--text); }
.brand-sub { font-size: var(--fs-11); letter-spacing: 0.04em; color: var(--text-muted); }
.who { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--fs-13); min-width: 0; }
#who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--s-1); }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-16); box-sizing: border-box; }
.narrow { max-width: 400px; margin: var(--s-8) auto 0; }
h1 { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 700; letter-spacing: 0.04em; }
h2 { font-size: var(--fs-16); font-weight: 600; }
.lede { color: var(--text-muted); margin: var(--s-2) 0 var(--s-6); }

.field { display: grid; gap: 6px; margin-bottom: var(--s-4); font-size: var(--fs-13); font-weight: 500; color: var(--text); }
.field .input { width: 100%; box-sizing: border-box; font-size: var(--fs-14); }
.error-text { color: var(--danger-text); font-size: var(--fs-13); margin: 0 0 var(--s-4); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: inherit; white-space: nowrap; }
.btn-sm { height: 28px; padding: 0 var(--s-2); font-size: var(--fs-13); }
.btn-danger:hover { filter: brightness(1.08); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-ghost:focus-visible, .input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-color-scheme: dark) { .btn-danger { color: oklch(16% 0.02 30); } }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: var(--s-6) 0 var(--s-4); flex-wrap: wrap; }
.section-head .meta { display: inline-flex; align-items: center; gap: var(--s-2); }

.banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-13); margin-bottom: var(--s-3); }
.banner p { margin: 0; flex: 1 1 280px; }
.banner strong { color: var(--text); }
.banner .actions { display: inline-flex; gap: var(--s-2); }
.banner-warn { background: var(--warning-tint); border-color: transparent; color: var(--warning-text); }
.banner-warn strong { color: inherit; }
.banner-bad { background: var(--danger-tint); border-color: transparent; color: var(--danger-text); }
.copy-chip { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; margin: 2px 0; padding: 2px 2px 2px 0; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; vertical-align: middle; transition: background var(--d-micro) var(--ease-out); }
.copy-chip:hover { background: var(--surface-2); }
.copy-chip:active { transform: scale(0.97); }
.copy-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.copy-chip code { background: transparent !important; padding: 0 0 0 6px !important; }
.copy-label { font-size: var(--fs-12); font-weight: 600; padding: 2px 8px; border-radius: 3px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); white-space: nowrap; }
.banner-steps { align-items: flex-start; }
.banner .steps { flex: 1 1 320px; }
.banner .steps ol { margin: var(--s-2) 0 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.banner code { font-family: var(--font-mono); font-size: var(--fs-12); background: var(--surface-2); padding: 1px 6px; border-radius: 3px; word-break: break-all; color: var(--text); }

.worlds { display: grid; gap: var(--s-3); }
.world { padding: var(--s-5); }
.world.hosting { border-color: color-mix(in oklch, var(--accent-500) 45%, var(--border)); }
.world-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.world-name { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; letter-spacing: 0.05em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.world-facts { margin: var(--s-3) 0 var(--s-4); display: grid; gap: 2px; font-size: var(--fs-13); }
.world-facts .label { color: var(--text-muted); }
.world-note { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-control); font-size: var(--fs-13); background: var(--surface-2); color: var(--text-body); }
.world-note.warn { background: var(--warning-tint); color: var(--warning-text); }
.world-note.ok { background: var(--success-tint); color: var(--success-text); }
.world-note .btn { margin-left: var(--s-2); vertical-align: middle; }
.world-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.chip { white-space: nowrap; flex-shrink: 0; }
.chip.neutral { background: var(--surface-2); color: var(--text-muted); }

.history { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.history h3 { font-size: var(--fs-13); font-weight: 600; color: var(--text); margin: 0 0 var(--s-2); }
.history h3 + .plain-list { margin-bottom: var(--s-4); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.version { display: flex; align-items: center; gap: var(--s-3); padding: 6px 0; font-size: var(--fs-13); }
.version .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version .size { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.version a.btn { text-decoration: none; }
.event { font-size: var(--fs-12); color: var(--text-muted); padding: 2px 0; }

.local { margin-top: var(--s-10); }
.local .meta { margin: 4px 0 var(--s-3); }
.local-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); margin-bottom: var(--s-2); }
.local-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }

.empty { text-align: center; padding: var(--s-10) var(--s-4); color: var(--text-muted); }
.empty strong { display: block; color: var(--text); font-family: var(--font-display); font-size: var(--fs-16); margin-bottom: 4px; }

.foot { text-align: center; padding: var(--s-6) var(--s-4) var(--s-8); font-size: var(--fs-12); color: var(--text-faint); }

.dialog { border: 1px solid var(--border); border-radius: var(--r-modal); padding: 0; background: var(--surface); color: var(--text-body); box-shadow: var(--shadow-overlay); width: min(460px, calc(100vw - 32px)); }
.dialog::backdrop { background: var(--scrim); }
.dialog-body { padding: var(--s-6); }
.dialog-body h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; }
.dialog-body > p { margin: var(--s-2) 0 var(--s-4); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2); margin-top: var(--s-6); }
.dialog-mid { width: min(560px, calc(100vw - 32px)); }
.dialog-steps { margin: 0 0 var(--s-4); padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.dialog-wide { width: min(720px, calc(100vw - 32px)); }
.script-text { width: 100%; box-sizing: border-box; height: 260px; padding: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.45; resize: vertical; white-space: pre; }
.steam-help { margin-top: calc(-1 * var(--s-2)); }

.toast { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: var(--z-toast); max-width: calc(100vw - 32px); padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-size: var(--fs-13); box-shadow: var(--shadow-overlay); }
.toast.bad { background: var(--danger); color: #fff; }

@media (max-width: 520px) {
  .wrap { padding-top: var(--s-6); }
  .world { padding: var(--s-4); }
  .world-head { align-items: flex-start; flex-direction: column; gap: var(--s-2); }
  .brand-sub { display: none; }
  #who-name { display: none; }
}