:root {
  --ink: #18332f;
  --muted: #667a75;
  --paper: #f5f1e8;
  --cream: #fffdf8;
  --line: #d9ddd5;
  --water: #2f7775;
  --water-deep: #164f4e;
  --sun: #ecad52;
  --available: #d6e8d8;
  --available-weekly: #c4e0c9;
  --partner: #e9f2ef;
  --danger: #a34538;
}
* { box-sizing: border-box; }
.availability-cell { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html { background: var(--paper); color: var(--ink); font-family: "Avenir Next", "Gill Sans", sans-serif; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% -10%, #fff 0, transparent 34%), linear-gradient(135deg, var(--paper), #edf0e8); }
button, input { font: inherit; }
a { color: inherit; }
.waterline { position: fixed; z-index: -1; inset: auto 0 0; height: 32vh; opacity: .35; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 22px, #bdd2cc 24px 25px, transparent 27px 43px); }
.dev-banner { padding: 8px 16px; background: var(--sun); color: #3b2a12; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.login-shell { width: min(1060px, calc(100% - 32px)); min-height: 650px; margin: max(4vh, 24px) auto; display: grid; grid-template-columns: 1fr .8fr; overflow: hidden; border-radius: 28px; background: var(--cream); box-shadow: 0 24px 70px #244b4330; }
.login-card { padding: clamp(40px, 7vw, 90px); align-self: center; }
.brand-mark { color: var(--water); font: 700 60px Georgia, serif; line-height: .6; }
.eyebrow { margin: 20px 0 8px; color: var(--water); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font: 600 clamp(36px, 5vw, 62px)/1.05 Georgia, serif; letter-spacing: -.03em; }
.intro, .section-intro { color: var(--muted); font-size: 18px; line-height: 1.55; }
.login-form { display: grid; gap: 10px; margin-top: 34px; }
.login-form label, .search-panel > label { font-size: 13px; font-weight: 750; }
input { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); padding: 15px 16px; outline: none; }
input:focus { border-color: var(--water); box-shadow: 0 0 0 3px #2f77751c; }
.login-form button, .magic-link { display: flex; justify-content: space-between; border: 0; border-radius: 12px; padding: 15px 18px; background: var(--water-deep); color: white; font-weight: 750; text-decoration: none; cursor: pointer; }
.notice { padding: 12px 14px; border-left: 3px solid var(--sun); background: #f9edd8; font-size: 14px; }
.magic-link { margin-top: 12px; background: var(--sun); color: #30220e; }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 50px; color: white; background: linear-gradient(#8eb3ab 0 52%, #397b7a 52% 100%); }
.login-art p { position: relative; z-index: 2; margin: 0; font: 500 28px/1.35 Georgia, serif; }
.sun { position: absolute; width: 120px; height: 120px; right: 55px; top: 85px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 80px #ffd891; }
.boat { position: absolute; left: 10%; top: 54%; width: 82%; height: 16px; border-radius: 0 0 80% 80%; background: #422e20; transform: rotate(-3deg); }
.boat span { position: absolute; width: 7px; height: 42px; top: -38px; background: #243b35; border-radius: 6px; }
.boat span:first-child { left: 38%; }.boat span:last-child { left: 57%; }
.app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 76px; padding: 0 clamp(18px, 4vw, 60px); border-bottom: 1px solid #ccd5cd; background: #fffdf8cc; backdrop-filter: blur(12px); }
.wordmark { font: 600 21px Georgia, serif; text-decoration: none; }.wordmark span { color: var(--water); font-size: 32px; vertical-align: -4px; }
.app-header nav { display: flex; gap: 8px; }.app-header nav a { padding: 10px 14px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 650; text-decoration: none; }.app-header nav a[aria-current] { color: white; background: var(--water-deep); }
.account { justify-self: end; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }.account button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }.account button:hover { border-color: #dcb9b3; background: #f5dfdc; color: var(--danger); }
.page-shell { width: min(1440px, calc(100% - 36px)); margin: 42px auto 70px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }.page-heading .eyebrow { margin-top: 0; }
.legend { display: flex; gap: 18px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }.legend span { display: flex; align-items: center; gap: 7px; }.legend i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 900; }.legend-none { background: #f0f0e8; border: 1px solid var(--line); }.legend-once { background: var(--available); border: 1px solid #91b79b; color: #317048; }.legend-weekly { background: var(--available-weekly); border: 1px solid #83ad8c; color: #28653b; letter-spacing: -2px; }.legend-partner { background: var(--partner); border: 1px solid #bdd7d0; }
.matrix-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); box-shadow: 0 14px 38px #29463c14; }
.matrix-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.matrix-table th, .matrix-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.matrix-table tr:last-child > * { border-bottom: 0; }.matrix-table tr > *:last-child { border-right: 0; }
.matrix-table thead th { height: 70px; background: #f0f0e8; text-align: center; }.matrix-table thead th span { display: block; color: var(--water); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }.matrix-table thead th strong { font: 600 16px Georgia, serif; }
.time-head, .time-cell { position: sticky; left: 0; z-index: 3; width: 78px; background: #f0f0e8 !important; }.time-cell { color: var(--muted); font-size: 13px; font-weight: 650; text-align: center; }.time-cell span { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-50%); line-height: 1; }
.matrix-table td { height: 66px; padding: 0; vertical-align: stretch; }
.availability-cell { position: relative; width: 100%; min-height: 66px; height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; padding: 6px 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }.availability-cell:not(:disabled):hover, .availability-cell:not(:disabled):focus-visible { box-shadow: inset 0 0 0 2px var(--water); outline: 0; }.availability-cell.is-own { background: var(--available); }.availability-cell.is-weekly { background: var(--available-weekly); }.availability-cell.is-past { background-color: #e7e9e4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%239aa098' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); color: #687068; cursor: not-allowed; box-shadow: inset 0 -1px 0 #c8d0c8; }
.partner-name { padding: 4px 5px; border-radius: 5px; background: var(--partner); color: var(--water-deep); font-size: 12px; font-weight: 750; line-height: 1.15; }.availability-cell.is-past .partner-name { background: #c7cbc4; color: #586058; }.own-check { position: absolute; right: 6px; top: 4px; color: #317048; font-weight: 900; }.weekly-check { letter-spacing: -2px; }.availability-cell.is-past .own-check { color: #687068; }
.matrix-hint { color: var(--muted); font-size: 13px; }.inline-error { padding: 12px; border-radius: 9px; background: #f8dfdb; color: var(--danger); }
.empty-state { padding: 70px 30px; border: 1px dashed #afc2b9; border-radius: 18px; background: #fffdf8a8; text-align: center; }.empty-state h2 { font: 600 27px Georgia, serif; }.empty-state p { color: var(--muted); }.empty-state a { color: var(--water-deep); font-weight: 800; }.empty-icon { color: var(--water); font: 700 60px Georgia, serif; }
.partners-layout { position: relative; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(340px, 1.2fr); gap: clamp(30px, 7vw, 100px); max-width: 1100px; }.partners-layout h1 { font-size: clamp(40px, 5vw, 58px); }
.selected-list, .search-results { display: grid; gap: 9px; margin-top: 28px; }.selected-person, .search-person { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--cream); }.selected-person strong, .person-name { flex: 1; }.remove-form button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 25px; cursor: pointer; }.remove-form button:hover { background: #f5dfdc; color: var(--danger); }
.search-panel { padding: 30px; border-radius: 22px; background: #e8eee8; align-self: start; }.search-box { position: relative; margin-top: 9px; }.search-box span { position: absolute; left: 15px; top: 10px; color: var(--water); font-size: 25px; }.search-box input { width: 100%; padding-left: 44px; }.search-person form { margin-left: auto; }.search-person button { border: 0; border-radius: 9px; padding: 9px 12px; background: var(--water-deep); color: white; font-weight: 700; cursor: pointer; }.already-selected { color: var(--water); font-size: 12px; font-weight: 750; }.search-help, .soft-empty { color: var(--muted); font-size: 14px; }
.profile-shell { width: min(680px, calc(100% - 32px)); margin: clamp(34px, 7vh, 80px) auto; }.profile-card { padding: clamp(30px, 6vw, 64px); border-radius: 24px; background: var(--cream); box-shadow: 0 20px 55px #29463c18; }.profile-card .eyebrow { margin-top: 0; }.profile-form { display: grid; gap: 10px; margin-top: 30px; }.profile-form label { margin-top: 8px; font-size: 13px; font-weight: 750; }.profile-form button { margin-top: 10px; border: 0; border-radius: 12px; padding: 15px 18px; background: var(--water-deep); color: white; font-weight: 750; cursor: pointer; }.profile-email { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; min-height: auto; }.login-card { padding: 45px 28px; }.login-art { display: none; }
  .app-header { grid-template-columns: 1fr auto; padding: 10px 16px; }.app-header nav { grid-row: 2; grid-column: 1 / -1; justify-content: stretch; }.app-header nav a { flex: 1; text-align: center; }.account { gap: 8px; font-size: 12px; }.account button { padding: 7px 9px; }
  .page-shell { width: calc(100% - 24px); margin-top: 28px; }.page-heading { display: block; }.legend { margin-top: 18px; flex-wrap: wrap; }
  .matrix-scroll { margin-right: -12px; border-radius: 14px 0 0 14px; }.matrix-table { min-width: 870px; }.time-head, .time-cell { width: 62px; box-shadow: 3px 0 8px #18332f12; }.matrix-table td { height: 62px; }.availability-cell { min-height: 62px; padding: 5px; }.partner-name { font-size: 11px; }
  .partners-layout { grid-template-columns: 1fr; gap: 35px; }.search-panel { padding: 20px; }
}
@media (prefers-reduced-motion: no-preference) { .login-card, .page-heading, .partners-layout > section { animation: rise .55s both; }.partners-layout > section:nth-child(2) { animation-delay: .1s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } }