/* Daily 5 (assets/js/daily.js, daily-entry.js): a full-screen focused flow, like the app. No site header or footer, no
   cards: the close X at the top left, Noodle large with one true line, the title, five small kind dots, and one big button
   pinned at thumb reach. Tokens from site.css (light and dark follow the theme). Right is teal, helped a lighter teal,
   back tomorrow an amber ring: never red, never a cross. Every control is at least 44px. */

/* the flow fills the screen: the site's header and footer step aside */
body.page-daily { --top-h: 0px; }
body.page-daily .topbar, body.page-daily .site-foot, body.page-daily .blf, body.page-daily .cbl-tabs { display: none !important; }
.d5 .env-text { position: relative; display: flex; flex-direction: column; min-height: 100dvh; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
.d5 .env { padding-bottom: 0; }
.d5.is-intro .env, .d5.is-result .env { display: block; }
.d5.is-intro .env-code, .d5.is-result .env-code { display: none; }
.d5.is-intro .env-text, .d5.is-result .env-text { max-width: 560px; margin: 0 auto; }

.d5-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; min-height: 56px; padding: 6px 0; }
.d5-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); }
.d5-x:hover { background: var(--paper-2); color: var(--ink); }
.d5-x:focus-visible, .d5 .btn:focus-visible, .d5-why summary:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; }

/* the five: small icon dots, a status, not buttons */
.d5-seq { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.d5-q { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--rule-2); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; pointer-events: none; }
.d5-q svg { width: 15px; height: 15px; }
.d5-q.is-cur { color: var(--teal-text); box-shadow: inset 0 0 0 2.5px var(--teal-text); }
.d5-q.is-ok { background: var(--teal); color: var(--teal-ink); box-shadow: none; }
.d5-q.is-help { background: var(--teal-tint); color: var(--teal-text); box-shadow: inset 0 0 0 1.5px var(--teal); }
.d5-q.is-again { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1.5px var(--warn-ink); }
.d5-q.is-skip { opacity: .5; }

/* the screens */
.d5-screen { display: flex; flex-direction: column; flex: 1; }
.d5-screen[hidden] { display: none; }
.d5-intro, .d5-result { align-items: center; text-align: center; }
.d5-intro { justify-content: center; gap: 18px; padding-bottom: 8vh; }
.d5-hero { display: flex; justify-content: center; width: 100%; }
.d5 .coach.is-hero { --coach-w: clamp(120px, 34vw, 168px); flex-direction: column-reverse; align-items: center; gap: 6px; margin: 0; }
.d5 .coach.is-hero .coach-say { margin: 0; max-width: 30ch; text-align: center; }
.d5 .coach.is-hero .coach-tail { display: none; }
/* the bubble's tail points down at Noodle (the side tail does not fit a bubble above him) */
.d5 .coach.is-hero .coach-say { position: relative; margin-bottom: 10px; }

.d5-title { display: flex; align-items: center; justify-content: center; gap: 4px; }
.d5-title h1 { margin: 0; font-size: clamp(36px, 9vw, 48px); line-height: 1; }
.d5-why { position: relative; }
.d5-why summary { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-3);
  font: 700 15px/1 var(--font); cursor: pointer; list-style: none; }
.d5-why summary::-webkit-details-marker { display: none; }
.d5-why summary::before { content: ""; position: absolute; inset: 9px; border: 2px solid currentColor; border-radius: 50%; }
.d5-why[open] summary { color: var(--teal-text); }
.d5-why p { position: absolute; z-index: 20; top: 48px; right: -8px; width: min(280px, 80vw); margin: 0; padding: 12px 14px; border-radius: var(--r1);
  background: var(--paper-0); box-shadow: var(--pop); color: var(--ink-2); font-size: 15px; text-align: start; }
.d5-note { margin: 0; color: var(--ink-3); font-weight: 600; }

/* the big button, pinned at thumb reach */
.d5-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; justify-content: center; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 70%, transparent); }
.d5-bar[hidden] { display: none; }
.d5-big { width: min(528px, calc(100vw - 32px)); min-height: 56px; justify-content: center; font-size: 18px; }
.d5-item { gap: 6px; padding-top: 8px; }
.d5-item .step-k { gap: 10px; }
.d5-item .sk-stage { display: inline-flex; align-items: center; gap: 6px; }
.d5-item .sk-stage svg { width: 18px; height: 18px; }
.d5-stuck { align-self: flex-start; min-height: 44px; margin-top: 4px; }
.d5-coach:not(.is-hero) { margin-top: 18px; }
@media (min-width: 900px) {
  .d5.is-item .env-text { padding-bottom: 32px; }
  .d5-bar-item { position: static; justify-content: start; padding: 16px 0 0; background: none; }
  .d5-bar-item .d5-big { width: auto; min-width: 220px; }
}

/* the result */
.d5-result { gap: 14px; padding-top: 4px; }
.d5-rh { margin: 0; font-size: clamp(28px, 7vw, 38px); }
.d5-wins { display: flex; justify-content: center; gap: 10px; width: 100%; }
.d5-win { display: grid; justify-items: center; align-content: center; gap: 4px; flex: 1 1 0; max-width: 170px; min-height: 96px; padding: 10px 6px; border-radius: var(--r1); background: var(--paper-2); }
.d5-num { font: 800 26px/1 var(--f-display); color: var(--ink); }
.d5-lab { font: 600 13px/1.2 var(--font); color: var(--ink-3); }
.d5-streak .d5-flame { display: block; width: 30px; height: 34px; }
.d5-streak .d5-flame .blk-flame, .d5-streak .d5-flame svg { width: 30px; height: 34px; }
.d5-sparkw .d5-spk { width: 24px; height: 24px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.d5-res { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: start; }
.d5-res li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--paper-2); }
.d5-mk { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--teal-ink); }
.d5-mk svg { width: 15px; height: 15px; }
.d5-res .is-help .d5-mk { background: var(--teal-tint); color: var(--teal-text); box-shadow: inset 0 0 0 1.5px var(--teal); }
.d5-res .is-again .d5-mk { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1.5px var(--warn-ink); }
.d5-rt { display: grid; gap: 1px; min-width: 0; font-weight: 650; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.d5-rf { font-weight: 500; font-size: 13px; color: var(--ink-3); }
.d5-rn { font: 600 13px/1.2 var(--font); color: var(--ink-3); white-space: nowrap; }
.d5-result:focus { outline: none; }
@media (max-height: 760px) { .d5 .coach.is-hero { --coach-w: 96px; } .d5-res li { padding: 5px 10px; } .d5-win { min-height: 84px; } }

/* the /learn/ entry: a small ring beside Continue */
.d5-ring .d5-track { fill: none; stroke: var(--paper-3); stroke-width: 3; }
.d5-ring .d5-dot { fill: var(--paper-0); stroke: var(--rule-2); stroke-width: 2.5; }
.d5-ring .d5-dot.is-ok { fill: var(--teal); stroke: var(--teal); }
.d5-entry { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin: 12px 0 0; padding: 6px 16px 6px 8px; border: 1px solid var(--rule-2);
  border-radius: 999px; background: var(--paper-0); color: var(--ink); text-decoration: none; }
.d5-entry:hover { background: var(--key-2-hover); }
.d5-entry:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; }
.d5-e-t { font: 700 16px/1 var(--font); }
.d5-e-s { color: var(--ink-3); font: 600 14px/1 var(--font); }

/* answering on a phone: the text, then the editor straight after it (not a screen further down) */
@media (max-width: 899.98px) { .d5.is-item .env-text { min-height: 0; padding-bottom: 12px; } .d5.is-item .d5-coach { margin-top: 10px; } }
/* the result fits one screen: a smaller Noodle without a bubble (the title says it), one line per item on phones */
.d5-result .coach.is-hero { --coach-w: 96px; }
.d5-result .coach.is-hero .coach-say { display: none; }
@media (max-width: 479.98px) { .d5-res .d5-rf { display: none; } .d5-res li { padding: 9px 10px; } }
/* phones: room under the editor for the pinned Next */
@media (max-width: 899.98px) { .d5.is-item .env { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* the bubble's tail: two filled triangles (the outline, then the bubble), no one-sided border */
.d5 .coach.is-hero .coach-say::before { content: ""; position: absolute; left: 50%; width: 18px; height: 10px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); bottom: -10px; background: var(--outline); }
.d5 .coach.is-hero .coach-say::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); bottom: -7px; width: 14px; height: 8px; background: var(--bub-bg); }

/* nothing passed yet (daily.js is-sample, build_daily.py sample_item): one real item as it looks in a set, marked
   Example in plain muted text, then Start Python, lesson 01 in the pinned bar. Noodle steps down a size to make room. */
.d5.is-sample .d5-intro { justify-content: flex-start; gap: 14px; padding: 4px 0 0; }
.d5.is-sample .coach.is-hero { --coach-w: clamp(96px, 26vw, 128px); }
.d5-sample { display: grid; gap: 6px; width: 100%; text-align: start; }
.d5-sample[hidden] { display: none; }
.d5-ex { margin: 0; color: var(--ink-3); font-size: 15px; font-weight: 600; }
.d5-sample-it { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r1); background: var(--paper-0); }
.d5-sample-it .step-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.d5-sample-it .sk-stage { display: inline-flex; align-items: center; gap: 6px; }
.d5-sample-it .sk-stage svg { width: 18px; height: 18px; }
.d5-sample-it .d5-sample-t { margin: 0; }
.d5-sample-it .codeblock { margin: 6px 0 0; }

/* a heading or panel focused by script (tabindex -1, for screen readers) shows no ring */
.d5 [tabindex="-1"]:focus, .d5 [tabindex="-1"]:focus-visible { outline: none; }

/* the result's tiles (coordinator, 15 Oct): every number on one baseline and its label under it, the tiles one height;
   the streak's flame and the Spark's star sit in the tile's corner instead of above the number */
.d5-win { position: relative; grid-template-rows: auto auto; align-content: center; min-height: 96px; }
.d5-streak .d5-flame, .d5-sparkw .d5-spk { position: absolute; top: 8px; inset-inline-end: 8px; }
.d5-streak .d5-flame, .d5-streak .d5-flame .blk-flame, .d5-streak .d5-flame svg { width: 20px; height: 23px; }
.d5-sparkw .d5-spk { width: 18px; height: 18px; }
/* a wide screen (coordinator, 15 Oct): the start and result screens are one centred column, the button the column's
   width and right under what it starts or ends, not a full-width bar pinned to the foot of an empty window */
@media (min-width: 900px) {
  .d5.is-intro .d5-intro .d5-bar, .d5.is-result .d5-result .d5-bar { position: static; display: block; align-self: stretch; padding: 8px 0 0; background: none; }
  .d5.is-intro .d5-intro .d5-big, .d5.is-result .d5-result .d5-big { width: 100%; }
  .d5.is-result .d5-result > * { width: 100%; max-width: 560px; }
  .d5.is-result .d5-wins { justify-content: stretch; }
  .d5.is-result .d5-win { max-width: none; }
}