/* =====================================================================
   DET APAC STUDY · styles

   The DET house chrome (tokens, header, controls, section furniture, footer)
   is duplicated from ../market-map/style.css rather than imported. That is a
   deliberate and limited copy: it is presentation only, it changes about once
   a quarter, and an @import would make the APAC page fail to render at all if
   the China page were ever moved or renamed. Nothing about the DATA is
   duplicated anywhere, which is the duplication that would actually matter.

   Everything below the chrome is the brand-by-market matrix, which the China
   stylesheet has no equivalent of.
   ===================================================================== */

/* DET corporate system per design-systems/det/DESIGN.md.
   Palette-exact colours, Neue Haas Grotesk (45/55/65 = 300/400/500),
   near-sharp 2px corners, hairline separation, no shadows, no gradients. */

:root{
  --det:#004D71; --deep:#003349; --mid:#4786A3; --cyan:#78F9FF; --cyanlt:#AEDFE6;
  --grey:#C1BFB8; --greylt:#EBEBEC; --ink:#212124; --hair:#DADDDE; --white:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--white);color:var(--ink);
  font-family:'Neue Haas Grotesk Display Pro','Helvetica Now Display',Helvetica,Arial,sans-serif;
  font-weight:300;font-size:15px;line-height:1.5}
b,strong{font-weight:500}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
select{font:inherit;font-weight:300;border:1px solid var(--hair);border-radius:2px;
  background:var(--white);color:var(--ink);padding:6px 8px}

/* Header: DET Blue with plus-cross grid texture */
header{background:var(--det);color:var(--white);padding:26px 0 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 26v12M26 32h12' stroke='%23FFFFFF' stroke-opacity='0.10' stroke-width='1.5'/%3E%3C/svg%3E")}
.hwrap{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px}
header .k{font-size:11px;letter-spacing:.2em;font-weight:400;color:var(--cyanlt);margin-bottom:8px}
header h1{font-size:26px;font-weight:500;letter-spacing:-.005em}
header .sub{margin-top:6px;font-size:14px;font-weight:300;color:var(--cyanlt);max-width:640px}
header a.back{color:var(--cyanlt);font-size:12px;letter-spacing:.1em;text-decoration:none;font-weight:400}
header a.back:hover{color:var(--white)}

.banner{background:var(--cyanlt);color:var(--deep);font-size:13px;font-weight:400;
  padding:9px 32px;text-align:left}
.banner b{font-weight:500;letter-spacing:.08em}

/* Controls */
.controls{max-width:1280px;margin:0 auto;padding:18px 32px 6px;display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end}
.cgroup .cl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--det);font-weight:500;margin-bottom:6px}
.presetrow{display:flex;gap:8px;flex-wrap:wrap}
.preset{border:1px solid var(--hair);border-radius:2px;padding:7px 14px;font-size:13.5px;font-weight:400;color:var(--ink)}
.preset:hover{border-color:var(--mid)}
.preset.active{background:var(--det);border-color:var(--det);color:var(--white);font-weight:500}
.toggle{display:flex;border:1px solid var(--hair);border-radius:2px;overflow:hidden}
.toggle button{padding:7px 14px;font-size:13.5px;font-weight:400}
.toggle button.active{background:var(--det);color:var(--white);font-weight:500}
.question{max-width:1280px;margin:0 auto;padding:6px 32px 0;font-size:14px;color:#5a5a5e;font-weight:300}
.question b{color:var(--det);font-weight:500;font-size:11px;letter-spacing:.12em}

/* Section furniture */
.sectionwrap{max-width:1280px;margin:0 auto;padding:26px 32px 40px}
.orient{margin:0 0 14px}
.obox{border-left:3px solid var(--cyan);background:#F7FBFC;padding:13px 18px;
  font-size:13.5px;line-height:1.6;max-width:1000px}
.obox.alt{border-left-color:var(--mid)}
.notseparate{margin:34px 0 0;padding:16px 0 0;border-top:1px solid var(--hair);
  font-size:13px;color:#5A5F63;line-height:1.6;max-width:1000px}
.notseparate a{color:var(--det)}

footer{border-top:1px solid var(--hair);padding:18px 32px 40px;max-width:1280px;
  margin:0 auto;font-size:11.5px;color:#8A8F93}
.footnote-internal{display:block;margin-top:5px}
body.gm .footnote-internal{display:none}

/* =====================================================================
   THE BRAND x MARKET MATRIX
   Design constraint driving most of this: the whole point is comparing DOWN a
   column and ACROSS a row, so numbers are tabular-figure aligned and the
   operating-model badge sits outside the number's optical box.
   ===================================================================== */
.panelbar{gap:26px;flex-wrap:wrap;align-items:flex-end;max-width:none;padding-left:0;padding-right:0}
.pseg button{padding:6px 11px;font-size:13px}

.pspec{font-size:12.5px;color:#5A5F63;margin:14px 0 0;max-width:1000px;line-height:1.55}
.pcover{font-size:13px;color:#5A5F63;margin:12px 0 4px}
.pwarn{color:#8A5A00}
.pwarnbox{background:#FFF8E8;border-left:3px solid #E0A200;padding:10px 14px;
  font-size:13px;margin:10px 0 4px;max-width:1000px}

.pmatrixwrap{overflow-x:auto;margin:16px 0 0;border:1px solid var(--hair)}
.pmatrix{border-collapse:collapse;width:100%;min-width:880px;font-size:14px}
.pmatrix th{background:var(--greylt);text-align:right;padding:9px 12px;
  font-weight:500;font-size:12px;letter-spacing:.04em;white-space:nowrap;
  border-bottom:1px solid var(--hair)}
.pmatrix th.pbrand{text-align:left}
.pmatrix th .pcur{display:block;font-weight:300;font-size:10px;color:#7A7F83;letter-spacing:.08em}
.pmatrix td{padding:8px 12px;border-bottom:1px solid #F0F1F2;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pmatrix td.pbrand{text-align:left;white-space:normal}
.pmatrix td.pbrand .plevel{display:block;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#8A8F93}
.pmatrix td.pbrand .pscope{display:block;font-size:10px;color:var(--mid);letter-spacing:.04em}

/* Role bands. The grouping IS the argument, so it gets a real rule rather than
   a subtle tint: the decomposition below only means anything if a reader can
   see which row is doing which job. */
.prolerow td{background:var(--deep);color:var(--white);padding:7px 12px;text-align:left}
.prole{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.prolenote{font-size:11px;color:var(--cyanlt);margin-left:12px;font-weight:300}

.pcell{position:relative}
.pcell .pval{font-weight:400}
.pcell.pempty{background:#FAFBFB}
.pcell.pabsent{background:#F4F5F6}
/* A market the brand is not collected in at all (our own brands are not on the
   six-market grid). Distinct from "collected and absent", which is a finding. */
.pcell.pnoscope{background:repeating-linear-gradient(45deg,#FBFBFC,#FBFBFC 5px,#F4F5F6 5px,#F4F5F6 10px)}
.pna{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9AA0A4}
.pdash{color:#C8CDD0}
/* Sale window = a moment, not a position. An amber border rather than a fill,
   so it cannot be confused with the operating-model colour beside it. */
.pcell.psale{box-shadow:inset 0 0 0 2px #E0A200}
.pop{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-left:8px;vertical-align:2px;border:1px solid rgba(0,0,0,.14)}
.pspread{font-weight:500;background:#FAFBFB}

.pkey{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 0;font-size:12px;color:#5A5F63}
.pkeyitem{display:flex;align-items:center;gap:6px}
.pkeyitem i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.14)}
.pkeynote{color:#8A5A00}

.pdecomp{margin:30px 0 8px;border-top:2px solid var(--ink);padding-top:16px}
.pdh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.pdempty{font-size:13px;color:#5A5F63;max-width:820px;line-height:1.65}
.pdgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:900px}
.pdgrid>div{border-left:3px solid var(--hair);padding-left:14px}
.pdgrid>.pdhero{border-left-color:var(--cyan)}
.pdgrid.pdthin .pdn{color:#5A5F63}
.pdn{display:block;font-size:30px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pdl{display:block;font-size:12px;color:#5A5F63;margin-top:4px;line-height:1.45}
.pdcaution{font-size:12px;color:#8A5A00;background:#FFF8E8;border-left:3px solid #E0A200;
  padding:9px 13px;margin:14px 0 0;max-width:900px;line-height:1.5}
.pdbasis{font-size:11px;color:#8A8F93;margin:12px 0 0;max-width:900px;line-height:1.5}

@media (max-width:820px){ .pdgrid{grid-template-columns:1fr} }

/* Off-grid markets: cells we collect that the comparator grid has no column
   for (our own Vietnam and China). A strip, not two extra columns: widening
   the table by a quarter to carry two cells would also imply the comparators
   were checked there and found absent, which is a different and false claim. */
.poff{margin:22px 0 0;border-top:1px solid var(--hair);padding-top:14px}
.poffh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.poffl{font-size:12px;color:#5A5F63;margin:6px 0 10px;max-width:820px;line-height:1.55}
.poffrow{display:flex;flex-wrap:wrap;gap:10px}
.poffcell{border:1px solid var(--hair);padding:8px 12px;display:flex;align-items:center;gap:10px;
  font-variant-numeric:tabular-nums}
.poffm{font-size:11px;color:#5A5F63;letter-spacing:.03em}
.poffv{font-weight:400}
.poffv i{font-style:normal;color:#C8CDD0;font-size:12px}

/* Loader failure state. A blank page is what made the 2026-08-05 deployment
   bug take a round trip to find, so a missing data layer now says so. */
.loaderr{background:#FFF8E8;border-left:3px solid #E0A200;padding:14px 18px;
  font-size:13px;line-height:1.6;max-width:900px;margin:18px 0}
.loaderr code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#F4F1E6;padding:1px 4px}

/* Role provenance. A reader looking at group headings cannot tell an evidenced
   grouping from a guessed one, so the page says which it is. Retire with the
   block in app.js once the operating-model column is complete. */
.prolewarn{background:#F2F8FA;border-left:3px solid var(--mid);padding:11px 15px;
  font-size:12.5px;line-height:1.6;max-width:1000px;margin:14px 0 0}

/* =====================================================================
   CHARTS
   The matrix answers "what does Zara cost in Korea". These answer the
   shape questions it cannot. DET palette only, no gradients, no shadows,
   hairlines for separation. Cyan means DETERMINANT and nothing else.
   ===================================================================== */
.charts{margin:22px 0 4px;display:grid;gap:26px}
.ch{border-top:2px solid var(--ink);padding-top:14px}
.chh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:6px}
.chl{font-size:12.5px;color:#5A5F63;line-height:1.55;max-width:900px;margin:0 0 12px}
.cv{width:100%;height:auto;display:block;overflow:visible}

.gl{stroke:#F1F2F3;stroke-width:1}
.tk{font-size:10px;fill:#8A8F93;text-anchor:middle;
  font-family:'Neue Haas Grotesk Display Pro',Helvetica,Arial,sans-serif}
.tk.r{text-anchor:end}
.ax{font-size:10px;fill:#9AA0A4;font-family:inherit}
.rl{font-size:12px;fill:#3C4043;text-anchor:end;
  font-family:'Neue Haas Grotesk Display Pro',Helvetica,Arial,sans-serif}
.rl.us{fill:var(--det);font-weight:500}
.rv{font-size:10.5px;fill:#8A8F93;font-variant-numeric:tabular-nums;
  font-family:'Neue Haas Grotesk Display Pro',Helvetica,Arial,sans-serif}

/* range bars */
.rb{stroke:var(--mid);stroke-width:7;stroke-linecap:butt}
.rb.us{stroke:var(--cyan)}
.rd{fill:var(--det)}
.rd.us{fill:var(--det);stroke:var(--cyan);stroke-width:2}

/* market index */
.mb{fill:var(--mid)}
.mb.base{fill:var(--det)}

/* connected dot plot */
.pn{font-size:10.5px;font-weight:500;
  font-family:'Neue Haas Grotesk Display Pro',Helvetica,Arial,sans-serif}
.pn.us{font-weight:500}
.dotkey{display:flex;gap:20px;flex-wrap:wrap;font-size:11.5px;color:#5A5F63;margin:0 0 6px}
.dotkey span{display:flex;align-items:center;gap:6px}
.dotkey i{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid var(--det)}
.dotkey i.k-solid{background:var(--det)}
.dotkey i.k-hollow{background:#fff}
.dotkey i.k-unk{background:var(--grey);border-color:var(--grey);width:8px;height:8px}