/* Content: kop met cijfers, de taak van vandaag, videobord, ideeën, reviewlijst, week, ritme en de video.
   Daarnaast de losse pagina's die bij dit bestand horen: account en zoeken. De taak van vandaag staat ook in de tijdlijn
   van Vandaag; hoe hij daar staat, staat in vandaag.css. Inloggen en tweestaps staan in core.css.
   Bouwt op core.css; alleen wat daar niet in zit. Schaal: letters 13/14/15/16/18/20/24, ruimte 4/8/12/16/24/32. */

/* ---------- Kop van de contentpagina's ---------- */
.content-head .explain { margin-top: 8px; padding-top: 0; border-top: 0; }
.content-stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.content-stats div { min-width: 0; }
.content-stats dt { font-size: 14px; color: var(--mute); white-space: nowrap; }
.content-stats dd { margin: 0; font: 500 24px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
@media (max-width: 760px) { .content-stats { gap: 8px 24px; } .content-stats dd { font-size: 20px; } }

/* ---------- De taak van vandaag (_content_today.html, ook in de tijdlijn van Vandaag) ---------- */
.content-today { container: content-today / inline-size; margin-bottom: 24px; padding: 16px 24px; border: 1px solid var(--hairline-light); border-radius: var(--r-lg); background: var(--tint-cobalt); }
.content-today[data-status="gedaan"] { background: var(--tint-teal); }
.content-today[data-status="overgeslagen"] { background: var(--surface-soft); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; }
.content-main { min-width: 0; }
.content-today .eyebrow { margin: 0; }
.content-title { margin: 4px 0 0; font: 500 20px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.content-explain { margin: 4px 0 0; max-width: 60ch; font-size: 15px; color: var(--charcoal); }
.content-done-note { margin: 8px 0 0; font-size: 15px; color: var(--mute); }
.content-done-note:empty { display: none; }
.content-side { display: grid; gap: 8px; justify-items: end; min-width: 0; }
.content-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px 16px; }
.content-actions .content-done { order: -1; } /* in de markup staat Overslaan eerst: Enter in het redenveld = Overslaan */
.content-today[data-status="gedaan"] .content-done { background: var(--accent-teal); border-color: var(--accent-teal); color: var(--on-primary); }
.content-skip > summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--charcoal); list-style: none; }
.content-skip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.content-skip-row input { flex: 1 1 200px; min-width: 0; height: 36px; border-radius: var(--r-full); font-size: 15px; }
.content-streak { font-size: 15px; color: var(--mute); }
.content-streak strong { color: var(--ink); font-weight: 600; }
.content-week { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.content-week li { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-card); color: var(--mute); font: 600 13px/1 var(--font-body); }
.content-week li.today { box-shadow: inset 0 0 0 2px var(--primary); color: var(--ink); }
.content-week li.done { background: var(--accent-teal); color: var(--on-primary); box-shadow: none; }
.content-week li.skipped { background: var(--faint); color: var(--ink); }
@container content-today (max-width: 600px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .content-side { justify-items: start; }
  .content-actions { justify-content: flex-start; }
}
/* Compact (Ideeën, Reviewlijst, Week, Ritme): één regel. Laptop: label · titel · knoppen; iPhone: label erboven, titel naast de knoppen */
.content-today.is-compact { padding: 8px 8px 8px 16px; }
.is-compact .content-main { display: contents; }
.is-compact .content-grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; }
.is-compact .eyebrow { grid-column: 1; grid-row: 1; white-space: nowrap; }
.is-compact .content-title { grid-column: 2; grid-row: 1; margin: 0; font: 600 16px/1.35 var(--font-body); letter-spacing: 0; }
.is-compact .content-side { grid-column: 3; grid-row: 1; align-self: center; justify-items: end; }
.is-compact .content-done-note { grid-column: 1 / -1; grid-row: 2; margin: 0 0 4px; font-size: 14px; }
.is-compact .content-actions { align-items: center; justify-content: flex-end; gap: 4px 8px; }
.is-compact .content-skip > summary { padding: 0 8px; }
.is-compact:has(.content-skip[open]) .content-side { grid-column: 1 / -1; grid-row: 4; justify-items: stretch; padding-bottom: 8px; }
.is-compact:has(.content-skip[open]) .content-actions { align-items: flex-start; justify-content: flex-start; }
@container content-today (max-width: 600px) {
  .content-today.is-compact { padding: 12px 8px 8px 16px; }
  .is-compact .content-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .is-compact .eyebrow { grid-column: 1 / -1; }
  .is-compact .content-title { grid-column: 1; grid-row: 2; align-self: center; }
  .is-compact .content-side { grid-column: 2; grid-row: 2; }
  .is-compact .content-done-note { grid-row: 3; }
}
@media (max-width: 760px) { .content-skip-row input { height: 44px; } }

/* ---------- Pijler: een rustig label, de tekst zegt welke ---------- */
.pillar-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--surface-sunk);
  color: var(--charcoal); font: 600 13px/1 var(--font-body); white-space: nowrap; vertical-align: 1px; }

/* ---------- Videobord: van idee tot gepost ---------- */
.video-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.video-column { min-width: 0; padding: 12px; background: var(--surface-card); border: 1px solid var(--hairline-light); border-radius: var(--r-xl); }
.video-column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 12px; font: 600 15px/1.3 var(--font-body); letter-spacing: 0; }
.video-column[data-status="gepost"] .video-column-head .count { background: var(--tint-teal); border-color: transparent; }
.video-cards { display: grid; gap: 8px; min-width: 0; }
.video-card { position: relative; display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--surface-soft); transition: border-color .18s var(--ease); }
.video-card:hover { border-color: var(--hairline-strong); }
.video-card form { position: relative; z-index: 1; margin: 0; }
/* de titel is de link; zijn vlak beslaat de hele kaart, de knop Doorschuiven en Bekijk de post liggen erboven */
.video-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.video-post { position: relative; z-index: 1; }
.video-title { font: 600 16px/1.35 var(--font-body); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.video-title:hover { text-decoration: underline; }
.video-hook { font-size: 14px; line-height: 1.45; color: var(--charcoal); overflow-wrap: anywhere; }
.video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--mute); }
.video-numbers { font-size: 14px; color: var(--charcoal); }
.video-numbers strong { font-weight: 600; color: var(--ink); }
.video-next, .video-post { display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--hairline-light); border-radius: var(--r-full);
  background: var(--surface-card); color: var(--ink); font: 500 14px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: border-color .18s var(--ease); }
.video-next:hover, .video-post:hover { border-color: var(--ink); }
.video-board .column-empty { padding: 12px 8px; }
@media (min-width: 1101px) { .video-board { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } }
@media (max-width: 760px) {
  .video-board { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; padding: 0; }
  .video-next, .video-post { height: 40px; }
  .video-board .column-empty { padding: 4px 4px 8px; text-align: left; }
}

/* ---------- Ideeën ---------- */
.idea-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.idea-add input[name="text"] { flex: 1 1 320px; min-width: 0; }
.idea-add select { flex: 0 1 220px; min-width: 0; }
.idea-rows li, .review-rows li { align-items: center; }
.idea-text { min-width: 0; overflow-wrap: anywhere; }
.idea-actions { display: flex; align-items: center; gap: 4px 24px; flex: none; }
.idea-actions form { margin: 0; }
.idea-actions .link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; font-size: 15px; font-weight: 500; color: var(--mute); }
.idea-used { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline-light); font-size: 14px; color: var(--mute); }
@media (max-width: 760px) {
  .idea-add select, .idea-add .btn { flex: 1 1 140px; }
  .idea-rows li { row-gap: 0; }
  .idea-actions { justify-content: space-between; width: 100%; } /* Weg rechts, ver van Maak video */
}

/* ---------- Reviewlijst ---------- */
.review-help { margin: 0 0 16px; }
.review-site { display: grid; gap: 4px; min-width: 0; }
.review-site a { overflow-wrap: anywhere; }
.review-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.review-status select { width: auto; height: 40px; border-radius: var(--r-full); font-size: 15px; }
.review-add .form { margin-top: 4px; }
@media (min-width: 761px) { .review-status { display: grid; grid-template-columns: 200px 160px 120px; flex: none; } .review-status select { width: 100%; } }
@media (max-width: 760px) {
  .review-rows li { flex-direction: column; align-items: stretch; gap: 8px; }
  .review-status { justify-content: flex-start; }
  .review-status select { flex: 1 1 140px; height: 44px; }
}

/* ---------- Week ---------- */
.week-table tr.is-current td { font-weight: 600; background: var(--surface-soft); }
.week-table .week-label { white-space: nowrap; }
.week-table td .tint-pill { margin-left: 4px; }
@media (max-width: 760px) {
  .week-table, .week-table tbody { display: block; }
  .week-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .week-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline-light); }
  .week-table tbody tr:last-child { border-bottom: 0; }
  .week-table tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .week-table td, .panel .week-table td:first-child, .panel .week-table td:last-child { padding: 0; border: 0; text-align: left; }
  .week-table tr.is-current td { background: none; }
  .week-table .week-label { order: 1; flex: 1 1 auto; font-weight: 600; }
  .week-table .week-tasks { order: 2; }
  .week-table .week-num { order: 4; font-size: 14px; color: var(--mute); }
  .week-table .week-num::after { content: " " attr(data-label); }
  .week-table tbody tr:hover td { background: none; }
}

/* ---------- Ritme ---------- */
.rhythm-days { display: grid; gap: 16px; }
.rhythm-day { min-width: 0; margin: 0; padding: 0; border: 0; }
.rhythm-day + .rhythm-day { padding-top: 16px; border-top: 1px solid var(--hairline-light); }
.rhythm-panel > .panel-head { margin-bottom: 16px; }
.rhythm-day legend { float: left; width: 100%; padding: 0; font: 600 16px/1.3 var(--font-body); color: var(--ink); }
.rhythm-day .form { clear: both; margin-top: 0; padding-top: 8px; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px 16px; }
.rhythm-day textarea { min-height: 72px; }
.rhythm-form > .actions { margin-top: 24px; }
/* iPhone: velden onder elkaar, zodat je de hele taak leest; het minutenveld houdt zijn eigen maat */
@media (max-width: 760px) { .rhythm-day .form { grid-template-columns: minmax(0, 1fr); } .rhythm-day input[type="number"] { width: 120px; } }

/* ---------- Video bewerken ---------- */
.video-form .form { margin-top: 0; }
.video-form .form-section { padding-top: 16px; border-top: 1px solid var(--hairline-light); }
.video-form .form-section .help { display: block; margin-top: 4px; font: 400 14px/1.5 var(--font-body); letter-spacing: 0; }
.video-form .actions .btn.danger { margin-left: auto; }
.video-form .actions > a:not(.btn) { align-items: center; min-height: 40px; }
.video-form select[multiple] { height: auto; padding: 8px; background-image: none; }

/* ---------- Account ---------- */
.account-steps { list-style: none; display: grid; gap: 16px; margin: 16px 0 0; padding: 0; counter-reset: stap; }
.account-steps > li { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-soft); counter-increment: stap; }
.account-steps h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.account-steps h3::before { content: counter(stap); display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--ink); color: var(--on-dark); font: 600 13px/1 var(--font-body); }
.account-steps .feed-url input { background: var(--surface-card); }
.account-steps .stack { gap: 8px; }
.account-steps .field input { background: var(--surface-card); }
.account-status { font-size: 14px; color: var(--mute); }
.account-2fa { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline-light); }
.account-2fa .field input { max-width: 200px; }
.account-off { display: grid; justify-items: start; gap: 12px; margin-top: 12px; }

/* ---------- Zoeken ---------- */
.search-form { margin-bottom: 16px; }
.search-form input[type="search"] { flex: 1 1 160px; min-width: 0; }
.search-groups > .panel { margin-bottom: 0; }
.search-group .panel-head { margin-bottom: 8px; }
.search-group .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.search-hint { margin-bottom: 16px; }
@media (max-width: 1024px) { .search-hint .search-keys { display: none; } } /* geen toetsenbord op de iPhone */

/* Account · meldingen op je telefoon: knoppen los van de uitleg */
#meldingen .actions { margin: 16px 0 8px; }