/* directory/src/style.css

   The dealer directory's one sheet, served at /dealers/_/style.css after the
   site's own stylesheet. Tippet, 12 November 2026.

   SCOPED. Every rule sits under .dir, the class on each directory page's
   <main>, so nothing here can touch the site's Tailwind classes or its nav
   and footer, which the chrome bundle mounts outside <main>. Class names like
   .grid and .label would otherwise meet Tailwind's own. Nesting is plain CSS,
   every current browser reads it.

   THE SITE'S LOOK. Colours, fonts and radii are the site's own tokens from
   src/styles/tokens.css, read as var(), never copied. If Jazz's red moves,
   the directory moves with it. The width is the site's container-x class on
   .sheet. The grammar is still the studio's light directory, hairline grids,
   small caps labels and pills, with the red spent once a screen on the claim.

   No oxford commas, no em dashes. */

.tip {
  position: absolute; z-index: 60; max-width: 260px; padding: 10px 12px;
  background: var(--color-bg); border: 1px solid var(--color-line-strong); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.08); font: 13px/1.4 var(--font-body); color: var(--color-ink);
  b { display: block; font-weight: 500; font-size: 14px; }
  span { display: block; color: var(--color-ink-dim); }
  .pill { margin-top: 8px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); text-decoration: none; color: var(--color-ink); font-weight: 500; }
}

.dir {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 40px;

  a { color: inherit; }
  .sheet { padding-top: 96px; }
  @media (max-width: 767px) { .sheet { padding-top: 80px; } }

  .dir-sub { font-size: 13px; color: var(--color-ink-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .dir-sub a { text-decoration: none; }
  .dir-sub a:hover { color: var(--color-ink); }
  .crumbs { font-size: 13px; color: var(--color-ink-dim); padding: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .sep { display: inline-block; width: 5px; height: 5px; border-radius: 1.5px; background: var(--color-ink-dim); opacity: 0.45; vertical-align: middle; margin: 0 5px; }

  .label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-dim); margin: 0 0 10px; display: block; }

  .hero { padding: 24px 0 24px; border-bottom: 1px solid var(--color-line); }
  .hero h1 { font-family: var(--font-display); font-size: clamp(30px, 6vw, 48px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 10px; }
  .hero p { color: var(--color-ink-muted); margin: 0; max-width: 62ch; }
  .hero p + p { margin-top: 8px; }

  section { padding: 28px 0; border-bottom: 1px solid var(--color-line); }
  section h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 14px; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
  .grid > * { border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 14px; text-decoration: none; display: block; min-height: 72px; }
  .grid > a:hover { background: var(--color-surface); }
  .grid .name { font-weight: 500; display: block; }
  .grid .sub { font-size: 13px; color: var(--color-ink-dim); display: block; }
  .grid .off { color: var(--color-ink-dim); }

  .stats { display: flex; flex-wrap: wrap; border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; }
  .stats > div { flex: 1 1 150px; padding: 14px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-bottom: -1px; }
  .stats > div:last-child { border-right: 0; }
  .stats b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .stats span { font-size: 13px; color: var(--color-ink-dim); }

  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
  th { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-dim); }
  .scroll { overflow-x: auto; }

  .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); background: var(--color-bg); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
  .pill:hover { background: var(--color-surface); }
  .pill.fill { background: var(--color-red); border-color: var(--color-red); color: #fff; }
  .pill.fill:hover { background: var(--color-red-deep); }

  .doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .doors.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .door { border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 16px; }
  .door.first { border-color: var(--color-red); background: var(--color-red-soft); }
  .door h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
  .door p { font-size: 14px; color: var(--color-ink-muted); margin: 0 0 12px; }
  a.door.link { text-decoration: none; display: block; }
  a.door.link:hover { background: var(--color-surface); }
  a.door.first.link:hover { background: var(--color-red-soft); }

  .tag { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px dashed var(--color-line-strong); color: var(--color-ink-muted); margin: 0 6px 6px 0; }
  .tag.brand { border-style: solid; color: var(--color-ink); }
  .brands { margin-top: 6px; }
  .brands .label { display: inline-block; margin: 0 8px 6px 0; }
  .source { font-size: 13px; color: var(--color-ink-dim); margin-top: 10px; }
  .source a { color: var(--color-ink-muted); }
  .dir-note { font-size: 13px; color: var(--color-ink-dim); padding-top: 18px; }

  .search { width: 100%; max-width: 440px; min-height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); padding: 0 18px; font: inherit; margin: 0 0 12px; background: var(--color-bg); color: var(--color-ink); }
  .find { margin-top: 8px; }
  .found { list-style: none; margin: 0; padding: 0; max-width: 520px; border-top: 1px solid var(--color-line); }
  .found:empty { border: 0; }
  .found li a { display: block; padding: 10px 4px; border-bottom: 1px solid var(--color-line); text-decoration: none; }
  .found li a:hover { background: var(--color-surface); }
  .found li b { font-weight: 500; display: block; }
  .found li span { font-size: 13px; color: var(--color-ink-dim); }
  .found li.none { padding: 10px 4px; color: var(--color-ink-dim); font-size: 14px; }

  .map { margin: 0 0 18px; }
  .map svg { display: block; width: 100%; height: auto; max-height: 70vh; }
  .map .st path { fill: var(--color-surface-2); stroke: #fff; stroke-width: 0.8; transition: fill 160ms; }
  .map .st.on path { fill: var(--color-ink); }
  .map .st:hover path, .map .st:focus path { fill: var(--color-ink-dim); }
  .map .st.on:hover path, .map .st.on:focus path { fill: var(--color-ink-muted); }
  .map .cty { fill: none; stroke: var(--color-line-strong); stroke-width: 0.15; vector-effect: non-scaling-stroke; }
  .map .out { fill: var(--color-surface); fill-opacity: 0.6; stroke: var(--color-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .map .dots { fill: none; stroke: var(--color-ink); stroke-opacity: 0.5; stroke-linecap: round; }
  .map .hl { fill: var(--color-red); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
  .map .me { fill: var(--color-red); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .map figcaption { font-size: 13px; color: var(--color-ink-dim); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
  .map .key { display: inline-block; width: 10px; height: 10px; border-radius: 2.5px; background: var(--color-surface-2); margin-left: 8px; }
  .map .key.on { background: var(--color-ink); margin-left: 0; }
  .map.small { width: 140px; flex: none; margin: 0; }

  .hero.dealer { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
  @media (max-width: 560px) { .hero.dealer { flex-direction: column-reverse; } .map.small { width: 96px; } }

  .score-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; }
  .score-head b { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
  .score-head span { color: var(--color-ink-muted); font-size: 14px; max-width: 46ch; }
  @media (max-width: 560px) { .score-head { flex-direction: column; gap: 6px; } }
  .bar { display: flex; gap: 3px; height: 10px; margin: 0 0 18px; }
  .bar .seg { border-radius: 3px; background: repeating-linear-gradient(135deg, var(--color-surface) 0 4px, var(--color-bg) 4px 8px); border: 1px dashed var(--color-line-strong); overflow: hidden; }
  .bar .seg.read { background: var(--color-surface); border: 1px solid var(--color-line-strong); }
  .bar .seg i { display: block; height: 100%; background: var(--color-ink); }
  ol.parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
  ol.parts li { padding: 14px 0; border-bottom: 1px solid var(--color-line); }
  ol.parts .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  ol.parts .ph b { font-weight: 500; }
  ol.parts .worth { font-size: 13px; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); white-space: nowrap; }
  ol.parts li.unread .worth { border-style: dashed; color: var(--color-ink-dim); }
  ol.parts li.unread > p:first-of-type, ol.parts li.unread b { color: var(--color-ink-muted); }
  ol.parts p { margin: 6px 0 0; font-size: 14px; }
  ol.parts p.sub { font-size: 13px; color: var(--color-ink-dim); }
}

/* Pixel's spec, 12 November 2026. The state map on the same near black plate
   as the homepage DealerMap, src/components/sections/DealerMap.jsx in the
   j13 session's files, so the homepage, the area pages and the directory read
   as one system: the site's --color-surface-dark, #0A0A0A, a sharp upper left corner and --radius-card-lg on
   the other three, --color-red-on-dark for dots with lighter blending so a
   city becomes a glow and not a smudge. If DealerMap's plate moves, move
   this with it. */
.dir {
  .map:not(.us):not(.small) { background: var(--color-surface-dark); border-radius: 0 var(--radius-card-lg) var(--radius-card-lg) var(--radius-card-lg); padding: 16px; }
  .map:not(.us):not(.small) .cty { stroke: rgba(255, 255, 255, 0.07); }
  .map:not(.us):not(.small) .out { fill: none; stroke: rgba(255, 255, 255, 0.35); }
  .map:not(.us):not(.small) .dots { stroke: var(--color-red-on-dark); stroke-opacity: 0.55; mix-blend-mode: plus-lighter; }
  .map:not(.us):not(.small) .hl { fill: #fff; stroke: var(--color-red-on-dark); }
  .area-link { margin: 4px 0 8px; font-weight: 500; }
  .area-link a { color: var(--color-red); text-decoration: none; }
  .area-link a:hover { text-decoration: underline; }

  .numbers .lead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .numbers .lead b { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
  .numbers .lead span { color: var(--color-ink-muted); }
  .numbers .row { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 4px 0 6px; }
  .numbers .row div b { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .numbers .row div span { font-size: 12px; color: var(--color-ink-dim); }
  .numbers .row.census div b { color: var(--color-ink-muted); }
  .numbers .label { margin-top: 18px; }

  .town-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
  @media (min-width: 640px) { .town-cards { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .town-cards { grid-template-columns: repeat(3, 1fr); } }
  .town-cards a { display: block; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-card); text-decoration: none; }
  .town-cards a:hover { background: var(--color-surface); }
  .town-cards b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
  .town-cards .count { display: block; font-size: 14px; color: var(--color-ink-muted); margin-top: 2px; }
  .town-cards .kinds { display: block; font-size: 12px; color: var(--color-ink-dim); margin-top: 6px; }

  .az-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
  .az-bar a { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 8px; font-size: 13px; text-decoration: none; }
  .az-bar a:hover { background: var(--color-surface); }
  ol.az { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
  @media (min-width: 1024px) { ol.az { columns: 5; } }
  ol.az li { break-inside: avoid; }
  ol.az li a { display: flex; justify-content: space-between; gap: 8px; min-height: 36px; align-items: center; border-bottom: 1px solid var(--color-line); text-decoration: none; font-size: 14px; }
  ol.az li a:hover { color: var(--color-red); }
  ol.az li a .n { color: var(--color-ink-dim); font-variant-numeric: tabular-nums; }
  ol.az .az-l { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--color-ink-dim); padding: 14px 0 4px; scroll-margin-top: 96px; }
  .az-more { margin-top: 12px; }
  .az-more summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); font-weight: 500; font-size: 14px; margin-bottom: 12px; }
}

/* Aster's score head, 12 November. The parts that were read lead, each out
   of its own worth, until most parts are read. */
.dir {
  .score-parts-head { margin: 0 0 12px; }
  .score-parts-head .read-part { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 4px 0; }
  .score-parts-head .read-part b { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
  .score-parts-head .read-part span { font-family: var(--font-display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .score-parts-head .read-count { color: var(--color-ink-muted); font-size: 14px; margin: 6px 0 0; }
}