/* Kinnection, bouwstenen: de week van Joke. Prompt 05.
   Drie bouwstenen die samen één interactie zijn: de weekbalk die meeloopt, de dagknoppen met een vakje,
   en de staven van "terug bij jou". Het gedrag staat in week.js. Zet data-week op het element dat ze alle drie omvat.

   Geen telefoonkader en geen nagebouwd app-scherm: dit is de stijl van de site zelf.

   Toestanden van een dag: rust, aanwijzen, focus, ingedrukt, gekozen (aria-pressed="true"), hier ben je (.nu), uitgeschakeld.
   De uitnodiging zit in het beeld, niet in een zin: tot iemand voor het eerst tikt, wippen de lege vakjes om de beurt op
   en toont elk heel even een bleek vinkje, en bovenaan de weekbalk staat een wenk: leeg vakje, pijl, vol vakje.
   Na de eerste tik stopt dat voorgoed. De zin zelf blijft bestaan voor schermlezers (class="sr"). */

/* ===== De opstelling: weekbalk naast de dagen ===== */
.week-rooster{display:grid;gap:var(--gap-block)}
.dagboek{display:grid;gap:var(--gap-section)}
@media (min-width:900px){
  .week-rooster{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gap-columns);align-items:start}
}

/* ===== De weekbalk =====
   Gsm en tablet: een strook die bovenaan blijft staan, over de volle breedte, acht dagen naast elkaar.
   Scherm: een kaart links die meeloopt, de dagen onder elkaar met hun vakje. */
.weekbalk{position:sticky;top:0;z-index:var(--layer-sticky);margin-inline:calc(var(--page-margin-start) * -1) calc(var(--page-margin-end) * -1);padding:var(--gap-inline);background:var(--color-ground);border-bottom:var(--stroke-border) solid var(--color-border)}
.weekbalk-kop{padding-inline:var(--gap-inline);font:var(--type-button-sm);color:var(--color-heading)}
.weekbalk-kop{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-tight)}
.weekbalk-wenk{display:inline-flex;align-items:center;gap:var(--gap-hair);color:var(--color-accent)}
.weekbalk-wenk .vakje{width:var(--icon-sm);height:var(--icon-sm);border-radius:var(--radius-knot)}
.weekbalk-wenk .vakje-vol{background:var(--color-moment);border-color:var(--color-moment)}
.weekbalk-wenk .vakje-vol::after{transform:scale(1)}
[data-week]:not(.getikt) .weekbalk-wenk .vakje-vol::after{animation:wenk-vink var(--duration-invite) var(--ease-spring) infinite}
[data-week]:not(.getikt) .weekbalk-wenk .icoon{animation:wenk-pijl var(--duration-invite) var(--ease-calm) infinite}
@keyframes wenk-vink{0%,35%{transform:scale(0)}55%,100%{transform:scale(1)}}
@keyframes wenk-pijl{0%,20%,60%,100%{transform:none}40%{transform:translateX(var(--gap-hair))}}
.weekbalk-stand:empty{display:none}
.weekbalk-stand{padding:var(--gap-hair) var(--gap-inline) 0;font:var(--type-small);font-weight:var(--weight-bold);color:var(--color-heading)}
/* Prompt 12: de dagen lopen tot in de binnenrand van de balk, zodat ze op een gsm van 360 breed ook 44 breed zijn. */
.dagen{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:var(--gap-hair) calc(var(--gap-hair) * -1) 0}
.dag{position:relative;display:grid;width:100%;min-height:var(--touch-min);padding:var(--gap-hair) calc(var(--gap-hair) / 2);border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-text-muted);font:var(--type-small);font-weight:var(--weight-bold);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dag b{display:flex;align-items:center;justify-content:center;min-height:calc(var(--touch-min) - var(--gap-inline));border:var(--stroke-border) solid transparent;border-radius:var(--radius-check);background:var(--color-surface);color:var(--color-heading);font:var(--type-button-sm);transition:background-color var(--duration-fast) var(--ease-calm),color var(--duration-fast) var(--ease-calm),transform var(--duration-spring) var(--ease-spring)}
.dag span,.dag i{display:none}
.dag-vast b{background:var(--color-accent);color:var(--color-text-on-accent)}
button.dag b{border-color:var(--color-border)}
.dag[aria-pressed="true"] b{background:var(--color-moment);color:var(--color-text-on-moment)}
.dag:active b,.dag.toestand-ingedrukt b{transform:scale(0.92)}
.dag.net b{transform:scale(1.15) rotate(calc(var(--tilt-enter) * -1))}
/* Hier ben je: een streep van de lijn onder de dag */
.dag.nu::after{content:"";position:absolute;left:25%;right:25%;bottom:calc(var(--gap-hair) * -1);height:var(--stroke-thread);border-radius:var(--radius-knot);background:var(--color-thread)}
.dag:disabled{cursor:not-allowed}
.dag:disabled b{background:var(--color-tint);border-color:var(--color-border-quiet);color:var(--color-text-label)}

@media (min-width:900px){
  .weekbalk{top:var(--gap-element);margin-inline:0;padding:var(--pad-inset);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
  .weekbalk-kop{font:var(--type-title);letter-spacing:var(--tracking-title)}
  .weekbalk-stand{margin-top:var(--gap-tight);padding-top:var(--gap-tight);border-top:var(--stroke-rule) solid var(--color-rule)}
  .dagen{grid-template-columns:minmax(0,1fr);gap:var(--gap-hair);margin:var(--gap-tight) 0 0}
  .dag{grid-template-columns:var(--touch-min) minmax(0,1fr) auto;align-items:center;gap:var(--gap-tight);min-height:var(--control-md);padding:var(--gap-hair) var(--gap-inline) var(--gap-hair) var(--gap-hair);border:var(--stroke-border) solid transparent;transition:background-color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm)}
  .dag span{display:block}
  .dag i{display:block}
  .dag b,button.dag b{border-color:transparent}
  [data-week]:not(.getikt) button.dag b{animation:none}
  button.dag{border-color:var(--color-rule)}
  .dag.nu{background:var(--color-surface);border-color:var(--color-border);color:var(--color-heading)}
  .dag.nu::after{display:none}
  .dag:disabled{border-color:transparent}
}
@media (min-width:900px){
  button.dag:hover:not(:disabled){background:var(--color-surface);border-color:var(--color-border)}
}
.dag.toestand-aanwijzen{background:var(--color-surface);border-color:var(--color-border)}

/* ===== Het vakje: overal hetzelfde, in de weekbalk en in de dagknoppen ===== */
.vakje{position:relative;flex:none;width:var(--check-size);height:var(--check-size);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-check);background:var(--color-surface);transition:background-color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm)}
.vakje::after{content:"";position:absolute;inset:0;background:var(--color-text-on-moment);clip-path:polygon(16% 52%,28% 40%,42% 54%,72% 22%,84% 34%,42% 78%);transform:scale(0);transition:transform var(--duration-spring) var(--ease-spring)}
[aria-pressed="true"] > .vakje{background:var(--color-moment);border-color:var(--color-moment)}
[aria-pressed="true"] > .vakje::after{transform:scale(1)}
:disabled > .vakje{background:var(--color-tint);border-color:var(--color-border-quiet)}
/* De uitnodiging: tot de eerste tik wippen de lege vakjes om de beurt */
[data-week]:not(.getikt) button:not(:disabled) > .vakje{animation:vakje-wip var(--duration-invite) var(--ease-spring) infinite;animation-delay:calc(var(--stagger) * 2 * var(--n,0))}
.vakje::before{content:"";position:absolute;inset:0;background:var(--color-border-quiet);clip-path:polygon(16% 52%,28% 40%,42% 54%,72% 22%,84% 34%,42% 78%);opacity:0}
[data-week]:not(.getikt) button:not(:disabled) > .vakje::before{animation:vakje-bleek var(--duration-invite) var(--ease-calm) infinite;animation-delay:calc(var(--stagger) * 2 * var(--n,0))}
@keyframes vakje-bleek{0%,65%,100%{opacity:0}78%,90%{opacity:1}}
/* Op de smalle strook zijn er geen vakjes: daar kleurt elke dag om de beurt heel even in */
[data-week]:not(.getikt) button.dag b{animation:dag-wenk var(--duration-invite) var(--ease-calm) infinite;animation-delay:calc(var(--stagger) * 2 * var(--n,0))}
@keyframes dag-wenk{0%,70%,100%{background:var(--color-surface);color:var(--color-heading)}80%,88%{background:var(--color-moment);color:var(--color-text-on-moment)}}
@keyframes vakje-wip{0%,70%,100%{transform:none}80%{transform:translateY(calc(var(--gap-hair) * -1)) scale(1.12)}90%{transform:scale(0.98)}}

/* ===== De dagknoppen: de vraag, en zes dagen om aan te tikken ===== */
.dagvraag{padding:var(--pad-card);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-control-quiet)}
.op-wit .dagvraag{background:var(--color-surface)}
.dagvraag-hint{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--gap-tight);align-items:start;margin-top:var(--gap-inline);font:var(--type-small);color:var(--color-text-muted)}
.dagvraag-hint::before{content:"";width:var(--knot-size);height:var(--knot-size);margin-top:0.2em;border-radius:var(--radius-knot);background:var(--color-accent);transform:rotate(var(--knot-turn))}
/* Prompt 12: drie per rij, en twee per rij wanneer drie knoppen smaller dan 44 zouden worden (een gsm van 320 breed). */
.dagknoppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(var(--touch-min),28%),1fr));gap:var(--gap-tight);margin-top:var(--gap-element)}
.dagknop{
  --knop-zak:var(--press-control-sm);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-inline);min-height:calc(var(--control-lg) + var(--gap-element));padding:var(--gap-inline);
  border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-heading);box-shadow:var(--shadow-control-quiet-sm);
  font:var(--type-button);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--duration-instant) var(--ease-calm),box-shadow var(--duration-instant) var(--ease-calm),background-color var(--duration-fast) var(--ease-calm),color var(--duration-fast) var(--ease-calm);
}
@media (min-width:600px){
  .dagknop{flex-direction:row;gap:var(--gap-tight);min-height:var(--control-lg)}
}
@media (hover:hover),(min-width:900px){
  .dagknop:hover:not(:disabled){transform:translateY(calc(var(--lift-hover) * -1))}
}
.dagknop.toestand-aanwijzen{transform:translateY(calc(var(--lift-hover) * -1))}
.dagknop:active:not(:disabled),.dagknop.toestand-ingedrukt{transform:translateY(var(--knop-zak));box-shadow:none}
.dagknop[aria-pressed="true"]{background:var(--color-moment);color:var(--color-text-on-moment);box-shadow:var(--shadow-control-sm)}
.dagknop[aria-pressed="true"]:active{box-shadow:none}
.dagknop[aria-pressed="true"] > .vakje{background:var(--color-ground);border-color:var(--color-ground)}
.dagknop[aria-pressed="true"] > .vakje::after{background:var(--color-heading)}
.dagknop:disabled{background:var(--color-tint);border-color:var(--color-border-quiet);color:var(--color-text-label);box-shadow:none;cursor:not-allowed}

/* ===== De staven van "terug bij jou" =====
   Een crème kaart in het indigo paneel. Een dag die gelukt is groeit tot een volle indigo staaf,
   een dag zonder oefening blijft een korte stomp in terracotta en springt er zo uit. */
.terugblik{padding:var(--pad-card);border-radius:var(--radius-card);background:var(--color-ground);color:var(--color-text);box-shadow:var(--shadow-card-on-moment)}
.staven{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-tight);height:var(--size-chart);margin-top:var(--gap-element);align-items:end}
.staven span{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--gap-inline);height:100%}
.staven i{display:block;height:10%;border-radius:var(--radius-check) var(--radius-check) var(--radius-knot) var(--radius-knot);background:var(--color-accent);transform-origin:center bottom;transition:height var(--duration-enter) var(--ease-spring),transform var(--duration-spring) var(--ease-spring),background-color var(--duration-fast) var(--ease-calm);transition-delay:calc(var(--stagger) * var(--n,0))}
.staven.leeg i{background:var(--color-placeholder)}
.staven i.gedaan{height:100%;background:var(--color-moment)}
.staven b{text-align:center;font:var(--type-button-sm);color:var(--color-text-label)}
.terugblik-cijfer{display:grid;gap:var(--gap-hair);margin-top:var(--gap-element);padding-top:var(--gap-tight);border-top:var(--stroke-rule) solid var(--color-rule)}
.terugblik-cijfer b{font:var(--type-h3);letter-spacing:var(--tracking-heading);color:var(--color-heading)}
.terugblik-cijfer span{font:var(--type-small);color:var(--color-text-muted)}

/* ===== Dag en staaf horen samen. Prompt 10. =====
   Wijs een staaf aan en dezelfde dag licht op in de weekbalk en bij de dagknoppen, en omgekeerd. week.js zet .wijs. */
.staven span.wijs i{transform:scaleY(1.08)}
.staven span.wijs b{color:var(--color-heading)}
.dag.wijs b{transform:scale(1.15) rotate(calc(var(--tilt-enter) * -1))}
.dagknop.wijs{transform:translateY(calc(var(--lift-hover) * -1))}
@media (min-width:900px){
  .dag.wijs{background:var(--color-surface);border-color:var(--color-border);color:var(--color-heading)}
}