/* v0.15 Cycle (worker A): bench-two editor, "How Cycle works" lesson and the
   first-five goals. Cycle pages only; everything here starts hidden in the
   markup. Uses the shared tokens from /styles.css. */

/* ---- Customize: bench 2 of 10 (Cards tab) ---- */
.cy-custom { margin-top: 2px; }
.cy-custom > summary .cy-custom-hint { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.cy-bench-status { margin: 0 2px 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cy-bench-status[data-kind="todo"] { color: var(--gold-hot); }
.cy-bench-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cy-bench-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  min-height: 72px; padding: 16px 2px 6px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--text);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(46, 56, 112, .9), rgba(24, 31, 70, .9));
  transition: opacity .15s, border-color .15s, transform .15s var(--ease);
}
.cy-bench-card .deck-ic { width: 24px; height: 24px; }
.cy-bench-name { font-size: 11px; font-weight: 600; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-bench-tag { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cy-bench-cost {
  position: absolute; top: 3px; left: 4px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; color: #1b1330; background: var(--gold-hot);
}
.cy-bench-card[data-state="bench"] {
  border-style: dashed; border-color: var(--line-soft); background: rgba(3, 6, 20, .5); color: var(--muted);
}
.cy-bench-card[data-state="bench"] .deck-ic { opacity: .45; }
.cy-bench-card[data-state="bench"] .cy-bench-tag { color: var(--gold); }
.cy-bench-card:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
.cy-lesson-open { align-self: flex-start; margin-top: 6px; }

/* ---- Journey: first-five goals ---- */
.cy-goals { margin-top: 10px; }
.cg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cg-count { font-size: 13px; color: var(--gold-hot); }
.cg-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cg-dots li { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.cg-dots li.done { background: var(--gold); }
.cg-dots li.now { background: rgba(var(--tk-gold-rgb), .35); }
.cg-next { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ivory); }
.cg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cg-fine { margin: 0; font-size: 11.5px; }
.cg-foot .btn { flex: none; }

/* ---- result: one line inside the collapsed Match details ---- */
.recap-goal { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: var(--ivory); background: rgba(var(--tk-gold-rgb), .1); border: 1px solid var(--line-soft); }

/* ---- lesson sheet ---- */
.cl-body { display: flex; flex-direction: column; gap: 10px; }
.cl-kicker { margin: 0; }
.cl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: cl; }
.cl-steps li {
  counter-increment: cl; padding: 5px 0 4px; border-radius: 8px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-soft); background: rgba(3, 6, 20, .45);
}
.cl-steps li::before { content: counter(cl) ". "; }
.cl-steps li[data-state="now"] { color: var(--ivory); border-color: var(--line-strong); }
.cl-steps li[data-state="done"] { color: var(--gold); }
.cl-say { min-height: 3.9em; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ivory); }
.cl-board { display: flex; flex-direction: column; gap: 8px; }
.cl-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cl-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; padding: 18px 2px 8px;
  border-radius: 12px; cursor: pointer; font: inherit; color: var(--text); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(46, 56, 112, .95), rgba(24, 31, 70, .95));
}
.cl-card .deck-ic { width: 28px; height: 28px; }
.cl-card:disabled { cursor: default; opacity: .7; }
.cl-card.cl-keep { border-color: var(--gold-hot); box-shadow: 0 0 0 1px rgba(var(--tk-gold-hot-rgb), .35) inset; }
.cl-card:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
.cl-cost {
  position: absolute; top: 4px; left: 5px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; color: #1b1330; background: var(--gold-hot);
}
.cl-name { font-size: 12px; font-weight: 600; }
.cl-next { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--text); border: 1px dashed var(--line-soft); }
.cl-next .deck-ic { width: 20px; height: 20px; }
.cl-next-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cl-actions { display: flex; justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .cl-card.cl-drawn { animation: cl-draw .28s var(--ease); }
  @keyframes cl-draw { from { transform: translateY(10px); opacity: .3; } to { transform: none; opacity: 1; } }
}
body.reduced .cl-card.cl-drawn { animation: none; }

/* ---- v0.15 polish: one deck grid while editing, short notes with details on demand ---- */
#panel-cards.cy-editing #deck-slots { display: none; }
.cy-note-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.cy-note-row > p { flex: 1 1 0; min-width: 0; margin: 0; }
.cy-info { flex: none; }
.cy-info > summary {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; list-style: none; cursor: pointer;
}
.cy-info > summary::-webkit-details-marker { display: none; }
.cy-info > summary > span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: italic 600 13px/1 Georgia, serif;
  color: var(--gold); border: 1px solid var(--line);
}
.cy-info > summary:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: -4px; border-radius: 12px; }
.cy-info[open] { flex-basis: 100%; }
.cy-info[open] > summary > span { color: #1b1330; background: var(--gold); }
.cy-info > p { margin: 2px 0 6px; font-size: 12px; line-height: 1.45; }
.cg-foot .cy-info[open] { order: 3; }
.cy-preset-hint { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.cy-bench-card .portrait { display: none; width: 30px; height: 30px; }
.cy-bench-card.has-art .portrait { display: block; }
.cy-bench-card.has-art .deck-ic { display: none; }
.cy-bench-card[data-state="bench"] .portrait { opacity: .45; }
/* Lesson demo: never squeezed by the sheet's column (the body scrolls instead);
   on narrow phones the caption keeps its own row. */
.cl-demo { flex: none; }
@media (max-width: 380px) {
  .cl-demo .cs-demo-bar { flex: none; flex-wrap: wrap; }
  .cl-demo .cs-caption { flex-basis: 100%; }
  .cl-demo .cs-scenes { margin-left: auto; }
}
/* v0.23: a Cycle card not available yet (bench toggle) and a style that needs one. */
.cy-bench-card[data-state="locked"] { opacity: .5; cursor: not-allowed; }
.cycle-presets .preset[aria-disabled="true"] { opacity: .65; }