/* WordFoxy: compositie en woordspelcomponenten bovenop de familie-basis. */
.top { max-width: 1224px; margin: auto; padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--color-line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 28px; letter-spacing: -1px; font-weight: 750; }
.brand-last { color: var(--color-accent); }
.local { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-muted); }
.local span { width: 7px; height: 7px; background: var(--color-action); border-radius: 50%; }
main { max-width: 1224px; margin: auto; padding: 0 32px; }
.intro { padding: 36px 0 20px; }
.eyebrow { font-size: 12px; font-weight: 750; letter-spacing: 1.5px; color: var(--color-accent); margin-bottom: 10px; }
h1 { font: 400 52px/1.08 var(--font-display); letter-spacing: -1.5px; margin-bottom: 14px; }
.intro > p:last-child { color: var(--color-muted); }
.mobile-break { display: none; }
.demo-note { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #efede1; border: 1px solid #d0ceb8; border-radius: 12px; margin-bottom: 24px; font-size: 15px; }
.demo-note p { margin: 0; }
.tag { font-size: 12px; letter-spacing: 1px; font-weight: 750; border: 1px solid #778574; padding: 3px 7px; border-radius: 4px; }
.workspace { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "input" "results"; gap: 24px; align-items: start; }
.input-card { grid-area: input; min-width: 0; }
.results-section { grid-area: results; min-width: 0; }
@media(min-width:1024px) {
  .workspace { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); grid-template-areas: "input results"; gap: 30px; }
}
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-panel); padding: 26px; }
.card-heading { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.locale { font-size: 13px; padding: 4px 8px; border-radius: 5px; background: var(--color-tint); }
#rack { min-width: 0; font-size: 24px; letter-spacing: 5px; text-transform: uppercase; }
.rack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rack-actions button { font-size: 16px; }
.rack-actions #clear-rack { margin-left: auto; }
.filter-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-bottom: 10px; }
.filter-grid > div { min-width: 0; }
.filter-grid label { margin-bottom: 5px; }
.filter-grid input { text-transform: uppercase; }
.filter-grid input::placeholder { text-transform: none; }
.rack-preview { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 14px; }
.rack-preview:empty { display: none; }
.small-tile { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 35px; background: #f2eee2; border: 1px solid #a59576; border-radius: 5px; font-weight: 700; }
.small-tile.joker { background: #fff0e2; border: 2px dashed var(--color-accent); }
.active-constraints { margin: 16px 0; padding: 12px 14px; background: var(--color-tint); border-left: 3px solid var(--color-action); border-radius: 5px; font-size: 15px; }
.active-constraints ul { padding-left: 19px; margin: 6px 0 0; overflow-wrap: anywhere; }
.primary { margin-top: 14px; }
.disclosure { border-top: 1px solid var(--color-line); margin-top: 16px; }
.disclosure > summary { font-weight: 650; }
.optional { font-size: 13px; color: var(--color-muted); font-weight: 400; margin-left: 5px; }
.board-heading { margin-bottom: 12px; }
.board-heading > .optional { display: none; }
#pattern { text-transform: uppercase; letter-spacing: 6px; font-size: 21px; }
.field-pair { margin: 16px 0; display: grid; gap: 12px; }
.field-pair label { margin-bottom: 6px; }
.space-pair { display: flex; gap: 10px; }
.tile-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 12px; }
.position { flex: 0 0 48px; width: 48px; height: 60px; position: relative; padding: 4px; border-radius: 7px; background: #f5f5ee; }
.position.fixed { background: #dfeade; border-width: 2px; }
.position[aria-pressed=true] { outline: 2px solid var(--color-action); outline-offset: 1px; }
.position small { display: block; font-size: 12px; font-weight: 400; }
.position .dot { font-size: 22px; }
.position.crossed:after { content: '+'; position: absolute; right: 3px; top: 0; color: var(--color-accent); }
.position-heading { font-size: 15px; margin: 6px 0 12px; }
.position-heading .check { font-size: 15px; }
.variant-switch { display: flex; flex-wrap: wrap; padding: 4px; gap: 5px; background: var(--color-tint); border-radius: 10px; }
.variant-switch button { flex: 1; font-size: 15px; background: transparent; }
.variant-switch button[aria-pressed=true] { background: white; border: 2px solid var(--color-action); text-decoration: underline; text-underline-offset: 4px; }
#cross-panel { min-width: 0; }
#variant-a-panel label { margin: 12px 0 5px; }
#variant-a-panel input { text-transform: uppercase; letter-spacing: 4px; }
.cross-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; font-size: 14px; overflow-wrap: anywhere; }
.grid-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid-controls button { font-size: 15px; padding: 8px; }
.mini-board { overflow: auto; max-height: 480px; padding: 14px 3px; }
.grid-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.grid-cell, .grid-placeholder { flex: 0 0 48px; width: 48px; height: 48px; }
.grid-cell { min-height: 48px !important; padding: 3px !important; text-align: center; font-size: 20px; font-weight: 650; text-transform: uppercase; }
.grid-center { display: flex; align-items: center; justify-content: center; background: #fff0df; border: 2px solid var(--color-accent); border-radius: 8px; }
.grid-neighbor { display: flex; align-items: center; justify-content: center; background: #e5ecdf; border-radius: 7px; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--color-muted); }
.results-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.results-header select { font-size: 16px; }
.results-header .eyebrow { margin-bottom: 4px; }
.result-status { font-size: 15px; color: var(--color-muted); min-height: 23px; margin-bottom: 12px; }
.word-card { background: white; border: 1px solid var(--color-line); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.word-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.word { font-size: 25px; letter-spacing: .5px; font-weight: 750; margin: 0; overflow-wrap: anywhere; }
.word-length { font-size: 13px; color: var(--color-muted); }
.definition { font-size: 16px; line-height: 1.4; margin: 4px 0 0; }
.form-relation { font-size: 14px; line-height: 1.4; margin: 5px 0 0; color: var(--color-muted); }
.definition-missing { font-size: 14px; line-height: 1.5; margin: 5px 0 0; color: var(--color-muted); }
.definition-missing a { text-underline-offset: 3px; }
.meaning-context { font-size: 14px; color: var(--color-muted); }
.meaning-notice { font-size: 14px; color: var(--color-muted); margin: 0 0 10px; }
.joker-hint { flex-basis: 100%; font-size: 14px; font-weight: 650; color: var(--color-accent); border-left: 2px dashed var(--color-accent); padding-left: 6px; }
.usage { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; min-width: 0; }
.usage-tile { display: inline-flex; flex-direction: column; align-items: center; min-width: 32px; padding: 1px 4px; border: 1px solid #a59576; border-radius: 5px; background: #f5f0e4; white-space: nowrap; }
.tile-letter { font-size: 25px; font-weight: 750; line-height: 1.15; }
.tile-source { font-size: 13px; line-height: 1.3; }
.usage-tile.board { background: #e6efdf; border: 2px solid #617d60; padding: 0 3px; }
.usage-tile.joker { background: #fff0df; border: 2px dashed var(--color-accent); padding: 0 3px; }
.usage-tile.board.blank { border: 2px dashed #617d60; }
.word-card summary { font-size: 14px; }
.word-card details p { font-size: 14px; margin: 8px 0; }
.layout-count { font-size: 14px; color: var(--color-accent); margin: 4px 0; }
.layout-heading { font-size: 15px; margin: 12px 0 6px; padding-top: 8px; border-top: 1px solid var(--color-line); }
.empty { padding: 20px; border: 1px dashed var(--color-control-border); border-radius: 12px; background: #f0f3e9; }
.empty p { font-size: 16px; }
.empty button { margin: 4px 6px 4px 0; }
.try-card { margin-top: 20px; padding: 20px; border-radius: 12px; background: #e9efdf; }
.try-card p { font-size: 15px; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; }
.examples button { font-size: 15px; padding: 9px 12px; }
.trust { margin: 38px 0 28px; padding: 24px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.trust-number { font: italic 23px var(--font-display); color: var(--color-accent); }
.trust h3 { font-size: 17px; margin-top: 8px; }
.trust p { font-size: 15px; color: var(--color-muted); margin: 0; }
footer { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; color: var(--color-muted); padding-bottom: 28px; }
footer details { width: 100%; max-width: 740px; }
.footer-brand { font-weight: 700; font-size: 18px; }
@media(max-width:800px) {
  .workspace { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .top { padding: 20px; }
  main { padding: 0 20px; }
  .intro { padding: 25px 0 12px; }
  h1 { font-size: 42px; }
  .card { padding: 22px; }
}
@media(max-width:430px) {
  .top { padding: 16px; flex-wrap: wrap; gap: 8px; }
  main { padding: 0 16px; }
  .brand { font-size: 25px; }
  .local { font-size: 13px; }
  h1 { font-size: 36px; }
  .intro > p:last-child { font-size: 17px; }
  .demo-note { align-items: flex-start; padding: 12px; font-size: 15px; gap: 10px; }
  .card { padding: 16px; }
  .card-heading h2 { font-size: 22px; }
  .rack-actions button { padding: 8px 10px; }
  .trust { grid-template-columns: 1fr; gap: 22px; }
  .trust-number { float: left; margin-right: 14px; }
  .trust h3 { margin-top: 0; }
  .mobile-break { display: block; }
  .word-card { padding: 8px 10px; }
  .word { font-size: 25px; }
}
@media(max-width:360px) { .filter-grid { grid-template-columns: minmax(0,1fr); } }

/* Lokale bronpagina en resultaatnavigatie delen de bestaande visuele basis. */
.sources-page { max-width: 900px; padding-top: 28px; overflow-wrap: anywhere; }
.sources-page h2 { margin: 26px 0 12px; }
.sources-page li { margin-bottom: 16px; }
.word-info { overflow-wrap: anywhere; }
#more-results { width: 100%; }
.word-card:focus { outline: 3px solid var(--color-action); outline-offset: 3px; }

/* Shared navigation and useful, directly readable word pages. */
.top nav, .site-footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.top nav a, .site-footer nav a { font-size:16px; text-decoration:none; padding:8px 0; text-underline-offset:5px; }
.top nav a:hover, .site-footer nav a:hover { text-decoration:underline; }
.top { flex-wrap:wrap; padding-top:16px; padding-bottom:16px; }
.intro { padding-top:24px; }
.intro h1 { font-size:clamp(32px,4.2vw,46px); }
.word-actions { display:flex; flex-wrap:wrap; gap:8px; }
.word-actions button { min-height:44px; }
.saved-panel { margin-top:20px; border-block:1px solid var(--color-line); }
.saved-panel > summary { font-weight:650; }
.saved-list { list-style:none; margin:0; padding:0 0 12px; display:flex; flex-wrap:wrap; gap:8px; }
.saved-list li { display:flex; align-items:center; border:1px solid var(--color-line); border-radius:6px; background:var(--color-surface); }
.saved-list a { padding:8px 10px; font-size:16px; }
.saved-list button { border:0; background:transparent; padding:4px 12px; }
.discovery { padding:28px 0; border-top:1px solid var(--color-line); margin-top:32px; }
.discovery h2, .reading h2, .directory h2 { margin-bottom:12px; }
.link-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 24px; }
.link-chips a { display:flex; align-items:center; min-height:44px; padding:8px 13px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:6px; font-size:16px; text-decoration:none; }
.link-chips a:hover { border-color:var(--color-action); background:var(--color-tint); }
.content-page { max-width:1120px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0; font-size:14px; color:var(--color-muted); }
.page-intro { max-width:850px; }
.page-intro h1 { font-size:clamp(32px,4.6vw,48px); }
.lead { max-width:780px; color:var(--color-muted); font-size:18px; }
.quick-search { max-width:780px; background:var(--color-surface); border:1px solid var(--color-line); padding:20px; border-radius:12px; margin:22px 0 30px; }
.quick-search label { margin-bottom:8px; }
.quick-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.quick-row .primary { margin:0; width:auto; padding:10px 20px; }
.quick-row input { min-width:0; }
.quick-search .help { margin:10px 0 0; }
.reading { max-width:780px; margin:28px 0; }
.reading h2:not(:first-child) { margin-top:28px; }
.reading p { font-size:17px; }
.word-examples { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; margin:18px 0; }
.example-word { padding:16px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:8px; min-width:0; overflow-wrap:anywhere; }
.example-word h3 { font-size:23px; margin:0; }
.example-word p { font-size:16px; margin:10px 0 0; }
.example-word details p, .example-word summary { font-size:14px; }
.source-note { max-width:840px; font-size:14px; color:var(--color-muted); }
.related { border-top:1px solid var(--color-line); padding-top:24px; margin-top:30px; }
.steps { max-width:800px; padding-left:28px; }
.steps li { padding:4px 0 16px 8px; }
.steps li::marker { color:var(--color-accent); font-weight:700; }
.steps h2 { font-size:21px; }
.steps p { font-size:17px; }
.site-footer { border-top:1px solid var(--color-line); margin-top:32px; padding-top:20px; }
.site-footer > p { flex-basis:100%; font-size:14px; }
.data-footnote { max-width:840px; color:var(--color-muted); font-size:14px; }
#lookup-results { max-width:780px; }
@media(max-width:600px){
 .top nav { gap:4px 16px; width:100%; }
 .top nav a { font-size:14px; }
 .quick-row { grid-template-columns:minmax(0,1fr); }
 .quick-row .primary { justify-content:center; width:100%; }
 .quick-search { padding:16px; }
 .intro { padding-top:20px; }
 .demo-note { margin-bottom:16px; }
 .trust { grid-template-columns:1fr; }
}