/* Basisstijl The Green (aug 2026) */
:root {
  --color-bordeaux: #241113; --color-cream: #F2EFE6; --color-gold: #A8906B; --color-ink: #14130F;
  --color-cream-2: #E8E3D5; --color-rule: #C9C1AE; --color-ink-mute: #5B554A;
  --font-body: "Manrope", system-ui, sans-serif; --font-quote: "Instrument Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-cream); color: var(--color-ink);
  font: 400 16px/1.7 var(--font-body); }
a { color: var(--color-bordeaux); }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }

.top { background: var(--color-bordeaux); color: var(--color-cream); }
.top__in { display: flex; justify-content: space-between; align-items: center; min-height: 64px; }
.wordmark { font-weight: 200; letter-spacing: .28em; font-size: 15px; }
.link { background: none; border: 0; color: var(--color-cream); font: 500 12px var(--font-body);
  letter-spacing: .24em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }

main.wrap { padding-top: 48px; padding-bottom: 88px; }
.narrow { max-width: 480px; }
.eyebrow { font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-gold); margin: 0 0 16px; }
h1 { font-weight: 300; font-size: clamp(28px, 6vw, 40px); line-height: 1.2; color: var(--color-bordeaux); margin: 0 0 16px; }
h2 { font-weight: 400; font-size: 20px; line-height: 1.35; color: var(--color-bordeaux); margin: 8px 0 16px; }
.lead { font-size: 17px; color: var(--color-ink-mute); margin: 0 0 32px; }
.punch { font-family: var(--font-quote); font-style: italic; font-size: 1.2em; color: var(--color-bordeaux); }
.small { font-size: 14px; margin-top: 24px; }

.notice { border-left: 2px solid var(--color-gold); padding: 8px 16px; background: var(--color-cream-2); margin: 0 0 24px; }
.notice--error { border-color: var(--color-bordeaux); }

/* Formulier: label boven, lijn onder, focus = gouden lijn */
.form label { display: block; font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }
.form input { width: 100%; border: 0; border-bottom: 1px solid var(--color-ink); background: transparent;
  font: 400 18px var(--font-body); padding: 8px 0; border-radius: 0; color: var(--color-ink); }
.form input:focus { outline: none; border-bottom: 2px solid var(--color-gold); }
.form input.code { font-size: 28px; letter-spacing: .3em; }
.btn { margin-top: 32px; background: var(--color-ink); color: var(--color-cream); border: 0; border-radius: 0;
  font: 500 15px var(--font-body); padding: 16px 24px; cursor: pointer; width: 100%; }
.btn:hover { background: var(--color-bordeaux); }

/* Tickets */
.tickets { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-rule); }
.ticket { padding: 24px 0 24px 0; border-bottom: 1px solid var(--color-rule); }
.ticket--jij { border-left: 3px solid var(--color-gold); padding-left: 16px; }
.ticket__head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.status { font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 8px;
  background: var(--color-cream-2); color: var(--color-ink); }
.status--pending { background: var(--color-bordeaux); color: var(--color-cream); }
.status--new { background: transparent; border: 1px solid var(--color-rule); }
.meta { font-size: 13px; color: var(--color-ink-mute); }
.facts { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }
@media (min-width: 640px) { .facts { grid-template-columns: 1fr 2fr; gap: 32px; } }
.facts dt { font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); }
.facts dd { margin: 4px 0 0; }
.quote { display: block; color: var(--color-ink-mute); margin-top: 4px; overflow-wrap: anywhere; white-space: pre-line; }

/* Uitklapbare melding: alleen onderwerp zichtbaar, details na klik */
.ticket details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px 16px;
  flex-wrap: wrap; padding-right: 32px; position: relative; }
.ticket details > summary::-webkit-details-marker { display: none; }
.ticket details > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--color-bordeaux); border-bottom: 1.5px solid var(--color-bordeaux);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ticket details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.ticket details > summary:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }
.ticket__subject { font-weight: 400; font-size: 20px; line-height: 1.35; color: var(--color-bordeaux); flex: 1 1 auto; }
.ticket details > summary:hover .ticket__subject { text-decoration: underline; text-underline-offset: 4px; }
.ticket__body { padding-top: 16px; }
.ticket__body .meta { margin: 0 0 16px; }
.hint { font-size: 14px; color: var(--color-ink-mute); margin: 16px 0 0; }
.ticket--jij .hint { color: var(--color-bordeaux); font-weight: 500; }

/* Keuzetegels (boss-accounts) */
.back { color: var(--color-gold); text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tiles--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles--2 { grid-template-columns: 1fr 1fr; } }
.tile { display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 160px; position: relative;
  border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); text-decoration: none;
  transition: background .15s, color .15s; }
.tile:hover, .tile:focus-visible { background: var(--color-bordeaux); color: var(--color-cream); border-color: var(--color-bordeaux); outline: none; }
.tile__label { font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); }
.tile:hover .tile__label, .tile:focus-visible .tile__label { color: #BFA882; }
.tile__name { font-weight: 300; font-size: 22px; line-height: 1.3; color: inherit; }
.tile__count { font-weight: 200; font-size: 48px; line-height: 1; color: var(--color-bordeaux); }
.tile:hover .tile__count, .tile:focus-visible .tile__count { color: var(--color-cream); }
.tile__go { margin-top: auto; font-size: 20px; }
.ticket--aanvrager { border-left: 3px solid var(--color-gold); padding-left: 16px; }

/* Kleur per herkomst (boss-overzichten): bordeaux = zelf gemeld, goud = member */
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -16px 0 24px; font-size: 13px; color: var(--color-ink-mute); }
.legend__item { display: inline-flex; align-items: center; gap: 8px; }
.legend__item::before { content: ""; width: 3px; height: 16px; }
.legend__item--eigen::before { background: var(--color-bordeaux); }
.legend__item--member::before { background: var(--color-gold); }
.tickets--kleuren .ticket { border-left: 3px solid transparent; padding-left: 16px; }
.tickets--kleuren .ticket--eigen { border-left-color: var(--color-bordeaux); }
.tickets--kleuren .ticket--member { border-left-color: var(--color-gold); background: rgba(168, 144, 107, .08); }
.origin { font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 8px; }
.origin--eigen { color: var(--color-bordeaux); border: 1px solid var(--color-bordeaux); }
.origin--member { color: var(--color-ink); background: var(--color-cream-2); border: 1px solid var(--color-gold); }

/* Voorbeeldmail */
.mail { background: #fff; border: 1px solid var(--color-rule); padding: 24px; }
.mail__meta { font-size: 13px; color: var(--color-ink-mute); }
.mail hr { border: 0; border-top: 1px solid var(--color-rule); margin: 24px 0; }
.mail__cta a { font-weight: 500; }