/* The speed limits page: Transport for NSW's zones on the site's own maps,
   drawn at build time by lib/harbour/zones-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, in daylight, so
   each limit has its own strong hue and carries its number as well. The map's
   land, water, labels, scale and key come from site.css. */
.zones h2 { margin: 2rem 0 .4rem; }
.zones h3 { margin: 1.4rem 0 .3rem; font-size: 1.05rem; }
.zones-lede { max-width: 46rem; font-size: 1.08rem; }
.zones-caution { max-width: 46rem; margin: .7rem 0 0; padding: .55rem .8rem; background: var(--card); border: 1px solid var(--canvas-2); border-left: 4px solid var(--emblem); font-size: .95rem; }
.zones-note { margin: .4rem 0 0; color: var(--slate); font-size: .95rem; }
.zones-credit { font-size: .95rem; color: var(--slate); }

.zones-answers { max-width: 46rem; margin: .6rem 0 0; }
.zones-answers dt { margin-top: .9rem; font-weight: 700; color: var(--navy-2); }
.zones-answers dd { margin: .15rem 0 0; }
.zones-rules, .zones-sheets { max-width: 46rem; margin: .7rem 0 0; padding-left: 1.2rem; }
.zones-rules li, .zones-sheets li { margin: .45rem 0; }

.zones-map { margin: 1.1rem 0 0; max-width: 40rem; }
.zones-map h3 { margin: 0 0 .35rem; }
.zones-map figcaption { font-size: .82rem; color: var(--slate); margin-top: .35rem; }

/* The limits, on the map and beside each row: the same hue in both. */
.z-k4 { --zone: #E8590C; }
.z-k6, .z-k7 { --zone: #B7950B; }
.z-k8 { --zone: #2B8A3E; }
.z-k10, .z-k15 { --zone: #6741D9; }
.z-kx { --zone: var(--slate); }
.z-speed { fill: var(--zone); fill-opacity: .38; stroke: var(--zone); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.z-wash { stroke: var(--navy-2); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.z-hatch { stroke: var(--navy-2); stroke-opacity: .75; }
.z-sec { fill: #C92A2A; fill-opacity: .55; stroke: #8E1420; stroke-width: .7px; vector-effect: non-scaling-stroke; }
.z-sign circle { fill: #FFF; stroke: var(--zone); }
.z-sign text { fill: var(--ink); font-weight: 800; }
.z-sign-wash circle { stroke: var(--navy-2); }
.z-sign-wash path { fill: none; stroke: var(--navy-2); stroke-linecap: round; }
.z-sign-sec circle { fill: #C92A2A; stroke: #FFF; }
.z-sign-sec rect { fill: #FFF; }
.dm-club { fill: var(--navy); stroke: #FFF; }
.lbl-zone { fill: var(--slate); font-weight: 600; }
.lbl-club { fill: var(--navy); }
.lbl-mark { fill: var(--ink); }

/* A sign 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; }

.zone-list { list-style: none; max-width: 46rem; margin: .5rem 0 0; padding: 0; }
.zone-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: .75rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--canvas-2); scroll-margin-top: 1rem; }
.zone-row:target, .zone-table tr:target { background: rgba(201, 165, 92, .22); }
.zone-limit { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: .22rem solid var(--zone); border-radius: 50%; background: #FFF; font-size: .62rem; line-height: 1; color: var(--slate); }
.zone-limit b { font-size: 1.15rem; color: var(--ink); }
.zone-limit-sec { position: relative; border-color: #C92A2A; background: #C92A2A; }
.zone-limit-sec::after { content: ""; position: absolute; width: 60%; height: .5rem; background: #FFF; }
.zone-text strong { display: block; }
.zone-text p { margin: .15rem 0 0; font-size: .92rem; color: var(--slate); }
.zone-text summary { cursor: pointer; padding: .5rem 0; font-size: .9rem; line-height: 1.75rem; color: var(--navy-2); }

.zone-table { margin: .7rem 0 0; }
.zone-table th, .zone-table td { vertical-align: top; }
.zone-table tr { scroll-margin-top: 1rem; }
.zone-sub { display: block; margin-top: .1rem; font-size: .85rem; color: var(--slate); }
.zone-differs td:last-child { font-weight: 600; }
@media (max-width: 560px) {
  .zone-table { font-size: .9rem; }
  .zone-table th, .zone-table td { padding: .35rem .45rem; }
}
@media print {
  .zones-map, .zone-row, .zone-table tr { break-inside: avoid; }
}