*{box-sizing:border-box}body{margin:0;background:#f8f7f2;color:#123b4a;font:16px/1.65 system-ui,sans-serif}header,main,footer{width:min(1180px,92%);margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 0;border-bottom:1px solid #d9e3e2}a{color:#006e92}nav{display:flex;gap:20px}.brand{display:flex;align-items:center;gap:14px;font-weight:750;letter-spacing:.1em;text-decoration:none}.brand img{width:50px;height:50px;object-fit:contain}h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.2}h1{font-size:clamp(32px,5vw,58px)}h2{font-size:30px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;margin-top:35px}.balance{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;background:#123b4a;color:white;padding:28px;border-radius:8px}.balance strong,.balance span{display:block}.balance strong{font-size:28px}.balance span{font-size:13px;color:#d1e4e8}section{margin:45px 0;padding-bottom:30px;border-bottom:1px solid #d9e3e2}.notice,.flash{padding:16px 20px;background:#e1eef0;border-radius:5px}.flash{border:2px solid #007da5}form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:850px;margin:25px 0}label{display:flex;flex-direction:column;font-weight:600;font-size:14px;gap:6px}input,select,textarea{width:100%;padding:11px;border:1px solid #9eafb4;border-radius:4px;background:white;color:#123b4a;font:inherit;min-height:44px}textarea{min-height:95px}button{cursor:pointer;background:#123b4a;color:white;border:0;border-radius:4px;padding:13px 20px;font:600 14px system-ui;align-self:end;min-height:44px}button:hover{background:#007da5}details{padding:18px 0;border-top:1px solid #d9e3e2}summary{cursor:pointer;font-weight:650}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid #d9e3e2}th{background:#e1eef0}td{overflow-wrap:anywhere}.year{display:flex;align-items:end;max-width:450px}.year label{flex:1}footer{padding:30px 0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #008eb9;outline-offset:4px}@media(max-width:650px){header{align-items:start;flex-direction:column}nav{flex-wrap:wrap;gap:15px}.balance{grid-template-columns:1fr;gap:15px}form{grid-template-columns:1fr}h2{font-size:26px}th,td{padding:9px;min-width:95px}}
.member-email{display:block;font-weight:400;font-size:12px}.admin-sections{flex-wrap:wrap}.admin-sections a{padding:8px 12px;background:#e1eef0;border-radius:4px}.danger{background:#9a3f32}caption{text-align:left;font-weight:650;margin-bottom:10px}td form{margin:0;display:block}th small{overflow-wrap:anywhere}section:target{scroll-margin-top:25px}

/* Members-only document library. */
nav{flex-wrap:wrap}header nav{justify-content:flex-end}nav a{min-height:44px;display:inline-flex;align-items:center}.document-list{display:grid;gap:0}.document-item{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:25px 0;border-bottom:1px solid #d9e3e2}.document-item:last-child{border-bottom:0}.document-item h3{font:400 26px/1.25 Georgia,serif;margin:5px 0 12px}.document-meta{font-size:12px;letter-spacing:.04em;margin:0;color:#536c74}.document-description{max-width:680px;margin:0;overflow-wrap:anywhere}.document-actions{display:flex;flex-direction:column;gap:12px;flex-shrink:0}.document-button{display:inline-block;background:#123b4a;color:white;padding:11px 18px;border-radius:4px;text-decoration:none;font-size:14px;font-weight:600;min-height:44px}.document-button:hover{background:#007da5}.document-item form{display:block;margin:0}.document-item h3{overflow-wrap:anywhere}input[type=file]{max-width:100%;font-size:13px}form>label{min-width:0}
@media(max-width:650px){header nav{justify-content:flex-start}.document-item{flex-direction:column;align-items:stretch;gap:18px}.document-actions{align-items:flex-start}.document-item h3{font-size:24px}.document-button{padding:12px 18px}}

header nav a[aria-current=page]{font-weight:750;border-bottom:2px solid #006e92}.document-item{flex-wrap:wrap}.document-item>details{flex-basis:100%}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #008eb9;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}summary{min-height:44px}td button{margin-top:8px}select[multiple]{min-height:140px}.notice+.notice{margin-top:12px}@media(max-width:900px){header{align-items:flex-start;flex-direction:column}header nav{justify-content:flex-start}.balance strong{font-size:24px}}

/* Larger text and controls, with clear keyboard focus. */
body{font-size:18px;line-height:1.65}
label,button,.document-button,input[type=file],table{font-size:17px}
input,select,textarea{font-size:18px;min-height:48px}
button,.document-button,nav a,summary{min-height:48px}
small,.balance span,.document-meta,.member-email,.eyebrow{font-size:16px}
input[type=checkbox],input[type=radio]{width:24px;min-height:24px;accent-color:#123b4a}
button:hover,.document-button:hover{background:#24566b}
a{text-underline-offset:3px}
nav a{padding:8px 4px}
header nav a[aria-current=page]{border-bottom-width:3px}
summary{padding:8px 4px}
.table-scroll:focus-visible{outline:3px solid #007da5;outline-offset:3px}
.skip-link{position:absolute;top:-100px;left:16px;background:#fff;padding:12px 18px;z-index:9999}
.skip-link:focus{top:12px}
@media(max-width:650px){header,main,footer{width:94%}h1{font-size:34px}table{font-size:16px}form{gap:22px}.year{flex-wrap:wrap}header nav{gap:10px 16px}}

/* Keep version history below each document, also in the mobile column layout. */
.document-item>details{min-width:0;overflow-wrap:anywhere}
@media(max-width:650px){.document-item{flex-wrap:nowrap}.document-item>details{flex-basis:auto;width:100%}}

/* The management entry stays clear on every member page. */
a.rederij-admin-link,a.rederij-admin-link:visited{background:#a52a2a;color:#fff;border:2px solid #a52a2a;border-radius:5px;font-weight:800;padding:8px 16px;text-decoration:none}
a.rederij-admin-link:hover,a.rederij-admin-link:active{background:#7d1f1f;border-color:#7d1f1f;color:#fff}
a.rederij-admin-link:focus-visible{outline:3px solid #007da5;outline-offset:3px}
header nav a.rederij-admin-link[aria-current=page]{border-bottom:3px solid #5c1717;color:#fff}

.season-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}.season-card{padding:22px;border:1px solid #9eafb4;border-radius:6px;background:#fff}.season-card h3{margin-top:0;font-size:24px}.season-card form{display:block;max-width:none;margin:20px 0 0}.season-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.season-actions button{flex:1 1 190px}.season-state{padding:10px 12px;border-radius:4px}.season-open{background:#e1eef0}.season-closed{background:#fff1d3;color:#623c08}.season-card p{overflow-wrap:anywhere}

.backup-page form{grid-template-columns:1fr}.backup-page .error{padding:16px 20px;background:#fff1d3;color:#623c08;border-left:4px solid #a52a2a;border-radius:4px}.backup-page input[name=directory]{font-size:15px}.backup-page label:has(input[type=checkbox]){flex-direction:row;align-items:center}.backup-page label input[type=checkbox]{flex-shrink:0}.backup-page td form{margin:0}.backup-page section p{max-width:850px}

/* Keep booking dates readable while allowing horizontal scrolling on phones. */
.booking-history{min-width:850px}
.booking-history-period{min-width:290px}
.booking-history-period span,.booking-history-line{display:block}
.booking-history th:nth-child(2){min-width:140px}
.booking-history td:nth-child(3){min-width:220px}
.booking-history td:last-child{min-width:140px}

.booking-settings-group{grid-column:1/-1;min-width:0;border:1px solid #c3d2d6;border-radius:6px;padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.booking-settings-group legend{font-size:20px;font-weight:700;padding:0 8px}.booking-settings-group small{font-weight:400}.settings-wide{grid-column:1/-1;margin:0}@media(max-width:650px){.booking-settings-group{grid-template-columns:1fr;padding:14px}}

/* Compact administrator histories; controls remain usable on narrow screens. */
.admin-history .history-filter { margin-bottom: 1rem; }
.admin-history .history-year > summary { font-size: 1.1rem; font-weight: 700; padding: .75rem; }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.history-pagination a, .history-pagination > span[aria-disabled] { padding: .75rem 1rem; }
.history-pagination > span[aria-disabled] { color: #555; background: #eee; border-radius: .4rem; }
.admin-history td { overflow-wrap: anywhere; }

/* Personal details remain readable on desktops and phones. */
.profile-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; margin: 12px 0; padding: 20px; border: 1px solid #9bb1b9; border-radius: 8px; }
.profile-fields legend { font-size: 1.2rem; font-weight: 700; padding: 0 8px; }
.profile-fields .profile-wide { grid-column: 1 / -1; }
.profile-fields small { display: block; font-weight: 400; }
.member-contact-details dt { font-weight: 700; }
.member-contact-details dd { margin: 0 0 12px; overflow-wrap: anywhere; }
@media (max-width: 650px) { .profile-fields { grid-template-columns: 1fr; padding: 14px; } }

/* Keep controls and long names inside the viewport, including small iPhones. */
main, section, form, fieldset, form > *, .table-scroll { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
button, summary, h1, h2, h3, legend { overflow-wrap: break-word; }
button { white-space: normal; }
.club-section-menu { margin: 16px 0; padding: 0; border: 0; }
.club-section-menu > summary { display: none; }
.table-scroll { max-width: 100%; overscroll-behavior-x: contain; }
.table-scroll-hint { margin: 8px 0; font-size: 16px; color: #365765; }
@media (max-width: 700px) {
  main, footer { width: calc(100% - 24px); }
  h1 { font-size: 30px; }
  h2 { font-size: 25px; }
  h3 { font-size: 21px; }
  section { margin: 28px 0; padding-bottom: 24px; }
  form, .profile-fields, .booking-settings-group { grid-template-columns: minmax(0, 1fr); }
  form { width: 100%; gap: 16px; }
  form > button { width: 100%; }
  .year { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; }
  .profile-fields, .booking-settings-group, .season-card { padding: 14px; }
  .admin-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .admin-sections a { width: 100%; padding: 12px; line-height: 1.4; text-decoration: none; overflow-wrap: break-word; }
  .club-section-menu { border: 1px solid #9bb1b9; border-radius: 6px; background: #fff; }
  .club-section-menu > summary { display: list-item; padding: 12px; min-height: 48px; font-size: 18px; }
  .club-section-menu > nav { padding: 0 12px 12px; }
  .table-scroll table { min-width: 620px; }
  .table-scroll td, .table-scroll th { font-size: 16px; line-height: 1.5; }
  .table-scroll td a { display: inline-block; padding: 10px 2px; min-height: 44px; }
  .backup-page input[name=directory] { font-size: 16px; }
  .history-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .history-pagination > span:not([aria-disabled]) { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .history-pagination a, .history-pagination > span[aria-disabled] { justify-content: center; text-align: center; padding: 12px 8px; }
}

/* One shared administrator menu, ordered by common tasks. */
.admin-sections.admin-task-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.admin-task-group { display: grid; gap: 8px; min-width: 0; }
.admin-task-group h2 { margin: 0 0 4px; font: 700 18px/1.4 system-ui, sans-serif; }
.admin-task-group a { text-decoration: none; line-height: 1.4; min-height: 48px; }
.admin-task-group a:hover { background: #cbdfe3; }
@media (max-width: 900px) {
  .admin-sections.admin-task-groups { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Consistent cards and form alignment throughout member and board pages. */
main > section:not(.balance) { padding: 24px; margin: 28px 0; background: #fff; border: 1px solid #d1dfe3; border-radius: 12px; }
main > section > h2:first-child { margin-top: 0; }
main h2 { font: 650 26px/1.3 system-ui, sans-serif; }
main h3 { font: 650 21px/1.4 system-ui, sans-serif; }
main > p, main > section > p { max-width: 85ch; }
main form { align-items: end; }
.profile-fields, .booking-settings-group { align-items: end; }
main .eyebrow { margin-top: 24px; color: #47626b; letter-spacing: .06em; }
.admin-task-group a { border: 1px solid #c4d9df; border-radius: 8px; padding: 12px; }
.table-scroll { border: 1px solid #d1dfe3; border-radius: 8px; }
.table-scroll caption { padding: 12px; margin: 0; }
.table-scroll tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) { main > section:not(.balance) { padding: 16px; margin: 20px 0; } main h2 { font-size: 24px; } }

.admin-task-group a[aria-current] { background: #174c59; border-color: #174c59; color: #fff; font-weight: 700; }

/* All members: readable totals without a horizontal scroll region. */
.member-overview { display: grid; gap: 24px; min-width: 0; }
.member-overview-table { width: 100%; table-layout: fixed; font-size: 16px; line-height: 1.4; }
.member-overview-table caption { font-size: 19px; padding: 0 0 12px; }
.member-overview-table th, .member-overview-table td { min-width: 0; padding: 12px 8px; overflow-wrap: anywhere; }
.member-overview-table thead th { vertical-align: bottom; }
.member-overview-table th:first-child { width: 18%; text-align: left; }
.member-overview-table thead th:not(:first-child), .member-overview-table td { text-align: right; }
.member-overview-table tbody th { background: #f1f6f7; }
.member-overview-table .member-cell-value { font-variant-numeric: tabular-nums; }
.member-overview-table .member-available { background: #e9f4ee; font-weight: 750; }
.member-cell-label { display: none; }
.member-credit-note { display: block; font-size: 14px; }
@media (max-width: 1100px) {
  .member-overview-table, .member-overview-table caption { display: block; width: 100%; }
  .member-overview-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .member-overview-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .member-overview-table tbody tr { display: block; min-width: 0; border: 1px solid #c4d9df; border-radius: 8px; overflow: hidden; }
  .member-overview-table tbody th:first-child { display: block; width: 100%; font-size: 18px; padding: 14px; }
  .member-overview-table tbody td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px; text-align: right; padding: 10px 14px; font-size: 17px; }
  .member-overview-table tbody td:last-child { border-bottom: 0; }
  .member-cell-label { display: block; text-align: left; }
  .member-overview-table .member-cell-value { min-width: 0; }
  .member-credit-note { display: none; }
}
@media (max-width: 700px) {
  .member-overview-table tbody { grid-template-columns: minmax(0, 1fr); }
}

/* Approval requests remain readable as a table on desktop and cards on phones. */
.approval-table { width: 100%; table-layout: fixed; }
.approval-table th:nth-child(1) { width: 19%; }
.approval-table th:nth-child(2) { width: 34%; }
.approval-table th:nth-child(3) { width: 14%; }
.approval-table th:nth-child(4) { width: 33%; }
.approval-table td { vertical-align: top; overflow-wrap: anywhere; white-space: normal; }
.approval-table p { margin-block: 8px; }
.approval-table form { display: block; padding: 0; margin-top: 12px; }
.approval-table textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.approval-table button { max-width: 100%; white-space: normal; margin-top: 8px; }
@media (max-width: 700px) {
  .approval-table, .approval-table tbody, .approval-table tr, .approval-table td { display: block; width: 100%; box-sizing: border-box; }
  .approval-table thead { display: none; }
  .approval-table tr { border: 1px solid #c8d5d9; border-radius: 8px; margin-bottom: 16px; padding: 8px; }
  .approval-table td { border: 0; padding: 8px; }
  .approval-table td::before { content: attr(data-label); display: block; font-weight: 700; color: #425a63; margin-bottom: 4px; }
}

.admin-sections .admin-approval-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; margin-left: 6px; padding: 0 6px;
  box-sizing: border-box; border-radius: 999px;
  background: #b42323; color: #fff; font-size: 14px; font-weight: 800; line-height: 1;
  vertical-align: middle;
}

.points-decision-badge { display: inline-block; padding: 4px 9px; margin-bottom: 6px; border-radius: 5px; font-weight: 750; }
.points-decision-badge.points-decision-approved { background: #dcf5e5; color: #14532d; border: 1px solid #27834d; }
.points-decision-badge.points-decision-rejected { background: #fff1cc; color: #704400; border: 1px solid #ac7300; }
#mijn-puntenmutaties tr.points-decision-approved td:first-child { border-left: 4px solid #27834d; }
#mijn-puntenmutaties tr.points-decision-rejected td:first-child { border-left: 4px solid #ac7300; }

/* Card rows on small screens, enhanced by member-layout.js. */
.record-cell-label { display:none; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
@media (max-width:700px) {
  .table-scroll:has(.responsive-records) { overflow:visible; }
  table.responsive-records { display:block; width:100%; min-width:0!important; }
  .responsive-records caption { display:block; }
  .responsive-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .responsive-records tbody { display:block; }
  .responsive-records tbody tr { display:block; margin:0 0 1rem; padding:.75rem; border:1px solid #a9bbc5; border-radius:.65rem; background:#fff; }
  .responsive-records tbody td,.responsive-records tbody th { display:block; width:auto!important; min-width:0; padding:.45rem 0; border:0; overflow-wrap:anywhere; white-space:normal; }
  .responsive-records .record-cell-label { display:block; font-weight:700; color:#334d5a; margin-bottom:.15rem; }
  .responsive-records input,.responsive-records select,.responsive-records textarea { max-width:100%; min-width:0; }
}