/* The cloud Atelier, in the Mac Atelier's look (atelier/index.html, the quieter screen of
   2026-10-13): pages on the left, the live page in the middle, a quiet panel on the right.
   Reading text 14px, small tags never under 12px, tap targets 44px on a phone (design rulebook).
   2026-10-14 (owner: « the browser is a little too small »): no line above the page, both panels
   can be hidden, the page fills what is left; one « Publish » in the header for every change. */
:root{
  --ink:#1d1d1f; --ink-soft:#55555a; --ink-faint:#6e6e73;
  --ground:#f5f5f7; --canvas:#ececef; --card:#fff; --line:#e3e3e8; --hover:#f2f2f5;
  --accent:#1d1d1f; --select:#0a84ff; --select-soft:#e8f2ff;
  --sec:#7a3ff2; --sec-soft:rgba(122,63,242,.10);
  --warn:#a8261b; --warn-ground:#fdecea; --ok:#1f7a45; --draft:#b45309;
  --left:220px; --rail:340px; --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
button,select,input{font:inherit; font-size:14px}
.logo{width:30px; height:30px; border-radius:8px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; flex:0 0 auto}
.btn{border:0; background:var(--hover); color:var(--ink); font-weight:600; padding:7px 13px; border-radius:8px; cursor:pointer; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; min-height:34px}
.btn:hover{background:#e8e8ed}
.btn[disabled]{opacity:.45; cursor:default}
.btn.ghost{background:transparent; color:var(--ink-soft)}
.btn.go{background:var(--accent); color:#fff}
.btn.go:hover{background:#000}
.btn.go[disabled]{background:#c7c7cc; color:#fff; opacity:1}
.btn.big{min-height:44px; width:100%; font-size:15px}
.muted{color:var(--ink-soft); margin:0}
.small{font-size:13px}
.spacer{flex:1 1 auto}

/* ── the door ─────────────────────────────────────────────────────────────── */
#door{min-height:100%; display:grid; place-items:center; padding:24px 16px}
.door-card{width:min(360px,100%); background:var(--card); border-radius:14px; padding:28px 24px 24px;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:14px}
.door-card h1{margin:4px 0 0; font-size:22px; font-weight:650}
.door-sub{margin:-8px 0 4px; color:var(--ink-soft)}
.door-sub span,.fld i{color:var(--ink-faint); font-style:normal}
.fld{display:flex; flex-direction:column; gap:5px; font-weight:600}
.fld input{min-height:44px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); font-size:16px}
.fld input:focus{outline:2px solid var(--select); outline-offset:-1px}
.door-msg{margin:0; padding:9px 11px; border-radius:8px; background:var(--warn-ground); color:var(--warn)}

/* ── the editor ───────────────────────────────────────────────────────────── */
#editor{height:100%; display:flex; flex-direction:column; overflow:hidden}
header{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--card);
  border-bottom:1px solid var(--line); min-height:48px; flex-wrap:wrap}
.brand{font-weight:650; line-height:1.2; margin-right:2px}
.brand small{display:block; font-weight:500; font-size:12px; color:var(--ink-faint)}
select{padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-weight:600; max-width:220px; min-height:34px}
.seg{display:inline-flex; background:var(--hover); border-radius:9px; padding:2px; gap:2px}
.seg button{border:0; background:transparent; color:var(--ink-soft); padding:5px 11px; cursor:pointer; border-radius:7px; font-weight:600; min-height:30px}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.who{color:var(--ink-faint); font-size:13px}
.narrow-only{display:none}
.icon-btn{border:0; background:transparent; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; cursor:pointer; color:var(--ink-soft); flex:0 0 auto}
.icon-btn:hover{background:var(--hover); color:var(--ink)}
.icon-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5}
.icon-btn svg .fill{fill:currentColor; stroke:none; opacity:0}
.icon-btn[aria-pressed="true"] svg .fill{opacity:.35}
.pub-state{border:0; background:none; color:var(--ink-soft); font-size:13px; cursor:pointer; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:4px 6px; border-radius:6px}
.pub-state:hover{background:var(--hover)}
.pub-state.ok{color:var(--ok); font-weight:600}
.pub-state.bad{color:var(--warn); font-weight:600}

main{flex:1 1 auto; display:flex; min-height:0}
#leftPanel{flex:0 0 var(--left); width:var(--left); background:var(--card); border-right:1px solid var(--line); overflow:auto; padding:6px 0 24px}
.lp-head{font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:10px 14px 6px}
.lp-list{list-style:none; margin:0; padding:0}
.lp-row{display:block; width:100%; text-align:left; border:0; background:none; padding:7px 14px; cursor:pointer; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px}
.lp-row:hover{background:var(--hover)}
.lp-row[aria-current="page"]{background:var(--select-soft); color:#0b5cad; font-weight:600}
#editor.no-left #leftPanel{display:none}
#editor.no-right #rightPanel{display:none}

#stage{flex:1 1 auto; min-width:0; position:relative; overflow:clip; background:var(--canvas); display:flex; flex-direction:column}
#frames{flex:1 1 auto; min-height:0; display:flex; justify-content:center; align-items:flex-start; padding:10px; overflow:clip}
.wrap{background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10); overflow:hidden; position:relative; flex:0 0 auto}
#frame{display:block; border:0; background:#fff; transform-origin:top left}
#pvFrame{position:absolute; top:0; left:0; display:block; border:0; background:#fff; transform-origin:top left; z-index:2}
#pvFrame[hidden]{display:none}
.pv-bar{position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:31; display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px);
  padding:5px 5px 5px 14px; border-radius:22px; background:rgba(29,29,31,.88); color:#fff; font-size:13px}
.pv-bar[hidden]{display:none}
.pv-bar span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stage-msg{position:absolute; left:50%; top:24px; transform:translateX(-50%); margin:0; padding:7px 14px; border-radius:20px; background:rgba(29,29,31,.85); color:#fff; font-size:13px; z-index:30; pointer-events:none}

/* the boxes drawn over the page: hover, the words being changed, a section and its two handles */
#overlay{position:absolute; inset:0; pointer-events:none; z-index:20; overflow:hidden}
.ov{position:absolute; box-sizing:border-box}
.ov.hov{border:1.5px solid #6cb4ff; border-radius:3px}
.ov.hov.sec-hov{border:1.5px dashed var(--sec); border-radius:0}
.ov.sel{border:2px solid var(--select); border-radius:3px}
.ov.sec{border:2px solid var(--sec)}
.ov.sec .pad{position:absolute; left:0; right:0; background:repeating-linear-gradient(135deg, var(--sec-soft) 0 6px, transparent 6px 12px)}
.grip{position:absolute; left:50%; transform:translate(-50%,-50%); pointer-events:auto; cursor:ns-resize; border:0; padding:0 10px; height:26px; min-width:64px;
  border-radius:13px; background:var(--sec); color:#fff; font:600 12px/26px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; box-shadow:0 1px 4px rgba(0,0,0,.25); touch-action:none}
.grip:focus-visible{outline:2px solid #fff; outline-offset:-4px}
.chip{position:absolute; pointer-events:auto; display:flex; align-items:center; gap:6px; max-width:min(420px,calc(100% - 16px)); padding:4px 4px 4px 10px; border-radius:16px;
  background:var(--ink); color:#fff; font-size:12.5px; line-height:1.3; box-shadow:0 2px 8px rgba(0,0,0,.25)}
.chip span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 0}
.chip.warn{background:var(--warn)}
.chip-btn{border:0; border-radius:12px; background:rgba(255,255,255,.18); color:#fff; font:600 12px/1 inherit; padding:6px 10px; cursor:pointer; white-space:nowrap}
.chip-btn:hover{background:rgba(255,255,255,.3)}

aside{flex:0 0 var(--rail); width:var(--rail); border-left:1px solid var(--line); background:var(--card); overflow:auto}
.rtabs{position:sticky; top:0; z-index:2; display:flex; gap:4px; padding:8px 10px; background:var(--card); border-bottom:1px solid var(--line)}
.rtabs button{border:0; background:none; padding:6px 10px; border-radius:7px; font-weight:600; color:var(--ink-faint); cursor:pointer; min-height:32px; display:inline-flex; align-items:center; gap:6px}
.rtabs button[aria-pressed="true"]{background:var(--hover); color:var(--ink)}
.count{min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--draft); color:#fff; font-size:12px; line-height:20px; text-align:center}
.card{padding:14px 16px; border-bottom:1px solid var(--line)}
.card h2{margin:0 0 8px; font-size:13px; font-weight:650}
.lang-tag{font-size:12px; letter-spacing:.06em; font-weight:650; color:var(--ink-soft); text-transform:uppercase; margin:0 0 6px}
.say{margin:6px 0 0; color:var(--ink-soft)}
.hist{list-style:none; margin:0; padding:0}
.hist li{padding:8px 0; border-top:1px solid var(--line); display:flex; gap:10px; align-items:baseline}
.hist li:first-child{border-top:0}
.hist .t{flex:1 1 auto; min-width:0}
.hist .d{flex:0 0 auto; color:var(--ink-faint); font-size:12px; white-space:nowrap}
.hist .bad{color:var(--warn)}

/* ── changing words ─────────────────────────────────────────────────────────── */
.pieces{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px}
.pieces button{border:1px dashed #9cc8ff; background:#f5faff; color:var(--ink); border-radius:7px; padding:4px 9px; cursor:pointer; font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:30px}
.pieces button[aria-pressed="true"]{border:1.5px solid var(--select); background:var(--select-soft); font-weight:600}
.pieces button[disabled]{border-color:var(--line); background:var(--ground); color:var(--ink-faint); cursor:default}
.which{display:flex; align-items:center; gap:8px; margin:8px 0 0; font-size:13px; color:var(--ink-soft)}
.which select{flex:1 1 auto; max-width:none}
.fld-l{display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin:10px 0 4px}
.fld-l i{font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-faint)}
textarea.box{display:block; width:100%; min-height:38px; resize:vertical; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--card)}
textarea.box:focus{outline:2px solid var(--select); outline-offset:-1px}
textarea.box[readonly]{background:var(--ground); color:var(--ink-soft)}
.warns{list-style:none; margin:8px 0 0; padding:0; font-size:13px; color:#7a5200}
.warns li{padding:2px 0}
.refuse{margin:8px 0 0; padding:8px 10px; border-radius:8px; background:var(--warn-ground); color:var(--warn); font-size:13px; white-space:pre-wrap}
.lastline{display:flex; align-items:center; gap:8px; margin-top:10px}
.lastline > span:first-child{flex:1 1 auto; min-width:0}
.progress{margin:10px 0 0; padding:0 0 0 18px; font-size:13px; color:var(--ink-soft)}
.progress li{padding:1px 0}
.progress li.err{color:var(--warn)}
.done > span{color:var(--ok); font-weight:600}

/* ── section sizes ──────────────────────────────────────────────────────────── */
#secSizes{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.size-row{display:flex; align-items:center; gap:6px}
.size-row > span:first-child{flex:1 1 auto; color:var(--ink-soft)}
.size-row input{width:64px; min-height:34px; padding:4px 6px; border:1px solid var(--line); border-radius:8px; text-align:right; font-weight:600}
.size-row input:focus{outline:2px solid var(--sec); outline-offset:-1px}
.size-row .px{color:var(--ink-faint); font-size:13px}
.btn.step{min-width:34px; padding:0}
.sec-note{margin:8px 0 0}

/* ── the selected box: where it sits, its text, its size ────────────────────── */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:3px 4px; margin:0 0 8px}
.crumbs span{color:var(--ink-faint); font-size:12px}
.crumbs button{border:0; background:var(--hover); color:var(--ink-soft); border-radius:6px; padding:3px 7px; font-size:12px; cursor:pointer; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:26px}
.crumbs button:hover{background:#e8e8ed; color:var(--ink)}
.crumbs button[aria-pressed="true"]{background:var(--sec-soft); color:var(--sec); font-weight:650}
.sub{margin:12px 0 4px; font-size:12px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint)}
.ctl{display:flex; align-items:center; gap:6px; margin:5px 0}
.ctl > span:first-child{flex:1 1 auto; color:var(--ink-soft); min-width:0}
.ctl input[type=number]{width:64px; min-height:32px; padding:4px 6px; border:1px solid var(--line); border-radius:8px; text-align:right; font-weight:600}
.ctl input[type=number].set{border-color:var(--sec); color:var(--sec)}
.ctl input[type=number]::placeholder{color:var(--ink-faint); font-weight:500}
.ctl select{max-width:170px; min-height:32px}
.ctl .play{min-width:36px; min-height:32px; padding:0}
.mo-row select{flex:1 1 auto; max-width:none; min-width:0}
.mo-say{margin:2px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mo-why{margin:2px 0 6px}
.mo-lead{margin:10px 0 0}
.ctl input[type=color]{width:34px; height:32px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--card)}
.ctl .hex{width:82px; min-height:32px; padding:4px 6px; border:1px solid var(--line); border-radius:8px; font:13px ui-monospace,Menlo,monospace}
.ctl .px{color:var(--ink-faint); font-size:13px}
.seg.small button{padding:3px 9px; min-height:26px; font-size:13px}
.check{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-weight:600; cursor:pointer}
.check input{width:18px; height:18px}
.grip.side{transform:translate(-50%,-50%); cursor:ew-resize; min-width:0; padding:0 8px}

/* ── the AI helper, at the bottom of the page ─────────────────────────────── */
.ai-box{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:min(620px, calc(100% - 28px)); z-index:40; display:flex; flex-direction:column; gap:6px}
.ai-form{display:flex; align-items:center; gap:6px; padding:5px 5px 5px 12px; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:0 6px 24px rgba(0,0,0,.14)}
.ai-form input{flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-size:14px; padding:6px 2px; color:var(--ink)}
.ai-form input:disabled{color:var(--ink-faint)}
.ai-form .btn{border-radius:17px; min-height:34px}
.ai-spark{color:var(--sec); font-size:15px}
.ai-close{border:0; background:none; color:var(--ink-faint); cursor:pointer; font-size:14px; padding:4px 6px}
.ai-log{max-height:min(46vh, 380px); overflow:auto; display:flex; flex-direction:column; gap:6px; padding:8px; background:rgba(245,245,247,.97); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.12)}
.ai-msg{max-width:88%; padding:8px 11px; border-radius:12px; font-size:13.5px; line-height:1.45}
.ai-msg p{margin:0}
.ai-msg.user{align-self:flex-end; background:var(--ink); color:#fff}
.ai-msg.assistant{align-self:flex-start; background:var(--card); border:1px solid var(--line)}
.ai-msg.wait p{color:var(--ink-faint)}
.ai-msg.bad{border-color:#f1c4bf; background:var(--warn-ground); color:var(--warn)}
.ai-msg ul{margin:6px 0 0; padding-left:18px; color:var(--ink-soft)}
.ai-msg .lastline{margin-top:6px}
.ai-msg .lastline .btn{min-height:28px; padding:3px 9px; font-size:12.5px}
.ai-msg small{display:block; margin-top:4px; color:var(--ink-faint); font-size:12px}

/* ── waiting changes, then History ────────────────────────────────────────── */
.drafts{list-style:none; margin:0; padding:0}
.drafts li{padding:9px 0; border-top:1px solid var(--line)}
.drafts li:first-child{border-top:0; padding-top:2px}
.drafts .w{margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer}
.drafts .w:hover{color:#0b5cad}
.drafts .lastline{margin-top:4px}
.drafts .lastline .btn{min-height:30px; padding:4px 11px}
.drafts .bad{color:var(--warn)}
.chg{list-style:none; margin:0; padding:0}
.chg li{padding:9px 0; border-top:1px solid var(--line)}
.chg li:first-child{border-top:0; padding-top:2px}
.chg .w{margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.chg .lastline{margin-top:4px}
.chg .st{white-space:nowrap}
.chg .bad{color:var(--warn)}
.chg .lastline .btn{min-height:30px; padding:4px 11px}

/* a phone or a narrow window: pages in a menu, the panel under the page */
@media (max-width: 900px){
  header{gap:6px}
  .narrow-only{display:inline-block}
  .wide-only,#leftPanel,#leftToggle,.who,.brand,#sizeSeg{display:none}
  main{flex-direction:column}
  #stage{flex:1 1 60%; min-height:0}
  aside{flex:0 0 auto; width:auto; max-height:45%; border-left:0; border-top:1px solid var(--line)}
  #frames{padding:4px}
  .seg button,.btn,select,.icon-btn{min-height:44px}
  .icon-btn{width:44px}
  .drafts .lastline .btn,.chg .lastline .btn,.btn.step{min-height:44px}
  .btn.step,.ctl .play{min-width:44px; min-height:44px}
  .ctl input[type=number],.ctl select,.ctl .hex,.ctl input[type=color]{min-height:44px}
  .ai-box{bottom:8px}
  .ai-form .btn{min-height:40px}
}