/* ——— Your openings library ———
   Signed-in repertoire list. Scoped under .repertoire-courses and
   .library-filter so it cannot reach the community library, the endgames
   vault, or the guest marketing view of this page.

   The goal is legibility over a long list: one obvious next action per course,
   everything else visually secondary, and progress readable at a glance
   without opening anything. */

/* ——— Library header ——— */

.repertoire-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.repertoire-library-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 4%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel) 88%, var(--bg-2));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
  overflow: hidden;
}

.repertoire-library-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 92px;
  padding: 12px 18px;
  text-align: center;
}

.repertoire-library-stat + .repertoire-library-stat {
  border-left: 1px solid var(--line);
}

.repertoire-library-stat b {
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.repertoire-library-stat span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* The headline number carries the theme accent so the summary reads at a glance. */
.repertoire-library-stat.is-accent b {
  color: var(--gold-bright);
}

.repertoire-library-stat.is-complete b {
  color: #4ade80;
}

/* ——— Filter bar ———
   Sticky, so filtering stays reachable while scrolling a long library. */
.library-filter {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent),
    0 8px 22px -18px rgba(0, 0, 0, 0.7);
}

.library-filter-label {
  flex: 0 0 auto;
  padding: 0 4px 0 2px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.library-filter-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.library-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--cream-dim);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.library-filter-chip:hover {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
}

.library-filter-chip.is-on {
  color: var(--on-solid, #07111f);
  background-color: var(--gold-btn-to);
  background-image: linear-gradient(180deg, var(--gold-btn-from), var(--gold-btn-to));
  border-color: var(--gold-btn-border);
  font-weight: 800;
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--gold) 60%, transparent);
}

.library-filter-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  outline-offset: 2px;
}

/* ——— Course rows ——— */

.repertoire-courses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.repertoire-courses .course-row {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "thumb body"
    "acts  acts";
  align-items: start;
  gap: 14px 16px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 4%, transparent), transparent 90px),
    color-mix(in srgb, var(--panel) 90%, var(--bg-2));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition:
    border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.repertoire-courses .course-row:hover {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line-strong));
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 8%, transparent),
    0 10px 26px -16px rgba(0, 0, 0, 0.7);
}

/* A mastered course keeps its green identity, but as a rail rather than a
   full flood, so a finished set does not shout louder than the next action. */
.repertoire-courses .course-row.is-complete {
  background:
    linear-gradient(180deg, color-mix(in srgb, #22c55e 8%, transparent), transparent 90px),
    color-mix(in srgb, var(--panel) 90%, var(--bg-2));
  border-color: color-mix(in srgb, #22c55e 32%, var(--line-strong));
}

.repertoire-courses .course-row.is-complete::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #22c55e;
  box-shadow: 0 0 10px color-mix(in srgb, #22c55e 60%, transparent);
}

.repertoire-courses .course-row-thumb,
.repertoire-courses .course-row-mark {
  grid-area: thumb;
  width: 84px;
  height: 84px;
  margin: 0;
  border-radius: 12px;
}

.repertoire-courses .course-row-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.repertoire-courses .course-row-body strong {
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.repertoire-courses .course-row-body > span {
  margin-top: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Status words in the meta line get real weight so "Private" or "add moves to
   publish" is the first thing read, not buried in punctuation. */
.repertoire-courses .course-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 21px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.repertoire-courses .course-status.is-published {
  color: #4ade80;
  border-color: color-mix(in srgb, #22c55e 40%, var(--line));
  background: color-mix(in srgb, #22c55e 12%, transparent);
}

.repertoire-courses .course-status.is-private {
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.repertoire-courses .course-status.is-draft {
  color: #fbbf24;
  border-color: color-mix(in srgb, #f59e0b 38%, var(--line));
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.repertoire-courses .course-row-progress {
  margin-top: 2px;
}

.repertoire-courses .course-row-progress-track {
  height: 7px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.repertoire-courses .course-row-progress-track i {
  background: linear-gradient(90deg, var(--gold-btn-to), var(--gold-btn-from));
}

.repertoire-courses .course-row-progress span {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ——— Actions ———
   "Learn" is the primary next step and is promoted to a filled button; the
   drill modes and admin actions stay as quiet text links beneath a hairline.

   Specificity note: style_all_openings.css later restyles bare
   `.course-row-actions a` as small uppercase text links. Those selectors are
   two classes deep at most, so the `.repertoire-courses .course-row-actions a`
   form used here outranks them, and this file loads after it as well. */
.repertoire-courses .course-row-actions {
  grid-area: acts;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.repertoire-courses .course-row-actions a,
.repertoire-courses .course-row-actions button,
.repertoire-courses .course-row-actions .repertoire-action-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  color: var(--cream-dim);
  /* Longhand, not the `background` shorthand: a shorthand here would also reset
     background-image to `initial`, wiping the primary-action gradient defined
     further down for .course-row-learn. */
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.repertoire-courses .course-row-actions a:hover,
.repertoire-courses .course-row-actions button:hover {
  color: var(--cream);
  background-color: var(--hover-fill);
  border-color: var(--line);
  text-decoration: none;
}
.repertoire-courses .course-row-actions a:focus-visible,
.repertoire-courses .course-row-actions button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  outline-offset: 2px;
}

/* The one primary action per row.
   Selector carries `.course-row-actions` so it reaches (0,3,0), which beats the
   shared `.repertoire-courses .course-row-actions a` rule at (0,2,1). Without
   the extra class the shared rule wins the type-selector tiebreak and its
   `background-image: none` cancels this gradient.
   background-image and background-color are longhands for the same reason:
   a `background` shorthand anywhere would reset background-image to initial. */
.repertoire-courses .course-row-actions .course-row-learn {
  color: var(--on-solid, #07111f);
  background-color: var(--gold-btn-to);
  background-image: linear-gradient(180deg, var(--gold-btn-from), var(--gold-btn-to));
  border-color: var(--gold-btn-border);
  font-weight: 800;
  box-shadow: 0 2px 12px -5px color-mix(in srgb, var(--gold) 70%, transparent);
}

.repertoire-courses .course-row-actions .course-row-learn:hover {
  color: var(--on-solid, #07111f);
  background-color: var(--gold-btn-to-hover);
  background-image: linear-gradient(180deg, var(--gold-btn-from-hover), var(--gold-btn-to-hover));
  border-color: var(--gold-btn-from-hover);
}

.repertoire-courses .course-row-actions .repertoire-action.danger {
  color: #ff9aa8;
}

.repertoire-courses .course-row-actions .repertoire-action.danger:hover {
  color: #fecaca;
  background-color: color-mix(in srgb, #ef4444 14%, transparent);
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
  text-decoration: none;
}

.repertoire-courses .course-row-actions .repertoire-action-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.repertoire-courses .course-row-actions > :last-child {
  margin-left: auto;
}

/* ——— Empty state ——— */

.library-filter-empty {
  margin: 8px 0 0;
  padding: 28px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ——— Grid view ———
   Same toggle the main Opening Library offers. The card keeps the same content
   and the same single primary action; only the arrangement changes, so neither
   view is a second-class citizen.

   Scoped to .repertoire-view.is-grid, which the toggle sets on <main>. The
   shared `.all-openings-view.grid-mode` rules in style_all_openings.css are
   deliberately not reused: they target a class this page never sets, and they
   assume the community row anatomy (`.course-row-heading`, `.course-row-aside`)
   that the signed-in rows do not have. */

.repertoire-view.is-grid .repertoire-courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.repertoire-view.is-grid .repertoire-courses .course-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "thumb"
    "body"
    "acts";
  gap: 12px;
  height: 100%;
  padding: 14px 14px 12px;
}

/* The cover fills the card width and stays SQUARE.

   This was a 16:9 banner, chosen so the card "reads as a tile, not a squashed
   row". It did not survive contact with the artwork. Both cover sources are
   square — a member's own cover is a board photo, and the built-in opening art
   is a square 8x8 board — so a 16:9 frame cropped them top and bottom and left
   the middle band of every card as a wide, short strip of board.

   The shared rule in style_all_openings.css already works this out and sets
   1 / 1 with `object-fit: cover`; the override here was silently undoing it.
   Only the radius is kept, so the grid card keeps its own rounding rather than
   inheriting the list view's. */
.repertoire-view.is-grid .repertoire-courses .course-row-thumb,
.repertoire-view.is-grid .repertoire-courses .course-row-mark {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.repertoire-view.is-grid .repertoire-courses .course-row-mark {
  font-size: 1.6rem;
}

.repertoire-view.is-grid .repertoire-courses .course-row-body strong {
  font-size: 1.02rem;
}

.repertoire-view.is-grid .repertoire-courses .course-row-actions {
  margin-top: auto;
  gap: 6px;
}

/* In a narrow card the full action set would wrap into an uneven block, so the
   primary action keeps its own line and the rest tuck in below it. */
.repertoire-view.is-grid .repertoire-courses .course-row-actions .course-row-learn {
  width: 100%;
}

.repertoire-view.is-grid .repertoire-courses .course-row-actions > :last-child {
  margin-left: 0;
}

/* ——— Responsive ——— */

@media (max-width: 900px) {
  .repertoire-library-head {
    align-items: flex-start;
  }

  .repertoire-library-stats {
    width: 100%;
  }

  .repertoire-library-stat {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
  }
}

@media (max-width: 620px) {
  .repertoire-courses .course-row {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 14px 12px;
  }

  .repertoire-courses .course-row-thumb,
  .repertoire-courses .course-row-mark {
    width: 60px;
    height: 60px;
  }

  .repertoire-courses .course-row-body strong {
    font-size: 1.02rem;
  }

  /* Every action gets its own row rather than a cramped wrap. */
  .repertoire-courses .course-row-actions {
    gap: 6px;
  }

  .repertoire-courses .course-row-actions a,
  .repertoire-courses .course-row-actions button,
  .repertoire-courses .course-row-actions .repertoire-action-disabled {
    flex: 1 1 auto;
  }

  .repertoire-courses .course-row-actions > :last-child {
    margin-left: 0;
  }

  .library-filter {
    padding: 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .repertoire-courses .course-row,
  .library-filter-chip,
  .repertoire-courses .course-row-actions a,
  .repertoire-courses .course-row-actions button {
    transition: none;
  }

  .repertoire-courses .course-row:hover {
    transform: none;
  }
}