/* 52-week season chart, version 2 (#24). Its own small stylesheet, so it doesn't depend on the eight layered stylesheets of seasons.html. */
:root{
  --ink:#122f42; --muted:#5b6f7c; --line:#d3dde3; --paper:#ffffff; --bg:#f4f7f8; --navy:#102d40; --accent:#1f5f86; --teal:#176c7b;
  --prime:#e57f76; --high:#ef9c4c; --value:#f7e297; --quiet:#8ccfb0; --na:#e0e4e7; --cell-ink:#1b2a33;
  --body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --brand:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --sidebar:280px; --resort-col:240px; --type-col:170px; --cell:48px; --row:34px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.4 var(--body)}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px 10px;z-index:50}
[hidden]{display:none!important}

/* Header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px}
.logo{display:inline-grid;gap:5px;text-decoration:none;color:var(--ink)}
.logo-name{font-family:var(--brand);font-weight:500;font-size:19px;line-height:1.1;white-space:nowrap}
.logo-band{display:block;width:100%;height:3px}
.top-note{margin:0;font-size:13px;color:var(--muted)}

/* Page layout: filters on the left, chart fills the rest of the screen width */
.layout{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:16px;padding:14px 18px 22px}
.filters{position:sticky;top:10px;align-self:start;max-height:calc(100vh - 20px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px}
.group{margin:0}
.group-title{font-size:15px;font-weight:700;margin:2px 0 6px}
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";width:0;height:0;border-left:6px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold-body{display:grid;gap:10px;padding-top:6px}
.sub>summary{font-weight:700;font-size:14px}
.indent{padding:6px 0 2px 16px}
.sep{border:0;border-top:1px solid var(--line);width:55%;margin:10px auto}
.fold-body>.sep{margin:2px auto}
.field{display:grid;gap:4px;min-width:0}
.field>label,.field>.label{font-weight:700;font-size:14px}
select,input[type=search],input[type=date]{font:inherit;font-size:15px;width:100%;min-height:38px;padding:5px 10px;border:1px solid #a9b8c1;border-radius:10px;background:#fff;color:var(--ink)}
.hint{margin:0;font-size:12.5px;color:var(--muted);font-weight:400}
.checks{display:grid;gap:3px}
.check{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;line-height:1.3}
.check input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--navy)}
.check.disabled{color:var(--muted);cursor:default}
.segmented{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #a9b8c1;border-radius:10px;overflow:hidden}
.segmented button{font:inherit;font-size:14px;min-height:36px;border:0;border-left:1px solid #a9b8c1;background:#fff;color:var(--ink);cursor:pointer}
.segmented button:first-child{border-left:0}
.segmented button[aria-pressed=true]{background:var(--navy);color:#fff;font-weight:700}
.reset{font:inherit;font-size:14px;min-height:36px;border:1px solid #a9b8c1;border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}

/* Seasons in week ## : the original's list, with counts. It is also the color key. */
.season-list{display:grid;border-top:1px solid var(--line)}
.season-opt{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;font:inherit;font-size:14.5px;text-align:left;color:var(--ink);background:#fff;border:0;border-bottom:1px solid var(--line);padding:8px 10px 8px 8px;cursor:pointer}
.season-opt:hover{background:#f3f7f9}
.season-opt[aria-pressed=true]{background:#eef4f7;font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.season-opt .n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.season-opt[disabled]{cursor:default;color:var(--muted)}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px}
.sw.all{background:linear-gradient(90deg,var(--prime) 25%,var(--high) 25% 50%,var(--value) 50% 75%,var(--quiet) 75%)}
.s-p{background:var(--prime)}.s-h{background:var(--high)}.s-v{background:var(--value)}.s-q{background:var(--quiet)}.na{background:var(--na)}

/* Above the chart: title and count left, vacation week middle, trip dates right */
.main{min-width:0}
.chart-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px) minmax(0,1fr);gap:10px 20px;align-items:end;margin-bottom:8px}
.head-left{min-width:0}
.head-right{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;justify-self:end;width:min(100%,340px)}
.span-2{grid-column:1/-1}
h1{font-size:24px;line-height:1.2;margin:0}
.count{font-size:16px;font-weight:600;margin:4px 0 0}
.count b{font-weight:800}
.alert{margin:4px 0 6px;padding:8px 12px;background:#fdecea;border:1px solid #e8a39b;border-radius:10px;font-size:14.5px;color:#7a1f16;max-width:70rem}
.note{margin:4px 0 6px;padding:7px 12px;background:#fff8e1;border:1px solid #e9d38c;border-radius:10px;font-size:14px;max-width:70rem}
/* "To see more resorts": one-click chips for the filter that hides matches (owner, 2026-10-12) */
.more{margin:0 0 6px;display:grid;gap:4px;font-size:14px;max-width:70rem}
.more:focus{outline:none}
.more:empty{display:none}
.more .note{margin:0}
.more-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0}
.more-t{font-weight:700}
.more-ok{color:var(--muted)}
.more-chip{font:inherit;font-size:13.5px;min-height:34px;padding:3px 12px;border:1px solid #a9b8c1;border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.more-chip:hover{background:#f3f7f9}
.more-chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.more-chip[disabled]{cursor:default;color:var(--muted);background:#f3f7f9}
.more-chip b{font-weight:800}
.more-chip .go{font-weight:700;text-decoration:underline;margin-left:4px}
.source{font-size:12.5px;color:var(--muted);max-width:70rem}

/* The grid: tight rows, sticky resort column and week header, big scroll bars */
.grid-wrap{overflow:auto;overscroll-behavior:auto;max-height:calc(100vh - 40px);min-height:240px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  scrollbar-width:auto;scrollbar-color:#5b7180 #e3e9ec}
.grid-wrap::-webkit-scrollbar{width:18px;height:18px}
.grid-wrap::-webkit-scrollbar-track{background:#e3e9ec}
.grid-wrap::-webkit-scrollbar-thumb{background:#5b7180;border-radius:9px;border:3px solid #e3e9ec}
.grid-wrap::-webkit-scrollbar-thumb:hover{background:#3d5361}
.grid{border-collapse:separate;border-spacing:0;font-size:12.5px}
.grid th,.grid td{padding:0;border-bottom:1px solid #fff;border-right:1px solid #fff;white-space:nowrap}
.grid thead th{position:sticky;top:0;z-index:3;background:#eef3f5;border-bottom:1px solid var(--line);font-weight:600}
.grid .wk{min-width:var(--cell);width:var(--cell);height:42px;text-align:center;line-height:1.1}
.grid .wk b{display:block;font-size:13.5px}
.grid .wk small{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.grid .wk .yr{display:block;font-size:10px;font-weight:800;color:var(--navy)}
.grid .wk.sel{background:var(--navy);color:#fff}
.grid .wk.sel small,.grid .wk.sel .yr{color:#d6e4ec}
.grid .wk.today b::after{content:"today";display:block;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#b3261e}
.grid .wk.sel.today b::after{color:#ffd2cc}
.grid .wk.trip{box-shadow:inset 0 -4px 0 var(--accent)}
.grid .res{position:sticky;left:0;z-index:2;background:var(--paper);font-weight:400;min-width:var(--resort-col);max-width:var(--resort-col);text-align:left;padding:3px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:normal;line-height:1.25;vertical-align:top}
.grid .typ{position:sticky;left:var(--resort-col);z-index:2;background:var(--paper);min-width:var(--type-col);max-width:var(--type-col);padding:2px 8px;border-right:1px solid var(--line);border-bottom:1px solid #edf1f3;white-space:normal;line-height:1.2;font-size:12.5px;color:var(--teal);font-weight:600}
.grid thead .res,.grid thead .typ{z-index:4;background:#eef3f5;vertical-align:middle}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13.5px}
.sort{font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:none;border:0;padding:2px 0;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.sort .arrow{font-size:11px;color:var(--muted)}
.sort[aria-pressed=true] .arrow{color:var(--accent)}
.show-all{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer}
.show-all input{width:15px;height:15px;margin:0;accent-color:var(--navy)}
.res-name{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;line-height:1.3}
.res-name .nw{white-space:nowrap}
.res-name:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.res-loc{display:block;font-size:12px;color:var(--muted)}
.res-bldg{display:block;font-size:12px;color:var(--teal);margin-top:1px;text-align:right;font-weight:600}
.typ.gap,.res .gap{color:#8a4b00;font-weight:600}
.typ.pick{color:#a32b1f;font-weight:700}
.grid td.c{height:var(--row);text-align:center;font-weight:400;color:var(--cell-ink);font-variant-numeric:tabular-nums}
.grid td.na{color:#66737a}
.grid td.w53{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.7) 0 4px,transparent 4px 9px)}
.grid td.sel{box-shadow:inset 2px 0 0 var(--navy),inset -2px 0 0 var(--navy)}
.grid td.trip{outline:2px solid var(--accent);outline-offset:-2px}
.grid tbody tr:hover td.typ{background:#f1f6f8}
.empty{padding:24px;font-size:15px}

/* Resort details */
dialog{width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 40px);border:1px solid var(--line);border-radius:14px;padding:0;color:var(--ink)}
dialog::backdrop{background:rgba(16,45,64,.35)}
.detail-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px}
.detail-head h2{margin:0;font-size:21px;line-height:1.2}
.detail-head h2 .brand{display:block;font-size:14px;font-weight:600;color:var(--muted);line-height:1.3}
.detail-head h2 .rname{display:block}
.close{font-size:26px;line-height:1;width:40px;height:40px;border:1px solid #a9b8c1;border-radius:10px;background:#fff;cursor:pointer;flex:none}
#detailBody{padding:12px 16px 18px}
#detailBody .addr{margin:0 0 12px}
#detailBody h3{font-size:16px;margin:10px 0 4px}
#detailBody dl{display:grid;grid-template-columns:max-content 1fr;gap:5px 16px;margin:0 0 12px}
#detailBody dt{font-weight:700}#detailBody dd{margin:0}
#detailBody ul.limits{margin:4px 0 12px;padding:8px 12px 8px 30px;background:#fff6e0;border:1px solid #e3c487;border-radius:10px;font-size:14.5px;color:#5c3d05}
#detailBody ul.limits li+li{margin-top:6px}
.pts{border-collapse:collapse;width:100%;font-size:13.5px;margin:6px 0 12px}
.pts th,.pts td{border:1px solid var(--line);padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums}
.pts th:first-child,.pts td:first-child{text-align:left}
.pts thead th{background:#eef3f5}

.foot{padding:14px 20px 26px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--paper)}
.foot p{max-width:70rem;margin:0 0 6px}
.foot .visits{max-width:none;margin:8px 0 0;text-align:right;font-variant-numeric:tabular-nums}

/* Narrower screens */
@media (max-width:1100px){
  .chart-head{grid-template-columns:1fr 1fr}
  .head-left{grid-column:1/-1}
  .head-right{justify-self:stretch;width:auto}
}
@media (max-width:820px){
  :root{--resort-col:140px;--type-col:104px;--cell:50px;--row:24px}
  .layout{grid-template-columns:minmax(0,1fr);padding:10px}
  .filters{position:static;max-height:none}
  .chart-head{grid-template-columns:1fr}
  .grid-wrap{max-height:80vh}
  .res-loc,.res-bldg{font-size:11px}
  .res-name{font-size:12.5px}
  .grid{font-size:12px}
  h1{font-size:21px}
}

/* Round 3 (#24): week/date switch, today box, 52 mark, crowns and dots */
.mode{display:grid;grid-template-columns:1fr 1fr;border:1px solid #a9b8c1;border-radius:10px;overflow:hidden;margin-bottom:8px}
.mode-opt{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;padding:7px 4px;cursor:pointer;background:#fff}
.mode-opt+.mode-opt{border-left:1px solid #a9b8c1}
.mode-opt input{position:absolute;opacity:0;pointer-events:none}
.mode-opt:has(input:checked){background:var(--navy);color:#fff}
.mode-opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:-3px}
.mode-body{display:grid;gap:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.two input[type=date]{padding:5px 6px;font-size:14px}
.trip-note{margin:0;font-size:14px;font-weight:600}
.trip-note.warn{color:#b3261e}
.trip-note small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.link{font:inherit;font-size:13px;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;justify-self:start}
.quick{margin:0 0 4px;font-size:13px;color:var(--muted)}
.subhead{margin:8px 0 3px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.subhead::after{content:"";flex:1;border-top:1px solid var(--line)}
.segmented.small button{min-height:30px;font-size:13px}
.tree-group{margin:2px 0 6px}
.tree-group>.check{font-weight:700}
.tree-group .checks{padding-left:22px;margin-top:2px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap}
.title{display:flex;align-items:center;gap:12px}
.mark{flex:none}
.today{text-align:center;line-height:1.2}
.today .d{display:block;font-size:14px;color:var(--muted)}
.today .w{display:block;font-size:22px;font-weight:800;color:var(--navy)}
.crown{display:inline-block;width:15px;height:11px;vertical-align:-1px;fill:#c99a1a;stroke:#8a6a0e;stroke-width:1;margin-left:4px}
.crown.half{fill:none;stroke:#b08414;stroke-width:1.4}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:5px;vertical-align:0}
.dot.aff{background:#7b4fa8}.dot.assoc{background:#e07b1a}
.keys{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--ink)}
.keys span{display:inline-flex;align-items:center;gap:4px}
.keys .crown,.keys .dot{margin-left:0}
.grid .wk.part small.n{color:var(--accent);font-weight:700}
.grid .tot{position:sticky;right:0;z-index:2;min-width:72px;background:#eef3f5;text-align:center;font-weight:700;border-left:1px solid var(--line)}
.grid thead .tot{z-index:4}
.grid .nt{position:sticky;z-index:2;width:72px;min-width:72px;max-width:72px;background:#eef3f5;text-align:center;font-weight:700}
.grid .nt.wd{right:72px;border-left:1px solid var(--line)}.grid .nt.we{right:0;border-left:1px solid var(--line)}
.grid thead .nt{z-index:4}.grid thead .nt small{display:block;font-weight:400;font-size:11px}
@media (max-width:700px){.grid .nt{position:static}}
.grid td.c.part{opacity:.92}

/* Round 4 (#24): tighter season list, quieter "Weeks shown", Today label */
.season-opt{padding:2px 10px 2px 8px;font-size:14px;line-height:1.2}
.season-opt .n{font-size:12.5px}
.small-label{font-size:12.5px!important;font-weight:600!important;color:var(--muted)}
.segmented.small{border-radius:8px}
.segmented.small button{min-height:26px;font-size:12px}
.today .t{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
select:disabled{background:#f0f3f5;color:var(--muted)}
.typ .bldg{font-weight:400;color:var(--muted)}

/* Round 5 (#24): week/date controls in the header */
.timebox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:end;flex:1 1 520px;max-width:660px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.timebox .mode{margin:0;align-self:end;min-width:190px}
.timebox .mode-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:4px 12px;align-items:end}
.timebox #dateBox{grid-template-columns:minmax(0,1fr)}
.timebox .two{grid-template-columns:1fr 1fr}
.timebox .trip-note,.timebox #clearDates{grid-column:1/-1}
@media (max-width:1100px){.timebox{grid-template-columns:1fr;max-width:none}.timebox .mode{min-width:0}}

.notice{margin-left:5px;color:#b3261e;font-size:13px;cursor:help}
.keys .notice{margin-left:0}

#collectionBox .check{align-items:flex-start;min-height:20px}
#collectionBox .check input{margin-top:2px}
/* Shown only when nothing in Collections is selected (planning #39): calm, small, design-system danger red */
.coll-msg{margin:0 0 4px;font-size:12.5px;font-weight:400;line-height:1.3;color:#b3261e}
.lbl .soon{display:block;font-size:11.5px;line-height:1.2}
.lbl .dot{margin-left:4px;margin-right:0}

/* Round 6 (#24): steady week/date box, wider week picker, Building column */
.timebox{grid-template-columns:200px minmax(0,1fr);min-height:86px;align-items:center}
.timebox .mode{min-width:0}
.timebox .mode-body{grid-template-columns:minmax(330px,1.6fr) minmax(170px,1fr);min-height:70px;align-content:end}
.timebox #dateBox{grid-template-columns:minmax(0,1fr)}
.date-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:20px}
.date-foot .trip-note{margin:0;text-align:right;font-size:14px}
.trip-note.warn{color:#b3261e}
.grid .bld{position:sticky;left:var(--resort-col);z-index:2;background:var(--paper);min-width:var(--bld-col);max-width:var(--bld-col);padding:2px 8px;border-right:1px solid var(--line);border-bottom:1px solid #edf1f3;white-space:normal;line-height:1.2;font-size:12px;color:var(--teal)}
.grid thead .bld{z-index:4;background:#eef3f5}
.grid.has-bld .typ{left:calc(var(--resort-col) + var(--bld-col))}
:root{--bld-col:150px}
@media (max-width:820px){:root{--bld-col:96px}}
.lbl .sub{display:block;font-size:11.5px;line-height:1.2;color:var(--muted)}

/* Keep the week/date box the same size in both modes, so the toggle never moves */
.timebox{height:112px;align-items:center}
.timebox .mode-body{height:92px;min-height:0;align-content:center}
@media (max-width:1100px){.timebox{height:auto}.timebox .mode-body{height:auto}}

/* WorldMark (Club Pass) week groups: three shades of purple, most to fewest points */
.w-h{background:#9f86cc}.w-m{background:#c4b3e3}.w-l{background:#e7e0f4}
.keys .sw{width:14px;height:14px;border-radius:3px}

.segmented.small{grid-template-columns:auto repeat(6,minmax(0,1fr))}
.segmented.small button{padding:0 3px}

/* Round 7 (#24): CWA tag; keep the header from overlapping at mid widths */
.cwa{display:inline-block;margin-left:5px;padding:0 4px;border:1px solid var(--teal);border-radius:4px;font-size:10px;font-weight:700;line-height:14px;color:var(--teal);vertical-align:1px}
.chart-head{flex-wrap:wrap}
.timebox{flex:1 1 560px;min-width:0}
.today{flex:0 0 auto;margin-left:auto}
@media (max-width:1500px){.timebox .mode-body{grid-template-columns:minmax(260px,1.4fr) minmax(170px,1fr)}}

/* Round 8 (#24): darker week/date box that fits its contents, Today at the top right */
.timebox{height:auto;min-height:104px;background:#dfe7ec;border-color:#c3d0d8}
.timebox .mode-body{height:auto;min-height:84px}
.timebox select,.timebox input[type=date]{background:#fff}
.top{position:relative}
.top .today{margin-left:auto;text-align:right}
.top .today .t,.top .today .d{display:inline;margin-right:6px}
.top .today .w{display:block;font-size:20px}
.keys .cwa{margin-left:0}

/* Let the week/date box shrink to the space it has */
.chart-head{flex-wrap:wrap}
.timebox{max-width:100%;flex:1 1 520px;grid-template-columns:minmax(150px,190px) minmax(0,1fr)}
.timebox .mode-body{grid-template-columns:minmax(0,1.5fr) minmax(150px,1fr)}
.timebox .mode-body > .field{min-width:0}
.timebox select{min-width:0;text-overflow:ellipsis}

/* Planning #36: the loading indicator (design system Progress) sits over the top of the chart, in a slot that takes no space (never covering the whole page);
   one shared tooltip for the week cells */
.status-slot{display:flex;justify-content:center;align-items:flex-start;height:0}
.chart-status{position:relative;z-index:6;top:54px;flex:0 1 420px;margin:0 16px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:0 4px 16px rgba(16,45,64,.12)}
.cell-tip{position:fixed;z-index:30;max-width:min(340px,calc(100vw - 16px));padding:5px 9px;border-radius:6px;background:var(--navy);color:#fff;font:12.5px/1.35 var(--body);pointer-events:none;box-shadow:0 4px 14px rgba(16,45,64,.25)}
.grid td.c:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* Filters round (owner, 2026-10-12): Reset link, search label tools, countries info, Collections separator */
.filters-wrap{position:relative}
.reset-link{position:absolute;top:3px;left:70px;z-index:2;font-size:13px}
.label-row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.label-row>label{font-weight:700;font-size:14px;min-width:0}
.label-tools{display:inline-flex;align-items:center;gap:8px}
.tip-wrap{display:inline-flex}
.info-btn{font:inherit;font-size:12px;font-weight:700;width:18px;height:18px;line-height:16px;padding:0;border-radius:50%;border:1px solid var(--accent);background:#fff;color:var(--accent);cursor:pointer}
.info-btn:hover,.info-btn[aria-expanded=true]{background:var(--accent);color:#fff}
.country-tip{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(22,51,66,.18);padding:10px 12px}
.country-tip[hidden]{display:none}
.country-tip .tip-title{margin:0 0 6px;font-size:12.5px;font-weight:700;line-height:1.3}
.country-tip ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.country-tip .link{font-size:13.5px}
.coll-sep{width:40%;margin:4px auto}
#collectionBox .checks>.coll-sep{margin:3px auto}
.timebox{max-width:880px}
@media (min-width:601px){.timebox .mode-body{grid-template-columns:minmax(0,1.8fr) minmax(205px,1fr)}}
@media (max-width:600px){.timebox .mode-body{grid-template-columns:minmax(0,1fr)}}

/* Week box polish (owner, 2026-10-12): one compact grid, equal control heights, labels above, no jump between By Week and By Dates.
   Both bodies sit in the same grid cell (the hidden one keeps its space), so the box is the same size in both modes.
   Clear Dates sits above the date inputs, on the End Date label line. */
.timebox{height:auto;min-height:0;display:grid;grid-template-columns:176px minmax(0,1fr);gap:0 14px;align-items:end;padding:8px 12px 10px;flex:1 1 520px;max-width:760px}
.timebox .mode{align-self:end;height:36px;margin:0}
.timebox .mode-opt{padding:0 4px;font-size:14px}
.timebox .mode-body,.timebox #weekBox,.timebox #dateBox{grid-area:1/2;position:relative;height:auto;min-height:0;align-content:end;align-items:end;gap:4px 12px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.timebox .mode-body[hidden]{display:grid!important;visibility:hidden}
.timebox #dateBox{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.timebox .field{gap:4px;align-content:end}
.timebox .field>label,.timebox .field>.label{font-size:13px;font-weight:700;line-height:18px;color:var(--ink)}
.timebox .small-label{font-size:13px!important;font-weight:700!important;line-height:18px;color:var(--ink)!important}
.timebox select,.timebox input[type=date],.timebox .segmented.small button,.timebox .segmented.small{height:36px;min-height:36px;box-sizing:border-box}
.timebox select,.timebox input[type=date]{font-size:14px;padding:0 8px;width:100%}
.timebox .segmented.small{height:36px;border-radius:10px}
.timebox .segmented.small button{font-size:12.5px;height:100%;min-height:0;padding:0 2px}
.timebox #clearDates{position:absolute;top:0;right:0;font-size:13px;line-height:18px}
.timebox #clearDates[hidden]{display:block!important;visibility:hidden}
.timebox .trip-note{grid-column:1/-1;margin:0;min-height:18px;font-size:13px;line-height:18px;text-align:left}
@media (max-width:1100px){.timebox{grid-template-columns:minmax(0,1fr);gap:8px;max-width:none}.timebox .mode{max-width:none}.timebox .mode-body,.timebox #weekBox,.timebox #dateBox{grid-area:2/1}}
@media (max-width:600px){.timebox #weekBox{grid-template-columns:minmax(0,1fr)}}
.timebox .two{display:contents}
.timebox{max-width:820px}
.timebox .mode-body,.timebox #weekBox{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:600px){.timebox #weekBox{grid-template-columns:minmax(0,1fr)}}

/* Location header (owner, 2026-10-12): title with Explore and Clear links after it, the long name as a subheader */
.label-row{justify-content:flex-start;gap:10px}
.label-row>.field-title{font-weight:700;font-size:14px}
.field label.sub-label{display:block;font-size:12px;font-weight:400;color:#5b6770;margin:2px 0 4px}

/* Polish round 2 (owner, 2026-10-12): smaller week box, inputs on one line in both modes, Clear Dates above the By Dates button,
   Location subheader closer, Explore popup centred and condensed with a Choose From list */
.timebox{padding:5px 10px 6px;grid-template-rows:18px auto;gap:0 14px;align-items:start}
.timebox #weekBox,.timebox #dateBox{grid-area:1/2/3/3;align-self:start;align-content:start;align-items:start}
.timebox #clearDates{position:static;grid-area:1/1;justify-self:end;width:50%;text-align:center;height:18px;padding:0}
.timebox .mode{grid-area:2/1;align-self:start;margin-top:4px}
@media (max-width:1100px){
  .timebox{grid-template-rows:auto auto auto;gap:4px}
  .timebox #clearDates{min-height:36px;height:auto;display:inline-flex;align-items:center;justify-content:center}
  .timebox .mode{margin-top:0}
  .timebox #weekBox,.timebox #dateBox{grid-area:3/1}
}
.dot-sep{color:#5b6770;margin:0 -2px}
.label-row{gap:8px;align-items:center}
.label-tools{gap:8px}
.field label.sub-label{margin:-4px 0 3px;line-height:1.25}
.country-tip{padding:6px 10px}
.country-tip .tip-title{text-align:center;margin:0 0 1px;line-height:1.2}
.country-tip .tip-choose{text-align:center;font-size:12.5px;font-weight:600;margin:0 0 3px;line-height:1.2}
.country-tip ul{gap:0;padding-left:22px}
.country-tip .link{font-size:13.5px;line-height:1.3}
/* Round 5 (owner, 2026-10-13): Select All / Clear for Collections, shorter drop-downs, tighter option lists, space under the last country */
.coll-tools{margin:2px 0 4px;display:flex;align-items:center;gap:8px;font-size:13px}
.coll-tools .link{font-size:13px}
.field label.sub-label + select{margin-top:0}
select,input[type=date]{min-height:32px;padding-top:3px;padding-bottom:3px}
.timebox select,.timebox input[type=date],.timebox .segmented.small,.timebox .segmented.small button{height:32px;min-height:32px}
#radius,#bedrooms{max-width:170px}
select option{padding:1px 8px;min-height:0;line-height:1.2;font-size:13.5px}
.country-tip ul{padding-bottom:1.3em}
/* Week headers are buttons in By Week mode (planning #44); they fill the header cell, so the cell keeps its size */
.grid .wk-btn{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;width:100%;height:100%;display:block;text-align:center;line-height:inherit;cursor:pointer}
.grid .wk-btn:hover b{text-decoration:underline}
.grid .wk-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.grid .wk.sel .wk-btn:focus-visible{outline-color:#fff}
/* Weekday and Weekend sort buttons sit in the 72px header cell */
.grid thead .nt .sort{font-size:12px;gap:1px;padding:0;max-width:100%;white-space:nowrap}
.grid thead .nt .sort .arrow{font-size:8px;letter-spacing:-1px}

/* Phone fix (owner, 2026-10-17): vh counts the screen with the browser's toolbars hidden, so on iPhone the
   bottom of the chart box sat under Safari's toolbar and the last rows could not be seen. svh counts the
   screen with the toolbars showing; browsers without svh ignore these rules and keep the vh heights above. */
.grid-wrap{max-height:calc(100svh - 40px)}
@media (max-width:820px){.grid-wrap{max-height:80svh}}

/* Phone fix (owner, 2026-10-17): on narrow screens the Weekday and Weekend columns stop sticking to the right
   (line 209), but their headers must still stay at the top like the week headers. */
@media (max-width:700px){.grid thead .nt.wd,.grid thead .nt.we{position:sticky;top:0;right:auto;z-index:3}}

/* Filters and dates (owner, 2026-10-17). The half-screen of blank space under the filters is gone: on wider screens the
   filter panel scrolls on its own, and a soft shadow at its top or bottom edge shows when more filters are out of view
   (the paper-colored covers scroll with the content and hide each shadow once that end is reached). */
.filters{padding-bottom:12px;background:
  linear-gradient(var(--paper),var(--paper)) top/100% 16px no-repeat local,
  linear-gradient(var(--paper),var(--paper)) bottom/100% 16px no-repeat local,
  linear-gradient(rgba(16,45,64,.16),rgba(16,45,64,0)) top/100% 10px no-repeat scroll,
  linear-gradient(to top,rgba(16,45,64,.16),rgba(16,45,64,0)) bottom/100% 10px no-repeat scroll,
  var(--paper)}
@media (max-width:820px){.filters{background:var(--paper)}}
/* iPhone date boxes keep their own minimum width and spill into each other; let them shrink to their column, with a gap */
.timebox #dateBox .field{min-width:0}
.timebox input[type=date]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){.timebox input[type=date]{-webkit-appearance:none;appearance:none;text-align:left}.timebox input[type=date]::-webkit-date-and-time-value{text-align:left}}
@media (max-width:600px){.timebox #dateBox{column-gap:14px}}

/* Chart height (owner, 2026-10-19): on a computer seasons-v2.js sets --gw-max so the whole chart box fits the window
   under the header; without it (or on a phone) the heights above apply. */
@media (min-width:821px){.grid-wrap{max-height:var(--gw-max,calc(100svh - 40px))}}