body.app { padding-bottom: 76px; }
.shell { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "crew" "main"; }
.tripbar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 14px; }
.tripbar .loading { padding: 40px 0; font: italic 22px var(--fell); color: var(--sound); }
.tripbar .cartouche { flex: 1; min-width: 0; margin: 5px; padding: 14px 16px; }
.kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sound); margin: 0 0 4px; }
.tripbar h1 { font-size: clamp(30px, 6vw, 46px); overflow-wrap: anywhere; }
.tripbar .dest { margin: 6px 0 2px; font-size: 15px; }
.tripbar .dest em { font-size: 22px; }
.tripbar .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--sound); margin: 0; }
.tb-actions { margin-top: 10px; gap: 4px; }
.rose-btn { background: none; border: 0; padding: 0; cursor: pointer; flex: none; display: none; }
.rose-btn:focus-visible { outline-offset: -4px; }
.crew { grid-area: crew; border-top: 1px solid var(--grat); border-bottom: 1px solid var(--grat); padding: 10px 0; display: flex; align-items: center; gap: 10px; overflow-x: auto; }
.crew-h { display: none; }
.crew-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.crew-list li { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.crew-list .nm { display: none; }
.crew-list .st { display: none; }
.crew > .row { flex-wrap: nowrap; margin-left: auto; }
.crew .sync:empty { display: none; }
.crew .sync { margin: 0; white-space: nowrap; }
.tag { --c: var(--ink); display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--c); color: var(--c); font: 600 12px var(--mono); background: var(--paper); flex: none; }
main { grid-area: main; padding: 22px 0 40px; min-width: 0; outline: 0; }

.legend { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--water); border-top: 1px solid var(--ink); box-shadow: 0 -3px 0 -2px var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.legend a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; text-decoration: none; color: var(--sound); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.legend a .num { display: none; }
.legend a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 3px 0 var(--mag); }
.legend a[aria-current] .i { color: var(--mag); }
.legend .dot { position: absolute; top: 9px; right: calc(50% - 18px); width: 8px; height: 8px; background: var(--buoy); border: 1px solid var(--ink); transform: rotate(45deg); }

@media (min-width: 560px) { .rose-btn { display: block; } }
@media (min-width: 880px) {
  body.app { padding-bottom: 0; }
  .shell { grid-template-columns: 200px minmax(0, 1fr) 210px; grid-template-areas: "bar bar bar" "legend main crew"; column-gap: 40px; }
  .tripbar { padding-top: 26px; }
  .rose-btn svg { width: 150px; height: 150px; }
  .legend { grid-area: legend; position: sticky; top: 20px; align-self: start; display: block; border: 0; box-shadow: none; background: none; padding: 24px 0 0; }
  .legend a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; font-size: 14px; letter-spacing: .02em; text-transform: none; border-bottom: 1px solid var(--grat); padding: 0 4px; }
  .legend a .num { display: inline-block; width: 26px; font: italic 17px var(--fell); color: var(--sound); }
  .legend a .lbl { font: 23px var(--fell); color: var(--ink); }
  .legend a[aria-current] { box-shadow: inset 3px 0 0 var(--mag); padding-left: 12px; }
  .legend .dot { position: static; margin-left: auto; }
  .crew { grid-area: crew; display: block; border: 0; padding: 24px 0 0; position: sticky; top: 20px; align-self: start; overflow: visible; }
  .crew-h { display: block; font-size: 23px; border-bottom: 1px solid var(--grat); padding-bottom: 8px; margin-bottom: 4px; }
  .crew-list { flex-direction: column; gap: 0; margin-bottom: 14px; }
  .crew-list li { border-bottom: 1px dashed var(--grat); padding: 7px 0; font-size: 14px; }
  .crew-list .nm { display: block; flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .crew-list .st { display: block; color: var(--mag); }
  .crew > .row { margin: 0; flex-wrap: wrap; }
  .crew .sync { white-space: normal; margin-top: 12px; }
  main { padding-top: 30px; }
}

/* shared bits for tabs */
.sec { margin-bottom: 34px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 16px; }
.sec-h h2 { margin: 0; }
.note { border-left: 3px solid var(--buoy); padding: 8px 0 8px 14px; margin: 0 0 20px; font-size: 14px; }
.empty { padding: 26px 0; color: var(--sound); font-size: 14px; }
.empty .it { color: var(--ink); font-size: 22px; display: block; margin-bottom: 4px; }
.linkbox { padding: 12px; background: var(--paper); border: 1px dashed var(--ink); overflow-wrap: anywhere; font-size: 13px; }
.who { display: grid; gap: 8px; }
.who .btn { justify-content: flex-start; }
.edit-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.edit-people li { display: flex; gap: 8px; }
.steps { display: flex; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sound); margin-bottom: 14px; flex-wrap: wrap; }
.steps b { color: var(--mag); }
.bar-m { height: 8px; background: var(--paper); border: 1px solid var(--ink); position: relative; }
.bar-m i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.tick { display: inline-flex; color: var(--mag); }

/* where */
.choice { display: grid; gap: 14px; }
.opt { display: grid; gap: 6px; text-align: left; padding: 20px; background: var(--water); border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; margin: 4px; cursor: pointer; color: var(--ink); font: 14px var(--mono); }
.opt:hover { background: var(--paper); }
.opt .it { font-size: 28px; }
@media (min-width: 700px) { .choice { grid-template-columns: 1fr 1fr; } }
.prefs .chip small { color: inherit; opacity: .75; font-size: 12px; margin-left: 4px; }
.months .chip span { min-width: 56px; justify-content: center; }
.answered { list-style: none; margin: 14px 0 0; padding: 0; }
.answered li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--grat); }
.answered li .tag { width: 30px; height: 30px; font-size: 11px; }
.answered li.yes .muted { color: var(--mag); }
.picks { list-style: none; margin: 0; padding: 0; position: relative; }
.pick { padding: 18px 0 20px; border-bottom: 1px solid var(--grat); }
.pick-h { display: flex; gap: 14px; align-items: center; position: relative; margin-bottom: 8px; }
.pick-h h3 { margin: 0; font-size: 28px; }
.pick-h p { margin: 0; }
.rk { font: 600 26px/1 var(--mono); color: var(--mag); width: 28px; text-align: center; }
.pick .ring { position: absolute; left: -16px; top: 50%; width: 60px; height: 60px; transform: translateY(-50%); fill: none; stroke: var(--mag); stroke-width: 1.6; stroke-dasharray: 164; stroke-dashoffset: 0; pointer-events: none; }
.blurb { font-size: 14px; max-width: 62ch; }
.warn { color: var(--wreck); }
.matches { display: grid; gap: 5px; margin: 12px 0 14px; max-width: 420px; }
.mt { display: grid; grid-template-columns: 90px 1fr 42px; gap: 10px; align-items: center; font-size: 12px; }
.mt span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt .n { text-align: right; color: var(--sound); }
.picks.fog .pick { opacity: 0; transform: translateY(8px); filter: blur(5px); transition: opacity .7s, transform .7s, filter .9s; }
.picks.fog.clear .pick { opacity: 1; transform: none; filter: none; }
.picks.fog.clear .pick:nth-child(2) { transition-delay: .15s; } .picks.fog.clear .pick:nth-child(3) { transition-delay: .3s; } .picks.fog.clear .pick:nth-child(4) { transition-delay: .45s; } .picks.fog.clear .pick:nth-child(5) { transition-delay: .6s; }
.picks.fog .ring { stroke-dashoffset: 164; transition: stroke-dashoffset 1s .9s; }
.picks.fog.clear .ring { stroke-dashoffset: 0; }
.lock { padding: 18px 0; border-bottom: 1px solid var(--ink); }
.results { list-style: none; padding: 0; margin: 12px 0; }
.res { display: block; width: 100%; text-align: left; padding: 12px 6px; min-height: 44px; background: none; border: 0; border-bottom: 1px dashed var(--grat); font: 14px var(--mono); color: var(--ink); cursor: pointer; }
.res:hover { background: var(--paper); }
.big { font-size: clamp(42px, 8vw, 72px); margin: 0; }
.chosen .kicker { margin-bottom: 0; }
.clim { margin: 20px 0 0; }
.clim-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; max-width: 560px; }
.clim .m { display: grid; justify-items: center; gap: 3px; font-size: 11px; padding: 4px 0; }
.clim .m.on { background: var(--paper); outline: 1px solid var(--mag); }
.clim .t { font-weight: 600; }
.clim .col { position: relative; width: 6px; height: 64px; background: var(--shoal); }
.clim .col i { position: absolute; left: 0; right: 0; background: var(--ink); }
.clim .m.on .col i { background: var(--mag); }
.clim .w { height: 10px; line-height: 4px; color: var(--sound); letter-spacing: -1px; font-size: 16px; }
.clim .ml { color: var(--sound); }
.clim figcaption { margin-top: 8px; }
@media (max-width: 879px) { .crew > .row [data-act=invite] { display: none; } }

/* when */
.two { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; max-width: 480px; }
.brushes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 18px; }
.brushes .chip i { width: 14px; height: 14px; border: 1px solid var(--ink); display: inline-block; }
.b2 i, .day.v2 { background: var(--ink); color: var(--paper); }
.b1 i, .day.v1 { background: repeating-linear-gradient(135deg, var(--buoy) 0 4px, #F8D766 4px 8px); }
.b0 i { background: var(--paper); }
.day.v0 { background: var(--paper); color: var(--sound); text-decoration: line-through; }
.cals { display: grid; gap: 22px; }
@media (min-width: 1100px) { .cals { grid-template-columns: 1fr 1fr; } }
.cal-m h3 { font-size: 22px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 420px; }
.dow { text-align: center; font-size: 11px; color: var(--sound); padding: 2px 0; }
.day { position: relative; aspect-ratio: 1; min-height: 44px; border: 1px solid var(--grat); background: var(--water); font: 600 14px var(--mono); color: var(--ink); cursor: pointer; padding: 0; }
.day:hover { border-color: var(--ink); }
.day.vx { background: var(--water); }
.day .dn { position: relative; z-index: 1; }
.day .heat { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 4px; background: linear-gradient(90deg, var(--mag) calc(var(--f) * 100%), transparent 0); border: 0; }
.day.v2 .heat { background: linear-gradient(90deg, var(--buoy) calc(var(--f) * 100%), transparent 0); }
.wins { list-style: none; margin: 0; padding: 0; }
.wins li { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px dashed var(--grat); }
.wins p { margin: 4px 0 0; }
main:focus, main:focus-visible { outline: none; }

/* chart */
.chart { width: 100%; height: auto; display: block; font-family: var(--mono); }
.chart .sea { fill: var(--water); }
.chart .grat line { stroke: var(--grat); stroke-width: .6; stroke-dasharray: 2 3; }
.chart .glab text { font-size: 9px; fill: var(--sound); }
.chart .frame { fill: none; stroke: var(--ink); stroke-width: 1; }
.chart .frame2 { fill: none; stroke: var(--ink); stroke-width: .6; }
.chart .course line { stroke: var(--mag); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; }
.chart .times text { font-size: 10.5px; fill: var(--mag); font-weight: 600; paint-order: stroke; stroke: var(--water); stroke-width: 4px; }
.chart .stop circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.chart .stop .num { font-size: 11px; font-weight: 600; fill: var(--ink); }
.chart .stop .lbl { font: italic 15px var(--fell); fill: var(--ink); paint-order: stroke; stroke: var(--water); stroke-width: 4px; }
.chart .scale rect { fill: var(--ink); } .chart .scale rect.w { fill: var(--paper); stroke: var(--ink); stroke-width: .8; }
.chart .scale text, .chart .north text { font-size: 10px; fill: var(--ink); }
.chart .north path { fill: var(--ink); }
.chart.draw .course line { animation: course 1.2s ease-out both; animation-delay: calc(var(--d) * .12s); stroke-dashoffset: 0; }
@keyframes course { from { opacity: 0; } to { opacity: 1; } }

/* plan */
.add .types { margin-bottom: 10px; flex-wrap: wrap; }
.add .types .chip span { gap: 6px; }
.add .types .i { width: 18px; height: 18px; }
.add-row { flex-wrap: wrap; }
.add-row input { flex: 1 1 260px; width: auto; }
.ideas, .sugs { list-style: none; margin: 0; padding: 0; }
.idea { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--grat); }
.idea .ty { color: var(--mag); }
.idea .body p { margin: 2px 0 0; }
.free { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ink); padding: 0 5px; vertical-align: 2px; }
.votes { display: flex; align-items: center; gap: 2px; }
.vb { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--sound); cursor: pointer; }
.vb:hover { border-color: var(--grat); color: var(--ink); }
.vb.on { color: var(--paper); background: var(--ink); }
.sc { min-width: 30px; text-align: center; font-weight: 600; }
.sugs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--grat); }
.day-b { padding: 16px 0 22px; border-bottom: 1px solid var(--grat); }
.day-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; }
.day-h h3 { margin: 0; font-size: 28px; }
.chart-wrap { margin: 6px 0 12px; max-width: 680px; }
.log { list-style: none; margin: 0; padding: 0; max-width: 680px; }
.stop-r { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; }
.stop-r .n { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 12px; font-weight: 600; background: var(--paper); }
.stop-r .t .i { width: 18px; height: 18px; color: var(--mag); margin-right: 4px; }
.stop-r .ctl { display: flex; gap: 4px; align-items: center; }
.stop-r select { width: auto; min-width: 104px; padding: 8px; }
.leg { padding: 2px 0 2px 12px; margin-left: 12px; border-left: 2px dashed var(--mag); font-size: 12px; color: var(--mag); }
.leg .i { width: 16px; height: 16px; }
.leg .muted { color: var(--sound); }
.loop { padding: 14px 0 20px; border-bottom: 1px solid var(--grat); }
.loop-l { columns: 2 220px; margin: 0 0 12px; padding-left: 22px; }
@media (max-width: 520px) { .idea { grid-template-columns: 26px 1fr auto; } .idea > .btn.icon { grid-column: 3; grid-row: 1; } .idea .votes { grid-column: 2 / 4; } .stop-r { grid-template-columns: 30px 1fr; } .stop-r .ctl { grid-column: 2; } }

/* pack */
.who-n { display: grid; grid-template-columns: repeat(3, minmax(0, 110px)); gap: 12px; }
.pack-sum { display: flex; gap: 36px; margin: 4px 0 18px; }
.pack-sum div { display: grid; }
.big-n { font: 600 30px/1.1 var(--mono); }
.pk .sh { width: 24px; height: 24px; color: var(--sound); }
.pk-add { flex-wrap: wrap !important; }
.filt { margin-bottom: 8px; }
.pk-cat h3 { font-size: 22px; margin: 22px 0 4px; border-bottom: 1px solid var(--grat); padding-bottom: 4px; }
.pk { list-style: none; margin: 0; padding: 0; }
.pk li { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px dashed var(--grat); }
.pk .pk-t { flex: 1; }
.pk li.done .pk-t { text-decoration: line-through; color: var(--sound); }
.tickbox { display: flex; align-items: center; gap: 12px; flex: 1; margin: 0; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); cursor: pointer; min-height: 44px; }
.tickbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tickbox .box { width: 24px; height: 24px; border: 1.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; flex: none; }
.tickbox .box .i { width: 18px; height: 18px; opacity: 0; stroke-width: 2.4; }
.tickbox input:checked + .box { background: var(--ink); color: var(--paper); }
.tickbox input:checked + .box .i { opacity: 1; }
.tickbox input:focus-visible + .box { outline: 3px solid var(--buoy); outline-offset: 2px; }
.pk li > .pk-t { padding-left: 2px; }
.tag.sm { width: 28px; height: 28px; font-size: 10px; }
.pk-add { margin: 22px 0 12px; flex-wrap: nowrap; }
.pk-add input[type=text] { flex: 1; }

/* log */
.logpage { background: var(--paper); border: 1px solid var(--ink); padding: 18px 18px 4px; margin-bottom: 30px; }
.logpage h3 { font-size: 24px; }
.today, .tovisit ul { list-style: none; margin: 0; padding: 0; }
.today li, .tovisit li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px dashed var(--grat); }
.tovisit summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 10px; margin-bottom: 14px; }
.st-w { display: grid; justify-items: center; }
.st-w .btn { min-height: 36px; font-size: 12px; opacity: .7; }
.stamp { width: 112px; height: 112px; transform: rotate(var(--r)); color: var(--mag); }
.stamp:nth-child(3n) { color: var(--ink); }
.st-w:nth-child(3n+2) .stamp { color: #2C6E63; }
.st-w:nth-child(3n) .stamp { color: var(--ink); }
.stamp .o { fill: none; stroke: currentColor; stroke-width: 3; }
.stamp .o2 { fill: none; stroke: currentColor; stroke-width: 1.2; }
.stamp text { fill: currentColor; font-family: var(--mono); font-weight: 600; }
.stamp .arc { font-size: 9.5px; letter-spacing: .08em; }
.stamp .dd { font-size: 13px; text-anchor: middle; }
.stamp .yy { font-size: 10px; text-anchor: middle; }
.stamp.faint { opacity: .35; }
.st-w:last-child .stamp { animation: thunk .28s ease-out; }
@keyframes thunk { from { transform: rotate(var(--r)) scale(1.5); opacity: 0; } to { transform: rotate(var(--r)) scale(1); opacity: 1; } }
.plan-page .ro { max-width: 860px; }
.plan-page main { padding-top: 8px; }