/* A client's look (clients/<id>.json brand.look, src/brand.mjs look()). Every rule waits for html[data-look], which
 * theme.js sets only when the client has one, so the plain dashboard is untouched. Colors come from the tokens theme.js
 * writes (each already readable on the light and the dark card); nothing here hard-codes a shop's color. */
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/playfair-display-latin.woff2) format("woff2"); }
@font-face { font-family:Montserrat; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/montserrat-latin.woff2) format("woff2"); }

/* Storefront: the shop's own website. Its heading face, a tinted header band, a strip in the lead color, the lead
 * color on buttons and the current tab, and the highlight color only on what she should notice. */
html[data-look="storefront"] body { font-family:var(--font-body, system-ui, sans-serif); }
html[data-look="storefront"] h1, html[data-look="storefront"] h2, html[data-look="storefront"] h3 { font-family:var(--font-head, inherit); font-weight:600; letter-spacing:.005em; }
html[data-look="storefront"] main h2 { font-size:1.3rem; line-height:1.25; }
html[data-look="storefront"] header { background:var(--look-soft); color:var(--look-on-soft); border-bottom-color:var(--line); }
html[data-look="storefront"] header > :first-child strong, html[data-look="storefront"] header > a:first-child,
html[data-look="storefront"] header > span:first-child > a:first-child { font-family:var(--font-head, inherit); font-size:1.3rem; font-weight:600; }
html[data-look="storefront"] header .muted { color:var(--look-on-soft); opacity:.85; }
html[data-look="storefront"] header { flex-wrap:wrap; gap:4px 16px; }
html[data-look="storefront"] header a { color:var(--accent); }
html[data-look="storefront"] header > a:first-child, html[data-look="storefront"] header > span:first-child > a:first-child { color:inherit; text-decoration:none; white-space:nowrap; }
html[data-look="storefront"] header strong { white-space:nowrap; }
/* The server's shadow banner (src/shadow.mjs) in the lead color; its words stay the server's. Inline styles, so !important. */
html[data-look="storefront"] .shadow-banner { background:var(--accent) !important; color:var(--on-accent) !important; font-family:var(--font-body, system-ui, sans-serif) !important; padding:8px 16px !important; }
html[data-look="storefront"] body { background:var(--look-bg, var(--bg)); }
html[data-look="storefront"] .badge { background:var(--highlight); color:var(--on-highlight); }
html[data-look="storefront"] section { border-radius:10px; }
html[data-look="storefront"] button:not(.ghost) { font-weight:600; }
@media (min-width:641px) {
  html[data-look="storefront"] #tabs { background:var(--look-soft); border-bottom-color:var(--line); box-shadow:0 0 0 100vmax var(--look-soft); clip-path:inset(0 -100vmax); } /* the band runs edge to edge like the header */
  html[data-look="storefront"] #tabs a { color:var(--look-on-soft); }
  html[data-look="storefront"] #tabs a[aria-current="page"] { color:var(--accent); }
  html[data-look="storefront"] header { border-bottom:0; }
}

/* Phone: a 16px label in the look's body face is wider than the system one, so past five tabs the last ones fold
 * under More (index.html adds it; it stays hidden for the plain dashboard and on desktop). */
#tabs .more, #moreMenu { display:none; }
@media (max-width:640px) {
  html[data-look] #tabs a[data-more] { display:none; }
  html[data-look] #tabs .more { display:block; }
  html[data-look] #moreMenu:not([hidden]) { display:grid; position:fixed; right:max(8px, env(safe-area-inset-right, 0px)); bottom:calc(72px + env(safe-area-inset-bottom, 0px)); z-index:20;
    min-width:180px; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px; }
  html[data-look] #moreMenu a { padding:14px 16px; min-height:48px; box-sizing:border-box; color:var(--fg); text-decoration:none; font-weight:600; border-radius:8px; }
  html[data-look] #moreMenu a[aria-current="page"] { color:var(--accent); background:var(--look-soft); }
}