/* ——— 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;
}

/* The guest band is the working form, sized to the frame it sits in.

   It went through three shapes. Two columns with marketing copy on the left
   and the form on the right; then a narrow 760px card centred on its own, which
   fixed the empty left half but left the page itself looking empty — a small
   box adrift in a 1560px frame, with dead space on both sides. Now it is the
   full frame again, so its edges line up with the tab strip and the importer
   reads as part of the page rather than a widget floating on it.

   Full width alone would be wrong: one input stretched across 1560px is neither
   a readable measure nor a usable target. The form answers that by going two-up
   inside the card — the source switch on the left, the username and its button
   on the right — so the extra width buys a second column instead of a longer
   line. See .home-import--guest .home-import-row. */
.home-import--guest {
  width: min(1560px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "form"
    "paste"
    "results";
  gap: 10px;
  align-content: start;
  justify-items: stretch;
  /* A little air inside the box, so it reads as its own panel rather than as a
     stray field on the page. */
  padding: 24px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 58%),
    var(--panel);
}

.home-import--guest .home-import-form { grid-area: form; }
.home-import--guest .home-import-paste { grid-area: paste; }
.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: 18px;
  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: 56px;
  padding: 5px;
  gap: 5px;
  border-radius: 14px;
}

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

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

/* 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. */
.home-import--member {
  width: auto;
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "form"
    "paste"
    "results";
  gap: 9px;
  align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 90%, var(--bg-2));
}

.home-import--member .home-import-head { grid-area: head; }
.home-import--member .home-import-form { grid-area: form; }
.home-import--member .home-import-paste { grid-area: paste; }
.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(--serif, Georgia, "Times New Roman", serif);
  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));
}

/* ——— 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(--gold, #d4af37) 22%, 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: 56px;
  padding: 15px 18px;
  font-size: 1.05rem;
}

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

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

.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-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: var(--gold, #d4af37);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #d4af37) 22%, 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 56px 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: 56px;
  padding: 0 26px;
  font-size: 1.05rem;
}

.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 {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
}

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

.home-import-paste-btn {
  margin-top: 10px;
  justify-content: center;
}

/* ——— Results ——— */
/* Framed surface with the same scrollbar treatment as the imported-games list
   on Game Review / Blunder Override, so the workspace reads identically. */
.home-import-results {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  max-height: 420px;
  margin-top: 2px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold) 40%, 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(--gold) 35%, transparent);
  border-radius: 999px;
}

.home-import-results::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--gold) 60%, 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;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted, rgba(246, 241, 230, 0.68));
}

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

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

.home-import-game {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Without this the flex column squashes rows instead of scrolling. */
  flex: 0 0 auto;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

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

/* ——— Remove a game, and clear them all ————————————————————————————————
   The row carries its own bottom border, so it is wrapped rather than restyled:
   the remove control sits beside the row, and the wrapper's last-child rule is
   what keeps the panel's final edge clean. */
.home-import-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

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

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

.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: grid;
  place-items: center;
  /* Wide enough for the word that replaces the icon on hover, and still at
     least a 44px touch target at its narrowest. */
  min-width: 44px;
  padding: 0 10px;
  /* No left border: the control belongs to this row, not to a column beside
     it. A divider here drew a vertical line down the whole list and read as
     a separate panel rather than as part of the same row. */
  border: 0;
  margin-right: 6px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.home-import-game-remove svg {
  width: 17px;
  height: 17px;
}

/* Icon and word occupy the same spot; the row hover cross-fades between them,
   so the control does not resize and nudge the rest of the row sideways. The
   grid that stacks them is declared on .home-import-game-remove above. */
.home-import-remove-icon,
.home-import-remove-label {
  grid-area: 1 / 1;
  transition: opacity 0.14s ease;
}

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

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

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

/* Keyboard users get the same reveal as a mouse hover, and touch has no hover
   at all — so the label is always shown where hover cannot happen. */
@media (hover: none) {
  .home-import-remove-label {
    opacity: 1;
  }

  .home-import-remove-icon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-import-remove-icon,
  .home-import-remove-label {
    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(--gold, #d4af37) 70%, transparent);
  outline-offset: -2px;
}

.home-import-game:hover,
.home-import-game:focus-visible {
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  box-shadow: inset 2px 0 0 var(--gold);
}

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

.home-import-game-result {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--gold, #d4af37) 26%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--gold, #d4af37) 12%, transparent);
  color: var(--gold, #d4af37);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.home-import-game-main {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-import-game-main strong {
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cream, #f6f1e6);
}

.home-import-game-main small {
  font-size: 0.78rem;
  color: var(--muted, rgba(246, 241, 230, 0.68));
}

/* ——— 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: 18px;
    padding: 24px 20px;
  }

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

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

  .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;
  }
}