:root{--navy: #2b3c54;--navy-dark: #1f2e42;--sky: #99ccff;--mist: #f1f4f7;--line: #dde3ea;--ink: #1f2a37;--text: #55606e;--white: #ffffff;--ok: #237451;--ok-bg: #e7f4ed;--due: #8a5a00;--due-bg: #fff4dc;--bad: #8f1028;--bad-bg: #fff0f3;--radius: 10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--mist);-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0}h1{margin:0 0 16px;font-size:1.6rem}h2{margin:24px 0 12px;font-size:1.15rem}a{color:var(--navy)}.shell{min-height:100vh}main{width:min(1100px,100%);margin:0 auto;padding:20px 16px 48px}.centre{display:grid;min-height:100vh;place-items:center}.topbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 16px;color:var(--white);background:var(--navy)}.topbar .brand{font-weight:700}.topbar nav{display:flex;flex:1;gap:4px}.topbar nav a{padding:10px 12px;border-radius:8px;color:var(--white);text-decoration:none}.topbar nav a.active{background:var(--navy-dark);box-shadow:inset 0 -2px 0 var(--sky)}.topbar .link{color:var(--white)}button,.button{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:600;color:var(--navy);background:var(--white);cursor:pointer}button.primary{border-color:var(--navy);color:var(--white);background:var(--navy)}button.danger{border-color:var(--bad);color:var(--bad)}button.link{border:0;background:transparent;text-decoration:underline}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}label{display:grid;gap:6px;font-size:.9rem;font-weight:600;color:var(--navy)}input,select,textarea{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink);background:var(--white)}[aria-invalid=true]{border-color:var(--bad)}.field-error{font-weight:600;color:var(--bad)}.tick{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)}.tick input{width:22px;min-height:22px;height:22px;accent-color:var(--navy)}.ticks{display:grid;gap:10px;margin:14px 0}.card,.panel{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}.panel{margin:16px 0}.login{display:grid;width:min(420px,calc(100vw - 32px));gap:14px}.row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.hint,.empty{color:var(--text)}.notice{margin:12px 0;padding:12px 14px;border-radius:8px;font-weight:600}.notice.error{color:var(--bad);background:var(--bad-bg)}.notice.info{background:var(--mist)}.notice.success{color:var(--ok);background:var(--ok-bg)}.warning{margin-top:16px;padding:14px;border-radius:8px;color:var(--due);background:var(--due-bg)}.filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:16px}.filters .grow{flex:1 1 220px}.tabs{display:flex;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--white)}.tabs button{border:0;border-radius:0}.tabs button[aria-pressed=true]{color:var(--white);background:var(--navy)}.booking-list,.block-list,.invoices,.timeline{margin:0;padding:0;list-style:none}.booking-row,.block-list li{display:grid;grid-template-columns:64px 1fr auto auto;gap:4px 14px;align-items:center;margin-bottom:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);color:inherit;background:var(--white);text-decoration:none}.block-list li{grid-template-columns:64px 1fr auto}.code{font-size:1.25rem;font-style:italic;font-weight:800;color:var(--navy)}.main{display:grid;gap:2px}.main span{color:var(--text)}.amount{font-weight:700;font-variant-numeric:tabular-nums}.badges{display:flex;flex-wrap:wrap;gap:6px}.badge{padding:4px 8px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}.badge.paid{color:var(--ok);background:var(--ok-bg)}.badge.due{color:var(--due);background:var(--due-bg)}.badge.muted{color:var(--text);background:var(--mist)}.detail-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.facts{display:grid;gap:0;margin:0 0 8px}.facts div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.facts dt{font-weight:700;color:var(--navy)}.facts dd{margin:0}.lines,.changes{width:100%;border-collapse:collapse;background:var(--white);font-variant-numeric:tabular-nums}.lines th,.lines td,.changes th,.changes td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}.lines td:last-child{text-align:right}.lines .total th,.lines .total td{font-weight:800}.changes caption{padding:8px 0;font-weight:700;text-align:left}.changes .changed td:last-child{font-weight:800;color:var(--navy)}.invoices li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--line)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.timeline li{padding:8px 0;border-bottom:1px solid var(--line)}.timeline time{display:inline-block;min-width:210px;color:var(--text)}.result{margin:12px 0}.when{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}.when .days{grid-column:1 / -1;margin:0;font-weight:800;color:var(--navy)}.boat-options{display:grid;gap:8px}.boat-option{display:grid;grid-template-columns:auto 64px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);font-weight:500;color:var(--ink);cursor:pointer}.boat-option input{width:22px;min-height:22px;height:22px;accent-color:var(--navy)}.boat-option.selected{border-color:var(--navy)}.boat-option.booked{opacity:.55;background:var(--mist);cursor:not-allowed}@media(max-width:720px){.when,.grid{grid-template-columns:1fr 1fr}.booking-row{grid-template-columns:52px 1fr auto}.booking-row .badges{grid-column:2 / -1}.facts div{grid-template-columns:1fr;gap:2px}.timeline time{display:block}}@media(max-width:420px){.when,.grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
