/* ==========================================================================
RESPONSIVE.CSS — Bytebard CMS tablet + mobile overhaul
Loaded AFTER styles.css. Desktop (≥1180px) untouched.
========================================================================== */
/* Rail toggle: hidden on desktop, shown in the topbar on tablet */
#railToggle{display:none;width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--border);place-items:center;color:var(--text);background:transparent;flex:none}
#railToggle:hover{background:var(--surface-3)}
#railToggle .ic{width:18px;height:18px}
/* Step bar chrome: hidden by default; fixed bottom bar on mobile */
#mStepBar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow-2)}
#mStepBack{width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--border);display:grid;place-items:center;color:var(--text);background:var(--surface);flex:none}
#mStepLabel{flex:1;font-weight:600;font-size:var(--t-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mStepPreview{flex:none}
/* --------------------------------------------------------------------------
TABLET (768–1179): icon rail + two-pane workspace
-------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1179px){
:root{--sidebar-w:76px}
.sidebar .brand>div,.sidebar .ni-label,.sidebar .nav-soon,.sidebar .nav-group-chev,
.sidebar .nav-group-body-inner::before,.sidebar .user-meta,.sidebar .signout-btn,
.sidebar .theme-row .lbl{display:none}
.sidebar .brand{justify-content:center;padding:var(--s-3)}
.sidebar .nav-group-label,.sidebar .nav-child{justify-content:center;padding:10px 0}
.sidebar .nav-group-label .ic,.sidebar .nav-child .ic{width:20px;height:20px}
.sidebar .nav-group-body{grid-template-rows:1fr}
.sidebar .user-chip{justify-content:center}
body.rail-open .sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:60;box-shadow:var(--shadow-3)}
body.rail-open .sidebar .brand>div,body.rail-open .sidebar .ni-label,
body.rail-open .sidebar .nav-soon,body.rail-open .sidebar .nav-group-chev,
body.rail-open .sidebar .user-meta,body.rail-open .sidebar .signout-btn,
body.rail-open .sidebar .theme-row .lbl{display:revert}
body.rail-open .sidebar .brand{justify-content:flex-start;padding:var(--s-5)}
body.rail-open .sidebar .nav-group-label,body.rail-open .sidebar .nav-child{justify-content:flex-start;padding:9px var(--s-3)}
#railToggle{display:grid}
.workspace{grid-template-columns:minmax(320px,1fr) minmax(300px,42%)}
.divider-v{display:block}
.preview-pane{position:static;transform:none;width:auto;height:auto;border-left:1px solid var(--border);box-shadow:none}
}
/* --------------------------------------------------------------------------
MOBILE (≤767): step-by-step flow
-------------------------------------------------------------------------- */
@media (max-width:767px){
#mStepBar{display:flex}
.workspace{grid-template-columns:1fr}
.preview-pane{position:fixed;inset:0;z-index:70;transform:translateY(102%);transition:transform var(--dur-3) var(--ease-out);border-left:0;box-shadow:none}
body[data-step="preview"] .preview-pane{transform:none}
body[data-step="preview"] .editor,body[data-step="preview"] .topbar{display:none}
body[data-step="components"] .acc .acc-body-wrap,
body[data-step="components"] .acc.is-open .acc-body-wrap{grid-template-rows:0fr}
body[data-step="edit"] .acc:not(.is-open){display:none}
.topbar{padding:0 var(--s-3)}
.topbar-right .link-live{display:none}
.editor{padding-bottom:calc(var(--s-12) + 60px)}
}