/* Mijn plek (/mijn-plek/). Kleur: blauw is vorst, de kleur van de grond is vorstvrij.
   Blauw tegen bruin blijft ook bij kleurenblindheid uit elkaar, en "soms" en "grondvorst"
   krijgen arcering, zodat niets alleen op kleur leunt. Eén lettertype: var(--f-body). */
.mp{--mp-ijs:#2D6AA3;--mp-ijs-ink:#fff;--mp-ijs-licht:color-mix(in srgb,var(--mp-ijs) 16%,var(--sheet));
  --mp-vrij:color-mix(in srgb,var(--p-soil) 30%,var(--sheet));
  --mp-arcering:repeating-linear-gradient(135deg,color-mix(in srgb,var(--mp-ijs) 55%,transparent) 0 2px,transparent 2px 6px);
  font-family:var(--f-body);padding-bottom:2.5rem}
@media (prefers-color-scheme:dark){.mp{--mp-ijs:#8DB8E6;--mp-ijs-ink:#10202E;--mp-vrij:color-mix(in srgb,var(--p-soil) 34%,var(--sheet))}}

.mp-blad{background:var(--sheet);box-shadow:0 0 0 1px var(--grid-2);border-radius:2px;max-width:40rem;margin:1.25rem 0 1.5rem;padding:1.25rem 1rem 1.1rem}
.mp-kop{display:block;margin:0 0 .5rem;font:600 .8rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* zoeken */
.mp-veld{display:flex;gap:.5rem}
.mp-veld input{flex:1;min-width:0;font:400 1.35rem/1 var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--grid-2);border-radius:2px;padding:.6rem .75rem;letter-spacing:.04em;text-transform:uppercase}
.mp-veld input::placeholder{color:var(--muted);opacity:.7}
.mp-veld input:focus{outline:2px solid var(--ink);outline-offset:1px}
.mp-knop{font:600 1rem/1 var(--f-body);background:var(--ink);color:var(--sheet);border:0;border-radius:2px;padding:0 1.2rem;cursor:pointer;min-height:2.9rem}
.mp-knop:disabled{opacity:.6;cursor:progress}
.mp-noot{margin:.5rem 0 0;min-height:1.4em;color:var(--p-red);font-size:.95rem}

/* plek */
.mp-plek{margin:0 0 1.1rem}
.mp-plek h2{font:600 1.75rem/1.1 var(--f-body);margin:0;outline:0}
.mp-plek p{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}
.mp-deel{border-top:1px solid var(--grid-2);padding:1rem 0 .2rem}
.mp-deel + .mp-deel{margin-top:.6rem}

/* komende nachten */
.mp-nachten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;min-height:3.9rem}
.mp-n{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.45rem 0 .4rem;border-radius:2px;
  border:1px solid var(--grid-2);background:var(--sheet)}
.mp-dag{font-size:.8rem;line-height:1;color:var(--muted)}
.mp-n b{font-weight:600;font-size:1.1rem;line-height:1;font-variant-numeric:tabular-nums}
.mp-n i{display:none}
.mp-n-grond{border:1.5px dashed var(--mp-ijs);background:var(--mp-ijs-licht)}
.mp-n-vorst{border-color:var(--mp-ijs);background:var(--mp-ijs);color:var(--mp-ijs-ink)}
.mp-n-vorst .mp-dag{color:inherit;opacity:.85}
.mp-nachten[aria-busy] {background:linear-gradient(90deg,var(--grid) 0 100%) no-repeat;opacity:.5;border-radius:2px}
.mp-oordeel{margin:.75rem 0 0;font-size:1.05rem;line-height:1.45}
.mp-oordeel b{font-weight:600}

/* legenda: vlakje en woord */
.mp-leg{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:.55rem 0 0;padding:0;list-style:none;font-size:.85rem;color:var(--muted)}
.mp-leg li{display:flex;align-items:center;gap:.4rem}
.mp-leg li::before{content:"";width:.95rem;height:.7rem;border-radius:1px;box-sizing:border-box;border:1px solid var(--mp-ijs)}
.mp-leg .mp-l-vorst::before{background:var(--mp-ijs)}
.mp-leg .mp-l-soms::before{background:var(--mp-arcering),var(--mp-ijs-licht)}
.mp-leg .mp-l-grond::before{background:var(--mp-ijs-licht);border:1.5px dashed var(--mp-ijs)}
.mp-leg .mp-l-vrij::before{background:var(--mp-vrij);border-color:color-mix(in srgb,var(--p-soil) 60%,var(--sheet))}

/* het jaar als balk */
.mp-jaar{position:relative;margin:.2rem 0 0}
.mp-balk{position:relative;height:1.6rem;border-radius:2px;overflow:hidden;background:var(--mp-vrij)}
.mp-balk i{position:absolute;top:0;bottom:0}
.mp-vorst{background:var(--mp-ijs)}
.mp-soms{background:var(--mp-arcering),var(--mp-ijs-licht)}
.mp-vrij{background:var(--mp-vrij)}
.mp-nu{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1.5px var(--sheet)}
.mp-as{position:relative;height:1.1rem;font-size:.75rem;color:var(--muted)}
.mp-as span{position:absolute;top:.2rem;transform:translateX(-50%);line-height:1}

.mp-cijfers,.mp-feiten{margin:.9rem 0 0;display:grid;gap:.7rem}
.mp-cijfer,.mp-feit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 1rem;align-items:baseline}
.mp-cijfers dt,.mp-feiten dt{font-size:1rem;color:var(--ink);grid-column:1;grid-row:1}
.mp-cijfers dd,.mp-feiten dd{display:contents}
.mp-cijfers dd b,.mp-feiten dd b{grid-column:2;grid-row:1;text-align:right}
.mp-cijfers dd small,.mp-feiten dd small{grid-column:1 / -1;grid-row:2}
.mp-cijfers b,.mp-feiten b{font-weight:600;font-size:1.1rem;font-variant-numeric:tabular-nums}
.mp-cijfers small,.mp-feiten small{display:block;font-size:.85rem;color:var(--muted);line-height:1.35}
.mp-bron{margin:.8rem 0 0;font-size:.85rem;color:var(--muted)}
.mp-bron a{color:inherit}

.mp-acties{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--grid-2);font-size:.9rem;color:var(--muted)}
.mp-link{background:none;border:0;padding:0;font:600 1rem var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (min-width:40rem){
  .mp-blad{padding:1.6rem 1.75rem 1.4rem}
  .mp-n b{font-size:1.25rem}
}