/* The Tend UI kit, drawn in HTML (design 01 §B4). Each card is a simplified,
   faithful drawing of a real Tend Demo screen; content/ui.json records which.
   The composition is aria-hidden: its <figure> caption carries the meaning.

   Cards reflow for phones (fewer rows, same type size), never scale down.
   The marks are the final frame: gold loops drawn, leaf ticks placed. Phase 4
   animates them from start states that exist only under .motion-ok. */

.ui { position: relative; width: 100%; max-width: 560px; margin-inline: auto; font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--ink); background: var(--bg-surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; }
.ui-wide { max-width: 680px; }
.ui-narrow { max-width: 420px; }
.ui * { box-sizing: border-box; }
.ui p { margin: 0; max-width: none; }

/* frame pieces */
.ui-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule-faint); }
.ui-title { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); }
.ui-sub { color: var(--stone-600); font-size: 12.5px; }
.ui-body { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--rule-faint); }
.ui-row:first-child { border-top: 0; }
.ui-row-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ui-row-main b { font-weight: 600; }
.ui-more { color: var(--stone-600); font-size: 12.5px; padding-top: var(--space-2); border-top: 1px dashed var(--rule); }
.ui-note { background: var(--marigold-50); color: var(--marigold-700); border: 1px solid var(--marigold-100); border-radius: 8px; padding: var(--space-2) var(--space-2); font-size: 12.5px; }
.ui-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--rule-faint); background: var(--paper); color: var(--stone-600); font-size: 12.5px; }

/* chips: tone carries meaning (leaf done, gold due or a question, marine overdue or severe) */
.ui-chip { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; padding: 2px var(--space-2); border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--mist); color: var(--stone-700); }
.ui-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-chip.plain::before { display: none; }
.t-leaf { background: var(--leaf-50); color: var(--leaf-700); }
.t-gold { background: var(--marigold-50); color: var(--marigold-700); }
.t-marine { background: var(--marine-50); color: var(--marine-700); }
.t-stone { background: var(--mist); color: var(--stone-700); }

/* counts across the top of a card */
.ui-counts { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: var(--space-2); }
.ui-count { background: var(--paper); border: 1px solid var(--rule-faint); border-radius: 10px; padding: var(--space-2) var(--space-2); }
.ui-count b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
.ui-count span { color: var(--stone-600); font-size: 12px; }
.ui-count .k { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone-600); }
.ui-count.t-leaf b { color: var(--leaf-700); }
.ui-count.t-marine b { color: var(--marine-700); }
.ui-count.t-gold b { color: var(--marigold-700); }
.n2 { --n: 2; } .n3 { --n: 3; } .n4 { --n: 4; }

/* the condition scale: the AMF's 1–5 (A07). Dark digits pass AA on every band. */
.ui-cond { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; font-weight: 700; font-size: 13px; color: var(--ink); }
.c1 { background: var(--condition-1); color: var(--on-ink); }
.c2 { background: var(--condition-2); }
.c3 { background: var(--condition-3); }
.c4 { background: var(--condition-4); }
.c5 { background: var(--condition-5); color: var(--on-ink); }
.ui-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); }
.ui-scale span { display: grid; place-items: center; height: 30px; border-radius: 7px; background: var(--mist); color: var(--stone-700); font-weight: 600; }
.ui-scale .on { background: var(--marigold-500); color: var(--ink); box-shadow: inset 0 0 0 2px var(--marigold-700); }
.ui-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-1); }
.ui-seg span { display: grid; place-items: center; height: 30px; border-radius: 7px; border: 1px solid var(--rule); color: var(--stone-700); font-size: 12.5px; }
.ui-seg .on { background: var(--marigold-50); border-color: var(--marigold-500); color: var(--marigold-700); font-weight: 600; }
.ui-certainty { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: center; color: var(--stone-600); font-size: 12px; }
.ui-meter { height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.ui-meter i { display: block; height: 100%; width: var(--w, 50%); background: var(--marigold-500); border-radius: 3px; }
.w-low { --w: 35%; } .w-mid { --w: 55%; }
.ui-field { border: 1px solid var(--rule); border-radius: 8px; padding: var(--space-2) var(--space-2); background: var(--bg-surface); color: var(--ink); }
.ui-field.on { border-color: var(--ink); }
.ui-label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone-600); }

/* hand-drawn marks (the films' pen): a gold loop around a question or a due
   item, a leaf tick on something done. Final frame by default. */
.mark { position: relative; }
/* Three hand-drawn shapes (wide, mid, round), chosen per mark so no two loops
   look stretched from one path. Corners are full so the line passes around
   the words, never through them. Gold: a question, a gap or something due.
   .leaf: something done or decided (the films circle signatures in leaf). */
.ui-loop { position: absolute; top: -10px; left: -14px; width: calc(100% + 28px); max-width: none; height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.ui-loop path { fill: none; stroke: var(--marigold-500); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ui-loop.leaf path { stroke: var(--leaf-500); }
.ui-count .ui-loop { top: -14px; left: -12px; width: calc(100% + 24px); height: calc(100% + 28px); }
.ui-tick { width: 20px; height: 20px; flex: none; overflow: visible; }
.ui-tick path { fill: none; stroke: var(--leaf-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* agenda (vignette a) */
.ui-agenda { max-width: 480px; padding: 22px var(--space-6); }
.ui-agenda .k { font-size: 13px; color: var(--stone-600); }
.ui-agenda .h { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; margin: 2px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.ui-agenda ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.ui-agenda li { display: grid; grid-template-columns: 1.6em 1fr; gap: 2px var(--space-2); padding: 5px 0; color: var(--stone-700); font-size: 15px; }
.ui-agenda li > span:first-child { color: var(--stone-600); }
.ui-agenda li b { color: var(--ink); font-weight: 600; }
.ui-agenda .q { grid-column: 2; display: block; margin: 14px 14px 14px var(--space-1); padding: 6px 10px; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.ui-agenda .q .ui-loop { top: -14px; left: -16px; width: calc(100% + 32px); height: calc(100% + 28px); }
.ui-agenda .q em { color: var(--ink); }
.ui-agenda .done { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); color: var(--leaf-700); font-weight: 600; font-size: 13px; }

/* calendar */
.ui-cal { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--rule-faint); }
.ui-cal > div { min-height: 64px; padding: var(--space-1); border-right: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); display: grid; align-content: start; gap: var(--space-1); }
.ui-cal > div:nth-child(7n) { border-right: 0; }
.ui-cal .d { font-size: 12px; color: var(--stone-600); }
.ui-cal .dow { min-height: 0; padding: var(--space-2) var(--space-1); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone-600); text-align: center; }
.ui-cal .ev { display: block; padding: 2px var(--space-1); border-radius: 4px; font-size: 12px; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-cal .ev.mark { overflow: visible; }
.ui-cal .today .d { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--leaf-600); color: var(--on-ink); }
.ui-cal .out { background: var(--mist); } /* the next month's days, as the app shades them */
/* Where the card stretches (the home page), the weeks share any height to spare, as the app's month fills the screen. */
.ui:has(> .ui-cal) { display: flex; flex-direction: column; }
.ui-cal { flex: 1; grid-template-rows: auto; grid-auto-rows: 1fr; }
.ui-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 12px; color: var(--stone-600); }
.ui-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.ui-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* lists with a severity edge (Today) */
.ui-edge { border-left: 3px solid var(--rule); padding-left: var(--space-2); }
.ui-edge.e-marine { border-left-color: var(--marine-500); }
.ui-edge.e-gold { border-left-color: var(--marigold-500); }
.ui-group { font-family: var(--font-display); font-size: 1.05rem; margin: var(--space-1) 0 -2px; }
.ui-group small { font-family: var(--font-body); color: var(--stone-600); font-size: 12px; margin-left: var(--space-1); }

/* capital forecast */
.ui-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); align-items: end; height: 130px; padding-top: var(--space-4); }
.ui-bars > div { display: grid; align-content: end; gap: var(--space-1); height: 100%; text-align: center; font-size: 12px; }
.ui-bars .v { font-family: var(--font-display); font-size: 15px; }
.ui-bars .b { height: 3px; border-radius: 3px; background: var(--leaf-600); }
.ui-bars .b.tall { height: 70px; } .ui-bars .h1 { height: 7px; } .ui-bars .h2 { height: 19px; } .ui-bars .h3 { height: 31px; }
.ui-bars .b.m { background: var(--marine-500); } .ui-bars .b.g { background: var(--marigold-500); } .ui-bars .b.l { background: var(--leaf-400); }
.ui-bars .t { color: var(--stone-600); }
.ui-beyond { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; background: var(--leaf-50); border-radius: 10px; padding: var(--space-2) var(--space-3); }
.ui-beyond b { font-weight: 600; }
.ui-money { font-family: var(--font-display); font-size: 1.6rem; color: var(--leaf-700); line-height: 1; }
.ui-headline { display: grid; justify-items: end; gap: 2px; flex: none; }
.ui-headline .ui-money { font-size: 2rem; }

/* report (vignette d) */
.ui-report { display: grid; gap: var(--space-3); padding: var(--space-4); }
.ui-report > .ui-bar { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; }
.ui-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ui-from .ui-label { flex-basis: 100%; }
.ui-from p:not(.ui-label) { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-from .ui-tick { width: 16px; height: 16px; }
/* The review's foot: Escalate, and Approve waiting until every rating is reviewed. In a card that stretches
   (the home page), it sits at the bottom, as the app pins it. */
.ui:has(> .ui-foot) { display: flex; flex-direction: column; }
.ui-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: auto; padding: var(--space-3) var(--space-4) var(--space-3); border-top: 1px solid var(--rule-faint); }
.ui-foot span { display: grid; place-items: center; height: 32px; border-radius: 8px; border: 1px solid var(--marine-600); color: var(--marine-700); font-size: 12.5px; font-weight: 600; }
.ui-foot .go { border-color: var(--leaf-100); background: var(--leaf-100); color: var(--leaf-700); }
.ui-pages { position: relative; height: 150px; }
.ui-page { position: absolute; top: 8px; width: 104px; height: 136px; background: var(--bg-surface); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-2); display: grid; align-content: start; gap: var(--space-1); font-size: 12px; font-weight: 600; }
.ui-page i { display: block; height: 4px; border-radius: 2px; background: var(--mist); }
.ui-page i.s { width: 60%; }
.p1 { left: 0; transform: rotate(-6deg); } .p2 { left: 18%; transform: rotate(-3deg); } .p3 { left: 36%; } .p4 { left: 54%; transform: rotate(3deg); } .p5 { left: 72%; transform: rotate(6deg); }
.ui-sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ui-sig { display: grid; gap: 2px; padding: var(--space-2) var(--space-2) var(--space-2); border-bottom: 1.5px solid var(--ink); }
.ui-sig .sig { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--stone-700); }
.ui-sig .ui-tick { width: 18px; height: 18px; }
.ui-sent { display: flex; align-items: center; gap: var(--space-2); justify-content: center; padding: var(--space-2); border-radius: 10px; background: var(--leaf-50); color: var(--leaf-700); font-weight: 600; }

/* land: a block card and the portfolio */
.ui-spark { width: 100%; height: 70px; }
.ui-spark polyline { fill: none; stroke: var(--leaf-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-spark circle { fill: var(--leaf-600); }
.ui-pipe { display: grid; grid-template-columns: 9em 1fr 1.5em; gap: var(--space-2) var(--space-2); align-items: center; font-size: 12.5px; }
.ui-pipe i { display: block; height: 6px; border-radius: 3px; background: var(--mist); position: relative; overflow: hidden; }
.ui-pipe i b { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--leaf-500); border-radius: 3px; }
.w12 { --w: 12%; } .w100 { --w: 100%; } .w0 { --w: 0%; }
.ui-pipe span:last-child { text-align: right; font-weight: 600; }

/* narrow boxes (a phone, or a bento tile): fewer rows, same readable size.
   Container queries, so a card recomposes for the space it actually has. */
@container ui (max-width: 360px) { .ui .ui-hide-xs { display: none; } } /* phone-width screens only */
@container ui (max-width: 470px) {
  .ui { font-size: 13px; }
  .ui .ui-hide-sm { display: none; }
  .ui-count b { font-size: 1.35rem; }
  .ui-page.p2, .ui-page.p4 { display: none; }
  .p1 { left: 0; } .p3 { left: 30%; } .p5 { left: 60%; }
  .ui-cal > div { min-height: 52px; }
  .ui-cal .ev { font-size: 0; height: 6px; padding: 0; }
  .ui-cal .ev.keep { font-size: 12px; height: auto; padding: 2px var(--space-1); }
  .ui-cal .dow { font-size: 0; }
  .ui-cal .dow::first-letter { font-size: 12px; }
  .ui-counts.n4 { --n: 2; }
  .ui-page { width: 84px; height: 112px; }
  .ui-pages { height: 126px; }
  .ui-pipe { grid-template-columns: 8em 1fr 1.5em; }
}

/* Stories (design 03 B2, B3, B8). The markup is the final frame (the finished thread); start states exist only
   under .motion-ok until story.js arms the story, and lift at 4 s if it never does. */
.stage-story { place-items: stretch; padding-top: clamp(52px, 6vw, 60px); }
.story { position: relative; display: grid; justify-items: center; max-width: 1000px; margin-inline: auto; }
.story-chat { width: min(100%, 480px); min-width: 0; container: ui / inline-size; transform-origin: 50% 40%; }
.story-act { display: grid; justify-items: center; width: 100%; }
.story-act.temp { position: absolute; inset: 0; align-content: center; } /* act 2 (B11) */
.story-app { position: absolute; inset: 0; pointer-events: none; container: ui / inline-size; }
.story-scene.temp { position: absolute; inset: 0; margin: auto; width: min(94%, 520px); height: fit-content; z-index: 2; }
.story-scene.temp > .ui { box-shadow: var(--shadow-lg), 0 24px 60px rgba(20, 26, 23, 0.14); }
.story-typing { position: absolute; z-index: 1; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--bg-surface); border: 1px solid var(--rule-faint); box-shadow: var(--shadow-sm); pointer-events: none; }
.story-typing.out { background: var(--leaf-700); border-color: transparent; }
.story-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--stone-400); }
.story-typing.out i { background: var(--leaf-200); }
@media (prefers-reduced-motion: no-preference) {
  .story-typing i { animation: typing-dot 1s ease-in-out infinite; }
  .story-typing i:nth-child(2) { animation-delay: .15s; }
  .story-typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes typing-dot { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.story .ui-hide-sm, .story .ui-note, .story .ui-counts.n4 { display: none; } /* n4: the forecast's counts */
.story-tap { position: absolute; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--stone-500); background: color-mix(in srgb, var(--stone-300) 35%, transparent); pointer-events: none; }
.motion-ok .story:not(.armed):not(.rest) [data-in] { opacity: 0; animation: tf-failsafe 0s 4s forwards; }
/* a moving card (design 03 B5) waits unseen until story.js arms it */
.motion-ok .figure-ui[data-motion]:not(.armed):not(.rest) .ui { opacity: 0; animation: tf-failsafe 0s 4s forwards; }

.stage > .story-btn { position: absolute; top: 12px; right: 12px; width: auto; z-index: 4; }
/* In a hero (B10) the story has no stage and no chat window: the bubbles sit on the hero's ground, over the
   sweep, and the Tend screens lift over them as cards. */
.hero-story .stage-story { background: none; border: 0; border-radius: 0; padding: 48px 0 8px; overflow: visible; }
.hero-story .stage-story::before { display: none; }
.hero-story .stage > .story-btn { top: 0; right: 0; }
.hero-story .ui-chat { max-width: 460px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.hero-story .ui-chat .ui-bar { display: none; }
.hero-story .ui-chat .chat { padding: 0; background: none; }
.hero-story .story { align-content: center; min-height: 430px; } /* room for the tallest Tend screen, so it never covers the caption */
.hero-story [data-story="story-land"] { min-height: 490px; }
@media (max-width: 599.98px) {
  .hero-story .story { min-height: 470px; }
  .hero-story [data-story="story-land"] { min-height: 530px; }
  .hero-story .ui-chat .chat { padding-inline: 22px; } /* the gold loop overhangs its bubble by 24 px */
}

/* the conversation: names above, the asker's bubbles white, the replies in Tend green */
.ui-chat { max-width: 480px; }
.ui-chat .chat { position: relative; display: grid; gap: 6px; padding: 22px var(--space-6); background: var(--paper); }
.msg-who { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--stone-600); }
.msg-who:first-child { margin-top: 0; }
.msg-who.out { justify-self: end; }
.msg { position: relative; max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.42; }
.msg.in { justify-self: start; background: var(--bg-surface); border: 1px solid var(--rule-faint); box-shadow: var(--shadow-sm); border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.msg.out { justify-self: end; background: var(--leaf-700); color: var(--on-ink); border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.msg-file { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 11px; border-radius: 11px; background: var(--bg-surface); color: var(--ink); font-size: 12.5px; }
.msg-file .ui-tick { margin-left: auto; width: 18px; height: 18px; }
.mini-txt { display: grid; gap: 1px; min-width: 0; }
.mini-txt b { font-weight: 600; }
.mini-txt span { color: var(--stone-600); font-size: 12px; }
.mini-doc { position: relative; flex: none; width: 28px; height: 34px; }
.mini-doc i { position: absolute; inset: 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-surface); }
.mini-doc i:nth-child(1) { transform: rotate(-9deg) translateX(-3px); }
.mini-doc i:nth-child(2) { transform: rotate(6deg) translateX(3px); }
.mini-doc i:nth-child(3) { background: repeating-linear-gradient(to bottom, transparent 0 6px, var(--mist) 6px 8px) var(--bg-surface); background-clip: content-box; padding: 6px 5px; }
.mini-score { flex: none; display: grid; place-items: center; align-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--leaf-50); color: var(--leaf-700); font-size: 10.5px; line-height: 1.1; }
.mini-score b { font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.msg .ui-loop { top: -15px; left: -24px; width: calc(100% + 48px); height: calc(100% + 30px); transform: scaleX(-1); }
.msg-done { display: flex; align-items: center; gap: var(--space-1); margin-top: 6px; color: var(--leaf-700); font-weight: 600; font-size: 13px; }
.msg-done .ui-tick { width: 18px; height: 18px; }

/* finding the home */
.ui-find .ui-field { display: flex; align-items: center; gap: var(--space-2); min-height: 38px; }
.ui-find .ui-field svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--stone-500); stroke-width: 2; stroke-linecap: round; }

/* the drawn map (design 03 B11): invented, in the app's map palette (AAA-IP tendMapStyle.json); blocks
   shaded by housing score. No tiles, no real place, no lot numbers. */
.ui-map svg.map { display: block; width: 100%; height: auto; background: var(--paper); }
.map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map .park { fill: var(--leaf-100); }
.map .wet { fill: color-mix(in srgb, var(--marigold-50) 70%, var(--paper)); }
.map .flood { fill: color-mix(in srgb, var(--marine-200) 30%, transparent); stroke: var(--marine-300); stroke-width: 1; stroke-dasharray: 3 3; }
.map .water { fill: var(--marine-200); }
.map .drain { stroke: var(--marine-300); stroke-width: .8; stroke-dasharray: 2 2; }
.map .bldg, .map .shop { fill: var(--stone-100); stroke: var(--stone-300); stroke-width: .4; }
.map .shop { fill: var(--marigold-50); }
.map .rd-c { stroke: var(--stone-200); stroke-width: 5.5; }
.map .rd { stroke: var(--bg-surface); stroke-width: 3.6; }
.map .rd-c.major { stroke: var(--stone-300); stroke-width: 9; }
.map .rd.major { stroke-width: 6.6; }
.map .rail { stroke: var(--stone-400); stroke-width: 1; }
.map .blk { fill: var(--leaf-600); stroke: var(--leaf-700); stroke-width: 1.5; }
.map .s5 { fill-opacity: .5; } .map .s4 { fill-opacity: .34; } .map .s3 { fill-opacity: .2; } .map .s2 { fill-opacity: .1; }
.map text { font: 600 8.5px var(--font-body); fill: var(--leaf-800); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.map .rl { font: 500 6.5px var(--font-body); fill: var(--stone-600); }
.map .wl { font: italic 500 7.5px var(--font-body); fill: var(--marine-500); stroke: none; }
.map .pl { font: 500 6.5px var(--font-body); fill: var(--leaf-700); }
.map .pin circle { fill: var(--leaf-600); stroke: var(--bg-surface); } .map .pin path { fill: var(--bg-surface); }
.map .zoom rect { fill: var(--bg-surface); stroke: var(--stone-200); }
.map .zoom path, .map .scale path { stroke: var(--stone-500); stroke-width: 1.2; }
.map .scale text { font: 400 8px var(--font-body); fill: var(--stone-500); stroke: none; }
.map-key { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-1) var(--space-4); }
.map-key span { display: inline-flex; align-items: center; gap: var(--space-1); }
.map-key i { --k: 50%; width: 11px; height: 11px; border-radius: 2px; border: 1px solid var(--leaf-700); background: color-mix(in srgb, var(--leaf-600) var(--k), var(--paper)); }
.map-key .k-s4 { --k: 34%; } .map-key .k-s3 { --k: 20%; } .map-key .k-s2 { --k: 10%; }
.map-key .k-fl { border: 1px dashed var(--marine-300); background: color-mix(in srgb, var(--marine-300) 22%, var(--paper)); }

/* a block's assessment */
.ui-assess .ui-count b small { font-family: var(--font-body); font-size: 12px; color: var(--stone-600); }
.ui-score { flex: none; min-width: 2.6em; padding: 2px var(--space-2); border-radius: 6px; background: var(--mist); color: var(--ink); font-weight: 600; font-size: 12.5px; text-align: center; }
.ui-open { flex: none; color: var(--leaf-700); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }

/* every block, by housing prospect (design 03 B11) */
.ui-rank .ui-row { position: relative; background: var(--bg-surface); }
.ui-rank .ui-row:first-child { border-top: 0; z-index: 1; }
.ui-sort { display: inline-grid; font-size: 12px; color: var(--stone-600); } .ui-sort > span { grid-area: 1 / 1; text-align: right; } .ui-sort .was { opacity: 0; }
.ui-band { margin-left: auto; color: var(--stone-600); font-size: 12px; }
.mini-bars { flex: none; display: flex; align-items: flex-end; gap: 3px; width: 36px; height: 34px; padding: 6px; border-radius: 10px; background: var(--leaf-50); }
.mini-bars i { flex: 1; height: 2px; border-radius: 1px; background: var(--leaf-600); }
.mini-bars i:last-child { height: 100%; }
.ui-score .ui-loop { top: -9px; left: -9px; width: calc(100% + 18px); height: calc(100% + 18px); }