/* studio-chrome.css
 *
 * Chrome refinements for the studio, kept in one file so the whole pass can be read,
 * tuned or removed without touching the 141 KB of app.html. Loaded last, so every rule
 * here wins on specificity ties. Nothing structural: no markup and no script changes,
 * only surface, spacing, hierarchy and state.
 *
 * The reference this follows collects its controls into one floating rounded surface,
 * keeps the canvas the only bright thing on screen, states one primary action in the
 * accent colour, and lets section headings carry the hierarchy instead of borders.
 */

/* ---------------------------------------------------------------------------
 * 1. The canvas bar reads as a floating card, not a full-bleed strip.
 * ------------------------------------------------------------------------- */

#main .tbar {
  height: 48px;
  margin: 12px 14px 2px;
  padding: 0 8px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  /* the strip's gradient and hard bottom rule belong to a full-bleed bar, not a card */
  background-image: none;
}

@supports (backdrop-filter: blur(10px)) {
  #main .tbar {
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(12px) saturate(1.1);
  }
}

/* A card is read by its edge. On a dark ground the border alone is too quiet, so the
 * surface is lifted a step and given a hairline top highlight instead. */
:root[data-theme="dark"] #main .tbar {
  background: color-mix(in srgb, var(--panel) 94%, white 6%);
  border-color: color-mix(in srgb, var(--line-strong, var(--line)) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 10px 24px -18px rgba(0, 0, 0, .9);
}

/* The view name is the bar's title, so give it a little more room to breathe. */
#main .tbar .viewchip { padding: 0 10px 0 6px; }
#main .tbar .viewchip #viewName { font-size: 14px; }

/* ---------------------------------------------------------------------------
 * 2. Controls sit in wells, and the live tool is unmistakable.
 * ------------------------------------------------------------------------- */

.toolgrp {
  padding: 3px;
  border-radius: 11px;
  background: var(--pill-well, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* The active tool is a solid accent chip. A tinted background reads as "hover" at a
 * glance; a filled chip reads as "this is the mode you are in". */
.toolgrp .ticon.active,
.toolgrp .ticon.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent, 0 6px 14px -8px rgba(44, 75, 255, .6));
}
.toolgrp .ticon.active svg,
.toolgrp .ticon.on svg { color: var(--accent-ink); }

.toolgrp .ticon:not(.active):not(.on):hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}

/* Separators are a hint, not a rule. */
.tgrp-sep {
  height: 18px;
  background: color-mix(in srgb, var(--line) 75%, transparent);
  margin: 0 4px;
}

/* ---------------------------------------------------------------------------
 * 3. Section headings carry the hierarchy.
 * ------------------------------------------------------------------------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .11em;
  font-weight: 650;
  /* --faint is for disabled text; a heading you are meant to read should not use it */
  color: var(--muted);
}
.eyebrow.mt { margin-top: 26px; }

/* ---------------------------------------------------------------------------
 * 4. The canvas is the brightest thing on screen.
 *
 * The checkerboard means transparency and has to stay, but it can be quieter: two
 * tones a hair apart read as a calm field, while a high-contrast check fights the
 * artwork sitting on it.
 * ------------------------------------------------------------------------- */

:root[data-theme="dark"] #stage {
  background: repeating-conic-gradient(#191817 0 25%, #141312 0 50%) 0 / 24px 24px;
}
:root:not([data-theme="dark"]) #stage {
  background: repeating-conic-gradient(#F2F0EA 0 25%, #FBFAF7 0 50%) 0 / 24px 24px;
}

/* ---------------------------------------------------------------------------
 * 5. One primary action, stated in the accent.
 * ------------------------------------------------------------------------- */

.btn.primary {
  box-shadow: var(--shadow-accent, 0 8px 20px -8px rgba(44, 75, 255, .55));
  border-radius: 999px;
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.primary:active { filter: brightness(.97); transform: translateY(.5px); }

/* ---------------------------------------------------------------------------
 * 6. Panels: softer edges, consistent rhythm.
 * ------------------------------------------------------------------------- */

#views, #layers { scrollbar-width: thin; }

#views .panel-head { margin-bottom: 2px; }

/* A size card should look like a card, and the one you are editing should say so. */
#views .vcard, #views .view-card, #views .sizecard {
  border-radius: var(--radius, 12px);
  transition: border-color var(--dur, .18s) var(--ease, ease), box-shadow var(--dur, .18s) var(--ease, ease);
}
#views .vcard:hover, #views .view-card:hover, #views .sizecard:hover {
  border-color: var(--line-strong, var(--line));
  box-shadow: var(--shadow-sm);
}
#views .vcard.active, #views .view-card.active, #views .sizecard.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}