/* Harbour guide: Transport for NSW's moorings, marinas, wharves and ramps on
   the site's own maps, drawn at build time by lib/harbour/guide-map.js. Its
   own file because site.css sits at its weight budget; linked from the
   page's front matter and nowhere else. Phone first: the page is read on
   the water. The map's land, water, labels, scale and key come from
   site.css, which every page with a map loads. */
.guide h2 { margin: 2rem 0 .4rem; }
.guide h3 { margin: 1.4rem 0 .3rem; font-size: 1.05rem; }
.guide-note { margin: .5rem 0 0; color: var(--slate); font-size: .95rem; max-width: 46rem; }
.guide-map { margin: .9rem 0 0; max-width: 34rem; }
.guide-map-wide { max-width: 44rem; margin-top: 1.2rem; }
.guide-map h3 { margin: 0 0 .35rem; }
.guide-map figcaption { font-size: .82rem; color: var(--slate); margin-top: .35rem; }
.guide-spots { margin: .9rem 0 .5rem; padding-left: 1.2rem; font-size: 1rem; }
.guide-spots li { margin: .35rem 0; }
.guide-credit { font-size: .95rem; color: var(--slate); }

/* Tables: a name and its small print in the first column, short facts in
   the rest. The bays table is three short columns and stays a table on a
   phone. The marina and ramp tables are wider, so under 560px each row
   becomes a block with its facts labelled, the way a phone reads a card;
   and should a table still outgrow a phone it scrolls inside .table-scroll,
   never the page. */
.guide-table { margin: .9rem 0 0; }
.guide-table th, .guide-table td { vertical-align: top; }
.guide-table td { overflow-wrap: anywhere; }
.guide-table td:first-child { min-width: 7.5rem; }
.guide-sub { display: block; font-size: .82rem; font-weight: 400; color: var(--slate); margin-top: .1rem; }
.guide-sub a { color: inherit; }
.guide-maps { white-space: nowrap; }
.guide-spots .guide-maps, .guide-sub .guide-maps { font-size: .85em; }
.guide-bays td:nth-child(2), .guide-ramps td:nth-child(2) { font-variant-numeric: tabular-nums; }
/* On a wide screen the name column gets a third of the table, so a marina's
   name and its small print do not stack three lines deep. */
@media (min-width: 561px) {
  .guide-marinas td:first-child, .guide-ramps td:first-child { width: 36%; }
}
@media (max-width: 560px) {
  .guide-table { font-size: .9rem; }
  .guide-table th, .guide-table td { padding: .35rem .45rem; }
  .guide-table td:first-child { min-width: 6.5rem; }
  .guide-stack, .guide-stack tbody, .guide-stack tr, .guide-stack td { display: block; }
  .guide-stack thead { display: none; }
  .guide-stack tr { background: var(--card); border: 1px solid var(--canvas-2); border-top: 3px solid var(--emblem); margin-top: .6rem; padding: .5rem .75rem .6rem; }
  .guide-stack td, .guide-stack td:first-child { border: 0; padding: .15rem 0; min-width: 0; }
  .guide-stack td[data-label] { display: flex; flex-wrap: wrap; gap: 0 .45rem; align-items: baseline; }
  .guide-stack td[data-label]::before { content: attr(data-label); flex: none; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
  .guide-stack td[data-label] .guide-sub { flex-basis: 100%; margin-top: 0; }
}

/* Symbols: a mooring is a pink dot, as the buoys are pink; a marina a hollow
   navy square; a ramp an orange triangle; a wharf a grey diamond; the club
   a filled navy square. Shapes differ as well as colours, with a white edge
   to lift each off the water, as the course maps' marks do. */
.dm-moor { fill: #C9397A; stroke: #FFF; }
.dm-marina { fill: #FFF; stroke: var(--navy-2); }
.dm-ramp { fill: var(--laid); stroke: #FFF; }
.dm-wharf { fill: var(--slate); stroke: #FFF; }
.dm-club { fill: var(--navy); stroke: #FFF; }
/* A symbol links to its row: a clear circle round it is the tap target, and
   the row it lands on is tinted so the eye finds it. */
.dm-link { cursor: pointer; }
.dm-link:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.dm-hit { fill: transparent; }
.guide-table tr { scroll-margin-top: 1rem; }
.guide-table tr:target, #wharves:target { background: rgba(201, 165, 92, .22); }
#wharves { scroll-margin-top: 1rem; }
.lbl-bay { fill: #7E1F4C; }
.lbl-marina { fill: var(--navy-2); font-weight: 600; }
.lbl-ramp { fill: var(--slate); font-weight: 600; }
.lbl-club { fill: var(--navy); }
.lbl-mark { fill: var(--ink); }

@media print {
  .guide-map { break-inside: avoid; }
  .guide-table tr { break-inside: avoid; }
}

/* The boat length filter over the marinas table: a slider whose leftmost
   stop means every length, so the page opens on all the marinas and the
   first nudge starts the filter. Hidden until the script runs, since the
   table is the whole list without it. A row the boat is too long for is
   hidden; a row that might take it, or states no limit, stays with a tag.
   The slider is two rems tall for a thumb on the water. */
.guide-filter { margin: .9rem 0 0; padding: .7rem .9rem .6rem; max-width: 34rem; background: var(--card); border: 1px solid var(--canvas-2); border-top: 3px solid var(--navy-2); border-radius: 2px; }
.guide-filter[hidden] { display: none; }
.guide-filter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-weight: 600; }
.guide-filter-head output { color: var(--navy-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-filter input[type="range"] { display: block; width: 100%; height: 2rem; margin: .3rem 0 0; accent-color: var(--navy-2); cursor: pointer; }
.guide-filter-ends { display: flex; justify-content: space-between; margin-top: -.2rem; font-size: .78rem; color: var(--slate); }
.guide-filter-count { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .45rem 0 0; font-size: .92rem; color: var(--slate); }
.guide-filter-count:empty { display: none; }
.guide-filter-all { background: var(--card); color: var(--navy-2); border: 1px solid var(--navy-2); border-radius: 2px; font: inherit; font-size: .85rem; font-weight: 600; padding: .25rem .7rem; cursor: pointer; }
.guide-filter-all:hover { background: var(--canvas); }
.guide-filter-all[hidden] { display: none; }
.guide-fit { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border: 1px solid var(--navy-2); border-radius: 2px; color: var(--navy-2); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.guide-fit[hidden] { display: none; }
.guide-marinas tr[hidden] { display: none; }