/* RRLab editor exception: a light working canvas, compact tools and dark marketing. */
:root{font-size:100%;--radius-control:.55rem;--radius-card:.8rem;--radius-panel:1rem;--control-min-block:2.75rem}
html[data-theme=light]{color-scheme:light;--color-bg-start:#fff;--color-bg-end:#fff;--color-text:#17191d;--color-muted:#747780;--color-primary:#17191d;--color-primary-hover:#343640;--color-accent:#5265d8;--color-error:#c3373d;--surface-1:#f5f5f7;--surface-2:#eeeef1;--surface-hover:#ededf2;--border-1:#e7e7eb;--border-strong:#cccdd5;background:#fff}
html[data-theme=dark]{--color-bg-start:#111116;--color-bg-end:#111116;--color-text:#fafafa;--color-muted:#a6a6af;--color-primary:#d1f7c4;--color-primary-hover:#e3fddd;--color-primary-content:#111116;--color-accent:#c7b7ff;--surface-1:#1b1b23;--surface-2:#22222d;--surface-hover:#2a2a34;--border-1:#ffffff18;background:#111116}
.topbar{position:sticky;top:0;z-index:25;background:var(--color-bg-start);max-width:none;min-height:4.6rem;padding:.75rem 2rem;gap:2rem;border-bottom:1px solid var(--border-1)}
.brand{font-size:1.12rem;letter-spacing:-.06em}.brand-mark{width:1.65rem;border-color:currentColor}.brand-mark:before{border-color:currentColor}.brand-mark:after{background:var(--color-bg-start)}
.product-nav{display:flex;align-self:stretch;gap:1.8rem;margin-right:auto;align-items:center}.product-nav a{display:flex;align-items:center;align-self:stretch;position:relative;font-size:.82rem;font-weight:500;white-space:nowrap;color:var(--color-muted)}.product-nav a[aria-current=page]{color:var(--color-text)}.product-nav a[aria-current=page]:after{content:'';position:absolute;bottom:-.76rem;left:0;right:0;height:2px;background:currentColor}.product-nav a:hover{color:var(--color-text)}
.top-actions{flex-wrap:nowrap;gap:.6rem}.nav-pill{border:0;border-radius:.4rem;font-size:.78rem;min-height:2.3rem}.nav-pill.credit{color:var(--color-muted)}.nav-create{background:var(--color-text);color:var(--color-bg-start);padding:.55rem .85rem;border-radius:.45rem;font-size:.78rem;font-weight:600;white-space:nowrap}.account-button{background:var(--surface-2);border-radius:50%}.marketing-nav{margin-left:auto;margin-right:0}.marketing-nav a{color:var(--color-text)}
.btn{font-size:.84rem;min-height:2.75rem;padding:.7rem 1rem;font-weight:600;border-radius:.5rem}.btn-primary{color:var(--color-primary-content,#fff);box-shadow:none}.btn-ghost{font-weight:500}.btn-compact{min-height:2.3rem;font-size:.75rem}.icon-button{min-width:2.5rem;min-height:2.5rem;border-radius:.5rem}.input,.area{background:var(--color-bg-start);border-radius:.5rem;font-size:.83rem;min-height:2.65rem;padding:.65rem .8rem}.input:hover,.area:hover{border-color:var(--border-strong)}.area{min-height:8rem}.field-label{font-size:.76rem;font-weight:500}.field-bottom{min-height:0}.field-top{min-height:1.5rem}.example{padding:.15rem .3rem;display:inline-grid;place-items:center;min-height:1.6rem}.example .icon{width:.9rem;height:.9rem}.choices{gap:.35rem}.choice{border-radius:.4rem;min-height:2.5rem;padding:.45rem;font-weight:500;background:transparent}.choice[aria-pressed=true]{border-color:var(--color-text);background:var(--surface-1);box-shadow:none}.choice-label{font-weight:500}.choice:hover{transform:none}.checkbox-label{font-size:.77rem}.details summary{font-size:.76rem}.field-error{font-size:.72rem}.hint{font-size:.72rem}.counter{font-size:.66rem}.action-feedback{font-size:.76rem}.action-feedback:empty{display:none}.save-status{font-size:.68rem}.btn:disabled{color:var(--color-muted);background:var(--surface-2);border-color:var(--border-1)}
.dialog{background:var(--color-bg-start);border:1px solid var(--border-1);box-shadow:0 2rem 7rem #11112630;border-radius:.8rem;padding:1.5rem;width:min(32rem,calc(100% - 1.5rem))}.dialog::backdrop{background:#181b2859;backdrop-filter:blur(3px)}.dialog-heading h2{font-size:1.3rem;font-weight:650;letter-spacing:-.025em}.dialog-heading .eyebrow:empty{display:none}.dialog-body{gap:1rem;min-height:0}.dialog-error:empty{display:none}.dialog-header{align-items:center}.dialog-error{font-size:.76rem}.toast{background:var(--color-text);color:var(--color-bg-start);border:0;font-size:.78rem;border-radius:.55rem}
.site-footer{max-width:none;padding:1.4rem 2rem;font-size:.73rem}.auth{max-width:28rem}.auth h1{font-size:2.4rem}.preview-canvas{aspect-ratio:auto!important}.preview-stage{background:transparent}.wireframe{background-color:var(--surface-1)}
@media(max-width:900px){.topbar{padding:.7rem 1rem;gap:1rem;flex-wrap:wrap}.product-nav{order:3;width:100%;gap:1.5rem;min-height:2.4rem;overflow-x:auto}.product-nav a[aria-current=page]:after{bottom:0}.top-actions{margin-left:auto}.marketing-nav{order:initial;width:auto;min-height:0;overflow:visible;gap:1rem}.marketing-nav a[aria-current=page]:after{display:none}.nav-pill.credit{font-size:.7rem}.site-footer{padding:1.2rem}}
@media(max-width:480px){.topbar{gap:.5rem}.brand{font-size:1rem}.brand-mark{width:1.35rem}.nav-create{font-size:.7rem;padding:.5rem .6rem}.top-actions{gap:.15rem}.nav-pill.credit{padding:.3rem;gap:.25rem}.nav-pill.credit .icon{display:none}.account-button{width:2.1rem;min-height:2.1rem}.product-nav{gap:1.35rem}.product-nav a{font-size:.74rem}.marketing-nav{gap:.5rem}.marketing-nav a{font-size:.73rem}.dialog{padding:1rem}.dialog-body{padding-top:1rem}.input,.area{font-size:1rem}}
@media(max-width:480px){.nav-pill.credit{display:none}.product-nav:not(.marketing-nav){gap:.55rem;justify-content:space-between}.product-nav:not(.marketing-nav) a{font-size:.69rem}}
/* Iteration 2: shared navigation and creation entry. Editor layout lives in studio.css. */
.mobile-navigation { display: none; position: relative; }
.mobile-navigation summary { display: grid; min-width: 44px; min-height: 44px; place-items: center; cursor: pointer; list-style: none; }
.mobile-navigation nav { position: absolute; right: 0; top: 100%; z-index: 40; display: grid; min-width: 220px; padding: 8px; background: #fff; color: #202128; border: 1px solid #d9dbe1; border-radius: 12px; box-shadow: 0 12px 30px #0002; }
.mobile-navigation nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; }
.creation-page { width: min(100% - 48px, 1040px); margin: 64px auto; display: grid; gap: 24px; }
.creation-page > .btn { justify-self: start; }
.creation-preview { width: 100%; max-width: 320px; height: 220px; object-fit: contain; border-radius: 12px; background: #f0f1f4; }
.creation-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.creation-option { display: grid; gap: 16px; padding: 28px; border: 1px solid #d9dbe1; border-radius: 16px; background: #fff; }
.creation-option h2 { font-size: 21px; margin: 0; }
.creation-option p { margin: 0; color: #555c69; }
.creation-option:hover { border-color: #16191e; }
.account-page { width: min(100% - 32px, 720px); margin: 40px auto; }
.brand-avatar-preview img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.error-reference { display: block; margin-top: 8px; font-size: 12px; }
.toast { display: flex; align-items: center; gap: 12px; max-width: min(640px,calc(100vw - 32px)); flex-wrap: wrap; }
@media (max-width: 767px) {
  .topbar:not(.landing-topbar) > .product-nav { display: none; }
  .topbar:not(.landing-topbar) .nav-create { display: none; }
  .mobile-navigation { display: block; }
  .creation-page { width: calc(100% - 32px); margin: 32px auto; }
  .creation-options { grid-template-columns: 1fr; gap: 16px; }
  .creation-option { padding: 20px; }
}
/* One compact navigation row on phones; links live in the menu. */
.nav-create-short{display:none}
@media(max-width:767px){
  .topbar,.topbar.landing-topbar{flex-wrap:nowrap;gap:8px;padding:10px 16px;min-height:64px}
  .topbar>.product-nav,.topbar.landing-topbar>.product-nav{display:none}
  .topbar .brand,.topbar.landing-topbar .brand{font-size:16px;gap:8px;white-space:nowrap}
  .topbar .brand-mark{width:24px;height:24px}
  .topbar .top-actions{margin-left:auto;gap:4px;flex-wrap:nowrap}
  .topbar .top-actions>.nav-pill:not(.credit){display:none}
  .topbar .top-actions>.nav-create{display:inline-flex;font-size:11px;min-height:36px;padding:8px 10px;white-space:nowrap}
  .topbar .mobile-navigation summary{min-width:36px;min-height:40px}
  .topbar .nav-create-long{display:none}.topbar .nav-create-short{display:inline}
}