/* Section 1 of /prism/mf — submarket trends.
*
* EVERY selector in this file is scoped to #market, and test/mf-market-css.test.mjs enforces it.
* That is not tidiness. This markup now shares a document with prism.html's section 2, and four
* of these rules were written unscoped against a page that had nothing else on it:
*
* · .leaflet-tile-pane — bare here, but scoped as .map-dark-tiles .leaflet-tile-pane in
* prism.html:1048. Unscoped, this desaturates section 2's comps map too, and section 2 has
* no rule that can win against it. That is one-way pollution, not a collision, which is why
* comparing the two files for identical selectors did not find it.
* · .v — js/neighborhood.js:73 emits class="v" for every row of the free ACS module, which
* mounts inside section 2 (prism.html:1560). Its own rule (neighborhood.js:28) sets only
* colour, family and weight, so the 21px and the 3px margin below would have applied.
* · body{} — replaced by #market{}. See the note on that rule.
* · .k .d .ch .sec .cell .grid .wrap .status — short, generic, and unnamespaced. None collide
* today; the prefix is what keeps that true when section 2 next grows a class.
*/
/* Was body{background;color;font-family;margin}. As a section it must also re-declare what
* prism.html's body sets and this markup never expected: line-height 1.6. Measured pre-merge,
* this content rendered at line-height:normal and weight 400 (prism.html's body now also
* renders at 400 -- design-language-unification Task 9 -- so font-weight:400 here is no longer
* a correction against a 300 baseline, just an explicit restatement of the same value; kept
* rather than deleted since deleting it would make this rule depend on inheriting the right
* weight from a page-level default it doesn't control).
*
* E14 (design-language-unification Task 9): section 1 is a content area, not a card, and had
* been painted --surface (the card-face token) instead of --canvas (the content-area token) --
* the three-surface system (E13) didn't exist yet when this file was written. Repainting it
* --canvas is the approved, visible fix; .chart-card/.readout/.map-wrap/.sup have no background
* of their own (1px-bordered, relying on the section being white to look like flush cards), so
* this section's bordered sub-panels now render as outlined boxes on the same grey canvas the
* rest of the page uses, instead of a white island inset into it. That shift is the point of the
* change, not a side effect of it -- see task-9-report.md for the before/after measurement. */
#market {
background: var(--canvas);
color: var(--ink);
font-family: var(--font-body);
line-height: normal;
font-weight: 400;
}
/* prism.html:32 applies *{margin:0;padding:0;box-sizing:border-box} to the whole document.
* This content was authored without a reset — .wrap (1080 + 40 padding), .cell (2px border +
* 11px padding inside a 1fr grid track) and .gate-form input (flex:1 + 24px padding, since removed) all size
* differently under border-box. Restoring content-box here is a one-line revert of a change
* that would otherwise shift the layout by a few pixels in a way no screenshot review catches. */
#market,
#market * { box-sizing: content-box; }
#market .wrap{max-width:var(--w-wide);margin:0 auto;padding:40px 20px 72px /* spacing: page-level bottom clearance, not a component gap. 72px is past the 10-step ladder max of 64px -- forcing it down would visibly shrink the page bottom margin, out of scope for Task 17 */}
/* h1 and h2 both: this rule must not depend on which one the heading is.
* 2026-08-31（Eddie 定 A 案）：站1 的标题现在**就是**页面唯一的 —— 三个站平级、同字号，
* 站1 的标题兼任页面标题。原注释写的「demoted to h2 in the merged page」已经过期。
* ⚠️ 站1 的两个小节从 h2 降成了 h3（字号来自 .sec 类，视觉零变化），为的是把「二级」这一层
* 整个留给「站」—— 否则二级会同时有 20px 与 28px 两种字号，那正是 C3 要消灭的毛病。 */
#market h1,
#market h2{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:500;margin:0 0 8px}
#market .lede{color:var(--muted-strong);font-size:var(--fs-body);margin:0 0 4px}
/* Task 13(design-language-unification): was .preview-note — collapsed into .a-flag (styles/
roles.css); family/weight/color dropped (a-flag's own font-body/400/warn now supply them —
no documented reason found for the old mono/500/muted-strong choice, unlike e.g. g-peak-note's
callout, which does have one and keeps its override). Dashed-box treatment is structural, kept
here scoped to #market so it doesn't apply to any other .a-flag on this page. */
#market .a-flag{border:1px dashed var(--border);border-radius:var(--radius);padding:8px 12px;margin:16px 0 16px}
#market .map-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
#market #mfMap{height:var(--h-map-hero)}
#market .leaflet-container{font-family:var(--font-body);background:var(--canvas)}
#market .leaflet-tile-pane{filter:saturate(0.72) contrast(0.98)}
#market .leaflet-tooltip.mf-tip{font-family:var(--font-body);font-size:var(--fs-small);color:var(--body);
background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 10px color-mix(in srgb, var(--ink) 8%, transparent) /* Task 16: was rgba(0,0,0,.08), pure black — the one deliberate colour change in this task, not just a syntax rewrite; tokens.css says shadows on this site are neutral-green (black reads as dirt on white) and this was the one shadow that never got that memo */}
#market .legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);
line-height: var(--lh-label);color:var(--muted-strong);margin-top:12px}
#market .ramp{display:inline-block;width:150px;height:9px;border-radius:var(--radius);
background:linear-gradient(90deg,#b0392b,#c9a227,#2f8467)}
#market .swatch{display:inline-block;width:11px;height:11px;border-radius:50%;
border:1.5px solid var(--surface);vertical-align:-1px;margin-right:4px}
#market .readout{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px}
#market .crumb{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-small);
line-height: var(--lh-label);color:var(--muted-strong);margin-bottom:12px}
#market .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#market .cell{border-left:2px solid var(--border);padding-left:12px}
#market .k{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);
line-height: var(--lh-label);color:var(--muted-strong);text-transform:uppercase;letter-spacing:.05em /* tracking: uppercase mono kicker, em-based so it scales with the caption size instead of r-label's fixed 1px */}
/* ⛔ C7（2026-08-31）试过把它迁到 .r-h2，**撤销了**，两个原因，都在本文件顶部那段注释里预警过：
* ① `.v` 由**两处**生成 —— js/mf-market.js 的支撑条，和 js/neighborhood.js 的三处
* （83/119/187 行）。后者挂在站2 里，也吃这条规则。只给前者加角色、把这条规则的排版删掉，
* **实测当场把后者 4 个元素打回 Inter 16px**。
* ② 就算恢复这条规则，`#market .v` 带 ID，特异性永远赢过角色类 —— 角色加了也不生效。
* ⇒ 要迁移得**先给这个类改名**（顶部注释说的「短、通用、无命名空间」正是这个），那是另一件事。 */
#market .v{font-family:var(--font-display);font-size:var(--fs-h2);margin-top:4px}
#market .status{font-size:var(--fs-small);color:var(--muted-strong);margin-top:12px}
#market .verdict{font-family:var(--font-display);font-size:var(--fs-body);line-height: var(--lh-caption);margin:16px 0 0;color:var(--ink)}
#market .sec{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;margin:32px 0 12px}
/* Task 14(design-language-unification): margin-bottom dropped — the element now also carries
.a-figure (roles.css), which sets `margin: 0 0 var(--sp-6)` on the same selector count as an
element+class pair (figure.a-figure), out-specificing this bare single-class rule regardless of
source order. Keeping a margin-bottom here that can never win is dead weight; --sp-6 (24px) is
the number that actually renders now, up from this rule's old 14px. */
#market .chart-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 8px}
/* Task 14: was .ch-title — font-family/font-weight/font-size/line-height/color dropped, the new
figure.a-figure > figcaption .a-figure-title role (styles/roles.css) already supplies the exact
same five values (mono/500/fs-small/1.4/ink) — this rule's own comment already noted the
line-height match to r-label's 1.4 before the role existed. Renamed to .a-figure-title in the
three chart-card figures; nothing left to keep here. */
#market .a-figure-title span{color:var(--muted-strong);font-weight:400}
/* Task 13: was .ch-sub — typography (font-size/line-height/color) already matched .a-caption
(styles/roles.css) exactly, so it's dropped as a duplicate; margin is the only real remainder. */
#market .a-caption{margin:4px 0 8px}
#market .ch{width:100%;display:block}
#market .timeline{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
#market .tl-play{font-family:var(--font-mono) /* 关于字形 —— ▶ 与 ❚❚ 在 Inter 里没有字形， 浏览器会逐字符回退到系统字体（2026-08-24 宽度实测确认）， 而 getComputedStyle 报的是声明的字族、报不出这件事。IBM Plex Mono 两个都有。 */;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
background:var(--surface);color:var(--ink);cursor:pointer;font-size:var(--fs-small);flex:none;
display:flex;align-items:center;justify-content:center}
#market .tl-slider{flex:1;min-width:220px;accent-color:var(--ink)}
#market .tl-q{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-body);
line-height: var(--lh-flush);color:var(--ink);min-width:64px}
/* 2026-08-31（C1）：从等宽 500 换成 Inter 400。这两条装的是**散文**（「During playback the
map aggregates sales over a rolling four quarters — …」），不是标签。
站点的真实规则不是「等宽只留给数字」（角色层里 .r-label / .a-source / .a-figure-title 都是
等宽且都不是数字），而是**「等宽给标签／数值／元信息，Inter 给散文」** —— 这两条违的是后者。
实测：等宽版占两行、字距松、读起来像代码；Inter 版一行放下，明显好读。
⛔ 同一屏的 .legend 不动：那是**混合行**（色块标签 + 轴向说明 + 一句散文），
而且 A1 明确保护过图例条（收窄/换字族都会把它折坏）。 */
#market .tl-cap{font-family:var(--font-body);font-weight:400;font-size:var(--fs-caption);
line-height: var(--lh-caption);color:var(--muted-strong);flex-basis:100%}
#market .tl-note{font-family:var(--font-body);font-weight:400;font-size:var(--fs-caption);
line-height: var(--lh-caption);color:var(--muted-strong);margin:8px 0 0;
border-left:2px solid var(--border);padding-left:12px;min-height:0}
#market .support{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
#market .sup{border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px}
#market .sup .k{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);
line-height: var(--lh-label);color:var(--muted-strong);text-transform:uppercase;letter-spacing:.05em /* tracking: uppercase mono kicker, em-based so it scales with the caption size instead of r-label's fixed 1px */}
#market .sup .v{font-family:var(--font-display);font-size:var(--fs-h2);margin:4px 0 4px}
/* C7（2026-08-31）：排版交给 .r-caption —— 实测逐项相同（Inter / 11px / 400 / 16.5px）。
原注释自己就写着「matches a-caption/r-caption's 1.5」，那正是该用角色而不是重写一遍的信号。 */
#market .sup .d{color:var(--muted-strong)}
#market .sup.absent .v{color:var(--muted-strong)}
/* Task 13: was .source-note — font-family/font-size/color already matched .a-source (styles/
roles.css) exactly; weight 500→400 and line-height 1.6→1.5 dropped to the role's own values,
no documented reason found to keep them different. border-top/padding/margin are structural,
kept scoped to #market. */
#market .a-source{margin-top:24px;border-top:1px solid var(--border);padding-top:12px}
/* The loading strip. It sits above the content and never covers it — see the markup comment:
* a display:none ancestor makes the charts measure 0 and silently fall back to a 640px viewBox.
* The button is hidden by default and revealed only when there is no IntersectionObserver to
* do the job, or when loading failed and Retry is the way out. */
#market .mf-ph{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);
line-height: var(--lh-caption);color:var(--muted-strong);margin:16px 0 4px;
border-left:2px solid var(--border);padding-left:12px;min-height:20px}
#market .mf-ph-btn{display:none;margin-top:8px;padding:8px 16px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--surface);color:var(--ink);
font-family:var(--font-mono);font-weight:500;font-size:var(--fs-small);
line-height: var(--lh-flush);cursor:pointer}
#market .mf-ph.mf-ph-manual .mf-ph-btn{display:inline-block}
#market .mf-ph .mf-ph-btn:only-child{display:inline-block}
@media(max-width: 720px){
#market .grid{grid-template-columns:repeat(2,1fr)}
#market .support{grid-template-columns:1fr}
}
/* Sample banner and its call to action. Both are siblings of the content, toggled with the
* `hidden` attribute — see showSampleChrome() for why they must never wrap it. */
/* 2026-08-31（C1）：与 .tl-cap/.tl-note 同一处理 —— 容器装的是散文
（「— a real worked example for one submarket, frozen. Register free to…」），换 Inter 400。
⚠️ 开头的 Example 是 kicker，等宽是对的，所以下面那条 b 规则要**显式**写回等宽 ——
不写的话它会跟着容器变成 Inter，kicker 的味道就没了。 */
#market .mf-ribbon{font-family:var(--font-body);font-weight:400;font-size:var(--fs-caption);
line-height: var(--lh-reset);color:var(--muted-strong);
background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
padding:8px 12px;margin:16px 0 16px}
#market .mf-ribbon b{font-family:var(--font-mono);font-weight:500;color:var(--ink);letter-spacing:.04em /* tracking: uppercase mono kicker, em-based so it scales with the caption size instead of r-label's fixed 1px */;text-transform:uppercase;font-size:var(--fs-caption)}
#market .mf-cta{border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-top:24px}
#market .mf-cta p{font-size:var(--fs-small);line-height: var(--lh-reset);color:var(--muted-strong);margin:0 0 16px}
#market .mf-cta-btn{padding:12px 16px;border:1px solid var(--ink);border-radius:var(--radius);
background:var(--ink);color:var(--surface);font-family:var(--font-body);font-size:var(--fs-small);cursor:pointer}
/* Explicit reveal for the retry button in the error state. It has a
sibling, so neither
* .mf-ph-manual (only set when there is no IntersectionObserver) nor :only-child applies, and
* without this the only way out of a failed load is invisible. */
#market .mf-ph .mf-ph-btn.mf-ph-show{display:inline-block}