/* Het Domijn ledenportaal: components. Uses only the names in tokens.css; no colour or size is written here as a literal. */

@view-transition { navigation: auto; }          /* page-to-page fade where the browser supports it; ignored where not */
/* every transition pseudo-element takes the motion token: the browser's own group and named-element animations default to 250 ms and ignore reduced motion (seen in testing, 2026-10-15) */
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--t-base); animation-timing-function: var(--ease); }
header.site { view-transition-name: site-header; }

.skip { position: absolute; left: var(--s-3); top: -4rem; background: var(--c-bg); color: var(--c-ink); padding: var(--s-3) var(--s-4);
        border: 2px solid var(--c-focus); z-index: 10; }
.skip:focus { top: var(--s-3); }

/* header: the teal band carries the name in ink (3.32:1, large type only); the nav sits on white like the live site */
header.site { background: var(--c-teal); }
.brand { max-width: var(--page-max); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-4); display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.brand .name { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-head); font-size: var(--fs-brand); font-weight: 600; line-height: 1; color: var(--c-ink); text-decoration: none; }
.brand .name b { font-weight: 700; }
.brand .sub { font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-brand-sub); color: var(--c-ink); }
nav.main { background: var(--c-bg); border-bottom: var(--line) solid var(--c-rule); }
nav.main ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--page-max); display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
nav.main a, nav.main button.linkish { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); font-family: var(--font-head); text-transform: uppercase;
             letter-spacing: var(--track-caps); font-size: var(--fs-nav); color: var(--c-ink); text-decoration: none; border-bottom: 3px solid transparent;
             transition: border-color var(--t-fast) var(--ease); }
nav.main a:hover, nav.main button.linkish:hover { border-bottom-color: var(--c-teal-text); }
nav.main a[aria-current="page"] { border-bottom-color: var(--c-orange-text); }   /* the one mark of the current page: the text twin, 5.07:1 (the brand orange is 2.16:1: WCAG 1.4.11 asks 3:1 of a state mark) */

main { max-width: var(--page-max); margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-8); }
.lead { max-width: var(--measure); }
.heading-double { border-block: var(--line-double); padding: var(--s-3) 0; margin-bottom: var(--s-5); text-align: center; }
.small { font-size: var(--fs-small); }
.muted { color: var(--c-ink); opacity: 0.82; }

/* search and filters */
.tools { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
label.field { display: grid; gap: var(--s-1); font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-small); }
input[type="search"], input[type="text"], input[type="email"] { font: inherit; color: var(--c-ink); background: var(--c-bg); min-height: var(--tap); padding: 0 var(--s-4);
  border: 2px solid var(--c-ink); border-radius: var(--radius); width: 100%; max-width: 32rem; text-transform: none; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { font: inherit; font-size: var(--fs-small); min-height: var(--tap); padding: 0 var(--s-4); color: var(--c-ink); background: var(--c-bg);
        border: 1.5px solid var(--c-ink); border-radius: 999px; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.chip:hover { background: var(--c-band); }
.chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); }
.count { min-height: 1.5em; }

/* member cards */
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.card { background: var(--c-bg); border: var(--line) solid var(--c-rule); border-top: 4px solid var(--c-teal); border-radius: var(--radius); padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.panel h2 { font-size: var(--fs-h3); }   /* the chosen room's title sits one level under the page title, looks as the h3 it replaced */
.card h2 { margin: 0; font-size: var(--fs-card-title); text-transform: none; letter-spacing: 0; font-weight: 600; hyphens: auto; overflow-wrap: anywhere; }   /* lang="nl" on the page picks the Dutch hyphenation; anywhere stays the net for a name with no break point */
.card .room { font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-small); color: var(--c-teal-text); }
.card .company { margin: 0; hyphens: auto; overflow-wrap: anywhere; }
.card .note { margin: 0; font-size: var(--fs-small); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: 0; padding: 0; list-style: none; }
.tags li { font-size: var(--fs-tag); padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--c-band); border: var(--line) solid var(--c-rule); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4); gap: var(--s-2);
       font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-control); text-decoration: none;
       color: var(--c-ink); background: var(--c-bg); border: 2px solid var(--c-ink); border-radius: var(--radius); overflow-wrap: anywhere; }
.btn:hover { background: var(--c-band); }
.btn.primary { background: var(--c-ink); color: var(--c-bg); }
.btn.primary:hover { background: var(--c-teal-text); border-color: var(--c-teal-text); }
.empty { padding: var(--s-6) 0; }

/* the reader: handbook chapters */
.reader { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .reader { grid-template-columns: 16rem minmax(0, 1fr); } }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--c-rule); }
.toc a { display: block; padding: var(--s-3) var(--s-2); min-height: var(--tap); border-bottom: var(--line) solid var(--c-rule); color: var(--c-ink); text-decoration: none; }
.toc a:hover { background: var(--c-band); }
.toc a[aria-current="page"] { font-weight: 600; box-shadow: inset 4px 0 0 var(--c-orange); background: var(--c-band); }
.toc details > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-6); }
.prose p { hyphens: auto; }
.callout, .prose blockquote { border-left: 4px solid var(--c-orange); background: var(--c-band); padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; max-width: var(--measure); }
.callout p:last-child, .prose blockquote p:last-child { margin-bottom: 0; }

/* the plan: a schematic of the room codes, rooms reachable by keyboard, with a list beside it */
.plan-wrap { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .plan-wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
svg.plan { width: 100%; height: auto; background: var(--c-band); border: var(--line) solid var(--c-rule); border-radius: var(--radius); }
.room rect { fill: var(--c-bg); stroke: var(--c-ink); stroke-width: 2; transition: fill var(--t-fast) var(--ease); }
.room.empty rect { fill: var(--c-band); stroke-dasharray: 6 4; }
.room text { fill: var(--c-ink); font-family: var(--font-head); font-size: 22px; text-anchor: middle; pointer-events: none; }
.room text.who { font-family: var(--font-body); font-size: 15px; }
.room { cursor: pointer; }
.room:hover rect { fill: var(--c-teal-tint); }
.room[aria-pressed="true"] rect { fill: var(--c-teal-tint); stroke-width: 4; }
.room:focus-visible { outline: none; }
.room:focus-visible rect { stroke: var(--c-focus); stroke-width: 5; }
.panel { border: var(--line) solid var(--c-rule); border-top: 4px solid var(--c-orange); border-radius: var(--radius); padding: var(--s-4); background: var(--c-bg); min-height: 9rem;
         transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease); }
@starting-style { .panel.shown { opacity: 0; translate: 0 6px; } }
table.rooms { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
table.rooms th, table.rooms td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--line) solid var(--c-rule); }
table.rooms th { font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: 400; }
table.rooms button { font: inherit; min-height: var(--tap); background: none; border: 0; color: var(--c-link); text-decoration: underline; cursor: pointer; padding: 0 var(--s-2); }

footer.site { border-top: var(--line) solid var(--c-rule); background: var(--c-band); }
footer.site div { max-width: var(--page-max); margin: 0 auto; padding: var(--s-5) var(--gutter); font-size: var(--fs-small); }

@media print { header.site, nav.main, footer.site, .tools, .actions { display: none; } body { font-size: 12pt; } }

.heading-double.left { text-align: left; }
.list-head { margin-top: var(--s-5); }

/* contact: a labelled link, so the person sees the number or address they are about to use (44 px tall, wraps long addresses) */
.contact { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 0; border-top: var(--line) solid var(--c-rule); }
.contact li { border-bottom: var(--line) solid var(--c-rule); }
.contact a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: center; column-gap: var(--s-3); min-height: var(--tap); text-decoration: none; color: var(--c-link); }
.contact a:hover .v { text-decoration: underline; text-decoration-thickness: 2px; }
.contact .k { font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-small); color: var(--c-teal-text); }
.contact .v { overflow-wrap: anywhere; }
.panel { margin-top: var(--s-4); }

/* a table wider than a phone scrolls inside its own frame, never the page; the frame is reachable by keyboard and named */
.table-wrap { overflow-x: auto; max-width: 100%; margin-bottom: var(--s-5); }
.table-wrap code { text-transform: none; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }   /* a token's name is case-sensitive: never shown in capitals */

/* sign-in: two small forms, one message line; a button that reads as a link (also the menu's sign-out) */
.login form { display: grid; gap: var(--s-4); max-width: 32rem; margin-bottom: var(--s-4); }
.login form[hidden] { display: none; }
.login-msg { min-height: 1.6em; max-width: 32rem; }
.linkish { font: inherit; background: none; border: 0; padding: 0 var(--s-2); min-height: var(--tap); color: var(--c-link); text-decoration: underline; cursor: pointer; justify-self: start; }
nav.main button.linkish { border-bottom: 3px solid transparent; text-decoration: none; color: var(--c-ink); }