/* nearby: styles for this area only. Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties only.
   The kit's breakpoints are the only ones used (rule 36): 860 the shell goes phone, 720 a table becomes cards, 640 one column,
   400 the page's cards bleed. The map and its density ramp are drawn by views/nearby/map.js and heat.js; the ramp's colours are
   decided here, in one place, because they are a theme decision, and every square also states its number in words. */

/* ------------------------------------------------------------ the search form */

.nearby-form { display: grid; gap: var(--s2); }
.nearby-form .field { margin: 0; min-inline-size: 0; }
.nearby-form .ask { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: flex-end; }
.nearby-form .ask > .field { flex: 0 1 12rem; }
.nearby-form .ask > .field.grow { flex: 1 1 16rem; }
.nearby-form .ask > .field.country { flex: 0 0 6rem; }
.nearby-form .ask-aside { display: flex; flex-wrap: wrap; gap: var(--s0) var(--s2); align-items: center; justify-content: space-between; }
.nearby-form .ask-aside > p { min-inline-size: 0; overflow-wrap: anywhere; }
/* Three items, three columns: the radius, the website filter and the two switches. One column on a phone. */
.nearby-form .narrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); align-items: end; }
.nearby-form .switches { display: grid; gap: var(--s-1); }
.nearby-form .select, .nearby-form .input { inline-size: 100%; max-inline-size: 100%; }
@media (max-width: 640px) {
  .nearby-form .narrow { grid-template-columns: minmax(0, 1fr); }
  .nearby-form .ask > .field, .nearby-form .ask > .field.grow, .nearby-form .ask > .field.country { flex: 1 1 100%; }
  .nearby-form .ask > .btn { flex: 1 1 100%; }
}

.nearby-problem:empty { display: none; }
/* The kit's .section-head heads each block; inside a stack the gap is the space between blocks, so its own bottom margin is not added to it. */
.nearby-answer > .section-head, .nearby-areas > .section-head { margin-block-end: 0; justify-content: space-between; }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s0); }
.chip-count { margin-inline-start: var(--s-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.layout-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s2); }

/* ---------------------------------------------------------- areas from ikonekt.com */

.nearby-areas { display: grid; gap: var(--s1); }
/* The grid follows the count and never ends in a ragged row: six columns, and each tile spans what its row needs. */
.area-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 861px) {
  .area-grid > .area-tile { grid-column: span 2; }
  .area-grid:has(> :nth-child(1):last-child) > .area-tile { grid-column: span 6; }
  .area-grid:has(> :nth-child(2):last-child) > .area-tile,
  .area-grid:has(> :nth-child(4):last-child) > .area-tile { grid-column: span 3; }
  .area-grid:has(> :nth-child(5):last-child) > .area-tile:nth-child(n + 4) { grid-column: span 3; }
  .area-grid:has(> :nth-child(7):last-child) > .area-tile:nth-child(7) { grid-column: span 6; }
  .area-grid:has(> :nth-child(8):last-child) > .area-tile:nth-child(n + 7) { grid-column: span 3; }
}
@media (max-width: 860px) {
  .area-grid > .area-tile { grid-column: span 3; }
  .area-grid > .area-tile:last-child:nth-child(odd) { grid-column: span 6; }
}
@media (max-width: 640px) {
  .area-grid > .area-tile, .area-grid > .area-tile:last-child:nth-child(odd) { grid-column: span 6; }
}
.area-tile { display: flex; flex-direction: column; gap: var(--s0); min-inline-size: 0; overflow-wrap: anywhere; }
.area-tile.focus { box-shadow: inset 0 0 0 2px var(--accent); }
.area-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s0); }
.area-name { font-size: var(--t1); }
.area-count strong { font-size: var(--t2); font-variant-numeric: tabular-nums; }
.area-fact, .area-when { color: var(--ink-2); font-size: var(--t-1); }
.area-actions { margin-block-start: auto; display: grid; gap: var(--s0); justify-items: start; }
.area-said:empty { display: none; }

/* ------------------------------------------------------------------- the map */

.nearby-map-card { overflow: clip; }
.map {
  position: relative;
  block-size: clamp(300px, 56vh, 560px);
  overflow: hidden;
  background: var(--paper-2);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.map.picking { cursor: crosshair; }
.map:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.map-layer { position: absolute; inset: 0; transform-origin: 50% 50%; }
.map-tiles { position: absolute; inset: 0; }
.map-tiles img { position: absolute; inline-size: 256px; block-size: 256px; max-inline-size: none; -webkit-user-drag: none; }
.map-shapes { position: absolute; inset-block-start: 0; inset-inline-start: 0; pointer-events: none; overflow: visible; }

/* A cased line: the casing is the other colour and wider, because a thin line in any single colour disappears on a map. */
.map-casing { fill: none; stroke: var(--paper); stroke-width: 6; stroke-linejoin: round; }
.map-circle, .map-ring { fill: color-mix(in oklab, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.map-ring.drawing { fill: none; stroke-dasharray: 6 4; }
.map-centre { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.map-corner { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }

/* Two facts on one pin in two channels: the fill is whose it is (or whether it has a website), the dark ring is whether anybody walked there. */
.map-pin { pointer-events: auto; cursor: pointer; stroke: var(--paper); stroke-width: 2; }
.map-pin.free { fill: var(--accent); }
.map-pin.has-site { fill: var(--info); }
.map-pin.ours { fill: var(--ok); }
.map-pin.taken { fill: var(--ink-3); }
.map-pin.walked { stroke: var(--ink); stroke-width: 3; }
.map-pin.selected { stroke: var(--ink); stroke-width: 4; }

.map-sticker { fill: var(--ink); font-size: var(--t-1); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.heat { stroke: var(--paper); stroke-width: 1; }
.heat.hot { stroke: var(--ink); stroke-width: 3; }
.heat-label { fill: var(--ink); font-size: var(--t-1); font-weight: 700; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
/* The density ramp: five steps of the brand colour, light to strong. Squares are filled (SVG), swatches have a background. */
.heat.b0 { fill: color-mix(in oklab, var(--accent) 16%, transparent); }
.heat.b1 { fill: color-mix(in oklab, var(--accent) 32%, transparent); }
.heat.b2 { fill: color-mix(in oklab, var(--accent) 50%, transparent); }
.heat.b3 { fill: color-mix(in oklab, var(--accent) 70%, transparent); }
.heat.b4 { fill: color-mix(in oklab, var(--accent) 90%, transparent); }
.heat-swatch.b0 { background: color-mix(in oklab, var(--accent) 16%, var(--paper)); }
.heat-swatch.b1 { background: color-mix(in oklab, var(--accent) 32%, var(--paper)); }
.heat-swatch.b2 { background: color-mix(in oklab, var(--accent) 50%, var(--paper)); }
.heat-swatch.b3 { background: color-mix(in oklab, var(--accent) 70%, var(--paper)); }
.heat-swatch.b4 { background: color-mix(in oklab, var(--accent) 90%, var(--paper)); }
.heat-swatch { display: inline-block; inline-size: 14px; block-size: 14px; border-radius: 3px; border: var(--rule-w) solid var(--rule-strong); vertical-align: -2px; }
:root[data-theme^="contrast"] .heat-swatch { border-width: 2px; border-color: var(--ink); }

.map-tools { position: absolute; inset-block-start: var(--s1); inset-inline-end: var(--s1); display: grid; gap: var(--s-1); }
.map-tools .icon-btn { background: var(--paper-2); border: var(--rule-w) solid var(--rule-strong); box-shadow: var(--shadow-pop); }
.map-hint, .map-offline { position: absolute; inset-inline-start: var(--s1); inset-block-start: var(--s1); max-inline-size: calc(100% - 4.5rem); margin: 0; padding: var(--s0) var(--s1); background: var(--paper-2); border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--t-1); }
/* Said in the middle, where nothing else on the map is: the hint is at the top, the drawing buttons at the bottom. */
.map-offline { inset-block-start: 50%; inset-inline: var(--s2); max-inline-size: 26rem; margin-inline: auto; transform: translateY(-50%); text-align: center; }
.map-draw { position: absolute; inset-inline: var(--s1); inset-block-end: 2.2rem; display: flex; flex-wrap: wrap; gap: var(--s0); }
.map-draw .btn { box-shadow: var(--shadow-pop); }
.map-credit { position: absolute; inset-block-end: 0; inset-inline-end: 0; margin: 0; padding: 2px var(--s0); background: color-mix(in oklab, var(--paper) 82%, transparent); color: var(--ink-2); font-size: var(--t-2); }

/* ------------------------------------------------------------ the answer */

.nearby-answer > * { min-inline-size: 0; }
.nearby-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s0) var(--s1);
  padding: var(--s1) var(--s2);
  background: var(--accent-wash);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-sm);
}
.nearby-bar-field { display: inline-flex; align-items: center; gap: var(--s0); color: var(--ink-2); }
.nearby-bar-field .select { inline-size: auto; }
/* The bar of ticked rows stays under the top bar while the table scrolls, so ticking forty rows does not mean scrolling back up. */
.sweep-slot:empty { display: none; }
.sweep-slot:not(:empty) { position: sticky; inset-block-start: calc(var(--bar-h, 0px) + var(--s0)); z-index: 3; }
@media (max-width: 400px) {
  /* One inset per side: a tinted box in the page bleeds to the screen's edge and takes the page's pad as its own. */
  .nearby-bar { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); border-radius: 0; border-inline-width: 0; }
}

/* break-word, not anywhere: `anywhere` shrinks a column's minimum to one letter and "hairdresser" would break in the middle. A domain, which can be long, is the one thing allowed to break anywhere. */
.nearby-table td, .nearby-table th { overflow-wrap: break-word; min-inline-size: 0; }
.nearby-table .link { overflow-wrap: anywhere; }
.nearby-table tbody tr.picked td, .nearby-table tbody tr.selected td { background: var(--accent-wash); }
.nearby-table tbody tr.walked > td:first-child { border-inline-start: 3px solid var(--ink-3); }
.nearby-table tbody tr.selected > td:first-child { border-inline-start: 3px solid var(--accent); }
.nearby-table .select { inline-size: 100%; max-inline-size: 16rem; }
.nearby-table .house { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }
.nearby-away { display: block; color: var(--ink-3); }
.visit-cell { display: grid; gap: var(--s-1); min-inline-size: 0; }
.visit-detail { display: grid; gap: var(--s0); margin-block-start: var(--s0); grid-template-columns: minmax(0, 1fr); text-align: start; }
.nearby-yours { text-decoration: underline; text-underline-offset: 3px; }
.street { display: grid; gap: var(--s0); }
.street + .street { margin-block-start: var(--s2); }
.street-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s2); }
.street-head h3 { font-size: var(--t1); overflow-wrap: anywhere; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s2); }
.legend-band { display: inline-flex; align-items: center; gap: var(--s-1); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .nearby-table .select { max-inline-size: none; }
}

/* ------------------------------------------------------------ the overnight scout */

.scout-card { gap: var(--s2); }
.scout-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); }
.scout-row .field { margin: 0; flex: 0 1 12rem; }