.year{background:var(--canvas);color:var(--ink);font-size:16px;min-height:100%;padding:24px;border-radius:20px}.year *{box-sizing:border-box}.year h1{font-size:clamp(26px,5vw,38px)}.year h2{font-size:22px}.year h3{font-size:24px;margin:12px 0}.year p{margin:8px 0;line-height:1.5}.year button,.year select,.year-add{min-height:44px;min-width:44px;font:inherit;border:1px solid var(--fog);border-radius:24px;background:var(--surface);color:var(--ink);padding:10px 16px}.year button{cursor:pointer}.year button:disabled{opacity:.45;cursor:default}.year :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.year a{color:inherit;text-decoration:none}.year-header,.year-month-control{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.year-header label{display:flex;align-items:center;gap:8px}.year-modes,.year-filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.year button[aria-pressed=true]{background:var(--cyan);color:var(--canvas);border-color:var(--cyan)}.year-invitations{background:var(--surface);border:1px solid var(--fog);border-radius:18px;padding:16px}.year-invitations ul{display:flex;gap:16px;overflow:auto;list-style:none;padding:0}.year-invitations li{min-width:220px}.year-timeline{border-left:1px solid var(--fog);margin-left:24px}.year-month{position:relative;padding:0 0 28px 32px;display:grid;grid-template-columns:64px 1fr;gap:16px}.year-month:before{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);left:-5px;top:26px}.year-month abbr{text-decoration:none;font-size:16px;color:var(--fog)}.year-card{display:block;position:relative;overflow:hidden;border-radius:20px;min-height:210px;padding:24px;margin:12px 0;border-left:4px solid var(--year-accent);background:linear-gradient(100deg,color-mix(in srgb,var(--canvas) 65%,transparent),color-mix(in srgb,var(--canvas) 90%,transparent)),var(--year-image) center/cover;overflow-wrap:anywhere}.year [data-category=work]{--year-accent:var(--violet);--year-image:url('../img/hero/lineup-stage.jpg')}.year [data-category=family]{--year-accent:var(--coral);--year-image:url('../img/hero/crew-night-beach.jpg')}.year [data-category=travel]{--year-accent:var(--green);--year-image:url('../img/hero/home-ship.jpg')}.year [data-category=sport]{--year-accent:var(--amber);--year-image:url('../img/hero/port-cove.jpg')}.year [data-category=events]{--year-accent:var(--blue);--year-image:url('../img/hero/lineup-stage.jpg')}.year-category{font-size:16px;border-bottom:3px solid var(--year-accent);padding-bottom:4px}.year-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.year-chips span{padding:5px 10px;border-radius:20px;background:var(--surface);color:var(--ink)}.year-add{display:flex;align-items:center;justify-content:center;background:var(--cyan);color:var(--canvas)!important;font-weight:700;margin-top:24px;min-height:56px}.year-empty{text-align:center;padding:48px 16px}.year-weekdays,.year-days,.year-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.year-weekdays{text-align:center;margin:16px 0;font-size:16px}.year-week{border-bottom:1px solid var(--fog);padding:8px 0}.year-day{padding:4px!important;border-radius:12px!important;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px}.year-day-count{font-size:12px;border-radius:50%;background:var(--canvas);color:var(--ink);padding:2px 4px}.year-bars{margin-top:6px}.year-bar{min-height:44px;padding:10px 6px;border-left:4px solid var(--year-accent);border-radius:6px;background:var(--surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.year-selected ul{list-style:none;padding:0}.year-map{height:420px;min-height:300px;border-radius:20px;overflow:hidden}.year-map-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.year-saved{color:var(--fog)}.year.reduced-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){.year *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:520px){.year{padding:12px}.year-month{display:block;padding-left:20px}.year-timeline{margin-left:6px}.year-card{padding:18px}.year-days,.year-weekdays,.year-bars{gap:0}.year-week,.year-weekdays{min-width:308px}.year [data-year-content]{overflow-x:auto}.year-modes button{flex:1}.year-month-control{gap:4px}.year-month-control h2{font-size:18px}}

/* Compact hub surfaces share the navy theme tokens. */
.year{box-sizing:border-box;width:100%;max-width:880px;min-width:0;margin:auto;padding:16px;color:var(--ink);background:var(--canvas)}
.year *,.year *:before,.year *:after{box-sizing:border-box;min-width:0}
.year h1{font-size:26px;line-height:1.15;margin:0;background:none;padding:0}
.year h2{font-size:16px;line-height:1.3;margin:12px 0 8px}
.year h3{font-size:14px;line-height:1.3;margin:0}
.year a{color:inherit;text-decoration:none}
.year button,.year select,.year summary{min-height:44px;min-width:44px;font:inherit;cursor:pointer}
.year button,.year select{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);padding:8px 12px}
.year button[aria-pressed=true],.year button[aria-selected=true]{background:var(--cyan);color:var(--canvas);border-color:var(--cyan)}
.year :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.year small{color:var(--fog);font-size:11px}
.year svg{width:20px;height:20px}
.year summary{display:flex;align-items:center;justify-content:center;list-style:none}
.year summary::-webkit-details-marker{display:none}

.year{border-radius:0}.year-header{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px}.year-header h1{grid-column:1}.year-header label{grid-row:2;white-space:nowrap}.year-header select{font-size:12px;width:100%;max-width:200px}.year-header [data-calendar-download]{grid-column:2;grid-row:1;padding:0;font-size:22px}.year-header [data-calendar-status]{grid-column:1/-1;font-size:12px;margin:0}.year-header [data-calendar-status]:empty{display:none}.year-modes,.year-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;max-width:100%;margin:12px 0}.year-modes button{flex:1}.year-filters button{flex:0 0 auto;font-size:11px;padding:8px 10px}.year-timeline{border:0;margin:0}.year-month{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:0 0 8px 0}.year-month:before{left:14px;top:32px;width:1px;height:calc(100% - 24px);border-radius:0;background:var(--fog)}.year-month:after{content:'';position:absolute;left:11px;top:28px;width:7px;height:7px;border-radius:50%;background:var(--cyan)}.year-month h2{margin:4px 0}.year-month abbr{font-size:10px;color:var(--fog)}.year-card{min-height:84px;margin:0 0 6px;padding:10px 66px 10px 12px;border-radius:10px;border-left-width:2px;display:flex;flex-direction:column;justify-content:center;gap:3px}.year-card h3{font-size:13px;line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.year-category{font-size:10px;border:0;padding:0;text-transform:capitalize;color:var(--ink)}.year-card p{font-size:10px;line-height:1.3;margin:0;color:var(--ink)}.year-chips{position:absolute;right:6px;top:10px;display:flex;flex-direction:column;align-items:end;gap:4px;margin:0}.year-chips span{font-size:9px;padding:3px 5px;background:var(--surface-2);color:var(--ink)}.year-chips .year-lock{background:none;padding:0}.year-invitations{padding:12px}.year [data-year-content]{overflow:visible}.year-week,.year-weekdays{min-width:0}.year-weekdays{font-size:11px}.year-day{min-width:0!important;font-size:12px}.year-bar{font-size:11px;min-width:0}.year-map-list{grid-template-columns:minmax(0,1fr);gap:8px}.year-add{font-size:13px;min-height:44px;margin-top:12px}.year button:disabled{opacity:1;color:var(--fog)}

/* The app main already supplies the mobile gutter. */
main .year{padding:0}
.year-card .year-lock svg{width:12px;height:12px}.year-month>div{min-width:0}

/* One compact toolbar leaves room for five timeline rows on a phone. */
.year-header{display:block}.year-header h1{font-size:24px;margin:0 0 10px}
.year-toolbar{display:flex;align-items:center;gap:4px;width:100%}.year-toolbar .year-modes{flex:1;margin:0;gap:2px;overflow:visible}.year-toolbar .year-modes button{padding:6px 4px;font-size:11px;min-width:44px}.year-toolbar label{flex:0 1 112px;min-width:76px}.year-toolbar select{font-size:10px;padding:6px 2px;width:100%}.year-toolbar [data-calendar-download]{flex:0 0 44px}
.year-filters{margin:8px 0}.year-filters button{padding:6px 8px}
.year-card{min-height:72px;padding:7px 56px 7px 9px;margin-bottom:4px;gap:2px;background-image:linear-gradient(90deg,color-mix(in srgb,var(--canvas) 86%,transparent),color-mix(in srgb,var(--canvas) 65%,transparent)),var(--year-image)}
.year-card p{line-height:1.25}.year-month{padding-bottom:4px}.year-card h3{font-size:12px}.year-chips{top:7px}.year-chips span{font-size:8px;padding:3px 4px}