/* © 2026 IG Tools — All rights reserved. */
/* Story Layout mobile-first shell — pairs with shell.js and shared/ui.js (same base as double-exposure/shell.css).
   There is no upload gate here: body.ready is on from the start, so the editor layout is the first screen. */

/* ---- the ONE top bar (UI_RULES §1) ---- */
.mcs-top{display:flex;align-items:center;gap:6px;min-height:calc(56px + var(--ad-handle,0px));padding:var(--ad-handle,0px) 8px 0;box-sizing:border-box;position:relative;z-index:30;margin:calc(var(--ad-gap,0px) - 26px) -18px 18px;
  background:var(--chrome-solid,var(--panel));border-bottom:1px solid var(--line)}
.mcs-home{order:1;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--accent);cursor:pointer}
.mcs-tool{order:3;display:flex;align-items:center;gap:8px;font:700 17px/1 var(--sans);color:var(--text);padding-left:2px}
.mcs-tool svg{flex:none;color:var(--logo)}
.mcs-new{order:2;display:none}
.mcs-mode{order:3;display:none;gap:2px;padding:3px;border-radius:13px;background:var(--fill)}
.mcs-mode button{min-height:40px;padding:0 9px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;font:600 13px/1 var(--sans);cursor:pointer}
.mcs-mode button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
#mcsDl{order:5;margin-left:auto;display:none}
.mcs-lang{order:6;display:flex;align-items:center;gap:2px;margin-left:auto;background:var(--fill);border-radius:10px;padding:2px 2px 2px 8px}
.mcs-theme{order:6;margin-left:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--text);cursor:pointer;padding:0}
.mcs-lang{margin-left:0}
.mcs-globe{display:flex;color:var(--muted)}
.mcs-lang button{border:0;background:none;color:var(--muted);font:600 13px/1 var(--sans);padding:8px 10px;border-radius:8px;cursor:pointer}
.mcs-lang button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
.mcs-inst{width:fit-content;margin:14px auto 0;min-height:44px;padding:0 16px;border-radius:22px;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans)}
.mcs-inst[hidden],body.ready .mcs-inst{display:none}
.mcs-newbtn{display:flex!important;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px!important;background:none;box-shadow:none;color:var(--text);cursor:pointer;font:600 14px/1 var(--sans)}
.mcs-newt{display:none}
/* the old page header (logo, wordmark, TR/EN, tagline) stays in the DOM, off-screen: h1, SEO copy, language handlers */
.igsb{display:none!important}
.wrap>header{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mcs-ask{text-align:center;padding:4px 0 6px}
.mcs-ask-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:rgba(255,59,48,.12);color:#FF3B30;margin-bottom:10px}
.mcs-ask b{display:block;font:700 19px/1.2 var(--sans);color:var(--text)}
.mcs-ask p{margin:8px 0 0;font:400 14px/1.45 var(--sans);color:var(--muted)}
.mcs-ask-btns{display:flex;gap:8px;margin-top:18px}
.mcs-ask-btns .ig-btn{flex:1;min-height:52px}
.ig-btn.mcs-danger{background:#FF3B30;color:#fff}

/* ================= editor (body.ready — always on here: there is no upload gate) ================= */
body.ready{padding:var(--ad-top,0px) 0 calc(84px + var(--ad-bot,0px))!important}
body.ready .mcs-top{margin:0;position:sticky;top:var(--ad-top,0px)}
body.ready .wrap{padding:0 12px}
body.ready .mcs-tool,body.ready .mcs-lang,body.ready .mcs-theme{display:none}
body.ready .mcs-new,body.ready #mcsDl{display:flex}
/* what the shell replaced: the side panel, the download column and the old tool bar. Their inputs live in the sheets now.
   The hint notes, the SEO copy and the related links stay: they are the crawlable text and the ad area. */
body.ready .panel,body.ready .footcol,body.ready #topbar2,body.ready .igbar{display:none!important}
body.ready .work{display:block;margin-top:10px}
body.ready .shellwrap{margin-top:0}
@media(max-width:380px){.mcs-top .ig-btn.pri span{display:none}.mcs-top .ig-btn.pri{padding:0;width:44px}}
body.ready .stage canvas{max-height:calc(100dvh - 56px - 84px - var(--ad-top,0px) - var(--ad-bot,0px) - 120px)}

/* dock: Yazı · Renk · Efekt */
.mcs-dock{display:none}
body.ready .mcs-dock{display:flex;position:fixed;left:0;right:0;bottom:var(--ad-bot,0px);z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--chrome-solid,var(--panel));border-top:1px solid var(--line)}
.mcs-tab{flex:1;min-height:56px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12px/1 var(--sans);cursor:pointer;position:relative}
.mcs-tab[hidden]{display:none}
.mcs-tab.on{color:var(--accent);background:var(--fill)}
/* on/off dot (UI_RULES §13): black = off, green = on */
.mcs-dot{display:block;flex:none;width:12px;height:12px;border-radius:50%;background:#1D1D1F;box-shadow:0 0 0 3px rgba(29,29,31,.14)}
.mcs-tab .mcs-dot{position:absolute;top:8px;right:calc(50% - 26px)}
.mcs-tab.on .mcs-dot,.mcs-swrow.on .mcs-dot{background:#34C759;box-shadow:0 0 0 3px rgba(52,199,89,.35)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mcs-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}}
:root[data-theme=dark] .mcs-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
@media(min-width:900px){body.ready .mcs-dock{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:18px;bottom:calc(14px + var(--ad-bot,0px));box-shadow:var(--sh-hi)}}

/* sheets that host the panes sit low and leave the photo visible; the photo stays workable while one is open */
.ig-sheet.mcs-s .ig-sh-box{max-height:48vh}
@media(min-width:900px){.ig-sheet.mcs-s .ig-sh-box{top:auto;bottom:var(--sh-b,96px);left:auto;right:var(--sh-r,24px);transform:none;max-height:var(--sh-mh,calc(100vh - 200px))}}
.ig-sheet.mcs-s{pointer-events:none}
.ig-sheet.mcs-s .ig-sh-box{pointer-events:auto}
.ig-sheet .ig-row[hidden]{display:none}
.ig-sheet .ig-row.on{outline:2px solid var(--accent)}
.ig-sheet .ig-row.mcs-swrow.on{outline:0}
.ig-sheet .ig-row+.ig-row,.ig-sheet .mcs-wrow,.ig-sheet .mcs-dirwrap{margin-top:8px}
.mcs-lbl{font:600 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:6px 2px 8px}

/* sheets that host the panes sit low and leave the photo visible; the photo stays workable while one is open */
.ig-sheet.mcs-s .ig-sh-box{max-height:48vh}
@media(min-width:900px){.ig-sheet.mcs-s .ig-sh-box{top:auto;bottom:var(--sh-b,96px);left:auto;right:var(--sh-r,24px);transform:none;max-height:var(--sh-mh,calc(100vh - 200px))}}
.ig-sheet.mcs-s{pointer-events:none}
.ig-sheet.mcs-s .ig-sh-box{pointer-events:auto}
.ig-sheet .ig-row[hidden]{display:none}
.ig-sheet .ig-row.on{outline:2px solid var(--accent)}
.ig-sheet .ig-row+.ig-row{margin-top:8px}
/* the hosted panes keep their own atoms; inside a sheet they get touch-sized room and drop their card chrome */
.ig-sheet .ctrl{margin-bottom:14px}
.ig-sheet .ctrl:last-child{margin-bottom:0}
.ig-sheet .dlopts,.ig-sheet .stagefoot{margin:0 0 14px;padding:0;border:0;background:none;box-shadow:none}
.ig-sheet .dl{margin-top:4px}
.shellwrap{position:relative}
/* size chip (bottom-left of the photo) */
.shellwrap{position:relative}
.mcs-size{position:absolute;left:12px;bottom:12px;z-index:6;display:none;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(28,28,30,.72);color:#fff;font:600 13px/1 var(--sans);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);cursor:pointer}
body.ready .mcs-size{display:flex}

@media(max-width:899px){
  .mcs-size{left:6px;bottom:6px;flex-direction:column;gap:3px;min-height:0;width:40px;padding:7px 0;font-size:11px;border-radius:13px;justify-content:center}
  .mcs-size span{max-width:40px;text-align:center;white-space:nowrap;overflow:hidden;font-size:10.5px;line-height:1.1}
}
@media(min-width:900px){
  .mcs-top{padding:0 max(20px,calc((100% - 1100px)/2));gap:10px}
  body.ready .mcs-tool,body.ready .mcs-lang{display:flex}
  body.ready .mcs-theme{display:flex;margin-left:6px}
  body.ready #mcsDl{margin-left:auto}
  .mcs-new{order:4;margin-left:6px}
  .mcs-newbtn{padding:0 16px;border:1px solid var(--line)!important;border-radius:22px!important;background:var(--panel)!important;box-shadow:var(--sh)!important;min-height:40px}
  .mcs-newt{display:inline}
  body.ready .mcs-lang{margin-left:0}
}

/* The bottom bar is a FIXED object: it must not move while the page scrolls (Osman, 2026-10-15).
   Every tool stylesheet has html,body{overflow-x:hidden}; with html non-visible that makes <body> a scroll container of
   its own, and Safari then lets fixed children drift with it. `clip` cuts the overflow without making a scroller, so the
   viewport is the only scroll container. The dock also gets its own compositor layer so it never repaints late. */
html body{overflow-x:clip!important}
.mcs-dock{-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* Inner scroll (shell.js INNER_SCROLL): desktop >=1100px with a photo open. The window does not scroll, <body> does, so the
   side-rail ads do not react to scrolling. shell.js only adds the classes at that width; nothing here touches a phone. */
html.mcs-inner{height:100%;overflow:hidden}
html body.mcs-inner{height:100dvh;box-sizing:border-box;overflow:hidden auto!important;overscroll-behavior:contain}
html body.mcs-inner.ig-locked{overflow:hidden!important}

/* PC: the screen is split in two (Osman, 2026-10-17). Left = Moto/Poster/Type tabs + the template grid + Auto/Add text;
   right = the photo. Nothing sticks: the page scrolls as one block, so the Instagram / ad area is the very next thing below. Phones keep the single column + the bottom dock. */
@media(min-width:900px){
  body.ready .work{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);column-gap:20px;row-gap:0;align-items:start;grid-template-rows:auto auto auto auto minmax(0,1fr)}
  body.ready .work>.editcol{display:contents}
  body.ready .work>.editcol>*{grid-column:1}
  body.ready .work>.editcol>.shellwrap{grid-column:2;grid-row:1 / span 5;margin-top:0}
  body.ready .famtabs{margin-bottom:10px}
  /* Auto / Add text sit right under the tabs, so the template grid is the only thing that scrolls and the page never has to. */
  body.ready .famtabs{order:1;grid-row:1}
  body.ready #pvRow{order:2;grid-row:2;margin-top:0;margin-bottom:12px}
  body.ready #aiWrap{order:3;grid-row:3}
  body.ready #txbMount{order:4;grid-row:4}
  body.ready .tplstrip{order:5;grid-row:5;align-self:start}
  body.ready .work>.editcol>#autoNote{grid-row:6}
  body.ready .work>.editcol>#aiState{grid-row:7}
  body.ready .work>.editcol>.note:not(#autoNote):not(#aiState){grid-row:8}
  body.ready .tplstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px;overflow-x:hidden;overflow-y:auto;max-height:calc(100dvh - 373px);min-height:180px;padding:4px 4px 8px}
}