/*
  Studio shell - working sketch, not the final design.
  Tokens come from design-system.css. Keep this file small: it exists to make
  structure and proportions testable, and will be replaced when the real
  Studio design is done. Built for desktop and tablet.
*/

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-radius:3px}

/* No line in the Studio ever ends with one word left on its own. The browser
   does the balancing; nothing has to be written to a length that happens to
   fit. Headings get an even split across their lines, running text only has
   its last line protected. */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* One size for every arrow in the Studio: the back links, the breadcrumbs and
   the Enter Studio buttons. Small arrows disappear on a big screen. */
:root{--arrow-size:22px}

.studio-page{max-width:1280px;margin:0 auto;padding:0 40px}

/* ---- top bar ---- */
.studio-bar{border-bottom:1px solid var(--border)}
.studio-bar .bar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:none;padding-left:40px;padding-right:40px}
.studio-brand{font-family:var(--serif);font-size:var(--fs-section);font-weight:var(--w-med);
  letter-spacing:.01em;color:var(--text-bright)}
.studio-brand em{font-family:inherit;font-style:italic;font-weight:var(--w-normal);color:var(--gold)}
.studio-brand:hover em{color:#D8BC85}
.studio-back{font-size:var(--fs-sm);font-weight:var(--w-semi);color:var(--text-bright)}
.studio-back .arrow{font-size:var(--arrow-size);line-height:1;margin-right:5px;position:relative;top:2px}
.studio-back:hover{color:var(--gold)}
.studio-nav{display:flex;gap:28px;font-size:var(--fs-sm)}
.studio-nav a:hover{color:var(--gold)}
.studio-nav-action{position:relative;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.studio-nav-action:hover{color:var(--gold)}
.studio-update-dot{position:absolute;top:0;right:-8px;width:6px;height:6px;border-radius:50%;background:#e05a5a;box-shadow:0 0 0 2px var(--bg)}

.studio-main{padding-top:44px;padding-bottom:80px}

/* ---- page head ---- */
.studio-title{font-family:var(--serif);font-weight:var(--w-med);font-size:var(--fs-h2);
  line-height:var(--lh-snug);margin:0;color:var(--text-bright)}
/* Every studio is titled the same way: "Studio 0X" in white, the name of the
   studio in gold under it. A studio without a name yet simply leaves the
   second line out. */
.studio-head{margin:0 0 6px}
.studio-head-no{display:block;font-family:var(--serif);font-size:var(--fs-card);
  line-height:1.1;color:var(--text-bright)}
.studio-head-name{display:block;font-family:var(--serif);font-weight:var(--w-med);
  font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:.02em;color:var(--gold)}

/* Shared typography hierarchy. Each Studio room keeps its own layout. */
.studio-page-title{margin:0;font-family:var(--serif);font-weight:var(--w-med);
  font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:.02em;color:var(--gold)}
.studio-label,.studio-section-title{font-family:var(--sans);font-size:var(--fs-sm);font-weight:var(--w-med);
  line-height:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--a-blue)}

.studio-lede{text-wrap:balance;margin:10px 0 0;color:var(--text-muted);font-size:var(--fs-sm);max-width:var(--measure)}
.studio-label{margin:44px 0 16px}

/* ---- panels (account, empty studio bodies) ---- */
.studio-panel{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:24px;max-width:var(--measure)}
.studio-panel h2{font-family:var(--sans);font-weight:var(--w-semi);font-size:var(--fs-h3);
  margin:0 0 8px;color:var(--text-bright)}
.studio-panel p{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}

.studio-rows{max-width:var(--measure);border-top:1px solid var(--border)}
.studio-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 4px;border-bottom:1px solid var(--border)}
.studio-row strong{display:block;color:var(--text-bright);font-weight:var(--w-med);font-size:var(--fs-body)}
.studio-row span{display:block;font-size:var(--fs-sm);color:var(--text-muted)}
.studio-row .arw{color:var(--text-muted);flex:none}
.studio-row:hover .arw{color:var(--gold)}

.studio-btn{font-family:var(--sans);font-size:var(--fs-sm);font-weight:var(--w-med);
  padding:8px 16px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:transparent;color:var(--text);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.studio-btn:hover{border-color:var(--gold);color:var(--gold)}
.studio-btn--primary{display:inline-flex;align-items:center;border-color:var(--gold-line);background:var(--gold-wash);color:var(--gold)}
/* Only a button that really cannot be used says so. */
.studio-btn:disabled{cursor:not-allowed;opacity:.45}
.studio-btn:disabled:hover{border-color:var(--border-strong);color:var(--text)}
.studio-btn--danger{border-color:rgba(224,90,90,.45);color:#E38B8B}
.studio-btn--danger:hover{border-color:#E05A5A;color:#F0A5A5;background:rgba(224,90,90,.08)}

.studio-note{margin:16px 0 0;font-size:var(--fs-sm);color:var(--text-muted);max-width:var(--measure)}

/* ---- shared Studio modal ---- */
body.studio-modal-open{overflow:hidden}
.studio-modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.58)}
.studio-modal-overlay[hidden]{display:none}
.studio-modal-panel{position:relative;width:min(460px,100%);max-height:min(680px,calc(100vh - 36px));overflow:auto;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);padding:24px;box-shadow:0 18px 70px rgba(0,0,0,.45)}
.studio-modal-panel:focus{outline:0}
.studio-modal-panel h2{margin:0;color:var(--text-bright);font-family:var(--serif);font-size:var(--fs-h2);font-weight:var(--w-med);line-height:var(--lh-tight)}
.studio-modal-panel p{margin:12px 0 0;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.55}
.studio-modal-label{margin:0 0 8px;color:var(--gold)}
.studio-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);font:inherit;font-size:24px;line-height:1;cursor:pointer}
.studio-modal-close:hover{border-color:var(--border-strong);color:var(--text-bright)}
.studio-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:22px}
.studio-modal-actions--equal{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%;margin-left:auto}
.studio-modal-actions--equal > .studio-btn{display:inline-flex;align-items:center;justify-content:center;min-width:0}
.studio-update-list{margin-top:18px}
.studio-update-item{padding:18px 0;border-top:1px solid var(--border)}
.studio-update-item:first-child{padding-top:0;border-top:0}
.studio-update-item time{display:block;color:var(--text-muted);font-size:var(--fs-ui-sm)}
.studio-update-item h3{margin:4px 0 0;color:var(--text-bright);font-family:var(--sans);font-size:var(--fs-body);font-weight:var(--w-semi)}
.studio-update-item p{margin-top:6px}

/* the free tool, embedded for now; a real shared frame comes later */
.studio-frame{width:100%;height:min(74vh,760px);border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--surface);display:block}

@media (max-width:680px){
  .studio-page{padding:0 22px}
  .studio-bar .bar-inner{padding-left:22px;padding-right:22px}
  .studio-nav{gap:16px;flex-wrap:wrap;justify-content:flex-end}
  .studio-modal-panel{padding:22px}
  .studio-modal-actions{justify-content:flex-start;flex-wrap:wrap}
}

/* ---- shared site bar ----
   Same bar as the public pages, down to the numbers, so the header never
   shifts when you move between Account, Contact, Help or the Tool. */
.site-header{border-bottom:1px solid var(--border)}
.site-header .page{max-width:1280px;margin:0 auto;padding:0 56px}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.site-header .brand{font-family:var(--serif);font-size:var(--fs-section);font-weight:var(--w-med);
  color:var(--text-bright);letter-spacing:.01em}
.site-nav{display:flex;gap:32px;font-size:var(--fs-sm);color:var(--text)}
.site-nav a:hover{color:var(--gold)}
@media (max-width:720px){
  .site-header .page{padding:0 22px}
}
@media (max-width:640px){
  .site-header .bar{height:auto;flex-wrap:wrap;gap:4px 20px;padding-top:14px;padding-bottom:14px}
  .site-header .brand{font-size:var(--fs-card)}
  .site-nav{width:100%;flex-wrap:wrap;gap:8px 20px}
}