/* Llwybr shared components used by BOTH the page-shaped surfaces and the
   player application layout: buttons, stars, badges, and the trail.

   Split out of app.css because the player brings its own layout (it links
   tokens.css + parts.css, not app.css) but must use the same level-progress
   component and the same buttons as the dashboard — "where am I in the
   course" has to look identical in both places.

   Requires tokens.css to be linked first. */

/* ---------- focus ----------
   One ring in the whole product: red on light surfaces. app.css darkens it
   to gold inside the header and footer, where red sits on plum. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--focus);
  outline-offset:2px;
  border-radius:4px;
}

/* Checkboxes, radios and the player's scrubber all pick up the identity red
   rather than the browser's own blue. */
body{accent-color:var(--draig)}

/* Screen-reader-only text. Decorative tile art carries meaning on this
   product's pages, so the sentence that says what the board shows has to
   exist as real text somewhere. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- buttons ----------
   One primary (Welsh red, the identity colour), one quiet secondary, one
   destructive. Destructive is an outline until you commit to it, so "go" and
   "delete for ever" are never the same red rectangle. */
button.go,a.go{
  display:inline-block;margin-top:16px;border:0;border-radius:11px;padding:11px 20px;
  background:var(--draig);color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:16px;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--draig-deep);
  transition:transform .08s ease;
}
button.go:hover,a.go:hover{transform:translateY(-1px);color:#fff}
button.go:active,a.go:active{transform:translateY(1px);box-shadow:0 1px 0 var(--draig-deep)}
button.go[disabled],button.go:disabled{background:#C9A6AC;box-shadow:none;cursor:default;transform:none}
button.go.bot,a.go.bot{background:var(--steel);box-shadow:0 3px 0 #355256}
button.quiet,a.quiet{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:8px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
}
a.quiet{text-decoration:none;display:inline-block}
button.quiet:hover,a.quiet:hover{border-color:var(--ink);color:var(--ink)}
button.danger,a.danger,button.quiet.danger,a.quiet.danger{
  background:transparent;border:1.5px solid var(--danger);color:var(--danger);
  border-radius:var(--radius-sm);padding:8px 14px;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;
}
button.danger:hover,a.danger:hover,button.quiet.danger:hover,a.quiet.danger:hover{
  background:var(--danger);color:#fff;
}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
/* the row already carries the top margin */
.acts .go{margin-top:0}

/* ---------- stars ----------
   One star treatment in the whole product: gold, tabular, with the empty
   slots visible so three-of-three reads as an achievement rather than a
   count you have to remember the maximum of. */
.stars{display:inline-flex;gap:2px;font-size:15px;line-height:1;color:var(--bloom);
       /* gold on white measures 1.66:1, so each glyph carries its own keyline
          and the rating survives on paper, on sand and in the JPG capture */
       text-shadow:0 0 1.2px var(--bloom-deep)}
.stars .off{color:#EFE7DA;text-shadow:0 0 1.2px #9C8F7C}
.stars.big{font-size:30px;gap:5px}

/* ---------- badges ---------- */
.pill{
  display:inline-block;background:var(--ink);color:#fff;font-size:var(--step--1);
  font-weight:600;border-radius:99px;padding:3px 12px;
}
.pill.path{background:var(--path);color:var(--ink)}
.pill.done{background:var(--grass-deep);color:#fff}
.pill.over{background:var(--bloom);color:var(--ink)}

/* ---------- the trail ----------
   llwybr means path, so progress is drawn as one: a sand track with a
   stepping stone per level, the character standing on the level you are on
   and the goal tile at the end. Used by the dashboard and by the player's
   level nav, so "where am I" looks the same in both places.

   State is never carried by hue alone — done is a filled stone, over par is
   a ringed stone, locked is a dashed outline. */
.trail{
  --stone:44px;
  /* the character's box; the band's top padding is derived from it so the
     sprite stands proud of the stone instead of being sheared off */
  --hero-w:34px;
  --hero-h:47px;
  /* padding-bottom clears the star row: overflow-x:auto computes overflow-y
     to auto too, so anything hanging below the stones is clipped away. */
  /* 20px inline so the first and last stones (and the character standing
     on one of them) clear the 18px edge fade. */
  list-style:none;margin:0;padding:calc(var(--hero-h) - 6px) 20px 26px;
  display:flex;align-items:center;
  gap:0;overflow-x:auto;scrollbar-width:thin;
  background:
    linear-gradient(#00000000 0 0) padding-box,
    url("/includes/themes/adventurer/sand.png");
  background-size:auto,32px 32px;
  image-rendering:pixelated;
  border-radius:var(--radius);
  border:1px solid var(--path-edge);
  -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 18px,#000 calc(100% - 18px),#0000 100%);
  mask-image:linear-gradient(90deg,#0000 0,#000 18px,#000 calc(100% - 18px),#0000 100%);
}
.trail::-webkit-scrollbar{height:6px}
.trail::-webkit-scrollbar-thumb{background:var(--path-edge);border-radius:99px}
.trail li{position:relative;flex:0 0 auto;display:flex;align-items:center}
/* the track between stones */
.trail li + li::before{
  content:"";width:26px;height:6px;flex:0 0 auto;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--path-edge) 0 6px,#0000 6px 12px);
}
.trail-node{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--stone);height:var(--stone);border-radius:50%;text-decoration:none;
  background:var(--panel);border:2px solid var(--path-edge);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums;cursor:pointer;
  box-shadow:0 2px 0 #00000014;
}
.trail-node:hover{border-color:var(--ink);color:var(--ink)}
.is-done .trail-node{background:var(--grass-deep);border-color:var(--grass-deep);color:#fff}
.is-over .trail-node{background:var(--panel);border:4px solid var(--bloom);color:var(--ink)}
.is-locked .trail-node{border-style:dashed;color:var(--muted);background:#FFFFFFB3}
.is-current .trail-node{
  border-color:var(--draig);box-shadow:0 0 0 3px #C8102E33,0 2px 0 #00000014;
}
/* Gold on sand is ~1.15:1, so the rating sits on its own chip rather than
   on the path — the empty slots read too. */
.trail .stars{position:absolute;left:50%;transform:translateX(-50%);bottom:-15px;
              font-size:11px;background:var(--panel);border-radius:99px;
              padding:1px 5px;box-shadow:0 1px 0 #00000014}
/* The character stands on the level you are on, in whichever course the
   pupil is walking: frame 0 of the east-facing row of the shipped sheet
   (adventurer 80×110, robot 120×108, both 2 frames per direction, so the
   sheet is 2 frames wide and 4 rows tall and scales off --hero-*). */
.trail-hero{
  position:absolute;left:50%;bottom:calc(var(--stone) - 10px);transform:translateX(-50%);
  width:var(--hero-w);height:var(--hero-h);pointer-events:none;
  background:url("/includes/themes/adventurer/hero-outline.png") no-repeat;
  background-size:calc(var(--hero-w) * 2) calc(var(--hero-h) * 4);
  background-position:0 calc(var(--hero-h) * -1);
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px #00000033);
}
/* The Machine Room is walked by the robot, so its trail is too. */
.trail.bot{--hero-w:40px;--hero-h:36px}
.trail.bot .trail-hero{background-image:url("/includes/themes/robot/robot-hero.png")}
.trail-end{margin-left:2px}
.trail-flag{
  width:34px;height:34px;image-rendering:pixelated;display:block;
}
.trail-wrap{margin-top:14px}
.trail-legend{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:var(--step--1);color:var(--muted);
}
.trail-legend span{display:inline-flex;align-items:center;gap:6px}
.trail-legend i{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid var(--path-edge);background:var(--panel)}
.trail-legend i.done{background:var(--grass-deep);border-color:var(--grass-deep)}
.trail-legend i.over{border:4px solid var(--bloom)}
.trail-legend i.locked{border-style:dashed}
/* attempted but not passed yet: a solid outline, no fill */
.trail-legend i.try{border-color:var(--muted)}

/* Motion is opt-out everywhere, including the player. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}