/* ——— Homepage game importer ———
   One panel, two placements (public landing band / signed-in workspace), driven
   entirely by static/home_import.js. Every selector is namespaced under
   .home-import so it cannot leak into the dashboard, the hero or the videos. */

.home-import {
  box-sizing: border-box;
}

/* Shared elevated surface — used by both guest and member variants.
   Replaces the old "neon glow" with a refined depth system:
   - Subtle inner highlight for top-edge catch
   - Layered box-shadow for elevation (no colored glow)
   - Gold only as a restrained accent on interactive elements */
.home-import-elevated {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 4%, transparent) 0%, transparent 40%),
    var(--panel);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.04),
    0 2px 8px -2px rgba(0, 0, 0, 0.35),
    0 8px 24px -8px rgba(0, 0, 0, 0.25);
}

/* The guest band — full-width marketing surface with elevated card treatment. */
.home-import--guest {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "form"
    "results";
  gap: 10px;
  align-content: start;
  justify-items: stretch;
  padding: 18px 22px;
  position: relative; /* For ::before top-edge highlight */
  /* Elevated surface replaces the old radial-gradient "glow" */
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 5%, transparent) 0%, transparent 45%),
    var(--panel);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 1px rgba(0, 0, 0, 0.08),
    0 4px 16px -4px rgba(0, 0, 0, 0.4),
    0 16px 40px -12px rgba(0, 0, 0, 0.3);
}

/* Subtle top-edge highlight line for the guest card — catches light like a physical card */
.home-import--guest::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  right: 1px;
  height: 1px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cream) 12%, transparent) 20%, color-mix(in srgb, var(--cream) 12%, transparent) 80%, transparent);
  pointer-events: none;
}

.home-import--guest .home-import-form { grid-area: form; }
.home-import--guest .home-import-results { grid-area: results; }

/* The two-up row, and the reason the card is worth its width: the source
   switch on the left, the username and its button on the right.

   The switch takes the narrower track because its three labels are short
   words; the field takes the rest, so the input is a sane size instead of a
   1500px line. `align-items: end` puts the field and the button on one
   baseline — both are 56px here, so they read as a single control rather than
   a button floating beside an input.

   The guest switch and the field each carry a visible label ("Game source",
   "Username"), which is what lets them sit side by side: two stacked blocks
   with their own captions would be tall, and two bare controls with nothing
   over them would be ambiguous. The member panel has the same markup but keeps
   its stacked layout, so nothing here reaches it. */
.home-import--guest .home-import-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: end;
}

/* Bigger targets for the three source buttons. They were 10px/0.9rem, which
   read as small chips against a 1560px card; the card grew and they did not,
   so the left column looked under-filled.

   The height is set on the GROUP, not the buttons. The switch is a 1px-bordered
   box wrapping three buttons, so sizing the buttons to 56px made the group
   59.19px tall — 3px proud of the username field beside it, which is exactly
   the misalignment `align-items: end` exists to prevent. Fixing the group at
   56px and letting the buttons fill it puts all three on one line with the
   input and the button. */
.home-import--guest .home-import-toggle {
  box-sizing: border-box;
  height: 44px;
  padding: 4px;
  gap: 4px;
  border-radius: 12px;
}

.home-import--guest .home-import-toggle-btn {
  height: 100%;
  padding: 0 10px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.home-import--guest .home-import-field > span {
  margin-bottom: 6px;
  font-size: 0.68rem;
}

/* Inside the workspace box it is a flat inset, not another floating card.
   Sized down a notch: the importer is a utility, not the headline, and at full
   marketing scale it visually outweighed the practice dashboard above it.

   The member panel gets its own single-column template rather than inheriting
   the guest one. Both variants share the .home-import base, but the grid
   template and the per-child grid-area assignments were declared only under
   .home-import--guest, so the member panel silently fell back to normal flow:
   no columns, no gaps, and the form's row collapsed to one column. The layout a
   member sees is now declared here instead of being inherited by accident, so
   the two variants cannot drift apart again.

   Elevated surface with subtle depth — no gold border, no glow.
   Thicker border so the import panel matches the workspace chrome. */
.home-import--member {
  width: auto;
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "form"
    "results";
  gap: 9px;
  align-content: start;
  padding: 18px 20px;
  position: relative; /* For ::before top-edge highlight */
  border: 1.5px solid color-mix(in srgb, var(--cream) 14%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 3%, transparent) 0%, transparent 35%),
    color-mix(in srgb, var(--panel) 92%, var(--bg-2));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cream) 4%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, 0.03),
    inset 0 -1px 1px rgba(0, 0, 0, 0.06),
    0 1px 4px -1px rgba(0, 0, 0, 0.3),
    0 4px 12px -4px rgba(0, 0, 0, 0.2);
}

/* Subtle top-edge highlight for member panel — catches light like a physical card */
.home-import--member::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  right: 1px;
  height: 1px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cream) 10%, transparent) 20%, color-mix(in srgb, var(--cream) 10%, transparent) 80%, transparent);
  pointer-events: none;
}

.home-import--member .home-import-head { grid-area: head; }
.home-import--member .home-import-form { grid-area: form; }
.home-import--member .home-import-results { grid-area: results; }

.home-import-head .eyebrow { margin: 0 0 8px; }

.home-import-head h2 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream, #f6f1e6);
}

.home-import--member .home-import-head h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

.home-import-head > p:not(.eyebrow) {
  margin: 10px 0 0;
  max-width: 44ch;
  line-height: 1.6;
  color: var(--muted, rgba(246, 241, 230, 0.68));
}

/* ——— Member head refinements ———
   The eyebrow and the linked-account state ride the same line. They do not cost
   height, because the scanned-games list owns the rest of the budget. */
.home-import--member .home-import-head {
  align-self: start;
}

.home-import-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* The eyebrow sits inside the row, not on its own line — otherwise its 8px
   bottom margin would push the chips below it out of the line. */
.home-import--member .home-import-head .home-import-head-top .eyebrow {
  margin: 0;
}

.home-import-head-extras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.home-import-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 26ch;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Linking an account was a link buried at the end of a sentence under the form.
   It is the first thing a new member needs, so it rides beside the eyebrow. */
.home-import-head-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.home-import-head-cta:hover {
  background: color-mix(in srgb, var(--gold) 34%, transparent);
  transform: translateY(-0.5px);
}

/* ——— Refresh ———
   Pulls fresh games from every linked account beside the scan button.
   Same size as the scan button so the two read as one control pair.
   Subordinate ghost action: neutral fill, no gold/neon glow. */
.home-import-refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border: 0;
  padding: 0 20px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
.home-import-refresh svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.home-import-refresh-icon {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
}
.home-import-refresh:hover:not([disabled]) {
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  filter: brightness(1.08);
}
.home-import-refresh:active:not([disabled]) {
  transform: translateY(1px);
  transition-duration: 0.05s;
}
.home-import-refresh[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.home-import-refresh:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 20%, transparent);
}

/* The spinner inside the refresh button while a refresh is in flight. */
.home-import-refresh .home-import-spinner {
  width: 1em;
  height: 1em;
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  border-top-color: var(--ink);
}

/* The two action buttons side by side in the scan row. */
.home-import-buttons {
  display: flex;
  gap: 10px;
}

/* Guest card: controls stay compact so the importer yields space to the tabs. */
.home-import--guest .home-import-refresh {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.92rem;
}

/* Lead is a different kind of text from the rest of the head, and wants a
   longer measure than the compact copy rules give it. The `p` is named here
   because the shared `> p:not(.eyebrow)` rule is more specific and would
   otherwise win. */
.home-import--member .home-import-head > p.home-import-lead {
  max-width: 56ch;
}

/* ——— Compact sizing for the workspace copy ———
   Only the member panel shrinks. The guest band keeps its marketing scale,
   because there the importer is the point of the section. */
.home-import--member .home-import-head h2 {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.home-import--member .home-import-head .eyebrow {
  margin-bottom: 5px;
  font-size: 0.62rem;
}

.home-import--member .home-import-head > p:not(.eyebrow) {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-import--member .home-import-form { gap: 9px; }
.home-import--member .home-import-row { gap: 9px; }

.home-import--member .home-import-field > span {
  margin-bottom: 4px;
  font-size: 0.62rem;
}

.home-import--member .home-import-toggle {
  padding: 3px;
  border-radius: 10px;
}

.home-import--member .home-import-toggle-btn {
  padding: 7px 6px;
  font-size: 0.84rem;
  border-radius: 8px;
}

.home-import--member .home-import-select,
.home-import--member .home-import-input {
  padding: 9px 12px;
  font-size: 0.92rem;
}

.home-import--member .home-import-select { min-height: 40px; }

.home-import--member .home-import-go {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.92rem;
}

.home-import--member .home-import-textarea {
  min-height: 88px;
  font-size: 0.84rem;
}

/* ——— Form ——— */

.home-import-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.home-import-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.home-import-field {
  display: block;
  min-width: 0;
}

/* Both modifiers exist so the 640px stack can target them by name instead of
   by child position, which a markup change would silently break. */
.home-import-field-site,
.home-import-field-grow {
  min-width: 0;
}

.home-import-field > span {
  display: block;
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, rgba(246, 241, 230, 0.68));
}

/* Three-way source switch (Lichess / Chess.com / Paste PGN). The workspace is
   platform-only, so its switch uses two equal tracks instead of three. */
.home-import-toggle {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input-bg);
}

.home-import-toggle--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-import-toggle-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted, rgba(246, 241, 230, 0.68));
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
  white-space: nowrap;
}

.home-import-toggle-btn:hover {
  color: var(--gold-bright);
  background: color-mix(in srgb, var(--gold, #d4af37) 8%, transparent);
}

.home-import-toggle-btn.active {
  background: color-mix(in srgb, var(--gold, #d4af37) 20%, transparent);
  color: var(--gold, #d4af37);
}

.home-import-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 20%, transparent);
}

.home-import-select,
.home-import-input,
.home-import-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 1rem;
}

.home-import-select { min-height: 50px; cursor: pointer; }

/* The guest card's controls are a size up from the workspace's, because the
   card is a marketing surface rather than a utility inset: 56px through here
   so the username field, the button and the source switch all land on the same
   height and the row reads as one control. Scoped to the guest variant — the
   workspace keeps the compact sizes set above it. */
.home-import--guest .home-import-input {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 0.95rem;
  border-radius: 10px;
}

.home-import-scan-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

/* Scan and Paste occupy the same slot. Both stay in layout so the card
   height does not jump when the Game source toggle flips. The inactive
   mode keeps its box for sizing, but is invisible and non-interactive. */
.home-import-mode-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}

.home-import-mode-body > .home-import-scan-fields,
.home-import-mode-body > .home-import-paste {
  grid-area: 1 / 1;
  min-width: 0;
}

.home-import-mode-body > .home-import-scan-fields[hidden],
.home-import-mode-body > .home-import-paste[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.home-import-mode-body > .home-import-scan-fields:not([hidden]),
.home-import-mode-body > .home-import-paste:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.home-import-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-import--guest .home-import-textarea {
  /* Match the scan-row control height so Paste PGN does not grow the card. */
  min-height: 44px;
  height: 44px;
  resize: none;
  font-size: 0.9rem;
  border-radius: 10px;
  padding: 10px 14px;
  line-height: 1.35;
}

.home-import--guest .home-import-paste-btn {
  min-height: 44px;
  font-size: 0.92rem;
}

.home-import-input::placeholder,
.home-import-textarea::placeholder {
  color: var(--muted, rgba(246, 241, 230, 0.68));
  opacity: 0.75;
}

.home-import-select:focus-visible,
.home-import-input:focus-visible,
.home-import-textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--cream) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 20%, transparent);
}

/* The button was reading as a box-within-a-box: `.btn-gold` set the background
   AND the border to the same gold, so the 1px edge drew a second outline just
   inside the fill. Dropping the border lets the fill be the shape, and the
   glyph gives it something to look at besides the words.

   Height stays in step with the input beside it (align-items: end on the grid),
   so the two read as one control rather than a button floating next to a field. */
.home-import-go {
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  /* No border: the gold fill is the shape. A same-colour border only doubled
     the outline and read as a nested box. */
  border: 0;
  padding: 0 20px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s ease;
}

/* Same 44px as the guest input and the source switch beside it, so the whole
   row is one height. The workspace button stays at the compact 40px set above. */
.home-import--guest .home-import-go {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.92rem;
}

.home-import-go:hover:not([disabled]) {
  filter: brightness(1.08);
}

.home-import-go:active:not([disabled]) {
  transform: translateY(1px);
}

.home-import-go svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-import-go[disabled] { opacity: 0.65; cursor: progress; }

/* Live region. Reserves its line at rest so a status message cannot shove the
   results list down as it appears. */
.home-import-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--muted, rgba(246, 241, 230, 0.68));
}

.home-import-status.is-error { color: var(--danger); }

.home-import-note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ——— PGN option ——— */

.home-import-paste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.home-import-paste > .home-import-field {
  min-width: 0;
}

.home-import-paste-btn {
  margin: 0;
  justify-content: center;
  align-self: end;
  min-height: 44px;
  padding: 0 18px;
  white-space: nowrap;
}

/* ——— Results ———
   Elevated inner surface with neutral scrollbars.
   No gold glow — uses the same depth language as the parent panel. */
.home-import-results {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  max-height: 420px;
  margin-top: 2px;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 2%, transparent) 0%, transparent 30%),
    color-mix(in srgb, var(--bg-2) 65%, var(--panel));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.03),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12),
    0 1px 3px -1px rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}

.home-import-results::-webkit-scrollbar {
  width: 8px;
}

.home-import-results::-webkit-scrollbar-track {
  background: transparent;
}

.home-import-results::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.home-import-results::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 65%, transparent);
}

.home-import-results::-webkit-scrollbar {
  width: 8px;
}

.home-import-results::-webkit-scrollbar-track {
  background: transparent;
}

.home-import-results::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cream) 18%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.home-import-results::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cream) 30%, transparent);
}

/* An author `display: flex` would otherwise defeat the UA's [hidden] rule, so
   the empty list would leave a stray divider on the page. */
.home-import-results[hidden] { display: none; }

.home-import-empty {
  margin: 0;
  padding: 24px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted, rgba(246, 241, 230, 0.68));
  text-align: center;
}

.home-import-load-more {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  justify-content: center;
}

.home-import-load-more[hidden] { display: none; }

/* ——— Game Row ———
   Professional data-row treatment with clear visual hierarchy:
   - Platform badge (left)
   - Result pill (left-center)
   - Main content: players (strong) + opening (styled) + date (small)
   - Delete control (right, revealed on hover)
   Elevated on hover with subtle shadow, no colored glow. */
.home-import-game {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hairline separators: the last row has none, so the panel closes cleanly. */
.home-import-game:last-child { border-bottom-color: transparent; }

/* Row hover/focus — subtle lift with neutral shadow, no gold glow */
.home-import-game:hover,
.home-import-game:focus-visible {
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cream) 6%, transparent),
    0 2px 8px -2px rgba(0, 0, 0, 0.3);
  transform: translateX(2px);
}

.home-import-game:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cream) 25%, transparent);
  outline-offset: -2px;
  border-radius: 10px;
}

.home-import-game:active {
  transform: translateX(2px) scale(0.995);
  transition-duration: 0.05s;
}

/* ——— Results Header ——— */
.home-import-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home-import-clear {
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--data-loss) 30%, var(--line));
  border-radius: 999px;
  background: transparent;
  color: var(--data-loss);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.home-import-clear:hover {
  background: color-mix(in srgb, var(--data-loss) 10%, transparent);
  border-color: var(--data-loss);
  color: var(--data-loss);
}

.home-import-game-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.home-import-game-wrap .home-import-game {
  flex: 1 1 auto;
  min-width: 0;
}

/* The last wrapper, not the last row: the row is no longer the outermost
   element, so its own :last-child no longer matches the final one. */
.home-import-game-wrap:last-child .home-import-game {
  border-bottom-color: transparent;
}

.home-import-game-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  margin-right: 6px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.home-import-remove-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-import-game-wrap:hover .home-import-game-remove,
.home-import-game-remove:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .home-import-game-remove {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-import-game-remove {
    transition: none;
  }
}

.home-import-game-remove:hover,
.home-import-game-remove:focus-visible {
  color: var(--data-loss);
  background: color-mix(in srgb, var(--data-loss) 10%, transparent);
}

.home-import-game-remove:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cream) 30%, transparent);
  outline-offset: -2px;
}

/* ——— Result Pill ———
   Color-coded by outcome: win (green), loss (red), draw (amber), unknown (muted).
   No gold — uses semantic colors for instant recognition. */
.home-import-game-result {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Win — emerald */
.home-import-game-result[data-result="1-0"],
.home-import-game-result[data-result="1–0"] {
  background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
  color: var(--success, #10b981);
  border: 1px solid color-mix(in srgb, var(--success, #10b981) 28%, transparent);
}

/* Loss — red */
.home-import-game-result[data-result="0-1"],
.home-import-game-result[data-result="0–1"] {
  background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
  color: var(--danger, #ef4444);
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 28%, transparent);
}

/* Draw — amber */
.home-import-game-result[data-result="1/2-1/2"],
.home-import-game-result[data-result="½-½"],
.home-import-game-result[data-result="0.5-0.5"] {
  background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent);
  color: var(--warning, #f59e0b);
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 28%, transparent);
}

/* Unknown/In progress — muted */
.home-import-game-result[data-result="*"],
.home-import-game-result:not([data-result]) {
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}

/* ——— Main Content Area ——— */
.home-import-game-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

/* Player names — prominent, high contrast */
.home-import-game-main strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cream, #f6f1e6);
  line-height: 1.3;
}

/* ——— Opening Display ———
   Styled as a refined metadata chip with icon.
   Two variants: .home-import-opening (has opening name) and .home-import-opening--fallback (speed/game fallback). */
.home-import-game-main small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opening with actual name — warm neutral with subtle icon */
.home-import-opening {
  color: var(--muted, rgba(246, 241, 230, 0.72));
  background: color-mix(in srgb, var(--cream) 6%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.home-import-game:hover .home-import-opening,
.home-import-game:focus-visible .home-import-opening {
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  border-color: color-mix(in srgb, var(--cream) 18%, transparent);
  color: var(--cream, #f6f1e6);
}

/* Opening icon — small chess piece/book */
.home-import-opening::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L13.09 8.26L19.56 8.27L14.18 12.09L15.27 18.56L12 15.23L8.73 18.56L9.82 12.09L4.44 8.27L10.91 8.26L12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L13.09 8.26L19.56 8.27L14.18 12.09L15.27 18.56L12 15.23L8.73 18.56L9.82 12.09L4.44 8.27L10.91 8.26L12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
  opacity: 0.6;
  margin-right: 2px;
}

/* Fallback opening (speed or "game") — cooler, smaller, no icon */
.home-import-opening--fallback {
  color: var(--muted, rgba(246, 241, 230, 0.55));
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: capitalize;
  background: none;
  border: 0;
  padding: 1px 0;
}

.home-import-game:hover .home-import-opening--fallback,
.home-import-game:focus-visible .home-import-opening--fallback {
  color: var(--muted, rgba(246, 241, 230, 0.75));
}

/* Date — always muted, smallest */
.home-import-game-date {
  color: var(--muted, rgba(246, 241, 230, 0.48));
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: none;
}

.home-import-game:hover .home-import-game-date,
.home-import-game:focus-visible .home-import-game-date {
  color: var(--muted, rgba(246, 241, 230, 0.65));
}

/* ——— Platform Badge ———
   Neutral platform identifier with logo. No gold background. */
.home-import-game-source {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 6%, transparent);
  color: var(--cream, #f6f1e6);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-import-game:hover .home-import-game-source,
.home-import-game:focus-visible .home-import-game-source {
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  border-color: color-mix(in srgb, var(--cream) 18%, transparent);
}

.home-import-game-source .site-logo {
  width: 1em;
  height: 1em;
  opacity: 0.9;
}

/* ——— Scanning affordance ———
   The panel used to look idle while a scan ran, which read as a dead button.
   The spinner sits in the status line, beside the message, so the live region
   keeps announcing the text while the mark spins. */
.home-import-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 8px;
  vertical-align: -0.14em;
  border: 2px solid color-mix(in srgb, var(--gold, #d4af37) 26%, transparent);
  border-top-color: var(--gold, #d4af37);
  border-radius: 50%;
  animation: home-import-spin 0.7s linear infinite;
}

.home-import-spinner[hidden] {
  display: none;
}

/* Inside the gold button the spinner is a ring in the button's own colour, so
   it does not fight the filled background. */
.home-import-go .home-import-spinner {
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  border-top-color: var(--ink);
}

@keyframes home-import-spin {
  to { transform: rotate(360deg); }
}

/* The status line is a flex row so the spinner and the message sit on one
   line, and the message keeps its own line box so a change in length does not
   jump the row. */
.home-import-status {
  display: flex;
  align-items: center;
  gap: 0;
}

.home-import-status-text {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-import-spinner {
    animation-duration: 2.4s;
  }

  .home-import-game,
  .home-import-game:hover,
  .home-import-game:focus-visible,
  .home-import-game:active {
    transform: none;
  }
}

/* ——— Responsive ———
   The row is a grid, so the narrow layout overrides its template rather than
   setting flex-direction on it. The guest card is a single column at every
   width — it lost its copy column — so this breakpoint only loosens the gap
   and the padding. The old "head" area went with the copy it referred to, and
   naming a grid area no box occupies would void the whole template.

   The two-up form row is what needs the extra breakpoint. At 760px each half
   is ~350px, and below that the three source buttons and the username field
   are fighting over the same width with no room to spare — the toggle labels
   start truncating long before the card itself gets small. So the row goes
   back to stacked at 900px, the same width the card's own layout already
   changes at. */

@media (max-width: 900px) {
  .home-import--guest {
    gap: 12px;
    padding: 16px 18px;
  }

  .home-import--guest .home-import-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .home-import--guest {
    width: calc(100% - 24px);
    padding: 14px 14px;
  }

  .home-import-scan-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-import-go {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-import-game,
  .home-import-toggle-btn {
    transition: none;
  }

  .home-import-game:hover,
  .home-import-game:focus-visible {
    transform: none;
  }
}