/* app/set-brand.css — page-local styles for Workspace General (identity + branding).
   Prefix every selector `.e8-set-brand-`. Shared grammar lives in app/set-core.css and must not
   be duplicated here; if a page needs a new shared primitive, that is a core change, not a
   local override. Tokens only — no hex, no raw font sizes.

   WHAT IS DEFINED HERE, AND WHY IT IS NOT IN THE CORE
   Three shapes, all specific to W1 and to nothing else in the 20 pages:

     .e8-set-brand-swatch   the reference's colour-swatch chip — "a bordered pill containing a
                            small rounded colour square and the hex in mono-ish text". A real
                            <input type="color"> is stretched invisibly over the whole chip, so
                            the pointer target is the chip, the tab stop is the input, and the
                            focus ring is drawn by :focus-within on the chip rather than on the
                            invisible input (set-core's blanket :focus-visible rule would have put
                            it there, which is why it is switched off for these two inputs).
     .e8-set-brand-media    the logo / favicon "image placeholder + pencil". The pencil is a
                            <label> around a real file input, hidden the same way.
     .e8-set-brand-hint     the quiet line under a row's description — the resolved public URL,
                            and the slug-missing warning.

   The monogram ink is `color-mix(brand 70%, --ui-text)` rather than the brand colour raw: mixing
   toward the ink token keeps it dark in light mode and light in dark mode whatever hue the owner
   picks, so no brand colour can produce an unreadable tile. Same reasoning for the tile fill,
   which is a 10% wash over --ui-surface. */

/* Detached probe used by e8BrandHex() to resolve a computed colour (dark mode holds these tokens
   as color-mix, and only the CSSOM knows what that evaluates to). Never visible. */
.e8-set-brand-probe { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- colour swatch chip ---------------------------------------------------------------- */
.e8-set-brand-swatch {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--ui-space-2);
  height: 34px; padding: 0 14px 0 6px; max-width: 100%;
  border: 1px solid var(--set-line); border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
}
.e8-set-brand-swatch:hover { border-color: var(--ui-border-strong); }
.e8-set-brand-swatch-sq {
  flex: none; width: 22px; height: 22px; border-radius: var(--ui-radius);
  /* inset hairline, so a white or very pale brand colour still reads as a square */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-text) 16%, transparent);
}
.e8-set-brand-swatch-hex {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--ui-text-sm); letter-spacing: 0.04em;
  color: var(--ui-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.e8-set-brand-swatch-in {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.e8-set-brand-swatch:focus-within { box-shadow: var(--ui-focus-ring); }
.e8-set-brand-swatch.is-unset { padding: 0 14px; }
.e8-set-brand-swatch.is-unset .e8-set-brand-swatch-hex { color: var(--ui-text-tertiary); }

/* ---------- logo / favicon ---------------------------------------------------------------------
   `--e8-set-brand-c` (the primary brand colour) and `--e8-set-brand-img` (an uploaded data URL)
   are set inline on the tile: both are DATA, which is the one case where inline is correct. */
.e8-set-brand-media { display: inline-flex; align-items: center; gap: var(--ui-space-2); }
.e8-set-brand-thumb {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ui-space-2); height: 40px; padding: 0 12px;
  border-radius: var(--ui-radius-md);
  border: 1px solid color-mix(in srgb, var(--e8-set-brand-c, var(--ui-border)) 20%, var(--set-line));
  background-color: color-mix(in srgb, var(--e8-set-brand-c, var(--ui-fill)) 10%, var(--ui-surface));
  background-image: var(--e8-set-brand-img, none);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.e8-set-brand-thumb.is-logo { min-width: 132px; }
.e8-set-brand-thumb.is-favicon { width: 40px; padding: 0; }
.e8-set-brand-thumb.has-img { background-color: var(--ui-surface); }
.e8-set-brand-mono {
  flex: none; font-size: var(--ui-text-md); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--e8-set-brand-c, var(--ui-text)) 70%, var(--ui-text));
}
.e8-set-brand-word {
  font-size: var(--ui-text-base); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ui-text);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e8-set-brand-pick {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--ui-radius-md);
  border: 1px solid var(--set-line); background: var(--ui-surface);
  color: var(--ui-text-secondary); cursor: pointer;
}
.e8-set-brand-pick:hover { background: var(--ui-fill); color: var(--ui-text); }
.e8-set-brand-pick .material-symbols-outlined { font-size: var(--ui-icon-sm); }
.e8-set-brand-pick input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.e8-set-brand-pick:focus-within { box-shadow: var(--ui-focus-ring); }

/* set-core draws one focus ring for the whole surface (`.e8-set :focus-visible`). Both inputs
   above are invisible, so the ring must move to the chip that stands for them. Equal specificity,
   later file — set-brand.css is linked after set-core.css. */
.e8-set-brand-swatch-in:focus-visible,
.e8-set-brand-pick input:focus-visible { box-shadow: none; }

/* ---------- quiet hint under a row description -------------------------------------------------- */
.e8-set-brand-hint {
  display: block; margin-top: 6px;
  font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); line-height: 1.45;
}
.e8-set-brand-hint.is-warn { color: var(--ui-warning); }
.e8-set-brand-url {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--ui-text-secondary); word-break: break-all;
}
.e8-set-brand-url b { font-weight: 600; color: var(--ui-text); }

/* ---------- call-to-action editor ---------------------------------------------------------------- */
.e8-set-brand-ctas {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ui-space-2);
}
.e8-set-brand-cta { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; }
.e8-set-brand-cta .e8-set-input.is-lg { flex: 1; min-width: 200px; width: auto; }

/* ---------- narrow -------------------------------------------------------------------------------
   Placed AFTER every rule it overrides: a conditional at-rule adds no specificity, so a @media
   block written above its own base rule never applies. Breakpoints are 840 / 640 only; nothing on
   this page needs the 840 step because set-core already stacks the row at 640. */
@media (max-width: 640px) {
  .e8-set-brand-media { flex-wrap: wrap; }
  .e8-set-brand-thumb.is-logo { min-width: 0; flex: 1; }
  .e8-set-brand-cta { flex-direction: column; align-items: stretch; }
  /* set-core widens .e8-set-input to 100% at this width; the unconditional `width: auto` above
     would otherwise beat it, because this file is linked later. */
  .e8-set-brand-cta .e8-set-input.is-lg { width: 100%; min-width: 0; flex: none; }
  .e8-set-brand-cta .e8-set-btn { align-self: flex-start; }
}