/* Shared chrome for the Brand Hub mockups. */

:root {
  --orange: #ff6f47;
  --orange-hover: #e85a33;
  --orange-light: #fff1ed;
  --dark: #272727;
  --line: #e7e7e3;
  --body: #474747;
  --muted: #a9a9a9;
  --ink: #141414;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  color: var(--dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Laid out at a desktop width and zoomed to fit the embedding frame — see
   _hub.js. `vh` ignores zoom, so full-height layout sizes against --vh. */
.app { display: flex; min-width: 1280px; height: var(--vh, 100vh); overflow: hidden; }

/* --- icon rail ----------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  width: 56px;
  flex: none;
  height: var(--vh, 100vh);
  background: var(--dark);
}

.rail-head { display: flex; align-items: center; height: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
/* Scoped past `.rail a`, which would otherwise win on specificity and grey the
   mark out along with the nav icons. */
.rail .rail-brand { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--orange); }
.rail .rail-brand:hover { background: none; color: var(--orange); }

.rail nav { flex: 1; }

.rail a, .rail > button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}

.rail > button { color: rgba(255, 255, 255, 0.4); }
.rail a:hover, .rail > button:hover { background: rgba(0, 0, 0, 0.3); color: #fff; }
.rail a.active { background: #000; color: #fff; }

.rail-foot { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rail-foot a { color: rgba(255, 255, 255, 0.5); }

/* --- shell --------------------------------------------------------------- */

.shell { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }

.hub-head { display: flex; align-items: center; gap: 12px; height: 56px; flex: none; padding: 0 24px; }
.hub-head h1 { margin: 0; font-size: 17px; font-weight: 700; }

/* Monospaced micro-labels carry the whole interface's tone — every field label,
   size readout and tag in the Brand Hub is set this way. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}