/* ===================================================================
   brand.css — br- namespace

   Every selector is prefixed. Nothing here reuses a class name from
   main.css, so nothing leaks in either direction.
   =================================================================== */

:root, [data-theme="light"] {
  --br-bg:#F8F8F6; --br-surface:#FFFFFF; --br-surface2:#F0EDE5;
  --br-ink:#1A1815; --br-ink2:rgba(26,24,21,.74); --br-ink3:rgba(26,24,21,.56);
  --br-line:rgba(26,24,21,.12); --br-line2:rgba(26,24,21,.24);
  --br-accent:#8B6A2E;
  --br-warn:#8B5E14; --br-warn-bg:rgba(139,94,20,.10);
  --br-user:#2D4A7A; --br-user-bg:rgba(45,74,122,.10);
  --br-btn:#1A1815; --br-btn-tx:#F8F8F6;
}
[data-theme="dark"] {
  --br-bg:#1C1A17; --br-surface:#252320; --br-surface2:#2E2B27;
  --br-ink:#F4F1E8; --br-ink2:rgba(244,241,232,.78); --br-ink3:rgba(244,241,232,.58);
  --br-line:rgba(244,241,232,.12); --br-line2:rgba(244,241,232,.24);
  --br-accent:#C99B4D;
  --br-warn:#D4A155; --br-warn-bg:rgba(212,161,85,.12);
  --br-user:#93B2DF; --br-user-bg:rgba(138,169,214,.14);
  --br-btn:#F4F1E8; --br-btn-tx:#1C1A17;
}

#brand {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--br-ink); font-size:15px; line-height:1.55;
}
#brand * { box-sizing:border-box; }

.br-loading { padding:60px; text-align:center; color:var(--br-ink3); }

.br-intro { margin-bottom:24px; }
.br-intro p { font-size:15px; color:var(--br-ink2); line-height:1.65; margin:0; max-width:620px; }
.br-intro a { color:var(--br-ink); text-decoration:underline; text-underline-offset:3px; }

/* ---------- sections ---------- */
.br-sec {
  background:var(--br-surface); border:1px solid var(--br-line);
  border-radius:10px; padding:24px; margin-bottom:16px;
}
.br-h2 {
  font-family:'Newsreader', Georgia, serif; font-weight:500;
  font-size:20px; letter-spacing:-.01em; margin:0 0 6px; color:var(--br-ink);
}
.br-note { font-size:13.5px; color:var(--br-ink3); margin:0 0 20px; line-height:1.6; max-width:600px; }
.br-warn {
  font-size:13px; color:var(--br-warn); background:var(--br-warn-bg);
  padding:10px 14px; border-radius:7px; margin:0 0 12px; line-height:1.5; max-width:600px;
}

.br-field { margin-bottom:24px; }
.br-field:last-of-type { margin-bottom:0; }
.br-label {
  font-size:13px; font-weight:600; margin-bottom:10px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.br-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.br-empty { font-size:13.5px; color:var(--br-ink3); font-style:italic; }

/* provenance tags */
.br-tag {
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:4px;
  background:var(--br-surface2); color:var(--br-ink3);
}
.br-tag-user { background:var(--br-user-bg); color:var(--br-user); }

/* ---------- colours ---------- */
.br-swatch {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 6px 5px 8px; border-radius:7px;
  background:var(--br-surface2); border:1px solid var(--br-line);
}
.br-chipcolor {
  width:22px; height:22px; border-radius:5px; flex-shrink:0;
  border:1px solid var(--br-line2); display:inline-block;
}
.br-colorval {
  width:92px; border:none; background:transparent; color:var(--br-ink);
  font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:12.5px; padding:2px 0;
}
.br-colorval:focus { outline:1px solid var(--br-line2); border-radius:3px; }

/* ---------- pills, fonts, facts ---------- */
.br-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px 6px 12px; border-radius:999px;
  background:var(--br-surface2); border:1px solid var(--br-line);
  font-size:13.5px; color:var(--br-ink);
}
.br-fact {
  display:inline-block; padding:5px 11px; border-radius:5px;
  background:var(--br-surface2); font-size:13px; color:var(--br-ink2);
}

/* ---------- remove buttons ---------- */
.br-x {
  width:20px; height:20px; border-radius:4px; cursor:pointer; flex-shrink:0;
  background:transparent; border:none; color:var(--br-ink3);
  font-size:16px; line-height:1; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
.br-x:hover { background:var(--br-line); color:var(--br-ink); }
.br-x-float {
  position:absolute; top:6px; right:6px; z-index:2;
  background:rgba(26,24,21,.72); color:#F8F8F6; width:22px; height:22px;
}
.br-x-float:hover { background:rgba(26,24,21,.9); color:#fff; }

/* ---------- logos ---------- */
.br-logos { gap:12px; }
.br-logo {
  position:relative; width:96px; height:64px; border-radius:8px;
  border:1px solid var(--br-line); background:var(--br-surface2);
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.br-logo img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.br-logo-blank { width:100%; height:100%; border-radius:4px; background:var(--br-line); }

/* ---------- business facts ---------- */
.br-facts { margin:0; display:grid; grid-template-columns:150px 1fr; gap:10px 20px; }
.br-facts dt { font-size:13px; color:var(--br-ink3); font-weight:500; }
.br-facts dd { margin:0; font-size:14.5px; color:var(--br-ink); }

/* ---------- pillars ---------- */


/* ---------- pictures ---------- */
.br-pics {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:12px; margin-bottom:16px;
}
.br-pic { position:relative; margin:0; }
.br-pic img, .br-pic-blank {
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:8px; border:1px solid var(--br-line); background:var(--br-surface2);
}
.br-pic figcaption {
  font-size:12px; color:var(--br-ink3); margin-top:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- inputs and buttons ---------- */
.br-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.br-input {
  padding:9px 12px; border-radius:7px; min-width:200px;
  background:var(--br-surface); color:var(--br-ink);
  border:1px solid var(--br-line2); font-family:inherit; font-size:14px;
}
.br-input:focus { outline:2px solid var(--br-ink); outline-offset:-1px; }
#brNewColor {
  width:38px; height:38px; padding:2px; cursor:pointer;
  border:1px solid var(--br-line2); border-radius:7px; background:var(--br-surface);
}
.br-area {
  width:100%; min-height:120px; resize:vertical;
  padding:12px 16px; border-radius:8px;
  background:var(--br-bg); color:var(--br-ink);
  border:1px solid var(--br-line2);
  font-family:inherit; font-size:14.5px; line-height:1.6;
}
.br-area:focus { outline:2px solid var(--br-ink); outline-offset:-1px; }
.br-area::placeholder { color:var(--br-ink3); }

.br-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500; line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition:background .15s ease, opacity .15s ease;
}
.br-btn-p { background:var(--br-btn); color:var(--br-btn-tx); }
.br-btn-p:hover { opacity:.88; }
.br-btn-p:disabled { opacity:.45; cursor:default; }
.br-btn-q { background:transparent; color:var(--br-ink2); border-color:var(--br-line2); }
.br-btn-q:hover { background:var(--br-surface2); color:var(--br-ink); }

.br-savebar {
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--br-line);
}
.br-savenote { font-size:13px; color:var(--br-ink3); }
.br-upstatus { font-size:13px; color:var(--br-ink3); }

@media (max-width:640px) {
  .br-sec { padding:16px; }
  .br-facts { grid-template-columns:1fr; gap:2px 0; }
  .br-facts dd { margin-bottom:10px; }
  .br-pics { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ===================================================================
   Additions: hex input, source badges, upload panel
   =================================================================== */

.br-hint { font-size:12.5px; color:var(--br-ink3); }
.br-note-tight { margin-bottom:12px; }
.br-field-sep { margin-top:24px; padding-top:20px; border-top:1px solid var(--br-line); }
.br-area-tall { min-height:150px; }
.br-sec em { font-style:italic; color:var(--br-ink2); }

/* hex box next to the picker */
.br-input-hex {
  min-width:0; width:110px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px;
}

/* source badge on logos and pictures */
.br-src {
  position:absolute; left:6px; bottom:6px; z-index:2;
  padding:2px 6px; border-radius:4px;
  background:rgba(26,24,21,.72); color:#F8F8F6;
  font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.br-logo { overflow:hidden; }

/* upload panel */
.br-scrim {
  position:fixed; inset:0; background:rgba(26,24,21,.55); z-index:1000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto;
}
[data-theme="dark"] .br-scrim { background:rgba(10,9,8,.7); }
.br-panel {
  width:100%; max-width:620px; background:var(--br-bg); color:var(--br-ink);
  border:1px solid var(--br-line2); border-radius:12px; overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;
}
.br-panel-head {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--br-line); background:var(--br-surface);
}
.br-panel-title { font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:19px; }
.br-panel-sub { font-size:13px; color:var(--br-ink3); margin-top:2px; }
.br-close {
  width:34px; height:34px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--br-line2);
  color:var(--br-ink2); font-size:20px; line-height:1; font-family:inherit;
}
.br-close:hover { background:var(--br-surface2); }
.br-panel-body { padding:24px; }
.br-panel-foot {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px 24px; border-top:1px solid var(--br-line); background:var(--br-surface);
}
.br-foot-btns { display:flex; gap:8px; }

.br-up {
  display:grid; grid-template-columns:88px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--br-line);
}
.br-up:first-of-type { border-top:none; padding-top:0; }
.br-up-thumb {
  width:88px; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:8px; border:1px solid var(--br-line);
}
.br-up-fields { display:flex; flex-direction:column; gap:8px; min-width:0; }
.br-up-name { width:100%; }
.br-up-desc { min-height:74px; font-size:14px; }

@media (max-width:640px) {
  .br-up { grid-template-columns:64px 1fr; gap:12px; }
  .br-up-thumb { width:64px; }
  .br-panel-foot { flex-direction:column; align-items:stretch; }
  .br-foot-btns .br-btn { flex:1; }
}

/* ---------- editable pillars ---------- */
.br-pillar-row {
  display:grid; grid-template-columns:20px 1fr 20px;
  gap:12px; align-items:start;
  padding:12px 0; border-top:1px solid var(--br-line);
}
.br-pillar-row:first-child { border-top:none; padding-top:0; }
.br-pillar-n {
  font-family:'Newsreader', Georgia, serif; font-size:15px;
  color:var(--br-ink3); padding-top:9px;
}
.br-pillar-in {
  width:100%; resize:vertical; min-height:auto;
  padding:8px 12px; border-radius:7px;
  background:var(--br-bg); color:var(--br-ink);
  border:1px solid var(--br-line2);
  font-family:inherit; font-size:14.5px; line-height:1.5;
}
.br-pillar-in:focus { outline:2px solid var(--br-ink); outline-offset:-1px; }
.br-pillar-row .br-x { margin-top:7px; }
.br-input-wide { width:100%; max-width:420px; }

@media (max-width:640px) {
  .br-pillar-row { grid-template-columns:16px 1fr 20px; gap:8px; }
}

/* ---------- colours as circles ---------- */
.br-swatch {
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:6px; padding:0; background:none; border:none;
}
.br-dot {
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--br-line2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.br-colorval {
  width:76px; text-align:center; border:none; background:transparent;
  color:var(--br-ink3); font-family:ui-monospace,Menlo,monospace; font-size:11.5px;
}
.br-colorval:focus { outline:1px solid var(--br-line2); border-radius:3px; color:var(--br-ink); }
.br-x-dot {
  position:absolute; top:-5px; right:-5px; width:19px; height:19px;
  border-radius:50%; background:var(--br-ink); color:var(--br-bg);
  opacity:0; transition:opacity .12s ease;
}
.br-swatch:hover .br-x-dot { opacity:1; }
.br-row { gap:14px; }