/* AppWatch · shared styles. Tokens come from /colors_and_type.css (dark default, [data-mode="light"] override).
   Category-group colours are defined here only; every chart colour goes through these variables. */
:root {
  --g-assist: #f5a524; --g-comp: #e0607e; --g-image: #a78bd1; --g-photo: #d46ad0; --g-video: #5f9be8;
  --g-audio: #4fc3c8; --g-code: #7fb88b; --g-work: #b5c24a; --g-plat: #8a9bb0; --g-other: #7d756b;
  --up: #7fb88b; --down: #e0607e; --new: #f5a524;
}
[data-mode="light"] {
  --g-assist: #b8761a; --g-comp: #b0304f; --g-image: #6d4fa3; --g-photo: #9c3a98; --g-video: #2f6fbf;
  --g-audio: #1f8f95; --g-code: #4a7a55; --g-work: #7a8a1e; --g-plat: #586a80; --g-other: #8a8276;
  --up: #4a7a55; --down: #b0304f; --new: #b8761a;
}
body { margin: 0; }
.aw-wrap { max-width: 1080px; margin: 0 auto; padding: 0 5vw 96px; font-family: var(--serif, "EB Garamond", "Noto Serif SC", Georgia, serif); color: var(--fg-dim); line-height: 1.75; }
@media (min-width: 1024px) { .aw-wrap { padding-left: 40px; padding-right: 40px; } }
.aw-wrap a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.aw-wrap a:hover { border-bottom-color: var(--accent); }
.aw-eyebrow { font: 400 11px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 56px 0 0; }
.aw-h1 { font-family: var(--display, Fraunces, Georgia, serif); font-weight: 300; font-size: clamp(36px, 6.4vw, 68px); line-height: 1.08; letter-spacing: -.015em; color: var(--fg); margin: 14px 0 0; }
.aw-h1-sub { display: block; font-size: clamp(17px, 2.2vw, 24px); font-weight: 300; letter-spacing: 0; color: var(--fg-dim); margin-top: 10px; }
.aw-lede { font-size: clamp(15px, 1.9vw, 18px); color: var(--fg-dim); max-width: 66ch; margin: 22px 0 0; }
.aw-lede strong { color: var(--fg); font-weight: 500; }
.aw-metaline { margin: 14px 0 0; font: 400 11px/1.7 var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--fg-mute); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.aw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.aw-pill { font: 400 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line-bright); padding: 8px 12px; background: transparent; cursor: pointer; text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.aw-wrap a.aw-pill { border-bottom: 1px solid var(--line-bright); color: var(--fg-dim); }
.aw-pill:hover, .aw-pill[aria-selected="true"], .aw-wrap a.aw-pill:hover { color: var(--accent); border-color: var(--accent); }
.aw-pill[aria-selected="true"] { background: var(--accent-soft); }

.aw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 36px 0 0; }
@media (min-width: 720px) { .aw-stats { grid-template-columns: repeat(4, 1fr); } }
.aw-stat { background: var(--bg); padding: 16px 18px; }
.aw-stat b { display: block; font: 300 34px/1.1 var(--display, Fraunces, Georgia, serif); color: var(--fg); letter-spacing: -.01em; }
.aw-stat span { display: block; margin-top: 4px; font: 400 10px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--fg-mute); text-transform: uppercase; }

.aw-sec { margin: 72px 0 0; }
.aw-sec > h2 { font-family: var(--display, Fraunces, Georgia, serif); font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.25; color: var(--fg); margin: 0; letter-spacing: -.005em; }
.aw-sec > h2 small { display: block; font: 400 10.5px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 8px; }
.aw-sec p { max-width: 70ch; margin: 14px 0 0; font-size: 16px; }
.aw-sec p strong, .aw-sec li strong { color: var(--fg); font-weight: 500; }
.aw-sec ul { max-width: 72ch; padding-left: 1.2em; margin: 12px 0 0; }
.aw-sec li { margin: 6px 0; }
.aw-note { font-size: 13px !important; color: var(--fg-mute); font-weight: 300; }
.aw-note a { color: var(--fg-dim); }

/* ---------- list tables ---------- */
.aw-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 22px 0 14px; }
.aw-chip { font: 400 10.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; color: var(--fg-dim); border: 1px solid var(--line-bright); padding: 6px 9px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.aw-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-mute)); display: inline-block; }
.aw-chip[aria-pressed="true"] { color: var(--fg); border-color: var(--c, var(--accent)); background: var(--accent-soft); }
.aw-search { font: 400 13px/1 var(--mono, ui-monospace, monospace); color: var(--fg); background: transparent; border: 1px solid var(--line-bright); padding: 8px 10px; min-width: 190px; }
.aw-search:focus { outline: none; border-color: var(--accent); }
.aw-count { font: 400 11px/1 var(--mono, ui-monospace, monospace); color: var(--fg-mute); letter-spacing: .06em; margin-left: auto; }
.aw-tablewrap { overflow-x: auto; border-top: 1px solid var(--line-bright); }
table.aw-t { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.aw-t th { text-align: left; font: 400 10px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); padding: 10px 8px; border-bottom: 1px solid var(--line-bright); white-space: nowrap; }
.aw-t td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.aw-t tr:hover td { background: var(--accent-soft); }
.aw-t .rk { white-space: nowrap; font: 400 13px/1 var(--mono, ui-monospace, monospace); color: var(--fg); width: 2.6em; font-variant-numeric: tabular-nums; }
.aw-t .dl { font: 400 11px/1 var(--mono, ui-monospace, monospace); width: 4.6em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl.up { color: var(--up); } .dl.down { color: var(--down); } .dl.new, .dl.re { color: var(--new); } .dl.same { color: var(--fg-mute); }
.aw-t .nm { color: var(--fg); font-weight: 500; }
.aw-t .nm a { color: var(--fg); border-bottom-color: transparent; }
.aw-t .nm a:hover { color: var(--accent); }
.aw-t .nm small { display: block; font: 400 10.5px/1.4 var(--mono, ui-monospace, monospace); color: var(--fg-mute); letter-spacing: .02em; font-weight: 400; }
.aw-cat { font: 400 10.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--c, var(--fg-dim)); white-space: nowrap; }
.aw-cat::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--fg-mute)); margin-right: 6px; vertical-align: 0; }
.aw-x { font: 400 11px/1.5 var(--mono, ui-monospace, monospace); color: var(--fg-mute); white-space: nowrap; letter-spacing: .02em; }
.aw-tag { font: 400 9.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; color: var(--fg-mute); border: 1px solid var(--line-bright); padding: 2px 5px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.js .aw-panel[hidden] { display: none; }
tr[hidden] { display: none; }
[data-g="assist"] { --c: var(--g-assist); } [data-g="comp"] { --c: var(--g-comp); } [data-g="image"] { --c: var(--g-image); }
[data-g="photo"] { --c: var(--g-photo); } [data-g="video"] { --c: var(--g-video); } [data-g="audio"] { --c: var(--g-audio); }
[data-g="code"] { --c: var(--g-code); } [data-g="work"] { --c: var(--g-work); } [data-g="plat"] { --c: var(--g-plat); } [data-g="other"] { --c: var(--g-other); }

.aw-spark { display: block; }
.aw-spark polyline { fill: none; stroke: var(--c, var(--accent)); stroke-width: 1.4; stroke-linejoin: round; }
.aw-spark circle { fill: var(--c, var(--accent)); }
.aw-spark line { stroke: var(--line-bright); stroke-width: 1; }

/* ---------- change blocks ---------- */
.aw-cols { display: grid; gap: 28px; margin-top: 22px; }
@media (min-width: 820px) { .aw-cols { grid-template-columns: repeat(3, 1fr); } }
.aw-col h3 { font: 400 11px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-bright); }
.aw-col ul { list-style: none; padding: 0; margin: 0; }
.aw-col li { font-size: 14.5px; margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; }
.aw-col li span { font: 400 11px/1.9 var(--mono, ui-monospace, monospace); color: var(--fg-mute); white-space: nowrap; }
.aw-col li a { color: var(--fg); border-bottom-color: transparent; }

/* ---------- charts ---------- */
.aw-fig { margin: 26px 0 0; }
.aw-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.aw-fig figcaption { font: 400 11px/1.7 var(--mono, ui-monospace, monospace); color: var(--fg-mute); letter-spacing: .03em; margin-top: 8px; max-width: 90ch; }
.aw-fig text { font-family: var(--mono, ui-monospace, monospace); fill: var(--fg-mute); font-size: 10px; }
.aw-fig .gl { stroke: var(--line); stroke-width: 1; }
.aw-fig .ax { stroke: var(--line-bright); stroke-width: 1; }
.aw-fig .bl { fill: var(--bg); font-size: 10px; text-anchor: middle; }
.aw-fig .lbl { fill: var(--fg-dim); font-size: 10.5px; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.aw-fig .cap-acc { fill: var(--accent); }
.aw-fig .mid { text-anchor: middle; } .aw-fig .end { text-anchor: end; }
.s-assist { fill: var(--g-assist); } .s-comp { fill: var(--g-comp); } .s-image { fill: var(--g-image); } .s-photo { fill: var(--g-photo); }
.s-video { fill: var(--g-video); } .s-audio { fill: var(--g-audio); } .s-code { fill: var(--g-code); } .s-work { fill: var(--g-work); }
.s-plat { fill: var(--g-plat); } .s-other { fill: var(--g-other); }
.aw-fig rect.seg { stroke: var(--bg); stroke-width: 1; }
.ln, polyline.ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln0 { stroke: #f5a524; } circle.ln0 { fill: #f5a524; } .ln1 { stroke: #5f9be8; } circle.ln1 { fill: #5f9be8; } .ln2 { stroke: #e0607e; } circle.ln2 { fill: #e0607e; } .ln3 { stroke: #7fb88b; } circle.ln3 { fill: #7fb88b; }
.ln4 { stroke: #a78bd1; } circle.ln4 { fill: #a78bd1; } .ln5 { stroke: #4fc3c8; } circle.ln5 { fill: #4fc3c8; } .ln6 { stroke: #d46ad0; } circle.ln6 { fill: #d46ad0; } .ln7 { stroke: #b5c24a; } circle.ln7 { fill: #b5c24a; }
.ln8 { stroke: #e2703a; } circle.ln8 { fill: #e2703a; } .ln9 { stroke: #8a9bb0; } circle.ln9 { fill: #8a9bb0; }
[data-mode="light"] .ln0 { stroke: #b8761a; } [data-mode="light"] circle.ln0 { fill: #b8761a; } [data-mode="light"] .ln1 { stroke: #2f6fbf; } [data-mode="light"] circle.ln1 { fill: #2f6fbf; } [data-mode="light"] .ln2 { stroke: #b0304f; } [data-mode="light"] circle.ln2 { fill: #b0304f; }
[data-mode="light"] .ln3 { stroke: #4a7a55; } [data-mode="light"] circle.ln3 { fill: #4a7a55; } [data-mode="light"] .ln4 { stroke: #6d4fa3; } [data-mode="light"] circle.ln4 { fill: #6d4fa3; } [data-mode="light"] .ln5 { stroke: #1f8f95; } [data-mode="light"] circle.ln5 { fill: #1f8f95; }
[data-mode="light"] .ln6 { stroke: #9c3a98; } [data-mode="light"] circle.ln6 { fill: #9c3a98; } [data-mode="light"] .ln7 { stroke: #7a8a1e; } [data-mode="light"] circle.ln7 { fill: #7a8a1e; } [data-mode="light"] .ln8 { stroke: #b24a1a; } [data-mode="light"] circle.ln8 { fill: #b24a1a; } [data-mode="light"] .ln9 { stroke: #586a80; } [data-mode="light"] circle.ln9 { fill: #586a80; }
.ln-dot { stroke: var(--bg); stroke-width: 1.5; }
.lt0 { fill: #f5a524 !important; } .lt1 { fill: #5f9be8 !important; } .lt2 { fill: #e0607e !important; } .lt3 { fill: #7fb88b !important; } .lt4 { fill: #a78bd1 !important; }
.lt5 { fill: #4fc3c8 !important; } .lt6 { fill: #d46ad0 !important; } .lt7 { fill: #b5c24a !important; } .lt8 { fill: #e2703a !important; } .lt9 { fill: #8a9bb0 !important; }
[data-mode="light"] .lt0 { fill: #b8761a !important; } [data-mode="light"] .lt1 { fill: #2f6fbf !important; } [data-mode="light"] .lt2 { fill: #b0304f !important; }
[data-mode="light"] .lt3 { fill: #4a7a55 !important; } [data-mode="light"] .lt4 { fill: #6d4fa3 !important; } [data-mode="light"] .lt5 { fill: #1f8f95 !important; }
[data-mode="light"] .lt6 { fill: #9c3a98 !important; } [data-mode="light"] .lt7 { fill: #7a8a1e !important; } [data-mode="light"] .lt8 { fill: #b24a1a !important; } [data-mode="light"] .lt9 { fill: #586a80 !important; }
.db-line { stroke: var(--line-bright); stroke-width: 2; }
.db-web { fill: var(--g-video); } .db-spend { fill: var(--g-assist); }
.aw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font: 400 11px/1.4 var(--mono, ui-monospace, monospace); color: var(--fg-dim); }
.aw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aw-legend i { width: 10px; height: 10px; display: inline-block; background: var(--c); }
.aw-heat td, .aw-heat th { text-align: center; padding: 5px 4px; font: 400 11px/1.2 var(--mono, ui-monospace, monospace); border-bottom: 1px solid var(--line); }
.aw-heat td:first-child, .aw-heat th:first-child { text-align: left; font-family: var(--serif, Georgia, serif); font-size: 14px; padding-left: 0; }
.aw-heat td.h { color: var(--fg); }
.aw-heat td.none { color: var(--fg-mute); opacity: .5; }
.aw-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 20px; }
@media (min-width: 820px) { .aw-statgrid { grid-template-columns: repeat(3, 1fr); } }
.aw-statgrid div { background: var(--bg); padding: 14px 16px; font-size: 14px; line-height: 1.55; }
.aw-statgrid b { display: block; font: 300 28px/1.15 var(--display, Fraunces, Georgia, serif); color: var(--fg); }
.aw-tl { margin-top: 22px; border-top: 1px solid var(--line-bright); }
.aw-tl > div { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .aw-tl > div { grid-template-columns: 150px 1fr; gap: 24px; } }
.aw-tl .d { font: 400 11px/1.6 var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--fg-mute); }
.aw-tl .d b { display: block; font: 300 26px/1.1 var(--display, Fraunces, Georgia, serif); color: var(--accent); letter-spacing: 0; }
.aw-tl .t { font-size: 15px; } .aw-tl .t strong { color: var(--fg); }
.aw-tl .t small { display: block; margin-top: 6px; font-size: 13px; color: var(--fg-mute); }

/* ---------- detail page ---------- */
.aw-facts { display: grid; grid-template-columns: 1fr; margin: 28px 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 720px) { .aw-facts { grid-template-columns: repeat(3, 1fr); } }
.aw-facts div { padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aw-facts dt { font: 400 10px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); }
.aw-facts dd { margin: 4px 0 0; color: var(--fg); font-size: 15px; font-variant-numeric: tabular-nums; }
.aw-facts dd small { color: var(--fg-mute); font-size: 12px; }
.aw-foot { margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font: 400 11px/1.8 var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--fg-mute); }
.aw-foot a { color: var(--fg-mute); border-bottom-color: transparent; }
.aw-foot a:hover { color: var(--accent); }
details.aw-more { margin-top: 18px; } details.aw-more summary { cursor: pointer; font: 400 11px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .aw-pill { transition: none; } }
:lang(zh), :lang(zh-Hans) { font-style: normal; }
.aw-sec p + .aw-tablewrap { margin-top: 18px; }