/* «Fridrich reducido»: on top of app.css (tokens, panels, buttons, tabs, cube bar, stats, history). One working
   column: the timer, the live help with the case and its algorithm, splits, stats and history. */
:root { --fr-blank: #5B6271; --fr-cross: #5E6B85; --fr-f2l: #2D69BD; --fr-oll: #E0A100; --fr-pll: #C2367B; --fr-a5: #3E7FD6; --fr-a12: #C2367B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fr-blank: #3A414E; --fr-a5: #4F8BE6; --fr-a12: #D4478C; } }
:root[data-theme="dark"] { --fr-blank: #3A414E; --fr-a5: #4F8BE6; --fr-a12: #D4478C; }

.fr-app { max-width: 1040px; margin: 0 auto; display: grid; gap: 18px; }
.fr-app main { display: grid; gap: 22px; min-width: 0; }
.fr-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.fr-head .brand { padding: 0; }
.fr-switch {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--muted);
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: var(--raise);
}
.fr-switch:hover { color: var(--ink); border-color: var(--muted); }
.fr .tabs { margin-top: 0; padding-top: 10px; }
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) { .fr .tabs { padding-top: 3px; } }
.fr-mode { margin-left: auto; }
.fr-keys { flex-basis: 100%; order: 3; }
@media (hover: none) { .fr-keys { display: none; } }

/* ---------- Scramble ---------- */
.fr-scramble { display: grid; gap: 8px; }
.fr-scr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fr-scr { margin: 0; font-family: var(--font-mono); font-size: clamp(16px, 2.6vw, 21px); line-height: 1.8; word-spacing: .12em; overflow-wrap: anywhere; }
.fr-hint { margin: 0; font-size: 14.5px; }
.fr-hint.ok { color: var(--ok); font-weight: 700; }
.fr-hint.bad { color: var(--accent); font-weight: 700; }
.fr-hint b { font-family: var(--font-mono); }
.fr-hint .btn { margin-left: 6px; font-size: 13px; padding: 3px 10px; }
.fr-cross { margin: 0; display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.fr-cross-moves { font-size: 18px; }

/* ---------- Clock ---------- */
.fr .clock[data-phase="hold"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fr .clock[data-phase="hold"] .clock-time { color: var(--accent); }
.fr .clock[data-phase="ready"] { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.fr .clock[data-phase="ready"] .clock-time, .fr .clock[data-phase="ready"] .clock-phase { color: var(--ok); }
.fr .clock[data-phase="inspect"] { border-color: var(--fr-oll); box-shadow: 0 0 0 1px var(--fr-oll); }
.fr .clock[data-phase="inspect"] .clock-phase { color: var(--fr-oll); }
.fr .clock[data-phase="run"] { border-color: var(--ink); }
.fr .clock .clock-time { font-variant-numeric: tabular-nums; }

/* ---------- Live help ---------- */
.fr-live { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--raise); }
.fr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fr-steps li {
  display: grid; gap: 1px; justify-items: center; padding: 6px 4px; border-radius: 9px; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; min-width: 0;
}
.fr-steps li.done { color: var(--ok); border-color: var(--ok); }
.fr-steps li.cur { color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fr-st { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ink); }
.fr-dots { display: inline-flex; gap: 3px; }
.fr-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); }
.fr-dots i.on { background: var(--ok); border-color: var(--ok); }
.fr-now { display: grid; gap: 8px; min-height: 48px; justify-items: start; }
.fr-now > .fr-case { justify-self: stretch; }
.fr-note { margin: 0; font-size: 15px; }
.fr-big { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 4vw, 28px); }
.fr-big.ok, .ok.fr-big { color: var(--ok); }
.fr-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fr-slots li { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.fr-slots li.on { border-color: var(--ok); color: var(--ok); }
.fr-case { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fr-case-pic { flex: none; width: 132px; }
.fr-case-text { flex: 1 1 260px; display: grid; gap: 4px; min-width: 0; }
.fr-case-name { font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.fr-hold { margin: 0; font-size: 15px; }
.fr-moves { margin: 0; font-family: var(--font-mono); font-size: clamp(17px, 3.4vw, 24px); line-height: 1.7; word-spacing: .1em; }
.fr-moves .sm.pre, .fr-moves .sm.post { outline: 1px dashed var(--muted); outline-offset: -1px; }
.fr-alg { font-family: var(--font-mono); display: inline-flex; flex-wrap: wrap; column-gap: .5em; }
.fr-alg-big { font-size: 22px; }
.fr-top, .fr-iso { display: block; width: 100%; height: auto; }
.fr-arrow path { stroke: var(--plastic); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* ---------- Splits of the last solve ---------- */
.fr-splits { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--raise); }
.fr-splits-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fr-splits-head b { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.fr-bar, .fr-phase-bar { display: flex; gap: 3px; height: 30px; border-radius: 8px; overflow: hidden; }
.fr-seg {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 12px; font-variant-numeric: tabular-nums; color: #FFFFFF; padding: 0 4px; flex-basis: 0; min-width: 5.6em;
}
.fr-seg b { font-weight: 700; }
.fr-seg-cruz { background: var(--fr-cross); }
.fr-seg-f2l { background: var(--fr-f2l); }
.fr-seg-oll { background: var(--fr-oll); color: #1A1300; }
.fr-seg-pll { background: var(--fr-pll); }
.fr-table { overflow-x: auto; }
.fr-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fr-table th, .fr-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fr-table thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fr-phases { display: grid; gap: 8px; }
.fr-phase-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }

/* ---------- Reconstruction ---------- */
.fr-recon-box summary, .fr-an-box summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted); }
.fr-recon-box[open], .fr-an-box[open] { display: grid; gap: 8px; }
.fr-recon { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-recon li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 10px; align-items: baseline; font-size: 13.5px; }
.fr-recon li .muted { grid-column: 1; grid-row: 2; font-size: 12px; }
.fr-recon li b { grid-column: 1; }
.fr-recon-moves { grid-column: 2; grid-row: 1 / span 2; font-size: 14.5px; }
.fr .history tr.fr-recon-row > td { white-space: normal; background: var(--surface); padding: 10px 8px; }

/* ---------- Analysis ---------- */
.fr-an { display: grid; gap: 10px; }
.fr-an-sum { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; }
.fr-eff { font-family: var(--font-display); font-size: 26px; flex: none; }
.fr-eff.ok { color: var(--ok); }
.fr-eff.mid { color: var(--fr-oll); }
.fr-eff.low { color: var(--accent); }
.fr-an-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fr .fr-an-table th, .fr .fr-an-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: baseline; background: none; white-space: normal; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); }
.fr .fr-an-table thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fr .fr-an-table tbody th { font-weight: 700; }
.fr .fr-an-table tbody th .muted { font-weight: 600; color: var(--muted); white-space: nowrap; }
.fr .fr-an-table td.fr-an-n { white-space: nowrap; width: 7em; }
.fr .fr-an-table td.fr-an-note { color: var(--muted); font-size: 13px; }
.fr-an-h { margin: 4px 0 0; font-weight: 700; font-size: 14px; }
@media (max-width: 640px) {
  .fr .fr-an-table thead tr, .fr .fr-an-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em 6.5em; border-bottom: 1px solid var(--line); }
  .fr .fr-an-table th, .fr .fr-an-table td { border-bottom: 0; }
  .fr .fr-an-table thead th:last-child { display: none; }
  .fr .fr-an-table td.fr-an-n { width: auto; }
  .fr .fr-an-table td.fr-an-n[colspan="2"] { grid-column: span 2; }
  .fr .fr-an-table td.fr-an-note { grid-column: 1 / -1; padding-top: 0; }
  .fr .fr-an-table thead th { white-space: normal; }
}
.fr-extra { color: var(--accent); }
.fr-perfect { color: var(--ok); font-weight: 700; }
.fr-tips { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-eff.mid { color: #F0C24B; } }
:root[data-theme="dark"] .fr-eff.mid { color: #F0C24B; }

/* ---------- The next F2L pair ---------- */
.fr-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fr-pairs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.fr-pairs li.best { color: var(--ink); }
.fr-pair-name { font-weight: 700; min-width: 9em; }
.fr-pair-moves { font-size: 16px; }
.fr-pairs li.best .fr-pair-moves { font-size: 19px; }

/* ---------- Chart ---------- */
.fr-chart { display: grid; gap: 8px; }
.fr-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fr-chart-head h3 { margin: 0; }
.fr-chart-plot { position: relative; }
.fr-chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.fr-grid { stroke: var(--line); stroke-width: 1; }
.fr-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.fr-dot { fill: var(--muted); opacity: .45; }
.fr-l { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fr-l.a5 { stroke: var(--fr-a5); }
.fr-l.a12 { stroke: var(--fr-a12); }
.fr-end { fill: var(--ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-cross-hair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.fr-hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.fr-tip {
  position: absolute; top: 4px; pointer-events: none; padding: 6px 9px; border-radius: 8px; font-size: 12.5px;
  background: var(--raise); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(0 0 0 / .15); font-variant-numeric: tabular-nums;
}
.fr-chart-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
.fr-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fr-key { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.fr-key.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .6; }
.fr-key.a5 { background: var(--fr-a5); }
.fr-key.a12 { background: var(--fr-a12); }

/* ---------- Cross trainer ---------- */
.fr-crosstr { display: grid; gap: 10px; }
.fr-ct-scr { font-size: clamp(16px, 2.6vw, 20px); }
.fr-ct-clock { display: flex; align-items: baseline; gap: 14px; }
.fr-ct-clock b { font-family: var(--font-display); font-size: clamp(34px, 8vw, 54px); font-variant-numeric: tabular-nums; }

/* ---------- Competition mode ---------- */
body.fr.focus .focus-scr .sm.next { background: var(--accent); color: var(--on-accent); }
body.fr .install { padding: 4px 12px; font-size: 13px; }

/* ---------- History ---------- */
.fr .history td.fr-cases { white-space: normal; min-width: 120px; color: var(--muted); font-size: 12px; }
.fr-acts { display: flex; gap: 2px; }
.fr-acts .x { font-size: 12px; font-weight: 700; padding: 2px 5px; border-radius: 6px; }
.fr-acts .x[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.fr-acts .x.armed { color: var(--accent); }

/* ---------- Casos ---------- */
.fr-method { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 75ch; }
#caseGroups { display: grid; gap: 22px; }
.fr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fr-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); min-width: 0;
}
.fr-card-body { display: grid; gap: 6px; min-width: 0; }
.fr-card-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fr-card-foot .seg button { white-space: nowrap; }
.fr-card h3 { margin: 0; font-size: 16px; }
.fr-card-alg { margin: 0; font-size: 14px; }
.fr-card-look { margin: 0; font-size: 13px; color: var(--muted); }
.fr-card .seg button { padding: 3px 9px; font-size: 12px; }
.fr-card-stats:empty { display: none; }
.fr-card-stats { margin: 0; flex-basis: 100%; }
/* F2L cases: the other algorithms, folded */
.fr-alts { font-size: 13px; }
.fr-alts summary { cursor: pointer; color: var(--muted); }
.fr-alts p { margin: 4px 0 0; }
.fr-case-set { margin-bottom: 14px; }
.fr-case-set [aria-pressed="true"] .muted { color: inherit; opacity: .75; }
.fr-card .btn { font-size: 13px; padding: 4px 10px; }

/* «Pruébalo»: mix, what it looks like, how to solve it */
.fr-try { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }
.fr-try-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; }
.fr-try-steps .fr-setup { font-size: clamp(16px, 3vw, 20px); margin-top: 4px; }
.fr-try-pic { width: 110px; margin-top: 6px; }
.fr-try .actions .btn { font-size: 13px; padding: 4px 10px; }
.fr-try .hint { margin: 0; }
.fr-auf { font-family: var(--font-mono); }

/* ---------- Entrenar ---------- */
.fr-pick { display: grid; gap: 10px; }
.fr-pick summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted); }
.fr-pick:not([open]) { gap: 0; }
.fr-pick-cases { display: grid; gap: 6px; }
.fr-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fr-pick-row .field-title { width: 56px; flex: none; }
.fr-chip {
  border: 1px solid var(--line); background: none; border-radius: 999px; padding: 3px 11px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.fr-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fr-chip.learning { border-style: dashed; border-color: var(--accent); }
.fr-train { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--raise); }
.fr-train-head { display: grid; gap: 8px; }
.fr-setup { margin: 0; font-family: var(--font-mono); font-size: clamp(18px, 3.6vw, 26px); line-height: 1.8; word-spacing: .12em; }
.fr-peek summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted); }
.fr-peek[open] { display: grid; gap: 6px; }
.fr-peek .fr-top, .fr-peek .fr-iso { width: 104px; }
.fr-peek p { margin: 0; }
.fr-train-off { display: grid; gap: 10px; }
.fr-train-off p { margin: 0; }
.fr-train-card { display: flex; gap: 14px; align-items: center; }
.fr-train-card .fr-top, .fr-train-card .fr-iso { width: 96px; }
.fr-train-card > div { display: grid; gap: 4px; }
.fr-quiz { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.fr-quiz-pic { flex: none; width: min(220px, 60vw); }
.fr-quiz-body { flex: 1 1 260px; display: grid; gap: 10px; min-width: 0; }
.fr-options { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-options .btn { display: inline-flex; align-items: center; gap: 6px; }
.fr-options .btn.right { border-color: var(--ok); color: var(--ok); opacity: 1; }
.fr-options .btn.wrong { border-color: var(--accent); color: var(--accent); opacity: 1; }
.fr-feedback { margin: 0; min-height: 1.5em; font-size: 15px; }
.fr-feedback.ok { color: var(--ok); }
.fr-feedback.ko { color: var(--accent); }
.fr-feedback .fr-alg { color: var(--ink); }
.fr-feedback { display: grid; gap: 8px; }
.fr-feedback .fr-note { color: var(--ink); }
.fr-feedback .fr-big.ok { color: var(--ok); }
.fr-feedback.ko .fr-big { color: var(--accent); }
.fr-feedback .btn { margin-left: 4px; }
@media (hover: none) { .fr-options kbd { display: none; } }

/* ---------- Two modes: the timer, and learning (Casos, Entrenar) ---------- */
/* Learning has its own colour (teal) in the menu, the header and the page itself, so you always know which of
   the two you are in; the timer keeps the usual look. */
:root { --fr-mode: #0B7A72; --fr-mode-ink: #075E58; --fr-mode-soft: #D7EFEC; --fr-on-mode: #FFFFFF; --fr-learn-bg: #E5EFEE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fr-mode: #4FD1C5; --fr-mode-ink: #4FD1C5; --fr-mode-soft: #123331; --fr-on-mode: #062320; --fr-learn-bg: #0C1517; } }
:root[data-theme="dark"] { --fr-mode: #4FD1C5; --fr-mode-ink: #4FD1C5; --fr-mode-soft: #123331; --fr-on-mode: #062320; --fr-learn-bg: #0C1517; }
body.fr { transition: background-color .35s ease; }
body.fr[data-mode="learn"] { background: var(--fr-learn-bg); }
body.fr[data-mode="learn"] .tabs { background: var(--fr-learn-bg); }
body.fr[data-mode="learn"] .tab[aria-current="page"] { background: var(--fr-mode); color: var(--fr-on-mode); }
.fr-modepill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); background: var(--raise); white-space: nowrap; }
.fr-modepill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body.fr[data-mode="learn"] .fr-modepill { border-color: var(--fr-mode); color: var(--fr-mode-ink); background: var(--fr-mode-soft); }
.fr-modepill.live { cursor: pointer; border-color: var(--fr-mode); color: var(--fr-mode-ink); background: var(--fr-mode-soft); }
.fr-modepill.live::before { animation: frBlink 1.6s ease-in-out infinite; }
@keyframes frBlink { 50% { opacity: .25; } }
@media (max-width: 860px) {
  body.fr[data-mode="learn"] .tabs { background: var(--surface); }
  body.fr[data-mode="learn"] .tab[aria-current="page"] { background: var(--fr-mode-soft); color: var(--fr-mode-ink); }
  .fr-modepill { order: 3; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { body.fr { transition: none; } .fr-modepill.live::before { animation: none; } }

/* ---------- A training session ---------- */
.fr-sess-bar {
  position: sticky; top: 58px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 14px; border-radius: 14px; background: var(--fr-mode); color: var(--fr-on-mode);
  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
}
.fr-sess-bar[hidden] { display: none; }
.fr-sess-who { display: flex; align-items: center; gap: 10px; }
.fr-sess-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: frBlink 1.6s ease-in-out infinite; }
.fr-sess-clock { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 17px; }
.fr-sess-nums { font-size: 14px; font-variant-numeric: tabular-nums; flex: 1 1 auto; }
.fr-sess-nums b { font-weight: 700; }
.fr-sess-bar .btn { margin-left: auto; background: var(--fr-on-mode); color: var(--fr-mode); border-color: transparent; }
.fr-sess-mini { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.fr-sess-mini span { white-space: nowrap; font-weight: 600; }
.fr-sess-mini span.cur { font-weight: 800; }
.fr-sess-mini span.cur { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.fr-sess-mini .fr-sess-more { font-weight: 500; }
body.training .view[data-view="entrenar"] > .fr-plan,
body.training .view[data-view="entrenar"] > #ctPanel,
body.training .view[data-view="entrenar"] > #trStatsPanel,
body.training .fr-pick, body.training #trSetNote { display: none !important; }
body.training .view[data-view="entrenar"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
body.training .view[data-view="entrenar"] > .fr-sess-bar { grid-column: 1 / -1; }
body.training #trPanel { position: sticky; top: 124px; border-color: var(--fr-mode); box-shadow: 0 0 0 1px var(--fr-mode); }
.fr-sess-rule { margin: 0 0 10px; }
#sessSet { display: grid; gap: 10px; }
.fr-sc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); transition: border-color .2s ease, box-shadow .2s ease; }
.fr-sc.cur { border-color: var(--fr-mode); box-shadow: 0 0 0 1px var(--fr-mode); }
.fr-sc.won { animation: frWon .9s ease; }
@keyframes frWon { 30% { transform: scale(1.03); box-shadow: 0 0 0 3px var(--ok); } }
.fr-sc-pic .fr-top, .fr-sc-pic .fr-iso { width: 64px; height: auto; }
.fr-sc-body { display: grid; gap: 3px; min-width: 0; }
.fr-sc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fr-sc-top .muted { font-size: 12.5px; font-weight: 600; }
.fr-sc-now { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-mode); }
.fr-sc-eye {
  margin-left: auto; align-self: center; display: inline-grid; place-items: center; width: 34px; height: 30px; padding: 0;
  border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
}
.fr-sc-now:not([hidden]) + .fr-sc-eye { margin-left: 0; }
.fr-sc-eye:hover { border-color: var(--muted); color: var(--ink); }
.fr-sc-eye[aria-pressed="true"] { color: var(--fr-mode-ink, var(--fr-mode)); border-color: var(--fr-mode); background: var(--fr-mode-soft, transparent); }
.fr-pips { display: inline-flex; gap: 4px; }
.fr-pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--fr-mode); }
.fr-pips i.on { background: var(--fr-mode); }
.fr-sc-line { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-sc-line b { color: var(--ink); }
.fr-sc-last { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.fr-sc-last span { font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; border: 1px solid var(--line); }
.fr-sc-last .ok { color: var(--ok); }
.fr-sc-last .ko { color: var(--accent); }
.fr-sc-last .pk { color: var(--muted); display: inline-flex; align-items: center; gap: 3px; border-style: dashed; }
.fr-sess-peek { margin: 0 0 10px; padding: 8px 12px; font-size: 13.5px; border-radius: 10px; border: 1px dashed var(--fr-mode, var(--line)); background: var(--raise); }
.fr-sc-done { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--fr-mode-soft); font-size: 13.5px; }
.fr-sc-done ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.fr-sc-swaps { margin: 0; font-size: 12.5px; color: var(--muted); }
.fr-sc.mastered { border-color: var(--ok); }
.fr-sc-won { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); }
.fr-pick-sheet { width: min(620px, 100%); }
.fr-pick-sheet .fr-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.fr-pick-sheet .fr-pick-row .field-title { flex-basis: 100%; }
.fr-pick-quick { gap: 6px; }
.fr-pick-quick .btn { font-size: 13px; padding: 5px 10px; }
.fr-pick-sheet .fr-chip { font-size: 14px; padding: 7px 14px; }
.fr-chip-star { color: var(--fr-gold); }
.fr-chip[aria-pressed="true"] .fr-chip-star { color: inherit; }
.panel-head #sessEdit { font-size: 13px; padding: 5px 12px; }
.fr-sess-sum { width: min(560px, 100%); }
.fr-sess-sum .stats { margin: 0; }
.fr-sess-sum table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fr-sess-sum th, .fr-sess-sum td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.fr-sess-sum thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fr-sess-list { margin: 14px 0 0; }
.fr-sess-list table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fr-sess-list th, .fr-sess-list td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.fr-sess-list thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .fr-sess-bar { top: 8px; }
  .fr-sess-mini { display: flex; order: 4; }
  body.training .view[data-view="entrenar"] { grid-template-columns: minmax(0, 1fr); }
  body.training #trPanel { position: static; }
}
@media (max-width: 560px) {
  .fr-sess-nums { flex-basis: 100%; order: 3; }
  .fr-sess-list th:nth-child(5), .fr-sess-list td:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fr-sess-dot { animation: none; } .fr-sc.won { animation: none; } }

/* ---------- Pace and records ---------- */
:root { --fr-gold: #8A5A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fr-gold: #F0C24B; } }
:root[data-theme="dark"] { --fr-gold: #F0C24B; }
.clock-pace { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.clock-pace:empty { display: none; }
.pc { display: inline-flex; align-items: baseline; gap: 5px; color: var(--muted); white-space: nowrap; }
.pc b { color: var(--ink); font-weight: 700; }
.pc-n { font-size: .86em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pc-d { font-weight: 700; }
.pc.ahead .pc-d { color: var(--ok); }
.pc.behind .pc-d, .pc.late .pc-d { color: var(--accent); }
.pc.gold .pc-d { color: var(--fr-gold); }
.pc.todo b { color: var(--muted); }
.pc.cur .pc-n { color: var(--ink); }
.pc-proj { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
body.focus .clock-pace { font-size: 19px; gap: 6px 26px; margin-top: 10px; }
body.focus .pc-proj { font-size: 15px; }
.fr-pace-line { margin: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.fr-pace-line .pc { color: var(--ink); }
.clock-pb { display: grid; justify-items: center; gap: 2px; margin-top: 8px; padding: 8px 18px; border-radius: 14px; background: var(--fr-gold); color: #FFFFFF; font-size: 15px; }
.clock-pb[hidden] { display: none; }
.clock-pb b { font-family: var(--font-display); font-size: 18px; }
.clock-pb small { font-size: 12px; }
.clock-pb.pop { animation: frPop .5s cubic-bezier(.2, 1.4, .4, 1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clock-pb { color: #1C1300; } }
body.focus .clock-pb { font-size: 18px; }
body.focus .clock-pb b { font-size: 24px; }
@keyframes frPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fr-confetti { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.fr-confetti i { position: absolute; top: -16px; width: 9px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); animation: frFall linear forwards; }
@keyframes frFall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .clock-pb.pop { animation: none; } .fr-confetti { display: none; } }
.fr-pbtag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: var(--fr-gold); color: #fff; vertical-align: 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-pbtag { color: #1C1300; } }
:root[data-theme="dark"] .fr-pbtag, :root[data-theme="dark"] .clock-pb { color: #1C1300; }

/* ---------- Ranking ---------- */
#rankBox { display: grid; gap: 14px; }
.rk-start { display: grid; gap: 14px; }
.rk-start > p { margin: 0; max-width: 70ch; }
.rk-name { max-width: 320px; }
.rk-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rk-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-form .field-title { flex-basis: 100%; }
.rk-form .text-input { flex: 1 1 180px; min-width: 0; }
.rk-forms .rk-form { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.rk-invite { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--accent-soft); }
.rk-invite p { margin: 0; }
.rk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rk-title { margin: 0; font-size: 18px; }
.rk-head select { max-width: 260px; }
.rk-cats { justify-self: start; }
.rk-table { overflow-x: auto; }
.rk-table table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rk-table th, .rk-table td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.rk-table thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rk-table tbody th { font-weight: 700; }
.rk-table tr.me > * { background: var(--accent-soft); }
.rk-table tr.rk-open > td { background: var(--surface); padding: 12px; }
.rk-pos { width: 2.6em; }
.rk-medal { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; border-radius: 50%; font-weight: 700; font-size: 13px; color: var(--muted); }
.rk-medal.m1 { background: #F0C24B; color: #2B1D00; }
.rk-medal.m2 { background: #CBD3DF; color: #1D2430; }
.rk-medal.m3 { background: #D99A6C; color: #2B1405; }
.rk-t b { font-family: var(--font-display); font-size: 16px; }
.rk-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--muted); vertical-align: 2px; white-space: nowrap; }
.rk-new { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent); color: var(--on-accent, #fff); vertical-align: 2px; }
.rk-when { white-space: nowrap; }
.rk-detail { display: grid; gap: 10px; }
.rk-scr { margin: 0; display: grid; gap: 4px; }
.rk-avg { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.rk-avg li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rk-scr-s { flex-basis: 100%; font-size: 13px; }
.rk-foot { margin: 0; }
.rk-more { display: grid; gap: 12px; }
.rk-more[open] > summary { margin-bottom: 10px; }
.rk-more > summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: 14px; }
.rk-more .rk-form { margin-bottom: 10px; max-width: 520px; }
.fr-duel { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.fr-duel[hidden] { display: none; }
@media (max-width: 560px) {
  .rk-table th, .rk-table td { padding: 7px 5px; }
  .rk-when, .rk-table thead th:nth-child(4) { display: none; }
}

/* ---------- What to train today ---------- */
:root { --fr-h0: #E6EAF0; --fr-h1: #C6D8F5; --fr-h2: #8FB4EC; --fr-h3: #4F86D9; --fr-h4: #2459A8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fr-h0: #252C37; --fr-h1: #1F3B66; --fr-h2: #2C5A9C; --fr-h3: #4479CC; --fr-h4: #7FA9EE; } }
:root[data-theme="dark"] { --fr-h0: #252C37; --fr-h1: #1F3B66; --fr-h2: #2C5A9C; --fr-h3: #4479CC; --fr-h4: #7FA9EE; }
#planBox { display: grid; gap: 18px; }
.fr-gain { display: grid; gap: 10px; }
.fr-gain > summary { cursor: pointer; }
.fr-gain[open] > summary { margin-bottom: 10px; }
.fr-gain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-gain-list li { display: grid; gap: 5px; justify-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.fr-gain-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; }
.fr-gain-s { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fr-gain-bar { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--fr-h0); overflow: hidden; }
.fr-gain-bar i { display: block; height: 100%; border-radius: 4px; background: var(--fr-a5); }
.fr-gain-list .hint { margin: 0; }
.fr-setbox { display: grid; gap: 10px; }
.fr-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.fr-set-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.fr-set-pic .fr-top { width: 84px; height: auto; }
.fr-set-body { display: grid; gap: 4px; min-width: 0; }
.fr-set-body h4 { margin: 0; font-size: 15px; }
.fr-set-body h4 .muted { font-weight: 600; font-size: 12.5px; }
.fr-set-alg { margin: 0; }
.fr-why { margin: 0; padding-left: 16px; font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.fr-set-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.fr-sess { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.fr-sess b { color: var(--ink); }
.fr-lost { align-items: center; }
.fr-lost .hint { margin: 0; }
.stat small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.fr-tr-tiles { margin-bottom: 12px; }
.fr-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.fr-badge.known { border-color: var(--ok); color: var(--ok); }
.fr-badge.learning { border-color: var(--accent); color: var(--accent); border-style: dashed; }
.fr .fr-case-table th .muted { font-weight: 600; text-transform: none; letter-spacing: 0; }
.fr .fr-case-table td { font-size: 13px; }
.fr-case-n { font-weight: 700; }
.fr .fr-case-table td.fr-cost-c { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fr-cost { display: inline-block; vertical-align: middle; width: 56px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--fr-h0); overflow: hidden; }
.fr-cost i { display: block; height: 100%; background: var(--fr-a5); }
@media (max-width: 640px) {
  .fr-hm-wrap { --hm: 13px; }
  .fr .fr-an-table.fr-case-table thead { display: none; }
  .fr .fr-an-table.fr-case-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .fr .fr-an-table.fr-case-table tbody td { grid-column: 1 / -1; padding-top: 0; }
  .fr .fr-an-table.fr-case-table tbody td.fr-cost-c { grid-column: 2; grid-row: 1; padding-top: 6px; }
  .fr .fr-case-table td:nth-child(2)::before { content: "En tus solves: "; color: var(--muted); }
  .fr .fr-case-table td:nth-child(3)::before { content: "Entrenando: "; color: var(--muted); }
}

/* ---------- Progreso ---------- */
.fr-prog-lead { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; }
.fr-delta { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fr-delta.good { color: var(--ok); }
.fr-delta.bad { color: var(--accent); }
.fr-delta.same { color: var(--muted); font-weight: 600; }
.fr-miles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; margin-top: 12px; }
.fr-miles ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.fr-key.best { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--fr-a12); background: none; }
.fr-dmean { fill: var(--fr-a5); }
.fr-dbest { fill: var(--surface); stroke: var(--fr-a12); stroke-width: 2; }
.fr-hm-wrap { --hm: 16px; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.fr-hm-days { display: grid; grid-template-rows: repeat(7, var(--hm)); gap: 3px; margin-top: 19px; font-size: 10px; color: var(--muted); line-height: var(--hm); }
.fr-hm-main { display: grid; gap: 4px; }
.fr-hm-months { display: grid; gap: 3px; font-size: 10px; color: var(--muted); height: 15px; white-space: nowrap; }
.fr-hm { display: grid; grid-template-rows: repeat(7, var(--hm)); grid-auto-flow: column; gap: 3px; }
.fr-hm i, .fr-hm-key i { display: block; width: var(--hm); height: var(--hm); border-radius: 3px; background: var(--fr-h0); }
.fr-hm i.h1, .fr-hm-key i.h1 { background: var(--fr-h1); }
.fr-hm i.h2, .fr-hm-key i.h2 { background: var(--fr-h2); }
.fr-hm i.h3, .fr-hm-key i.h3 { background: var(--fr-h3); }
.fr-hm i.h4, .fr-hm-key i.h4 { background: var(--fr-h4); }
.fr-hm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 12px; font-size: 12px; color: var(--muted); }
.fr-hm-key i { --hm: 11px; }
.fr-prog-tiles { margin-top: 4px; }
.fr-practice { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.fr-practice th, .fr-practice td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.fr-practice thead th { color: var(--muted); font-weight: 600; font-size: 0.85em; }
.fr-practice th[scope="row"] { text-align: left; font-weight: 400; width: 34%; }
.fr-practice tr.sum th, .fr-practice tr.sum td { font-weight: 700; border-bottom-width: 2px; }
.fr-practice tr.aside th, .fr-practice tr.aside td { color: var(--muted); }
@media (max-width: 480px) { .fr-practice { font-size: 0.85em; } .fr-practice th[scope="row"] { width: 30%; } }
.fr-step-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fr-step-card { display: grid; gap: 3px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); font-size: 13px; }
.fr-step-v { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.fr-spark { width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.fr-spark path { fill: none; stroke: var(--fr-a5); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fr-spark circle { fill: var(--fr-a5); }
.fr-eff-spark { display: grid; gap: 4px; max-width: 420px; margin-top: 12px; }
.fr-top-cases { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
#progSteps .hint, #progEff .hint { margin: 0 0 8px; }
#progSteps .fr-note { margin-top: 10px; }

/* ---------- Ajustes ---------- */
.fr-settings { display: grid; gap: 12px; max-width: 640px; }
.fr-settings .field select { justify-self: start; min-width: 220px; }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
  .fr .brand { display: grid; }
  .fr .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fr .tab-ajustes { display: flex; margin-left: 0; }
  .fr-head { align-items: center; }
  .fr-head .brand h1 { font-size: 20px; }
}
@media (max-width: 560px) {
  .fr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fr-case-pic { width: 112px; }
  .fr-mode { margin-left: 0; }
  .fr-card { grid-template-columns: 84px minmax(0, 1fr); }
}

/* What to practise (a whole solve or one phase) and the notes of the solves */
.fr-scr-mode { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 8px; }
.fr-scr-mode .fields { display: grid; grid-template-columns: 1fr; gap: 4px; min-width: 0; flex: 1 1 200px; align-content: start; }
.fr-hist-mode { display: flex; width: fit-content; max-width: 100%; }
.fr-scr-mode .fields[hidden] { display: none; }
.fr-scr-mode select { width: 100%; }
.fr-hist-mode { margin-top: 6px; flex-wrap: wrap; }
.fr .history tr.fr-note-row > td { white-space: normal; padding-top: 0; }
.fr-note-text { font-size: 13px; font-style: italic; color: var(--muted); }
.fr-note-form { display: flex; gap: 8px; align-items: center; }
.fr-note-form input { flex: 1 1 auto; min-width: 0; }
body.focus .fr-scr-mode, body.focus .fr-hist-mode { display: none !important; }

/* Import from csTimer */
.fr-cs { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.fr-cs p { margin: 0; }
.fr-cs-list { display: grid; gap: 8px; }
.fr-cs-list .check { align-items: flex-start; }