/* ══════════════════════════════════════════
   S.H.A.P.E. SUITE — suite.css v1.1
   Elementor-compatibel | Mobile-first
   shirleyverduin.nl
══════════════════════════════════════════ */

/* ── CSS Variabelen (gescoopt op .shape-* om Elementor niet te raken) ── */
.shape-wrap,
.shape-card,
#shape-tracker-root,
.sht-nav,
.sht-hero,
.sht-main {
  font-size: 16px;
  --cream:      #fce8f1;       /* roze achtergrond */
  --warm-white: #fdf0f6;       /* licht roze wit */
  --paper:      #ffffff;
  --terra:      #c9316e;       /* primaire roze van shirleyverduin.nl */
  --terra-dk:   #a8255a;
  --terra-lt:   #f7d0e3;
  --terra-xl:   #fceef6;
  --sage:       #7a9a7e;
  --sage-lt:    #edf4ee;
  --ink:        #2b1a22;
  --ink-mid:    #6b4a58;
  --ink-soft:   #a8879a;
  --border:     #e8c4d8;
  --ok:         #7a9a7e;
  --warn:       #c9883a;
  --bad:        #c9316e;
  --r:          12px;
  --shadow:     0 4px 24px rgba(201,49,110,.12);
}

/* ══════════════════════════════════════════
   ELEMENTOR RESET
   Voorkomt conflicts met Elementor styling.
   Alle S.H.A.P.E. stijlen zijn volledig gescoopt.
══════════════════════════════════════════ */
.elementor .shape-wrap *,
.elementor .shape-card *,
.elementor #shape-tracker-root * {
  box-sizing: border-box;
}
/* Elementor voegt soms margin toe aan form-elementen */
.elementor .shape-form input,
.elementor .shape-form button,
.elementor .shape-form textarea {
  margin: 0;
  font-family: 'Jost', sans-serif;
}
/* Verwijder Elementor heading-stijlen binnen shape-cards */
.elementor .shape-title,
.elementor .shape-brand {
  line-height: 1.2;
}

/* ══════════════════════════════════════════
   AUTH PAGINA'S
   Login, registratie, profiel, wachtwoord
══════════════════════════════════════════ */

.shape-wrap {
  width: 100%;
  max-width: 520px;
  margin: 40px auto 64px;
  padding: 0 16px;
  font-family: 'Jost', sans-serif;
  color: #2b1a22;
  box-sizing: border-box;
}

/* Elementor: verwijder extra margin die het widget toevoegt */
.elementor-widget-shortcode .shape-wrap {
  margin-top: 24px;
}

.shape-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #edd7e5;
  box-shadow: 0 4px 24px rgba(212,68,122,.10);
  padding: 36px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive card padding */
@media (max-width: 600px) {
  .shape-wrap { margin: 20px auto 48px; padding: 0 12px; }
  .shape-card { padding: 24px 18px; border-radius: 16px; }
}

/* Logo */
.shape-card-logo { text-align: center; margin-bottom: 24px; }
.shape-card-logo img,
.shape-logo-img {
  height: 104px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* ── Auth layout: afbeelding links, formulier rechts ── */
/* ── Auth layout: afbeelding links, formulier rechts ── */
/* Gebruik !important om thema-overschrijvingen te overriden */
.shape-auth-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  gap: 0;
  background: #fff;
}
.shape-auth-image {
  flex: 1 1 55% !important;
  max-width: 55% !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  background: #fff !important;
}
.shape-auth-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  /* object-fit:cover + object-position links zodat vrouw zichtbaar is,
     wit rechts valt buiten beeld door overflow:hidden op de container */
  object-fit: cover !important;
  object-position: left center !important;
  mix-blend-mode: multiply !important;
}
.shape-auth-layout .shape-wrap {
  flex: 0 0 45% !important;
  max-width: 45% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 60px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-left: 1px solid #edd7e5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.shape-auth-layout .shape-card {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 380px !important;
  background: transparent !important;
}

/* Mobiel */
@media (max-width: 768px) {
  .shape-auth-layout {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
    min-height: auto !important;
  }
  .shape-auth-image {
    flex: 0 0 260px !important;
    max-width: 100% !important;
    min-height: 260px !important;
    width: 100% !important;
  }
  .shape-auth-layout .shape-wrap {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 40px 24px !important;
    border-left: none !important;
    border-top: 1px solid #edd7e5 !important;
  }
}
.shape-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700;
  color: #d4447a; letter-spacing: 4px; margin: 5px 0 0;
}

/* Titels */
.shape-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 600;
  color: #2b1a22; text-align: center; margin: 0 0 5px;
  line-height: 1.2;
}
.shape-sub {
  font-size: 14px; color: #a8879a;
  text-align: center; margin: 0 0 24px;
  line-height: 1.5;
}
.shape-section-head {
  font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: #a8879a; margin: 20px 0 12px;
  padding-bottom: 7px; border-bottom: 1px solid #edd7e5;
}

/* ── Form velden ── */
.shape-form {
  display: flex; flex-direction: column; gap: 14px;
}

/* Twee kolommen naast elkaar, op mobiel gestapeld */
.shape-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .shape-field-row { grid-template-columns: 1fr; gap: 14px; }
}

.shape-field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; /* fix overflow in grid */
}
.shape-field label {
  font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: #6b4a58;
}
.shape-field input {
  border: 1.5px solid #edd7e5;
  border-radius: 10px;
  padding: 13px 15px;
  font-family: 'Jost', sans-serif;
  font-size: 16px; color: #2b1a22;
  background: #fff5f8;
  outline: none;
  width: 100%; box-sizing: border-box;
  min-height: 50px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.shape-field input:focus {
  border-color: #d4447a; background: #fff;
  box-shadow: 0 0 0 3px rgba(212,68,122,.10);
}
.shape-field input::placeholder { color: #a8879a; }

/* Checkbox rij */
.shape-check-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.shape-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: #6b4a58; cursor: pointer;
}
.shape-check input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: #d4447a;
  flex-shrink: 0;
}
.shape-check-terms { font-size: 15px; color: #6b4a58; }

/* ── Knoppen ── */
.shape-btn {
  display: inline-flex; align-items: center;
  justify-content: center; gap: 6px;
  padding: 13px 24px; border-radius: 24px; border: none;
  font-family: 'Jost', sans-serif;
  font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .2s; white-space: nowrap;
  box-sizing: border-box;
  min-height: 50px;
}
.shape-btn-primary { background: #d4447a; color: #fff; }
.shape-btn-primary:hover { background: #b8306a; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,68,122,.28); color: #fff; }
.shape-btn-ghost { background: transparent; color: #6b4a58; border: 1.5px solid #edd7e5; }
.shape-btn-ghost:hover { border-color: #d4447a; color: #d4447a; }
.shape-btn-danger { background: transparent; color: #d4447a; border: 1.5px solid #edd7e5; }
.shape-btn-danger:hover { border-color: #d4447a; background: #fce8f1; }
.shape-btn-full { width: 100%; margin-top: 2px; }

.shape-btn-group {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
/* Op mobiel: knoppen full-width stapelen */
@media (max-width: 420px) {
  .shape-btn-group { flex-direction: column; }
  .shape-btn-group .shape-btn { width: 100%; justify-content: center; }
}

/* ── Berichten ── */
.shape-msg {
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  margin-bottom: 4px; line-height: 1.5;
}
.shape-msg.success {
  background: #edf4ee; border: 1px solid #7a9a7e; color: #2d5e32;
}
.shape-msg.error {
  background: #fce8f1; border: 1px solid #d4447a; color: #b8306a;
}
.shape-msg ul { margin: 4px 0 0 16px; padding: 0; }

/* ── Links ── */
.shape-link { color: #d4447a; text-decoration: none; font-weight: 500; }
.shape-link:hover { text-decoration: underline; }
.shape-alt-link {
  text-align: center; font-size: 14px;
  color: #a8879a; margin-top: 20px;
}
.shape-alt-link a { color: #d4447a; font-weight: 600; text-decoration: none; }

/* ── Profiel header ── */
.shape-profile-header {
  display: flex; align-items: center;
  gap: 16px; margin-bottom: 20px;
  padding-bottom: 18px; border-bottom: 1px solid #edd7e5;
  flex-wrap: wrap;
}
.shape-avatar { border-radius: 50%; border: 3px solid #fce8f1; flex-shrink: 0; }
.shape-icon-big { font-size: 38px; text-align: center; margin-bottom: 10px; }

/* ══════════════════════════════════════════
   TRACKER
══════════════════════════════════════════ */

#shape-tracker-root {
  font-family: 'Jost', sans-serif;
  color: #2b1a22;
  min-height: 200px;
  width: 100%;
  /* Volledig breedte — geen max-width beperking */
}

/* TOPNAV */
.sht-nav {
  background: #fff;
  border-bottom: 1px solid #e8c4d8;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  min-height: 64px;
  position: sticky; top: 0; z-index: 200;
  gap: 12px;
  flex-wrap: nowrap;   /* altijd één rij */
  box-shadow: 0 1px 8px rgba(201,49,110,.08);
  overflow: hidden;    /* voorkomt uitlopen */
}
.sht-nav-logo {
  display: flex; align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  height: 100%;
}
.sht-nav-logo img {
  height: 54px;           /* 36px × 1.5 */
  width: auto;
  display: block;
}
/* Verberg tekstblokken in logo — worden niet meer gebruikt */
.sht-logo-text,
.sht-nav-title { display: none !important; }

.sht-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.sht-nav-user {
  font-size: 14px; color: #6b4a58; font-weight: 500;
  white-space: nowrap;
}
.sht-nav-select {
  background: #fdf0f6; border: 1.5px solid #e8c4d8;
  color: #2b1a22; padding: 5px 8px; border-radius: 7px;
  font-family: 'Jost', sans-serif; font-size: 12px; outline: none;
  height: 30px; cursor: pointer;
}
.sht-nav-link {
  font-size: 14px; color: #6b4a58; text-decoration: none;
  padding: 5px 12px; border-radius: 18px;
  border: 1.5px solid #e8c4d8; transition: all .2s;
  white-space: nowrap; height: 30px;
  display: inline-flex; align-items: center;
  box-sizing: border-box;
}
.sht-nav-link:hover { color: #c9316e; border-color: #c9316e; }

/* Mobiel: iets compacter maar nog steeds één rij */
/* ─ Nav-center (naam deelnemer links) ─ */
.sht-nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

/* ─ Startdag wrapper ─ */
.sht-startdag-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 0;
  margin-right: 4px;
  border-right: 1px solid #e8c4d8;
}
.sht-startdag-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1.3;
}
.sht-startdag-sub {
  font-weight: 400;
  font-size: 10px;
  display: block;
}
/* Vaste startdag: de coachingsdag van de groep bepaalt de weekindeling, dus er
   valt niets te kiezen. Bewust géén uitgeschakelde <select>, want die houdt zijn
   pijltje en suggereert dan toch een keuze. */
.sht-startdag-fixed {
  display: inline-flex;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid, #6b4a58);
  background: #fdf0f6;
  border: 1px solid #edd7e5;
  border-radius: 8px;
  padding: 7px 12px;
  white-space: nowrap;
  cursor: default;
}

/* ─ Verzenden naar coach knop ─ */
.sht-btn-coach {
  background: #2d6a4f;
  color: #fff;
  border: none;
}
.sht-btn-coach:hover { background: #1b4332; }

/* ─ Tablet (768px) ─ */
@media (max-width: 768px) {
  .sht-nav { flex-wrap: wrap; padding: 10px 14px; height: auto; gap: 8px; }
  .sht-nav-center { order: 2; flex: 0 0 100%; padding-left: 0; }
  .sht-nav-right { order: 3; flex: 0 0 100%; flex-wrap: wrap; gap: 10px; }
  .sht-startdag-wrap { border-right: none; padding-right: 0; margin-right: 0; }
}

/* ─ Mobiel (600px) ─ */
@media (max-width: 600px) {
  .sht-nav { padding: 8px 12px; gap: 4px; }
  .sht-nav-logo img { height: 42px; }
  .sht-nav-center { display: none; }
  .sht-startdag-sub { display: none; }
  .sht-nav-select { font-size: 15px; padding: 8px 10px; min-height: 44px; }
  .sht-startdag-fixed { font-size: 15px; padding: 9px 12px; min-height: 44px; }
  .sht-nav-link { font-size: 15px; padding: 8px 14px; min-height: 44px; }
}

/* LOADING BAR */
.sht-loading-bar {
  height: 3px;
  background: linear-gradient(90deg, #d4447a, #b8306a, #d4447a);
  background-size: 200% 100%;
  animation: sht-load 1.2s linear infinite;
}
@keyframes sht-load { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* HERO */
.sht-hero {
  background: linear-gradient(135deg, #c9316e 0%, #a8255a 100%);
  padding: 24px 20px 18px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sht-hero::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.07); pointer-events: none;
}
.sht-hero-inner { max-width: 100%; position: relative; z-index: 1; flex: 1 1 auto; }
.sht-hero-tag {
  font-size: 12px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 5px;
}
.sht-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 300; font-style: italic;
  line-height: 1.1; color: #fff; margin: 0;
}
.sht-hero h1 strong { font-style: normal; font-weight: 600; }
.sht-hero p { margin: 4px 0 0; font-size: 15px; color: rgba(255,255,255,.6); font-weight: 300; }
.sht-hero-meta {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 5px 14px;
  display: inline-block;
  letter-spacing: .02em;
}

/* Rechter paneel in hero: titel + rij met blokken */
.sht-hero-right {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
  align-items: stretch;
}
.sht-hero-right-title {
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  text-align: center;
}
.sht-hero-right-row {
  display: flex; flex-direction: row; gap: 8px; align-items: stretch;
}

/* De 3 verschilblokken naast elkaar */
.sht-hero-stats {
  display: flex; flex-direction: row; gap: 8px;
  align-items: stretch;
}
.sht-hero-stat {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 110px;
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; justify-content: center;
}
.sht-hstat-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin-bottom: 3px;
}
.sht-hstat-value {
  font-size: 20px; font-weight: 700; line-height: 1.1;
  font-family: 'Jost', sans-serif;
}
.sht-hstat-value.sht-hstat-down    { color: #a8e6b4; }
.sht-hstat-value.sht-hstat-up      { color: #ffb3b3; }
.sht-hstat-value.sht-hstat-neutral { color: rgba(255,255,255,.7); }
.sht-hstat-value.sht-hstat-na      { color: rgba(255,255,255,.35); font-size: 20px; }
.sht-hstat-sub {
  font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px;
}

/* Voortgangsblok rechts in hero */
.sht-hero-progress {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 10px 18px;
  min-width: 130px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.sht-prog-label {
  font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: 2px;
}
.sht-prog-week {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 700; line-height: 1;
  color: #fff;
}
.sht-prog-week span {
  font-size: 18px; font-weight: 400; color: rgba(255,255,255,.6);
}
.sht-prog-sub {
  font-size: 11px; color: rgba(255,255,255,.6); margin-top: 1px;
}
.sht-prog-bar-track {
  width: 100%; height: 4px; background: rgba(255,255,255,.2);
  border-radius: 2px; margin-top: 10px; overflow: hidden;
}
.sht-prog-bar-fill {
  height: 100%; background: rgba(255,255,255,.7);
  border-radius: 2px; transition: width .6s ease;
}
.sht-prog-pct {
  font-size: 13px; color: rgba(255,255,255,.5); margin-top: 5px;
}

@media (max-width: 860px) {
  .sht-hero-right-row { flex-direction: column; }
  .sht-hero-stats { flex-wrap: wrap; }
  .sht-hero-stat { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
@media (max-width: 560px) {
  .sht-hero { flex-direction: column; align-items: flex-start; }
  .sht-hero-right { width: 100%; }
  .sht-hero-stats { flex-wrap: wrap; }
  .sht-hero-stat { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .sht-hero-progress { width: 100%; flex-direction: row; justify-content: space-between; gap: 12px; padding: 10px 16px; }
  .sht-prog-week { font-size: 28px; }
  .sht-prog-bar-track { display: none; }
  .sht-prog-pct { margin-top: 0; }
}


/* Coach-notitie balk (alleen-lezen, zichtbaar voor iedereen met een notitie) */
.sht-coach-note-bar {
  background: #fdf0f6;
  border-bottom: 1px solid #e8c4d8;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #6b4a58;
}
.sht-coach-note-label {
  font-weight: 700; color: #c9316e; flex-shrink: 0;
}

/* Budget hint naast label — grijs, klein */
.sht-budget-hint {
  font-size: 13px; font-weight: 400;
  color: #a8879a; letter-spacing: 0;
  text-transform: none;
}

/* Eigen kolom rechts van de invoer: budget omgerekend naar calorieen.
   Vaste breedte zodat de rijen netjes onder elkaar uitlijnen. Het span blijft
   ook leeg staan (bv. bij een macro zonder budget) om de kolom te bewaren. */
.sht-kcal-col {
  font-size: 12px; font-weight: 500;
  color: #b98da4; letter-spacing: 0;
  text-transform: none; white-space: nowrap;
  width: 64px; text-align: right; flex-shrink: 0;
}

/* WEEK BAR */
.sht-week-bar {
  background: #fdf0f6;
  border-bottom: 1px solid #e8c4d8;
  padding: 7px 16px;
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.sht-week-label {
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #a8879a; flex-shrink: 0;
}
.sht-week-picker { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sht-week-chip {
  padding: 3px 11px; border-radius: 18px;
  border: 1.5px solid #e8c4d8; background: transparent;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  color: #6b4a58; transition: all .2s; position: relative; cursor: pointer;
}
.sht-week-chip:hover { border-color: #c9316e; color: #c9316e; }
.sht-week-chip.active { background: #c9316e; border-color: #c9316e; color: #fff; }
.sht-week-chip.has-data::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #7a9a7e; border: 1.5px solid #fff;
}
.sht-week-chip.active.has-data::after { border-color: #c9316e; }
.sht-week-chip.is-sent { border-color: #b8cfc0; color: #6b8a72; }
.sht-week-chip.is-sent:hover { border-color: #7a9a7e; color: #4a7055; }
.sht-week-chip.active.is-sent { background: #7a9a7e; border-color: #7a9a7e; color: #fff; }

/* MAIN */
.sht-main {
  max-width: 100%;
  padding: 20px 24px 72px;
  background: #fce8f1;
  min-height: 60vh;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .sht-main { padding: 24px 32px 80px; }
}
@media (min-width: 1200px) {
  .sht-main { padding: 28px 48px 80px; }
}

/* DAG TABS */
.sht-day-nav {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap;
  gap: 10px; margin-bottom: 16px;
}
.sht-day-nav-left {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600; color: #2b1a22;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.sht-week-badge {
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
  background: #fce8f1; color: #d4447a;
}
.sht-day-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sht-day-tab {
  padding: 5px 11px; border-radius: 20px;
  border: 1.5px solid #edd7e5; background: transparent;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  color: #6b4a58; transition: all .2s; position: relative; cursor: pointer;
}
.sht-day-tab:hover { border-color: #d4447a; color: #d4447a; }
.sht-day-tab.active { background: #d4447a; border-color: #d4447a; color: #fff; }
.sht-day-tab.has-data::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #7a9a7e; border: 1.5px solid #fff;
}
.sht-day-tab.active.has-data::after { border-color: #d4447a; }

/* DAG CARD */
.sht-day-card {
  background: #ffffff;
  border-radius: 12px; border: 1px solid #edd7e5;
  overflow: hidden; margin-bottom: 16px;
  box-shadow: 0 2px 14px rgba(43,26,34,.05);
  animation: sht-fadeup .22s ease;
}
@keyframes sht-fadeup { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.sht-card-head {
  background: linear-gradient(135deg, #c9316e 0%, #a8255a 100%);
  color: #fff; padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 4px;
}
.sht-card-head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600; font-style: italic; margin: 0;
}
.sht-card-date { font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: .3px; }

/* Twee kolommen op desktop, één op mobiel */
.sht-card-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .sht-card-cols { grid-template-columns: 1fr; }
}

.sht-card-col { padding: 16px 18px; }
.sht-card-col:first-child { border-right: 1px solid #edd7e5; }
@media (max-width: 640px) {
  .sht-card-col:first-child { border-right: none; border-bottom: 1px solid #edd7e5; }
}

.sht-col-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 600; color: #d4447a;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid #fce8f1;
  display: flex; align-items: center; gap: 5px;
}

/* FORM VELDEN in tracker */
.sht-f-row {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 9px; gap: 5px;
}
.sht-f-row label { font-size: 15px; color: #6b4a58; flex: 1; min-width: 0; }
.sht-f-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.sht-mini-bar { width: 44px; height: 4px; background: #edd7e5; border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.sht-mini-fill { height: 100%; border-radius: 2px; background: #d4447a; transition: width .3s; }
.sht-input {
  width: 72px; border: 1.5px solid #edd7e5; border-radius: 8px;
  padding: 6px 7px; font-family: 'Jost', sans-serif;
  font-size: 15px; font-weight: 500; text-align: right;
  outline: none; color: #2b1a22; background: #fff5f8;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
}
.sht-input:focus { border-color: #d4447a; background: #fce8f1; }
.sht-unit { font-size: 13px; color: #a8879a; width: 28px; flex-shrink: 0; }

/* Mobiel: iets kleinere inputs */
@media (max-width: 400px) {
  .sht-input { width: 66px; font-size: 15px; }
  .sht-mini-bar { display: none; }
  .sht-kcal-col { width: 52px; font-size: 11px; }
}

/* SCORE DOTS */
.sht-s-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.sht-s-label { font-size: 15px; color: #6b4a58; width: 110px; flex-shrink: 0; }
.sht-s-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.sht-water-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}
.sht-water-input {
  width: 80px;
  padding: 5px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
  background: var(--card);
  text-align: center;
  -moz-appearance: textfield;
}
.sht-water-input::-webkit-outer-spin-button,
.sht-water-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sht-water-input:focus { border-color: var(--pink); outline: none; }
.sht-unit { font-size: 15px; color: var(--sub); font-weight: 500; }

.sht-dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid #edd7e5; background: transparent;
  font-size: 13px; font-weight: 600; color: #a8879a;
  transition: all .12s; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.sht-dot:hover { border-color: #d4447a; color: #d4447a; }
.sht-dot.sel-1,.sht-dot.sel-2,.sht-dot.sel-3 { background: #d4447a; border-color: #d4447a; color: #fff; }
.sht-dot.sel-4,.sht-dot.sel-5,.sht-dot.sel-6 { background: #c9883a; border-color: #c9883a; color: #fff; }
.sht-dot.sel-7,.sht-dot.sel-8,.sht-dot.sel-9,.sht-dot.sel-10 { background: #7a9a7e; border-color: #7a9a7e; color: #fff; }

/* Omgekeerde schaal: bij stress is een HOOG cijfer ongunstig. De kleuren van
   de bolletjes draaien daarom om ten opzichte van energie (1 = rustig/groen,
   10 = veel stress/rood). */
.sht-s-dots.is-inverted .sht-dot.sel-1,
.sht-s-dots.is-inverted .sht-dot.sel-2,
.sht-s-dots.is-inverted .sht-dot.sel-3 { background: #7a9a7e; border-color: #7a9a7e; color: #fff; }
.sht-s-dots.is-inverted .sht-dot.sel-4,
.sht-s-dots.is-inverted .sht-dot.sel-5,
.sht-s-dots.is-inverted .sht-dot.sel-6 { background: #c9883a; border-color: #c9883a; color: #fff; }
.sht-s-dots.is-inverted .sht-dot.sel-7,
.sht-s-dots.is-inverted .sht-dot.sel-8,
.sht-s-dots.is-inverted .sht-dot.sel-9,
.sht-s-dots.is-inverted .sht-dot.sel-10 { background: #d4447a; border-color: #d4447a; color: #fff; }

/* Kleine uitleg achter een schaal-label, bv. "10 = veel stress". */
.sht-s-hint { display: block; font-size: 11px; opacity: .65; margin-top: 1px; }

/* STAPPEN */
.sht-stap-row { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; overflow: hidden; }
.sht-stap-row label { font-size: 15px; color: #6b4a58; flex: 1; min-width: 0; }
.sht-stap-row .sht-unit { width: auto; white-space: nowrap; flex-shrink: 0; }
.sht-stap-input {
  flex: 0 0 90px; max-width: 90px;
  border: 1.5px solid #edd7e5; border-radius: 8px;
  padding: 6px 9px; font-family: 'Jost', sans-serif;
  font-size: 15px; outline: none; color: #2b1a22;
  transition: border-color .2s; box-sizing: border-box;
}
.sht-stap-input:focus { border-color: #d4447a; }

/* OPMERKING */
.sht-remark-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #a8879a;
  margin-bottom: 4px; display: block; margin-top: 3px;
}
.sht-remark-ta {
  width: 100%; border: 1.5px solid #edd7e5; border-radius: 8px;
  padding: 7px 10px; font-family: 'Jost', sans-serif;
  font-size: 15px; color: #2b1a22; resize: vertical;
  min-height: 46px; outline: none; background: #fff5f8;
  transition: border-color .2s; box-sizing: border-box;
}
.sht-remark-ta:focus { border-color: #d4447a; background: #fff; }

/* LIVE BARS */
.sht-live-bars {
  border-top: 1px solid #e8c4d8;
  background: #fdf0f6; padding: 10px 16px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
@media (max-width: 520px) {
  .sht-live-bars { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 320px) {
  .sht-live-bars { grid-template-columns: 1fr; }
}
.sht-ml-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.sht-ml-name { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #a8879a; }
.sht-ml-val { font-size: 13px; font-weight: 600; }
.sht-ml-val.ok   { color: #7a9a7e; }
.sht-ml-val.over { color: #d4447a; }
.sht-ml-val.nd   { color: #a8879a; }
.sht-bar-track { height: 5px; background: #edd7e5; border-radius: 3px; overflow: hidden; }
.sht-bar-fill { height: 100%; border-radius: 3px; transition: width .3s, background .3s; }

/* KNOPPEN rij */
.sht-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 20px; }
@media (max-width: 420px) {
  .sht-btn-row { flex-direction: column; }
  .sht-btn-row .sht-btn { width: 100%; justify-content: center; }
}
.sht-btn {
  padding: 9px 20px; border-radius: 22px; border: none;
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 600;
  transition: all .2s; display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; box-sizing: border-box;
}
.sht-btn-primary { background: #d4447a; color: #fff; }
.sht-btn-primary:hover { background: #b8306a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,68,122,.28); }
.sht-btn-report { background: #2b1a22; color: #fff; font-size: 16px; padding: 13px 26px; }
.sht-btn-report:hover { background: #3d2530; transform: translateY(-1px); }
.sht-btn-ghost { background: transparent; color: #6b4a58; border: 1.5px solid #edd7e5; }
.sht-btn-ghost:hover { border-color: #d4447a; color: #d4447a; }
.sht-btn-danger { background: transparent; color: #d4447a; border: 1.5px solid #edd7e5; }
.sht-btn-danger:hover { border-color: #d4447a; background: #fce8f1; }

/* SAVE INDICATOR */
.sht-save-ind {
  position: fixed; top: 66px; right: 14px;
  background: #7a9a7e; color: #fff;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; z-index: 9999;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}

/* ══════════════════════════════════════════
   RAPPORT
══════════════════════════════════════════ */
.sht-report-wrap { display: none; }
.sht-report-wrap.visible { display: block; animation: sht-fadeup .35s ease; }

.sht-rpt-head {
  background: linear-gradient(135deg, #2b1a22 0%, #3d2530 100%);
  color: #fff; border-radius: 12px 12px 0 0;
  padding: 18px 22px;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 10px;
}
.sht-rpt-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 600; font-style: italic; margin: 0;
}
.sht-rpt-meta {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
  letter-spacing: .01em;
}
.sht-rpt-subsec {
  font-size: 12px;
  font-weight: 700;
  color: var(--rose);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 14px 0 8px;
  padding-left: 2px;
}
.sht-rpt-period { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }
.sht-rpt-client { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 1px; font-weight: 500; }

.sht-rpt-body {
  background: #fdf0f6;
  border: 1px solid #e8c4d8; border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 18px 16px 24px;
}
@media (min-width: 600px) {
  .sht-rpt-body { padding: 20px 22px 28px; }
}

/* Score cards */
.sht-sc-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; margin-bottom: 18px;
}
@media (max-width: 580px) { .sht-sc-grid { grid-template-columns: repeat(2,1fr); } }
.sht-sc {
  background: #ffffff; border-radius: 12px;
  padding: 14px 10px; text-align: center;
  border: 1px solid #edd7e5;
}
.sht-sc-icon { font-size: 20px; margin-bottom: 4px; }
.sht-sc-lbl { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #a8879a; margin-bottom: 3px; }
.sht-sc-val { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; line-height: 1; }
.sht-sc-val.ok   { color: #7a9a7e; }
.sht-sc-val.warn { color: #c9883a; }
.sht-sc-val.bad  { color: #d4447a; }
.sht-sc-sub { font-size: 12px; color: #a8879a; margin-top: 2px; }

.sht-rpt-sec {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 600; color: #2b1a22;
  margin: 18px 0 9px; display: flex; align-items: center; gap: 8px;
}
.sht-rpt-sec::after { content: ''; flex: 1; height: 1px; background: #edd7e5; }

/* Bar chart */
.sht-chart-box {
  background: #ffffff; border-radius: 12px; border: 1px solid #edd7e5;
  padding: 14px 16px; margin-bottom: 8px; overflow-x: auto;
}
.sht-chart-box h4 { font-size: 13px; font-weight: 600; color: #6b4a58; margin-bottom: 10px; }
.sht-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; min-width: 280px; }
.sht-bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sht-bc-bars { display: flex; gap: 2px; align-items: flex-end; height: 82px; }
.sht-bc-bar { width: 11px; border-radius: 3px 3px 0 0; min-height: 2px; }
.sht-bc-lbl { font-size: 11px; color: #a8879a; text-align: center; line-height: 1.4; }

/* Deviation table */
.sht-dev-tbl {
  background: #ffffff; border-radius: 12px;
  border: 1px solid #edd7e5; overflow: hidden; margin-bottom: 8px;
  overflow-x: auto;
}
.sht-dev-head,.sht-dev-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 1fr 100px;
  gap: 5px; padding: 8px 12px;
}
.sht-dev-head {
  background: #fce8f1; font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: #d4447a;
}
.sht-dev-row {
  border-top: 1px solid #edd7e5;
  font-size: 12px; align-items: center;
}
.sht-dev-row:hover { background: #fef3f8; }
.sht-dev-name { font-weight: 600; font-family: 'Cormorant Garamond', serif; font-size: 15px; }
.sht-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.sht-chip-ok    { background: #edf4ee; color: #7a9a7e; }
.sht-chip-over  { background: #fce8f1; color: #d4447a; }
.sht-chip-under { background: #fce8f1; color: #c9883a; }
.sht-chip-empty { background: #f5f5f5; color: #a8879a; }

/* Macro grid */
.sht-macro-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px; margin-bottom: 8px;
}
@media (max-width: 580px) { .sht-macro-grid { grid-template-columns: 1fr; } }
.sht-mc { background: #ffffff; border-radius: 12px; border: 1px solid #edd7e5; overflow: hidden; }
.sht-mc-head {
  padding: 8px 12px; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.sht-mc-head.vet   { background: #fce8f1; color: #d4447a; }
.sht-mc-head.khd   { background: #fce8f1; color: #b8306a; }
.sht-mc-head.eiwit { background: #edf4ee; color: #7a9a7e; }
.sht-mc-row {
  padding: 6px 12px; display: flex; justify-content: space-between;
  align-items: center; border-top: 1px solid #edd7e5; font-size: 12px;
}
.sht-mc-row:hover { background: #fef3f8; }
.sht-mc-day { color: #6b4a58; }
.sht-mc-amt { font-weight: 600; }
.sht-dp { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; }
.sht-dp-ok    { background: #edf4ee; color: #7a9a7e; }
.sht-dp-over  { background: #fce8f1; color: #d4447a; }
.sht-dp-under { background: #fce8f1; color: #d4447a; }
.sht-mc-total {
  padding: 7px 12px; background: #fff5f8;
  border-top: 1px solid #edd7e5;
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700;
}

/* Welzijn grid */
.sht-wb-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; margin-bottom: 8px;
}
@media (max-width: 480px) { .sht-wb-grid { grid-template-columns: repeat(2,1fr); } }
.sht-wb-card {
  background: #ffffff; border-radius: 12px; border: 1px solid #edd7e5;
  padding: 12px; text-align: center;
}
.sht-wb-icon { font-size: 18px; margin-bottom: 3px; }
.sht-wb-lbl { font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #a8879a; margin-bottom: 3px; }
.sht-wb-val { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; }
.sht-wb-val.ok  { color: #7a9a7e; }
.sht-wb-val.bad { color: #d4447a; }
.sht-wb-stars { font-size: 11px; color: #d4447a; margin-top: 1px; }

/* Vergelijking vorige week */
.sht-cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
@media (max-width: 480px) { .sht-cmp-grid { grid-template-columns: 1fr 1fr; } }
.sht-cmp-card {
  background: #fdf6fa; border: 1.5px solid #e8c4d8;
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.sht-cmp-icon { font-size: 18px; line-height: 1; }
.sht-cmp-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: #a8879a;
}
.sht-cmp-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 4px;
  margin-top: 4px;
}
.sht-cmp-col {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 1;
}
.sht-cmp-meta { font-size: 9px; color: #a8879a; text-transform: uppercase; letter-spacing: .8px; }
.sht-cmp-num  { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: #2b1a22; }
.sht-cmp-arrow {
  font-size: 18px; font-weight: 700; width: 24px;
  text-align: center; flex-shrink: 0;
}
.sht-cmp-delta {
  font-size: 11px; font-weight: 600; text-align: center;
  padding: 2px 6px; border-radius: 20px;
  background: #f0e4ef;
}
/* arrow & delta colours */
.cmp-up-good  { color: #7a9a7e; }
.cmp-dn-good  { color: #7a9a7e; }
.cmp-up-bad   { color: #d4447a; }
.cmp-dn-bad   { color: #d4447a; }
.cmp-neutral  { color: #a8879a; }


.sht-eval-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 580px) { .sht-eval-grid { grid-template-columns: 1fr; } }
.sht-eq label {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #6b4a58; margin-bottom: 4px;
}
.sht-eq textarea {
  width: 100%; border: 1.5px solid #edd7e5; border-radius: 8px;
  padding: 8px 11px; font-family: 'Jost', sans-serif;
  font-size: 12px; color: #2b1a22; min-height: 60px;
  resize: vertical; outline: none; background: #fff5f8;
  transition: border-color .2s; box-sizing: border-box;
}
.sht-eq textarea:focus { border-color: #d4447a; background: #fff; }

/* FOOTER */
.sht-footer {
  background: #2b1a22; color: rgba(255,255,255,.35);
  text-align: center; padding: 14px;
  font-size: 11px; letter-spacing: 1px;
}
.sht-footer a { color: rgba(255,255,255,.45); text-decoration: none; }
.sht-footer a:hover { color: #fff; }

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
  .sht-nav,.sht-hero,.sht-week-bar,
  .sht-day-nav,#sht-day-card-container,.sht-btn-row,
  .sht-footer,.sht-save-ind,.no-print,
  .sht-startdag-wrap { display: none !important; }

  body { background: #fff !important; }
  .sht-report-wrap { display: block !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .sht-rpt-head { background: #2b1a22 !important; border-radius: 0 !important; }
  .sht-rpt-body .sht-btn-row { display: none !important; }
}

/* ══════════════════════════════════════════
   STREAKS & BADGES
══════════════════════════════════════════ */
.sht-streak-block {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #fce8f1 0%, #fdf4f9 100%);
  border: 1px solid rgba(208, 33, 111, 0.18);
  border-radius: 14px;
  padding: 14px 20px;
  margin: 0 0 18px;
  min-height: 58px;
}

.sht-streak-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}

.sht-streak-fire {
  font-size: 20px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity .3s, transform .3s;
}
.sht-streak-fire.warm { opacity: 0.8; transform: scale(1.1); }
.sht-streak-fire.hot  { opacity: 1;   transform: scale(1.25); filter: drop-shadow(0 0 4px #f59e0b); }

.sht-streak-num {
  font-family: 'Jost', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #d0216f;
  line-height: 1;
}

.sht-streak-label {
  font-size: 13px;
  color: #7a3050;
  font-weight: 400;
}

.sht-streak-best {
  font-size: 11px;
  color: #b07090;
  margin-left: 4px;
}

.sht-streak-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sht-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(208, 33, 111, 0.25);
  border-radius: 10px;
  padding: 7px 11px;
  min-width: 62px;
  cursor: default;
  transition: transform .15s, box-shadow .15s;
}
.sht-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(208, 33, 111, 0.12);
}

.sht-badge-icon  { font-size: 18px; line-height: 1; margin-bottom: 3px; }
.sht-badge-label { font-size: 10px; color: #7a3050; text-align: center; line-height: 1.3; font-weight: 500; }

.sht-no-badges {
  font-size: 12px;
  color: #c09ab0;
  font-style: italic;
}

.sht-streak-info {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1.5px solid rgba(208, 33, 111, 0.35);
  border-radius: 20px;
  padding: 6px 13px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #d0216f;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.sht-streak-info:hover { background: #fff5fa; border-color: #d0216f; }
.sht-streak-info:active { transform: scale(.97); }

@media (max-width: 600px) {
  .sht-streak-block { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sht-streak-info { margin-left: 0; }
}

/* ══════════════════════════════════════════
   VOORTGANGSGRAFIEK
══════════════════════════════════════════ */
.sht-progress-chart-wrap {
  background: #fff;
  border: 1px solid rgba(208, 33, 111, 0.14);
  border-radius: 14px;
  padding: 18px 20px 14px;
  margin: 0 0 18px;
}

.sht-pchart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.sht-pchart-title {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #7a3050;
  letter-spacing: .02em;
}

.sht-pchart-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sht-pchart-tab {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid rgba(208, 33, 111, 0.2);
  background: transparent;
  color: #9a607a;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sht-pchart-tab:hover {
  background: rgba(208, 33, 111, 0.06);
  border-color: rgba(208, 33, 111, 0.35);
  color: #d0216f;
}
.sht-pchart-tab.active {
  background: #d0216f;
  border-color: #d0216f;
  color: #fff;
}

.sht-pchart-canvas-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}

.sht-pchart-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: #9a7080;
  flex-wrap: wrap;
}
.sht-pchart-leg-from,
.sht-pchart-leg-to    { font-weight: 500; color: #7a3050; }
.sht-pchart-leg-arrow { color: #cca0b4; }
.sht-pchart-leg-diff  { font-weight: 600; margin-left: 4px; }
.sht-pchart-pos { color: #3a7a4a; }
.sht-pchart-neg { color: #c0392b; }

@media (max-width: 600px) {
  .sht-pchart-header { flex-direction: column; align-items: flex-start; }
  .sht-pchart-canvas-wrap { height: 180px; }
}

/* ══════════════════════════════════════════
   WEEK-OP-WEEK BLOK
══════════════════════════════════════════ */
.sht-wow-block {
  background: #fff;
  border: 1.5px solid #f0d8e8;
  border-radius: 14px;
  padding: 14px 20px;
  margin: 0 0 16px;
}
.sht-wow-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sht-wow-title {
  font-size: 13px;
  font-weight: 700;
  color: #2b1a22;
  letter-spacing: .02em;
}
.sht-wow-range {
  font-size: 11px;
  color: #a8879a;
  font-weight: 500;
}
.sht-wow-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sht-wow-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid transparent;
}
.sht-wow-pill.sht-wow-pos  { background: #edf7ee; color: #2d6a4f; border-color: #a8d5b0; }
.sht-wow-pill.sht-wow-neg  { background: #fef0f0; color: #c0392b; border-color: #f5b8b8; }
.sht-wow-pill.sht-wow-neutral { background: #f5f5f5; color: #777; border-color: #ddd; }
.sht-wow-icon  { font-size: 14px; }
.sht-wow-label { opacity: .75; font-weight: 500; }
.sht-wow-val   { font-weight: 700; }

@media (max-width: 600px) {
  .sht-wow-pills { gap: 6px; }
  .sht-wow-pill  { font-size: 11px; padding: 4px 10px; }
}

/* ══════════════════════════════════════════
   COACH FEEDBACK (deelnemer-kant)
══════════════════════════════════════════ */
.sht-feedback-note {
  background: linear-gradient(135deg, #f8f0ff 0%, #fdf6ff 100%);
  border: 1px solid rgba(160, 80, 200, 0.18);
  border-left: 3px solid #a050c8;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.sht-feedback-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.sht-feedback-coach {
  font-size: 12px;
  font-weight: 700;
  color: #6a1890;
}

.sht-feedback-date {
  font-size: 11px;
  color: #b090c8;
}

.sht-feedback-body {
  font-size: 14px;
  color: #2e1040;
  line-height: 1.65;
}

/* ── Water goal hint ── */
.sht-water-wrap {
  flex-wrap: wrap;
}
.sht-water-goal {
  width: 100%;
  font-size: 11px;
  color: var(--accent, #d0216f);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* ── Macro donut chart ── */
.sht-macro-donut-wrap {
  margin: 14px 0 6px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
}
.sht-macro-donut-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sht-macro-donut-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sht-macro-donut-inner canvas {
  flex-shrink: 0;
}
.sht-macro-donut-legend {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sht-donut-leg-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.sht-donut-leg-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sht-donut-leg-lbl {
  flex: 1;
  color: var(--txt);
  font-weight: 500;
}
.sht-donut-leg-val {
  color: var(--ink-soft, #555);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}
.sht-donut-leg-pct {
  color: var(--accent, #d0216f);
  font-weight: 700;
  min-width: 34px;
  text-align: right;
}

/* water input + unit row */
.sht-water-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Doel voortgangsbalk ── */
.sht-goal-progress {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.sht-gp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.sht-gp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sht-gp-pct {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent, #d0216f);
}
.sht-gp-track {
  height: 10px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sht-gp-fill {
  height: 100%;
  background: linear-gradient(90deg, #d0216f, #e06698);
  border-radius: 999px;
  transition: width 0.6s ease;
}
.sht-gp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 12px;
  color: var(--sub);
}
.sht-gp-meta strong { color: var(--txt); }
.sht-gp-left { color: var(--sub); }
.sht-gp-done { color: #27ae60; font-weight: 700; }

/* ── Streak tip ── */
.sht-badge-hint {
  width: 100%;
  margin-top: 8px;
  padding: 7px 13px;
  background: #fff8fc;
  border-left: 3px solid #e8a0c0;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: #7a4a60;
}
.sht-streak-tip {
  width: 100%;
  margin-top: 10px;
  padding: 9px 13px;
  background: linear-gradient(135deg, #fce8f1, #fff0f6);
  border-left: 3px solid var(--accent, #d0216f);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--txt);
  font-style: italic;
  line-height: 1.5;
}

/* ── Groepsscore blok ── */
.sht-group-score {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.sht-gs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.sht-gs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sht-gs-trend {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}
.sht-gs-up   { background: #e8f8ee; color: #1a7a3a; }
.sht-gs-down { background: #fde8e8; color: #c0392b; }
.sht-gs-flat { background: #f5f0fe; color: #7d3c98; }
.sht-gs-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sht-gs-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.sht-gs-emoji {
  font-size: 32px;
  line-height: 1;
}
.sht-gs-num {
  font-size: 42px;
  font-weight: 900;
  color: var(--accent, #d0216f);
  line-height: 1;
}
.sht-gs-max {
  font-size: 16px;
  color: var(--sub);
  font-weight: 600;
}
.sht-gs-level {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
}
.sht-gs-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--sub);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.sht-gs-anon {
  font-size: 11px;
  color: var(--ink-soft, #aaa);
  font-style: italic;
  margin-top: 4px;
}

/* ── Dagelijkse intentie ── */
.sht-intentie-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--txt);
  background: var(--card);
  box-sizing: border-box;
  font-style: italic;
}
.sht-intentie-input:focus { border-color: var(--accent, #d0216f); outline: none; }
.sht-intentie-input::placeholder { color: var(--sub); font-style: italic; }

/* ── Verlengingsverzoek ── */
.sht-extension-block { margin-bottom: 14px; }
.sht-ext-wrap {
  border-radius: 14px;
  padding: 14px 16px;
  border: 1.5px solid;
}
.sht-ext-soon   { background: #f0faf4; border-color: #a8d8b8; }
.sht-ext-urgent { background: #fff8e8; border-color: #ffd070; }
.sht-ext-info {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
.sht-ext-icon  { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.sht-ext-title { font-size: 13px; font-weight: 600; color: var(--txt); }
.sht-ext-sub   { font-size: 12px; color: var(--sub); margin-top: 2px; }
.sht-ext-textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; border: 1.5px solid var(--line);
  border-radius: 10px; font-size: 13px; resize: none; height: 64px;
  background: var(--card); color: var(--txt); margin-bottom: 8px;
}
.sht-ext-textarea:focus { border-color: var(--accent, #d0216f); outline: none; }
.sht-ext-btn {
  width: 100%; padding: 9px;
  background: var(--accent, #d0216f); color: #fff;
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.sht-ext-btn:hover { opacity: .88; }
.sht-ext-btn:disabled { opacity: .5; cursor: default; }
.sht-ext-sent {
  font-size: 13px; font-weight: 600;
  color: #1a7a3a; text-align: center; padding: 8px 0;
}

/* ── Offline statusbalk ── */
.sht-offline-bar {
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

/* ── Groepsberichten banner ── */
.sht-messages-bar {
  margin-bottom: 10px;
}
.sht-msg-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, #fce8f1, #fff0f6);
  border: 1.5px solid #e8c4d8;
  border-left: 4px solid #d0216f;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--txt);
  line-height: 1.5;
}
.sht-msg-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sht-msg-text {
  flex: 1;
  font-weight: 500;
}

/* ══════════════════════════════════════════
   LEESBAARHEID 50+ — grotere tekst, ruimere
   touch-targets, beter contrast
   Alleen actief op mobiel (≤ 600px) zodat
   desktop/tablet niet wordt overschreven.
══════════════════════════════════════════ */
@media (max-width: 600px) {

/* ── Basis body-tekst & labels ── */
.shape-sub           { font-size: 17px !important; line-height: 1.6 !important; }
.shape-section-head  { font-size: 15px !important; }
.shape-field label   { font-size: 15px !important; }
.shape-field input   { font-size: 16px !important; padding: 13px 15px !important; }
.shape-check         { font-size: 16px !important; }
.shape-check-terms   { font-size: 16px !important; }
.shape-check input[type="checkbox"] { width: 22px !important; height: 22px !important; }
.shape-msg           { font-size: 15px !important; padding: 13px 16px !important; line-height: 1.6 !important; }
.shape-alt-link      { font-size: 15px !important; }
.shape-brand         { font-size: 22px !important; }
.shape-title         { font-size: 26px !important; }

/* ── Knoppen (auth-pagina) — goed aanraakbaar, niet overbreed ── */
.shape-btn           { font-size: 16px !important; padding: 13px 24px !important; min-height: 50px !important; width: 100% !important; max-width: 100% !important; }

/* ── Nav ── */
.sht-nav-user        { font-size: 14px !important; }
.sht-nav-select      { font-size: 14px !important; height: 40px !important; padding: 6px 10px !important; }
.sht-startdag-fixed  { font-size: 14px !important; padding: 7px 12px !important; }
.sht-nav-link        { font-size: 13px !important; height: 40px !important; padding: 6px 14px !important; }
.sht-startdag-label  { font-size: 12px !important; white-space: nowrap !important; }
.sht-startdag-sub    { font-size: 11px !important; }

/* ── Week-chips & dag-tabs ── */
.sht-week-label      { font-size: 13px !important; }
.sht-week-chip       { font-size: 14px !important; padding: 7px 13px !important; min-height: 40px !important; }
.sht-day-tab         { font-size: 14px !important; padding: 9px 14px !important; min-height: 44px !important; }
.sht-day-nav-left    { font-size: 22px !important; }
.sht-week-badge      { font-size: 13px !important; padding: 3px 10px !important; }

/* ── Dag-kaart ── */
.sht-card-head h3    { font-size: 22px !important; }
.sht-card-date       { font-size: 14px !important; }
.sht-col-head        { font-size: 16px !important; }

/* ── Formulier-velden in tracker ── */
.sht-f-row label     { font-size: 15px !important; line-height: 1.5 !important; }
.sht-f-row           { margin-bottom: 12px !important; gap: 6px !important; }
.sht-input           { width: 84px !important; font-size: 16px !important; padding: 9px 8px !important; min-height: 44px !important; }
.sht-unit            { font-size: 14px !important; }
.sht-budget-hint     { font-size: 14px !important; }
.sht-kcal-col        { font-size: 12px !important; width: 58px !important; }

/* ── Score-dots (welzijn) ── */
.sht-s-label         { font-size: 15px !important; width: 110px !important; }
.sht-s-row           { margin-bottom: 10px !important; gap: 6px !important; }
.sht-dot             { width: 36px !important; height: 36px !important; font-size: 14px !important; }

/* ── Stappen ── */
.sht-stap-row label  { font-size: 15px !important; }
.sht-stap-input      { font-size: 16px !important; padding: 9px 8px !important; min-height: 44px !important; flex: 0 0 96px !important; max-width: 96px !important; }

/* ── Opmerking textarea ── */
.sht-remark-label    { font-size: 13px !important; }
.sht-remark-ta       { font-size: 15px !important; min-height: 60px !important; padding: 9px 11px !important; line-height: 1.6 !important; }

/* ── Live macro-bars ── */
.sht-ml-name         { font-size: 12px !important; }
.sht-ml-val          { font-size: 13px !important; }

/* ── Tracker-knoppen ── */
.sht-btn             { font-size: 16px !important; padding: 12px 22px !important; min-height: 48px !important; }
.sht-btn-report      { font-size: 16px !important; padding: 13px 26px !important; }

/* ── Hero ── */
.sht-hero p          { font-size: 14px !important; }
.sht-hero-tag        { font-size: 12px !important; }
.sht-hstat-label     { font-size: 12px !important; }
.sht-hstat-value     { font-size: 20px !important; }
.sht-hstat-sub       { font-size: 13px !important; }
.sht-prog-label      { font-size: 13px !important; }
.sht-prog-sub        { font-size: 14px !important; }
.sht-prog-pct        { font-size: 13px !important; }

/* ── Coach-notitie balk ── */
.sht-coach-note-bar  { font-size: 15px !important; padding: 10px 16px !important; line-height: 1.6 !important; }

/* ── Rapport ── */
.sht-rpt-head h2     { font-size: 22px !important; }
.sht-rpt-meta        { font-size: 14px !important; }
.sht-rpt-period      { font-size: 13px !important; }
.sht-rpt-client      { font-size: 13px !important; }
.sht-rpt-sec         { font-size: 18px !important; }
.sht-rpt-subsec      { font-size: 13px !important; }
.sht-sc-lbl          { font-size: 13px !important; }
.sht-sc-sub          { font-size: 13px !important; }
.sht-sc-val          { font-size: 26px !important; }
.sht-chart-box h4    { font-size: 14px !important; }
.sht-bc-lbl          { font-size: 12px !important; }
.sht-dev-head        { font-size: 13px !important; }
.sht-dev-row         { font-size: 14px !important; }
.sht-dev-name        { font-size: 15px !important; }
.sht-chip            { font-size: 13px !important; padding: 3px 10px !important; }
.sht-mc-head         { font-size: 13px !important; padding: 9px 14px !important; }
.sht-mc-row          { font-size: 14px !important; padding: 9px 14px !important; }
.sht-mc-total        { font-size: 13px !important; padding: 9px 14px !important; }
.sht-dp              { font-size: 13px !important; padding: 3px 8px !important; }
.sht-wb-lbl          { font-size: 13px !important; }
.sht-wb-val          { font-size: 24px !important; }
.sht-wb-stars        { font-size: 18px !important; }
.sht-cmp-lbl         { font-size: 13px !important; }
.sht-cmp-num         { font-size: 20px !important; }
.sht-cmp-meta        { font-size: 12px !important; }
.sht-cmp-delta       { font-size: 13px !important; padding: 2px 8px !important; }

/* ── Streaks & badges ── */
.sht-streak-label    { font-size: 16px !important; }
.sht-streak-best     { font-size: 14px !important; }
.sht-badge-label     { font-size: 14px !important; }
.sht-no-badges       { font-size: 14px !important; }

/* ── Voortgangsgrafiek ── */
.sht-pchart-title    { font-size: 16px !important; }
.sht-pchart-tab      { font-size: 13px !important; padding: 7px 13px !important; min-height: 40px !important; }
.sht-pchart-legend   { font-size: 14px !important; }

/* ── Feedback-notitie ── */
.sht-feedback-coach  { font-size: 14px !important; }
.sht-feedback-date   { font-size: 13px !important; }
.sht-feedback-body   { font-size: 16px !important; line-height: 1.8 !important; }

/* ── Donut macro ── */
.sht-macro-donut-title { font-size: 14px !important; }
.sht-donut-leg-row     { font-size: 16px !important; }

/* ── Doel voortgangsbalk ── */
.sht-gp-title        { font-size: 14px !important; }
.sht-gp-pct          { font-size: 22px !important; }
.sht-gp-meta         { font-size: 14px !important; }

/* ── Intentie-input ── */
.sht-intentie-input  { font-size: 15px !important; padding: 10px 14px !important; min-height: 46px !important; }

/* ── Groepsscore ── */
.sht-gs-title        { font-size: 14px !important; }
.sht-gs-trend        { font-size: 13px !important; padding: 2px 10px !important; }
.sht-gs-level        { font-size: 18px !important; }
.sht-gs-meta         { font-size: 14px !important; }
.sht-gs-anon         { font-size: 13px !important; }

/* ── Verlengingsverzoek ── */
.sht-ext-title       { font-size: 15px !important; }
.sht-ext-sub         { font-size: 14px !important; }
.sht-ext-textarea    { font-size: 16px !important; padding: 12px 16px !important; min-height: 90px !important; line-height: 1.7 !important; }
.sht-ext-btn         { font-size: 15px !important; padding: 12px !important; min-height: 48px !important; }
.sht-ext-sent        { font-size: 15px !important; }

/* ── Water ── */
.sht-water-goal      { font-size: 14px !important; }
.sht-water-input     { font-size: 20px !important; padding: 10px 14px !important; min-height: 50px !important; width: 96px !important; }

/* ── Groepsberichten ── */
.sht-msg-item        { font-size: 16px !important; padding: 14px 18px !important; line-height: 1.7 !important; }
.sht-msg-icon        { font-size: 20px !important; }

/* ── Offline balk ── */
.sht-offline-bar     { font-size: 14px !important; }

/* ── Evaluatie textarea ── */
.sht-eq label        { font-size: 14px !important; }
.sht-eq textarea     { font-size: 15px !important; min-height: 70px !important; padding: 9px 11px !important; }

/* ── Footer ── */
.sht-footer          { font-size: 15px !important; }

/* ── Streak tip ── */
.sht-streak-tip      { font-size: 16px !important; line-height: 1.7 !important; }

/* ── Meetblok ── */
.sht-wm-input      { font-size: 17px !important; min-height: 48px !important; }
.sht-wm-day-input  { min-height: 46px !important; }
.sht-wm-card-title { font-size: 16px !important; }
.sht-wm-card-hint  { font-size: 13px !important; }
.sht-wm-avg-sub    { font-size: 13px !important; }
.sht-wm-label      { font-size: 14px !important; }
.sht-wm-unit       { font-size: 13px !important; }
.sht-wm-title      { font-size: 15px !important; }
.sht-wm-hint       { font-size: 14px !important; }
.sht-wm-done,
.sht-wm-todo       { font-size: 12px !important; padding: 2px 10px !important; }

/* ── Welzijn hints ── */
.sht-wb-hint       { font-size: 12px !important; }
.sht-water-cap     { font-size: 13px !important; }

} /* end @media (max-width: 600px) */

/* ══════════════════════════════════════════
   COACH PREVIEW-BALK
   Zichtbare banner voor coach in preview-modus
══════════════════════════════════════════ */
.sht-preview-bar {
  position: sticky;
  top: 0;
  z-index: 300;
  background: #2d6a4f;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.sht-preview-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.sht-preview-text {
  flex: 1;
  line-height: 1.4;
}
.sht-preview-text strong {
  font-weight: 700;
  text-decoration: underline;
}
.sht-preview-close {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .2s;
  cursor: pointer;
}
.sht-preview-close:hover {
  background: rgba(255,255,255,.35);
  color: #fff;
}
@media (max-width: 600px) {
  .sht-preview-bar { flex-wrap: wrap; gap: 8px; }
  .sht-preview-close { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════
   WEKELIJKSE LICHAAMSMETINGEN BLOK
══════════════════════════════════════════ */
.sht-week-meas-block {
  background: #ffffff;
  border: 1.5px solid #e8c4d8;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.sht-wm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.sht-wm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #2b1a22;
}
.sht-wm-icon { font-size: 18px; }
.sht-wm-done {
  font-size: 12px;
  background: #edf4ee;
  color: #2d6a4f;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.sht-wm-todo {
  font-size: 12px;
  background: #fce8f1;
  color: #d0216f;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.sht-wm-hint {
  font-size: 13px;
  color: var(--ink-soft, #a8879a);
  font-style: italic;
}
.sht-wm-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.sht-wm-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 110px;
}
.sht-wm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mid, #6b4a58);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sht-wm-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sht-wm-input {
  width: 90px;
  border: 1.5px solid #edd7e5;
  border-radius: 10px;
  padding: 9px 10px;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2b1a22;
  background: #fff5f8;
  text-align: right;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
}
.sht-wm-input:focus {
  border-color: #d0216f;
  background: #fff;
}
.sht-wm-input[readonly] {
  background: #f5f5f5;
  color: #a8879a;
  cursor: default;
}
.sht-wm-unit {
  font-size: 14px;
  color: var(--ink-soft, #a8879a);
  font-weight: 500;
}
.sht-wm-readonly {
  font-size: 13px;
  color: var(--ink-soft, #a8879a);
  font-style: italic;
  margin: 8px 0 0;
}
@media (max-width: 480px) {
  .sht-wm-fields { flex-direction: column; }
  .sht-wm-header { flex-direction: column; align-items: flex-start; }
}

/* ── Metingen: twee kaarten (dagelijks gewicht / wekelijkse omvang) ── */
.sht-wm-cards {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.sht-wm-card {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1.5px solid #f0dbe6;
  border-radius: 12px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, #fffafc 0%, #ffffff 60%);
}
.sht-wm-card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.sht-wm-card-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: #d0216f;
  border-radius: 20px;
  padding: 3px 9px;
  line-height: 1.4;
}
.sht-wm-card-badge-alt {
  background: #fce8f1;
  color: #d0216f;
}
.sht-wm-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #2b1a22;
}
.sht-wm-card-hint {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--ink-soft, #a8879a);
  font-style: italic;
  line-height: 1.35;
}

/* Zeven dagvakjes naast elkaar */
.sht-wm-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.sht-wm-day {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  cursor: text;
}
.sht-wm-day-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: var(--ink-soft, #a8879a);
}
.sht-wm-day-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1.5px solid #edd7e5;
  border-radius: 9px;
  padding: 8px 2px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2b1a22;
  background: #fff5f8;
  text-align: center;
  outline: none;
  transition: border-color .2s, background .2s;
  -moz-appearance: textfield;
}
.sht-wm-day-input::-webkit-outer-spin-button,
.sht-wm-day-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sht-wm-day-input:focus { border-color: #d0216f; background: #fff; }
.sht-wm-day-input[readonly] { background: #f5f5f5; color: #a8879a; cursor: default; }
.sht-wm-day.is-filled .sht-wm-day-input { background: #fdeef4; border-color: #e8bcd3; }
.sht-wm-day.is-today .sht-wm-day-lbl { color: #d0216f; }
.sht-wm-day.is-today .sht-wm-day-input {
  border-color: #d0216f;
  box-shadow: 0 0 0 2px rgba(208, 33, 111, .12);
}

/* Weekgemiddelde */
.sht-wm-avg {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  border-top: 1px dashed #f0dbe6;
  padding-top: 10px;
}
.sht-wm-avg-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mid, #6b4a58);
}
.sht-wm-avg-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #d0216f;
}
.sht-wm-avg-val em {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-soft, #a8879a);
  margin-left: 3px;
}
.sht-wm-avg-val.sht-wm-avg-empty { color: #d9bccb; }
.sht-wm-avg-sub {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--ink-soft, #a8879a);
}

.sht-wm-card-weekly .sht-wm-fields { gap: 12px 14px; }
/* flex-basis auto: in kolomrichting zou een basis in pixels de hoogte van het
   veld worden en dat gaf op mobiel een gat tussen taille en heup. */
.sht-wm-card-weekly .sht-wm-field  { flex: 1 1 auto; min-width: 120px; }
.sht-wm-card-weekly .sht-wm-input  { width: 100%; }

@media (max-width: 860px) {
  .sht-wm-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .sht-wm-days { gap: 4px; }
  .sht-wm-day-input { font-size: 13px; padding: 8px 1px; border-radius: 8px; }
  .sht-wm-day-lbl { font-size: 9px; }
}

/* ── Slaaptekort hint in welzijn-kaart ── */
.sht-wb-hint {
  font-size: 11px;
  color: #d4447a;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.3;
}

/* ── Water-cap melding ── */
.sht-water-cap {
  font-size: 12px;
  font-weight: 400;
  color: #6b4a58;
  font-style: italic;
}

/* ══════════════════════════════════════════
   PWA / STANDALONE FIXES
   Safe-area insets voor notch & home indicator
   100dvh voor correcte hoogte op iOS Safari
══════════════════════════════════════════ */

/* Gebruik dynamic viewport height zodat de adresbalk
   op iOS Safari niet voor afsnijding zorgt */
.shape-auth-layout {
  min-height: 100dvh !important;
}
#shape-tracker-root {
  min-height: 100dvh;
}

/* Voeg padding toe voor iOS notch (safe-area) */
.sht-nav {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 20px));
  padding-right: max(20px, env(safe-area-inset-right, 20px));
}

/* Footer / opslaan-indicator boven home indicator */
.sht-footer,
.sht-save-ind {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Zijkanten vrij van notch op landscape */
.sht-main {
  padding-left: max(20px, env(safe-area-inset-left, 20px));
  padding-right: max(20px, env(safe-area-inset-right, 20px));
}

/* Auth-pagina: zijkanten en onderkant veilig */
@media (max-width: 768px) {
  .shape-auth-layout .shape-wrap {
    padding-left: max(24px, env(safe-area-inset-left, 24px)) !important;
    padding-right: max(24px, env(safe-area-inset-right, 24px)) !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px)) !important;
  }
}

/* Standalone / PWA modus: extra ruimte boven nav voor status bar */
@media (display-mode: standalone) {
  .sht-nav {
    padding-top: max(12px, env(safe-area-inset-top, 12px));
  }
  /* Voorkom dat inhoud achter de home indicator verdwijnt */
  .sht-footer,
  .sht-save-ind {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  }
  /* Zorg dat de volledige hoogte benut wordt zonder browser-chrome */
  #shape-tracker-root,
  .shape-auth-layout {
    min-height: 100dvh !important;
  }
}

/* Tap highlight uitschakelen — voorkomt grijze flits bij aantikken op iOS */
.sht-btn,
.sht-day-tab,
.sht-week-chip,
.sht-dot,
.shape-btn,
.sht-nav-link {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Voorkom onbedoeld zoomen bij focus op input op iOS (font < 16px triggert zoom) */
@media (max-width: 600px) {
  .shape-field input,
  .sht-input,
  .sht-stap-input,
  .sht-water-input,
  .sht-wm-input,
  .sht-intentie-input,
  .sht-remark-ta,
  .sht-eq textarea,
  .sht-ext-textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIELE OPTIMALISATIES — alleen actief onder 768px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Bovenbalk: verberg nav-right knoppen op mobiel ── */
  .sht-nav-right {
    display: none !important;
  }

  /* Logo links uitlijnen, nav compact */
  .sht-nav {
    padding: 8px 14px !important;
    min-height: 54px !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* ── 2. Extra ruimte onderaan voor bottom nav ── */
  body {
    padding-bottom: 70px !important;
  }

  /* ── 3. Energie/Stress schaal: alle 10 op 1 rij ── */
  .sht-s-dots {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .sht-s-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .sht-s-label {
    width: auto !important;
  }

  .sht-dot {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    font-size: 13px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  /* ── 4. Actieknoppen onderaan netter ── */
  .sht-btn-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Opslaan knop: volle breedte, eerste */
  .sht-btn-row .sht-btn-primary {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }

  /* Weekoverzicht genereren: volle breedte */
  .sht-btn-row .sht-btn-report {
    grid-column: 1 / -1 !important;
  }

  /* Wis deze week: volle breedte */
  .sht-btn-row .sht-btn-danger {
    grid-column: 1 / -1 !important;
  }

  /* ── 5. "JE BENT IN WEEK" balk: niet afkappen ── */
  .sht-hero-progress {
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .sht-prog-label,
  .sht-prog-week,
  .sht-prog-sub,
  .sht-prog-pct {
    white-space: normal !important;
  }

  /* Progress container: wrap toestaan */
  .sht-hero-right-row {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  /* ── 6. Weeknavigatie: horizontaal scrollbaar ── */
  .sht-week-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }

  .sht-week-bar::-webkit-scrollbar {
    display: none !important;
  }

  .sht-week-picker {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: max-content !important;
  }

  .sht-week-label {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .sht-week-chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV — alleen op mobiel (max 768px)
   ═══════════════════════════════════════════════════════════════ */

.sht-bottom-nav {
  display: none;
}

@media (max-width: 768px) {

  .sht-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #e8c4d8;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgba(43,26,34,.08);
  }

  .sht-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #b89ab0;
    padding: 6px 4px 4px;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color .15s;
    position: relative;
  }

  .sht-bottom-nav-item:hover,
  .sht-bottom-nav-item.active {
    color: #d0216f;
  }

  .sht-bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2.5px;
    background: #d0216f;
    border-radius: 0 0 3px 3px;
  }

  .sht-bottom-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sht-bottom-nav-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .15s;
  }

  .sht-bottom-nav-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
  }

}

/* ── Waarschuwing bij begrensde welzijn-invoer (slaap max 24u, water max 15L) ── */
.sht-input-warn {
  border-color: #d0216f !important;
  box-shadow: 0 0 0 3px rgba(208,33,111,.18) !important;
  background: #fff0f6 !important;
  transition: box-shadow .2s ease, background .2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   INTROVIDEO — knop in de topnav + pop-up (1.9.292)
   De knop staat bewust buiten .sht-nav-right, want die container
   wordt onder 768px verborgen. Zo blijft de video in de app
   bereikbaar na inloggen.
   ═══════════════════════════════════════════════════════════════ */

.sht-nav-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 30px;
  padding: 5px 12px;
  border: 1.5px solid #e8c4d8;
  border-radius: 18px;
  background: #fff;
  color: #6b4a58;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: color .2s, border-color .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sht-nav-video:hover,
.sht-nav-video:focus-visible {
  color: #c9316e;
  border-color: #c9316e;
  background: #fff5fa;
}
.sht-nav-video:focus-visible {
  outline: 3px solid rgba(208, 33, 111, .3);
  outline-offset: 2px;
}
.sht-nav-video-icon { font-size: 15px; line-height: 1; }

/* Mobiel en tablet: nav-right is verborgen, deze knop blijft staan.
   Let op: .sht-nav-center staat daar op flex:0 0 100% terwijl .sht-nav
   nowrap is. Zonder de regel hieronder duwt die de knop buiten beeld. */
@media (max-width: 768px) {
  .sht-nav-center { flex: 1 1 auto !important; min-width: 0; overflow: hidden; }
  .sht-nav-user   { overflow: hidden; text-overflow: ellipsis; }
  .sht-nav-video {
    order: 4;
    margin-left: auto;
    height: 40px;
    padding: 8px 14px;
    font-size: 14px;
    border-color: #d0216f;
    color: #c9316e;
  }
}
@media (max-width: 380px) {
  .sht-nav-video-txt { display: none; }
  .sht-nav-video { padding: 8px 12px; }
}

/* ── Pop-up ── */
.sht-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 10, 22, .8);
  opacity: 0;
  transition: opacity .18s ease;
  overscroll-behavior: contain;
}
.sht-video-overlay[hidden] { display: none; }
.sht-video-overlay.is-open { opacity: 1; }

.sht-video-dialog {
  position: relative;
  /* Breedte volgt de hoogte, zodat kop, video op 16:9 en de voetregel
     samen in beeld passen zonder scrollen. */
  width: max(300px, min(920px, 100%, calc((100vh - 190px) * 16 / 9)));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  font-family: 'Jost', sans-serif;
  transform: translateY(8px) scale(.985);
  transition: transform .18s ease;
}
.sht-video-overlay.is-open .sht-video-dialog { transform: none; }

@supports (height: 100dvh) {
  .sht-video-dialog {
    width: max(300px, min(920px, 100%, calc((100dvh - 190px) * 16 / 9)));
    max-height: calc(100dvh - 48px);
  }
}

.sht-video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  border-bottom: 1px solid #f0e3ea;
}
.sht-video-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2b1a22;
  line-height: 1.3;
}
.sht-video-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fdf0f6;
  color: #d0216f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sht-video-close:hover,
.sht-video-close:focus-visible { background: #d0216f; color: #fff; }
.sht-video-close:focus-visible { outline: 3px solid rgba(208, 33, 111, .3); outline-offset: 2px; }

.sht-video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
@supports not (aspect-ratio: 16 / 9) {
  .sht-video-player { height: 0; padding-bottom: 56.25%; }
}
.sht-video-player > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sht-video-foot {
  padding: 12px 20px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b4a58;
}
.sht-video-foot a { color: #d0216f; font-weight: 600; }

body.sht-video-open { overflow: hidden; }

@media (max-width: 600px) {
  .sht-video-overlay { padding: 12px; }
  .sht-video-dialog  { width: 100%; border-radius: 12px; }
  .sht-video-head    { padding: 12px 12px 12px 16px; }
  .sht-video-title   { font-size: 15px; }
  .sht-video-foot    { padding: 10px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sht-video-overlay,
  .sht-video-dialog,
  .sht-nav-video,
  .sht-video-close { transition: none; }
}


/* Zes items in de bottom-nav (incl. Uitleg): labels iets krapper op
   smalle telefoons zodat er niets afbreekt. */
@media (max-width: 768px) {
  .sht-bottom-nav-item.sht-bn-video { color: #b89ab0; font-family: 'Jost', sans-serif; }
}
@media (max-width: 380px) {
  .sht-bottom-nav-label { font-size: 8px; letter-spacing: .03em; }
  .sht-bottom-nav-item  { padding: 6px 2px 4px; }
}

@media print {
  .sht-nav-video, .sht-video-overlay { display: none !important; }
}

/* Versiemarkering in de footer: laat direct zien welke versie de app
   daadwerkelijk draait. Handig bij een PWA die een oude cache vasthoudt. */
.sht-version {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(208, 33, 111, .08);
  color: #a8879a;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Label bij een week die de coach achteraf uit een bestand heeft ingelezen.
   Zo blijft zichtbaar dat dit geen dagelijkse invoer was. */
.sht-imported-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #fdf0f6;
  border: 1px solid #e8c4d8;
  color: #a8447a;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   1.9.302 — Hero-progressie ("Je bent in week") niet meer
   afgekapt op smalle schermen.
   Oorzaak: deze blokken stonden op de standaard box-sizing
   (content-box). Met padding 16px links/rechts + 1px rand werd
   het blok 34px breder dan de kolom die het moest vullen, en
   viel "weken coaching" precies buiten beeld.
   ══════════════════════════════════════════════════════════ */
.sht-hero-right,
.sht-hero-right-row,
.sht-hero-stats,
.sht-hero-stat,
.sht-hero-progress {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 560px) {
  /* Past het toch niet op één regel, dan wrappen in plaats van afkappen. */
  .sht-hero-progress { flex-wrap: wrap; row-gap: 4px; align-items: center; }
  .sht-prog-label,
  .sht-prog-sub,
  .sht-prog-pct { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════
   1.9.316 — "Niet volledig getrackt"
   Een dag met een etentje of borrel is tot een bepaald moment
   bij te houden. Het vinkje houdt calorieën en macro's van die
   dag buiten het weekgemiddelde; de dag zelf telt gewoon mee.
   ══════════════════════════════════════════════════════════ */
.sht-nv-block {
  box-sizing: border-box;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1.5px dashed #e3cbd9;
  border-radius: 12px;
  background: #fffdfe;
  transition: border-color .2s, background .2s;
}
.sht-nv-block.is-on {
  border-style: solid;
  border-color: #d0216f;
  background: #fdf0f6;
}
.sht-nv-check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.sht-nv-check input {
  width: 20px;
  height: 20px;
  accent-color: #d0216f;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.sht-nv-title {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2b1a22;
}
.sht-nv-sub {
  font-size: 12px;
  color: var(--ink-soft, #a8879a);
  margin: 4px 0 0 29px;
  line-height: 1.4;
}
.sht-nv-block.is-on .sht-nv-sub { display: none; }
.sht-nv-body { margin-top: 12px; }
.sht-nv-uitleg {
  border-left: 3px solid #d0216f;
  background: #fff;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.sht-nv-uitleg p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #4a3540;
}
.sht-nv-uitleg p:last-child { margin-bottom: 0; }
.sht-nv-uitleg strong { color: #2b1a22; }

/* Markering op de dagbolletjes en in het weekoverzicht */
.sht-nv-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #7a3050;
  background: #fce8f1;
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .sht-nv-title  { font-size: 16px; }
  .sht-nv-sub    { font-size: 13px; }
  .sht-nv-uitleg p { font-size: 13.5px; }
}

/* ══════════════════════════════════════════
   VAKANTIE — "ik houd deze periode bewust niet bij"
══════════════════════════════════════════ */
#sht-holiday-block { max-width: 1180px; margin: 0 auto; padding: 0 20px 4px; }

.sht-hol-box {
  background: #fafafa;
  border: 1.5px solid #ececec;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 6px 0 14px;
}
.sht-hol-box.is-active {
  background: #e7f5ec;
  border-color: #bfe3cd;
}

.sht-hol-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sht-hol-title { font-size: 13px; font-weight: 700; color: #2d6a4f; }
.sht-hol-state { font-size: 12px; font-weight: 600; color: #2d6a4f; }
.sht-hol-state-off { color: #a8879a; font-weight: 400; }

.sht-hol-toggle {
  margin-left: auto;
  background: #2d6a4f;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.sht-hol-toggle:hover { opacity: .9; }

.sht-hol-help { font-size: 12px; color: #6b4a58; margin: 7px 0 0; line-height: 1.55; }

.sht-hol-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sht-hol-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #2b1a22;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
}
.sht-hol-chip.is-now  { background: #d8f0e2; border-color: #9fd6b6; color: #1b4332; }
.sht-hol-chip.is-past { opacity: .55; }
.sht-hol-chip em { font-style: italic; color: #6b4a58; }

.sht-hol-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #a8879a;
  padding: 0 4px;
}
.sht-hol-del:hover { color: #c0392b; }

.sht-hol-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}
.sht-hol-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #6b4a58;
}
.sht-hol-form input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #2b1a22;
  background: #fff;
}
.sht-hol-form .sht-hol-note { flex: 1 1 180px; }
.sht-hol-form .sht-hol-note input { width: 100%; box-sizing: border-box; }

.sht-hol-save {
  background: #2d6a4f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.sht-hol-save:hover { opacity: .9; }
.sht-hol-msg { font-size: 12px; font-weight: 600; align-self: center; }

@media (max-width: 600px) {
  #sht-holiday-block { padding: 0 12px; }
  .sht-hol-toggle { margin-left: 0; }
  .sht-hol-form label { flex: 1 1 45%; }
  .sht-hol-save { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEEKOVERZICHT — knop in de topbalk + schermvullend scherm (1.9.338)

   Aanleiding: de knop "Weekoverzicht genereren" stond onderaan de
   dagkaarten en het rapport verscheen als blok verderop de pagina. De
   weekreflectie en de knop "Opslaan voor coach" stonden daar helemaal
   onderaan, achter alle grafieken. Deelnemers kwamen daar niet en sloegen
   hun week dus niet op.

   Nu: één knop in de topbalk, en een scherm met twee genummerde stappen —
   eerst de reflectie met de opslaanknop, daarna pas de cijfers.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Knop in de topbalk ──
   Zelfde maatvoering als .sht-nav-video, maar gevuld in het roze van het
   programma zodat het de opvallendste knop in de balk is. Staat bewust
   buiten .sht-nav-right (die verdwijnt onder 768px). */
.sht-nav-week {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 30px;
  padding: 5px 14px;
  border: 1.5px solid #d0216f;
  border-radius: 18px;
  background: #d0216f;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sht-nav-week:hover,
.sht-nav-week:focus-visible {
  background: #b01659;
  border-color: #b01659;
  box-shadow: 0 2px 10px rgba(208, 33, 111, .28);
}
.sht-nav-week:focus-visible {
  outline: 3px solid rgba(208, 33, 111, .3);
  outline-offset: 2px;
}
.sht-nav-week[disabled] { opacity: .6; cursor: wait; }
.sht-nav-week-icon { font-size: 15px; line-height: 1; }

/* Stip: deze week is nog niet opgeslagen voor de coach. */
.sht-nav-week-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #52d048;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.sht-nav-week-dot[hidden] { display: none; }

@media (max-width: 768px) {
  .sht-nav-week {
    order: 3;
    margin-left: auto;
    height: 40px;
    padding: 8px 16px;
  }
  /* Introvideo staat rechts van het weekoverzicht en houdt zijn eigen
     margin-left:auto uit de 1.9.292-regels; die zou hier een gat trekken. */
  .sht-nav-video { margin-left: 6px !important; }
}
/* Op smalle schermen wint het weekoverzicht van de introvideo: dit is de
   handeling die deelnemers elke week moeten doen, de video kijken ze één
   keer. Daarom verliest Introvideo zijn tekst eerder. */
@media (max-width: 440px) {
  .sht-nav-video-txt { display: none !important; }
  .sht-nav-video { padding: 8px 12px !important; }
}
@media (max-width: 360px) {
  .sht-nav-week-txt { display: none; }
  .sht-nav-week { padding: 8px 13px; }
}

/* ── Zelfde stip in de mobiele onderbalk ── */
/* Alleen dit item positioneren; .sht-bottom-nav-item breed op relative zetten
   zou de actieve-onderstreping (.active::before) van de hele balk naar één
   item verplaatsen, en dat is een ander ontwerp. */
#sht-bn-week { position: relative; }
.sht-bn-week-dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #52d048;
  border: 2px solid #fff;
}
.sht-bn-week-dot[hidden] { display: none; }

/* ── Verwijzing op de pagina zelf ──
   Voor wie de oude knop onder de dagkaarten gewend was. */
.sht-week-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fce8f1 0%, #fdf4f9 100%);
  border: 1px solid rgba(208, 33, 111, .18);
}
.sht-week-cta-txt {
  flex: 1 1 240px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b4a58;
}
.sht-week-cta-txt strong { color: #b01659; }
@media (max-width: 480px) {
  .sht-week-cta .sht-btn { width: 100%; justify-content: center; }
}

/* ── Het rapport als schermvullend scherm ──
   Het blok blijft op zijn plek in de DOM staan (de PDF-generator en
   window.print() lezen uit deze elementen); alleen de weergave verandert. */
body.sht-report-open { overflow: hidden; }

.sht-report-wrap.visible {
  position: fixed;
  inset: 0;
  z-index: 99000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fdf0f6;
  animation: sht-fadeup .25s ease;
}
.sht-report-wrap.visible .sht-rpt-head {
  position: sticky;
  top: 0;
  z-index: 3;
  border-radius: 0;
}
.sht-report-wrap.visible .sht-rpt-body {
  border: none;
  border-radius: 0;
  max-width: 1040px;
  margin: 0 auto;
  padding-bottom: 64px;
}

/* Op mobiel plakt de kop bovenaan mee; hij mag dan niet het halve scherm
   opeten. De groeps- en datumregel staat in de PDF en in de afdruk, dus die
   kan hier weg. */
@media (max-width: 600px) {
  .sht-report-wrap.visible .sht-rpt-head {
    padding: 12px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .sht-report-wrap.visible .sht-rpt-head h2 { font-size: 19px; }
  .sht-report-wrap.visible .sht-rpt-meta { display: none; }
  .sht-report-wrap.visible .sht-rpt-head .sht-btn {
    flex-shrink: 0;
    padding: 7px 13px;
    font-size: 13px;
  }
}

/* ── Stapkoppen ── */
.sht-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
}
.sht-step-head-2 { margin-top: 30px; padding-top: 22px; border-top: 1px solid #eccbdd; }
.sht-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d0216f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sht-step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  color: #2b1a22;
}
.sht-step-sub {
  margin: 0 0 12px 36px;
  font-size: 13px;
  color: #6b4a58;
  line-height: 1.5;
}

/* ── Stap 1 als eigen kaart, zodat hij losstaat van de cijfers ── */
.sht-step-reflectie {
  background: #fff;
  border: 1px solid #eccbdd;
  border-radius: 14px;
  padding: 18px 18px 20px;
  margin-bottom: 8px;
  box-shadow: 0 2px 12px rgba(208, 33, 111, .06);
}
@media (max-width: 580px) {
  .sht-step-reflectie { padding: 14px 13px 16px; }
  .sht-step-sub { margin-left: 0; }
}

/* ── Notitie boven de knop (al opgeslagen / afgesloten) ── */
.sht-step-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff0f6;
  border: 1px solid #f0c8de;
  font-size: 13px;
  line-height: 1.5;
  color: #7a3050;
}
.sht-step-note-lock {
  background: #f4f1f2;
  border-color: #ddd2d7;
  color: #6b5a61;
}
.sht-step-note[hidden] { display: none; }

/* ── De knop die telt ── */
.sht-step-cta {
  margin-top: 16px;
  text-align: center;
}
.sht-step-cta[hidden] { display: none; }
.sht-btn-xl {
  font-size: 17px;
  padding: 14px 34px;
  border-radius: 28px;
  box-shadow: 0 4px 16px rgba(45, 106, 79, .25);
}
.sht-btn-xl:hover { box-shadow: 0 6px 20px rgba(45, 106, 79, .32); }
.sht-step-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #6b4a58;
}
@media (max-width: 480px) {
  .sht-btn-xl { width: 100%; justify-content: center; }
}

/* ── Secundaire acties onderaan stap 2 ── */
.sht-rpt-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid #eccbdd;
}
.sht-rpt-actions-lbl {
  flex: 0 0 100%;
  text-align: center;
  font-size: 12px;
  color: #a8879a;
  margin-bottom: 2px;
}
.sht-linkbtn {
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #b01659;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 34px;
}
.sht-linkbtn:hover { color: #7a3050; }
.sht-linkbtn[disabled] { opacity: .6; cursor: wait; }
.sht-linkbtn[disabled] .sht-linkbtn-main { text-decoration: none; }
.sht-linkbtn-sep { color: #d8b9c9; }

/* Tweeregelige actie: wat het is, en waar het voor bedoeld is. De PDF gaat
   niet naar de coach — die krijgt de week via "Opslaan voor coach". */
.sht-linkbtn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; }
.sht-linkbtn-main { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sht-linkbtn-sub {
  font-size: 11px;
  font-weight: 400;
  color: #a8879a;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Afdrukken ──
   Zonder deze regels drukt de browser alleen het eerste scherm af: een
   position:fixed element met eigen scrollbalk kent geen tweede pagina. */
@media print {
  body.sht-report-open { overflow: visible !important; }
  .sht-report-wrap,
  .sht-report-wrap.visible {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    overflow: visible !important;
    animation: none !important;
  }
  .sht-report-wrap.visible .sht-rpt-head { position: static !important; }
  .sht-report-wrap.visible .sht-rpt-meta { display: block !important; }
  .sht-report-wrap.visible .sht-rpt-body { max-width: none !important; padding-bottom: 0 !important; }
  .sht-nav-week, .sht-week-cta,
  .sht-step-cta, .sht-step-note, .sht-rpt-actions { display: none !important; }
  .sht-step-reflectie { box-shadow: none !important; border-color: #ddd !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SMALLE TELEFOONS — macrobalkjes en donut-legenda (1.9.339)

   Op een toestel van ~360px braken twee blokken uit hun kader:

   1. De balkjes onder de dagkaart (.sht-live-bars) staan onder 520px in
      twee kolommen van ~155px. In .sht-ml-head stonden de naam en de
      waarde als flexrij zonder wrap; "KOOLHYDRATEN" vult die kolom al
      bijna, dus werd "125 / 153 g" over vier regels uitgesmeerd.

   2. De legenda naast de macrodonut hield min-width:140px aan en bleef
      daardoor náást het 140px-canvas staan. Wat niet paste — juist de
      percentages, die staan als laatste in de rij — liep het kader uit.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 — naam en waarde mogen onder elkaar, maar het getal blijft heel */
.sht-ml-head { flex-wrap: wrap; gap: 2px 8px; }
.sht-ml-name { min-width: 0; }
.sht-ml-val  { white-space: nowrap; }

/* 2 — vaste kolommen, zodat g en % altijd op hun plek staan */
.sht-donut-leg-row {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
}
.sht-donut-leg-lbl { min-width: 0; overflow-wrap: anywhere; }
.sht-donut-leg-val,
.sht-donut-leg-pct { white-space: nowrap; }

/* Onder de donut in plaats van ernaast: op de volle breedte past de rij
   ruim, ook bij "Koolhydraten" en een lettergrootte van 15px. */
@media (max-width: 600px) {
  .sht-macro-donut-inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .sht-macro-donut-legend {
    width: 100%;
    min-width: 0;
    flex: none;
  }
  .sht-donut-leg-row { font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════
   1.9.343 — Krachttraining en sporten
   Twee vinkjes onder energie en stress. Bij "sporten" klapt
   een tekstveld uit, zodat de coach ziet wát er gedaan is.
   ══════════════════════════════════════════════════════════ */
.sht-chk-row {
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1.5px solid #edd7e5;
  border-radius: 10px;
  background: #fffdfe;
  transition: border-color .2s, background .2s;
}
.sht-chk-row.is-on {
  border-color: #d0216f;
  background: #fdf0f6;
}
.sht-chk-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.sht-chk-label input {
  width: 20px;
  height: 20px;
  accent-color: #d0216f;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.sht-chk-title {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2b1a22;
}
.sht-sport-body { margin-top: 10px; }

/* Trainingoverzicht in het weekrapport */
.sht-train-tbl {
  border: 1px solid #edd7e5;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.sht-train-row {
  display: grid;
  grid-template-columns: 110px 200px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  font-size: 13px;
  color: #2b1a22;
  border-bottom: 1px solid #f6e6ef;
}
.sht-train-row:last-child { border-bottom: none; }
.sht-train-day  { font-weight: 600; }
.sht-train-tags { color: #a02c66; }
.sht-train-note { color: #6b4a58; font-style: italic; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .sht-chk-title { font-size: 16px; }
  .sht-train-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* "Niet volledig getrackt" hoort onderaan de macrokolom, niet halverwege.
   Op één kolom (mobiel) heeft dit geen effect: daar volgt het blok gewoon
   op de macro's. */
@media (min-width: 601px) {
  .sht-card-col:first-child { display: flex; flex-direction: column; }
  .sht-card-col:first-child .sht-nv-block { margin-top: auto; }
}

/* ══════════════════════════════════════════
   WATERLOGBOEK — fles die zich vult
   Blauw is hier een functionele kleur, net als bij de macro-donut, en staat
   dus los van het merkpalet. Wel als variabele, zodat een tenant het kan
   overschrijven zonder deze regels aan te raken.
══════════════════════════════════════════ */
.shape-wrap,
.shape-card,
#shape-tracker-root,
.sht-nav,
.sht-hero,
.sht-main {
  --water:       #2f95cf;
  --water-light: #6ec5ec;
  --water-dark:  #1c6f9e;
  --water-soft:  #e6f4fc;
}

/* De Elementor-reset in dit bestand zet box-sizing alleen binnen .elementor.
   Buiten Elementor telt padding en rand dan bovenop width:100%, en steken de
   invoervelden rechts buiten het kader. Dit blok regelt het zelf. */
.sht-wl, .sht-wl *, .sht-wl *::before, .sht-wl *::after { box-sizing: border-box; }

.sht-wl {
  /* Staat bewust BUITEN .sht-s-row. Die rij is een flexbox op
     align-items:center; zit het blok erin, dan wordt de rij zo hoog dat het
     label "Water" naar het midden zakt en naast het logboek belandt in plaats
     van naast het liter-veld. Als eigen blok eronder houdt de waterrij exact
     de hoogte en uitlijning die hij in 1.9.379 had. */
  width: 100%;
  /* Op een breed scherm loopt de dagkaart door tot ruim 1100 px. Een
     invoerveld van die breedte voor "250 ml" leest niet, en het kruisje van
     een logregel komt dan een halve meter van de tekst te staan. */
  max-width: 520px;
  margin: 2px 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.sht-wl-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft);
}
.sht-wl-sum::-webkit-details-marker { display: none; }
.sht-wl-sum::after {
  content: '▾';
  font-size: 11px;
  opacity: .55;
  transition: transform .15s ease;
}
.sht-wl[open] .sht-wl-sum::after { transform: rotate(180deg); }
.sht-wl-sum-tel {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--water-dark);
  background: var(--water-soft);
  border-radius: 9px;
  padding: 2px 8px;
}
/* Vangnet. Mocht een engine een formulierveld toch breder maken dan zijn
   kolom, dan wordt het hier afgekapt in plaats van dat het de kaart uit
   loopt en een horizontale scrollbalk veroorzaakt. */
.sht-wl-velden > * { max-width: 100%; }

.sht-wl-body { padding: 4px 12px 12px; }

/* ── Fles ── */
.sht-wl-visual {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 12px;
}
.sht-wl-bottle { width: 74px; height: auto; flex: 0 0 auto; }
.sht-wl-glas   { fill: var(--water-soft); }
.sht-wl-rand   { fill: none; stroke: var(--water-dark); stroke-width: 2.5; opacity: .55; }
.sht-wl-dop    { fill: var(--water-dark); opacity: .75; }
.sht-wl-water  { fill: url(#shtWlGrad); transition: d .3s ease; }
.sht-wl-stop-a { stop-color: var(--water-light); }
.sht-wl-stop-b { stop-color: var(--water); }

.sht-wl-meta { flex: 1 1 auto; min-width: 0; }
.sht-wl-big {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--water-dark);
}
.sht-wl-big span { font-size: 15px; font-weight: 600; opacity: .7; }
.sht-wl-pct { font-size: 12px; font-weight: 600; color: var(--water); margin-top: 1px; }
.sht-wl-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
.sht-wl-gehaald { color: var(--water-dark); font-weight: 600; }
.sht-wl-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--water-soft);
  border-radius: 8px;
  padding: 7px 9px;
  margin-top: 7px;
}
/* Dezelfde melding, maar dan direct naast het liter-veld. Die staat buiten
   het uitklapbare flesblok, want juist wie het veld aanraakt kijkt daar niet. */
.sht-wl-note-inline {
  border-left: 3px solid var(--water);
  margin-top: 8px;
}
.sht-wl-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--water-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Invoer ── */
.sht-wl-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sht-wl-chip {
  border: 1.5px solid var(--border);
  background: var(--paper);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.sht-wl-chip:hover { border-color: var(--water); color: var(--water-dark); }

/* Grid in plaats van flex. Met flex-basis kan een item breder worden dan zijn
   kolom zodra de inhoud een eigen minimumbreedte heeft (het tijdveld met zijn
   klokje). minmax(0,1fr) kan dat niet. */
.sht-wl-velden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
/* Hoeveelheid en Tijdstip staan ook op de telefoon naast elkaar; het zijn
   twee korte velden die bij elkaar horen. Dat kan sinds het tijdveld
   appearance:none heeft: zonder de systeemopmaak eist Safari op iOS geen
   eigen minimumbreedte meer op, en volgt het veld gewoon zijn kolom.
   Pas onder 340px is er echt te weinig ruimte, dan onder elkaar. */
@media (max-width: 340px) {
  .sht-wl-velden { grid-template-columns: minmax(0, 1fr); }
}
.sht-wl-veld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Harde garantie: mocht een engine een formulierveld toch breder maken dan
     zijn kolom, dan blijft dat binnen dit blokje in plaats van dat het de
     kaart uit loopt. */
  overflow: hidden;
  /* Zonder min-width:0 kan een gridkolom niet kleiner worden dan zijn inhoud.
     Het tijdveld heeft door het klokje een brede eigen minimumbreedte. */
  min-width: 0;
  position: relative;
}
.sht-wl-veld-breed { grid-column: 1 / -1; }
.sht-wl-veld > span { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.sht-wl-veld > em {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font-size: 11px;
  font-style: normal;
  color: var(--ink-soft);
  opacity: .7;
  pointer-events: none;
}
.sht-wl-veld input {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--paper);
  color: inherit;
  width: 100%;
  min-width: 0;
}
/* Ruimte vrijhouden voor het "ml"-achtervoegsel, anders loopt een lang getal
   eronderdoor. */
.sht-wl-veld > em ~ input,
.sht-wl-veld:has(> em) input { padding-right: 32px; }

/* Safari op iOS geeft een tijdveld een eigen minimumbreedte en een eigen
   opmaak. Zonder appearance:none negeert het width:100% en steekt het buiten
   zijn kolom. max-width is het vangnet voor het geval dat toch niet pakt. */
.sht-wl-veld input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  text-align: left;
}
/* Onder 16px zoomt iOS de hele pagina in zodra je een veld aantikt, en zoomt
   daarna niet terug. Op aanraakschermen dus 16px. */
@media (max-width: 600px) {
  .sht-wl-veld input { font-size: 16px; }
  /* Het klokje kost ruimte die twee kolommen naast elkaar beter kunnen
     gebruiken. Het veld blijft gewoon aantikbaar en opent dezelfde kiezer. */
  .sht-wl-veld input[type="time"] { padding-right: 8px; }
  .sht-wl-veld input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
}
.sht-wl-veld input:focus { border-color: var(--water); outline: none; }
.sht-wl-veld input::-webkit-outer-spin-button,
.sht-wl-veld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sht-wl-actie { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.sht-wl-add {
  background: var(--water);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.sht-wl-add:hover { background: var(--water-dark); }
.sht-wl-msg { font-size: 12px; color: var(--ink-soft); opacity: 0; transition: opacity .15s ease; }
.sht-wl-msg.is-on { opacity: 1; }

/* ── Lijst ── */
.sht-wl-leeg { font-size: 12px; color: var(--ink-soft); margin: 12px 0 2px; font-style: italic; }
.sht-wl-lijst { list-style: none; margin: 12px 0 0; padding: 0; }
.sht-wl-rij {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.sht-wl-tijd { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 12px; flex: 0 0 40px; }
.sht-wl-ml   { font-weight: 600; color: var(--water-dark); flex: 0 0 62px; }
.sht-wl-wat  { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sht-wl-del {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-soft);
  opacity: .5;
  cursor: pointer;
  padding: 0 3px;
}
.sht-wl-del:hover { opacity: 1; color: var(--bad); }

@media (max-width: 768px) {
  .sht-wl-bottle { width: 62px; }
  .sht-wl-big    { font-size: 23px; }
  .sht-wl-veld   { flex: 1 1 100%; }
  .sht-wl-add    { flex: 1 1 auto; padding: 12px 18px; font-size: 15px; }
  .sht-wl-actie  { flex-wrap: wrap; }
  .sht-wl-chip   { padding: 7px 14px; font-size: 13px; }