/* Gallery shell — sidebar + viewer + controls.
   Intentionally independent from theme tokens so the chrome stays stable
   while components inside the iframe swap themes. */

:root {
  --g-bg: #F0EEE9;           /* Cloud Dancer — warm sand */
  --g-surface: #FFFFFF;
  --g-fg: #1F1812;           /* warm near-black */
  --g-muted: #5A514A;        /* warm gray */
  --g-subtle: #8A8076;
  --g-border: #E4DFD6;       /* warm border */
  --g-primary: #8B5A3C;      /* clay (Mountain West) */
  --g-primary-fg: #FDF8F1;
  --g-accent: #5A7A4A;       /* sage */
  --g-sidebar-w: 280px;
  --g-topbar-h: 64px;
  --g-radius: 0.5rem;
  --g-font: 'Inter', system-ui, -apple-system, sans-serif;
  --g-display: 'Fraunces', Georgia, serif;
}

.dark-chrome {
  --g-bg: #0E0E12; --g-surface: #17171C; --g-fg: #F3F1EC;
  --g-muted: #A8A49D; --g-subtle: #6F6B65; --g-border: #2A2A32;
  --g-primary: #F3F1EC;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--g-font);
  background: var(--g-bg); color: var(--g-fg);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Layout ------------------------------------------------------- */
.g-app { display: grid; grid-template-columns: var(--g-sidebar-w) 1fr; min-height: 100vh; }
.g-sidebar {
  background: var(--g-surface); border-right: 1px solid var(--g-border);
  padding: 1.25rem; overflow-y: auto; position: sticky; top: 0; height: 100vh;
}
.g-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

/* Brand mark */
.g-brand { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.5rem; text-decoration: none; color: inherit; }
.g-brand-mark { width: 32px; height: 32px; border-radius: 6px; background: var(--g-primary); color: var(--g-surface); display: grid; place-items: center; font-weight: 800; font-size: 18px; font-family: var(--g-display); }
.g-brand-name { font-family: var(--g-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.g-brand-sub { font-size: 0.6875rem; color: var(--g-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Sidebar nav */
.g-nav-section { margin-bottom: 1.25rem; }
.g-nav-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--g-subtle); padding: 0 0.75rem; margin-bottom: 0.375rem; }
.g-nav-list { list-style: none; margin: 0; padding: 0; }
.g-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: var(--g-radius);
  color: var(--g-fg); text-decoration: none; font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.g-nav-link:hover { background: var(--g-bg); }
.g-nav-link.active { background: var(--g-primary); color: var(--g-primary-fg); }
.g-nav-link.active .g-count { color: var(--g-primary-fg); opacity: 0.75; }

/* Studio link at bottom of sidebar */
.g-studio-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1.25rem; padding: 0.875rem 1rem; background: var(--g-fg); color: var(--g-surface); border-radius: var(--g-radius); text-decoration: none; transition: transform 150ms; }
.g-studio-link:hover { transform: translateY(-1px); text-decoration: none; }
.g-studio-link .gs-t { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.g-studio-link .gs-s { font-family: var(--g-display); font-size: 0.9375rem; font-weight: 500; margin-top: 0.125rem; letter-spacing: -0.01em; }
.g-studio-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; opacity: 0.7; }
.g-studio-link:hover svg { opacity: 1; }
.g-count { font-size: 0.75rem; color: var(--g-subtle); font-variant-numeric: tabular-nums; }

.g-search { position: relative; margin-bottom: 1rem; }
.g-search input {
  width: 100%; padding: 0.5rem 0.75rem 0.5rem 2rem; border: 1px solid var(--g-border);
  border-radius: var(--g-radius); background: var(--g-bg); color: var(--g-fg); font-size: 0.8125rem;
  outline: none;
}
.g-search input:focus { border-color: var(--g-primary); background: var(--g-surface); }
.g-search svg { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--g-subtle); width: 16px; height: 16px; }

/* Topbar */
.g-topbar {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: var(--g-topbar-h); padding: 0 1.25rem;
  background: var(--g-surface); border-bottom: 1px solid var(--g-border);
  position: sticky; top: 0; z-index: 10;
}
.g-crumbs { font-size: 0.875rem; color: var(--g-muted); }
.g-crumbs strong { color: var(--g-fg); font-weight: 600; }
.g-controls { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.g-control-group { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.375rem; background: var(--g-bg); border: 1px solid var(--g-border); border-radius: var(--g-radius); }
.g-control-group label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-subtle); padding-left: 0.375rem; }
.g-control-group select {
  background: transparent; border: none; font-size: 0.8125rem; font-weight: 500; color: var(--g-fg);
  padding: 0.25rem 0.375rem; cursor: pointer; outline: none; font-family: inherit;
}

.g-icon-btn {
  width: 36px; height: 36px; border-radius: var(--g-radius);
  background: var(--g-bg); border: 1px solid var(--g-border); color: var(--g-fg);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.g-icon-btn:hover { background: var(--g-primary); color: var(--g-surface); border-color: var(--g-primary); }
.g-icon-btn svg { width: 18px; height: 18px; }

/* Viewer */
.g-viewer { flex: 1; padding: 1.5rem; overflow: auto; }
.g-frame-shell {
  background: var(--g-surface); border: 1px solid var(--g-border); border-radius: calc(var(--g-radius) * 2);
  overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  height: 100%; min-height: calc(100vh - var(--g-topbar-h) - 3rem);
  display: flex; flex-direction: column;
}
.g-frame-header {
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--g-border);
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--g-muted);
  background: var(--g-bg);
}
.g-frame-dots { display: flex; gap: 4px; }
.g-frame-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--g-border); }
.g-frame-title { font-weight: 600; color: var(--g-fg); }
.g-frame-url { margin-left: auto; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.g-frame { width: 100%; flex: 1; border: none; background: var(--g-surface); }

/* Landing (no component selected) */
.g-landing { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 100%; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem); color: var(--g-muted); max-width: 960px; }
.g-landing-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--g-muted); margin-bottom: 1rem; }
.g-landing-eyebrow a { color: var(--g-primary); text-decoration: none; font-weight: 700; }
.g-landing-eyebrow a:hover { text-decoration: underline; }
.g-landing h1 { font-family: var(--g-display); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); font-weight: 500; color: var(--g-fg); margin-bottom: 1rem; letter-spacing: -0.02em; line-height: 1; }
.g-landing-lede { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); max-width: 54ch; margin-bottom: 1rem; line-height: 1.55; color: var(--g-fg); }
.g-landing-lede strong { font-weight: 700; color: var(--g-primary); }
.g-landing-sub { font-size: 0.9375rem; max-width: 58ch; margin-bottom: 2.5rem; line-height: 1.55; color: var(--g-muted); }
.g-landing-sub strong { font-weight: 600; color: var(--g-fg); }
.g-landing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.875rem; width: 100%; }
.g-landing-card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius); padding: 1.125rem 1.25rem 1.25rem; text-align: left; text-decoration: none; color: inherit; transition: all 200ms ease; position: relative; }
.g-landing-card:hover { transform: translateY(-2px); border-color: var(--g-primary); text-decoration: none; }
.g-landing-card .gl-num { font-family: var(--g-display); font-size: 0.6875rem; font-weight: 700; color: var(--g-subtle); letter-spacing: 0.08em; margin-bottom: 0.625rem; }
.g-landing-card h3 { font-family: var(--g-display); font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.25rem; color: var(--g-fg); line-height: 1.25; }
.g-landing-card:hover h3 { color: var(--g-primary); }
.g-landing-card p { font-size: 0.8125rem; color: var(--g-muted); margin: 0; line-height: 1.5; }

/* Responsive */
@media (max-width: 900px) {
  .g-app { grid-template-columns: 1fr; }
  .g-sidebar { position: fixed; transform: translateX(-100%); z-index: 100; width: 280px; transition: transform 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.1); }
  .g-sidebar.open { transform: translateX(0); }
  .g-menu-btn { display: grid !important; }
  .g-controls { gap: 0.375rem; }
  .g-control-group label { display: none; }
}
.g-menu-btn { display: none; }

/* Mobile topbar: stack controls so they don't overflow */
@media (max-width: 900px) {
  .g-topbar {
    height: auto;
    min-height: var(--g-topbar-h, 48px);
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
  }
  .g-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
}

/* Respect prefers-reduced-motion for gallery chrome */
@media (prefers-reduced-motion: reduce) {
  .g-sidebar, .g-frame, .g-topbar, .g-landing-card, .g-nav-link {
    transition: none !important;
  }
}