/* ==========================================================================
   NEXAWEB control panel
   --------------------------------------------------------------------------
   Dense, plain, dark. Nothing here is ever served to a visitor.

   ONE STRUCTURAL RULE: every responsive rule lives in the SMALL SCREENS block
   at the very bottom of this file and must stay there. The previous editor's
   media queries were written above the rules they overrode; equal specificity
   hands the win to whatever comes last, so both queries were dead for the
   whole life of that project and nobody noticed until the owner said they
   could not see the buttons on their phone.
   ========================================================================== */
:root{
  --bg:#0E1016;
  --panel:#151823;
  --panel-2:#1D2130;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --txt:#EEF1F7;
  --txt-70:rgba(238,241,247,.68);
  --txt-45:rgba(238,241,247,.45);
  --blue:#4F7BF0;
  --blue-2:#7BA0FF;
  --ok:#43C97F;
  --warn:#E0533C;
  --amber:#E8A33D;
  --r:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:"Outfit","Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body.is-modal{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue-2)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.25}
p{margin:0}
ul{margin:0;padding-left:18px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none !important}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:8px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
  border:1px solid var(--line-2);
  transition:background-color .2s,border-color .2s,transform .15s,opacity .2s;
}
.btn:hover{background:rgba(255,255,255,.07)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--blue);border-color:var(--blue);color:#08101F}
.btn--solid:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn--warn{color:#FFC4B4;border-color:rgba(224,83,60,.5)}
.btn--warn:hover{background:rgba(224,83,60,.16)}
.btn[disabled]{opacity:.45;pointer-events:none}
/* The publish button only looks like the primary action when there is
   actually something to publish. */
#btn-publish{opacity:.55}
#btn-publish.is-armed{opacity:1;box-shadow:0 0 0 3px rgba(79,123,240,.22)}

.mini{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:7px;font-size:.78rem;font-weight:600;
  border:1px solid var(--line-2);color:var(--txt-70);
}
.mini:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.mini--del{color:#FFB2A1;border-color:rgba(224,83,60,.4)}

/* --- Spinner / boot ----------------------------------------------------- */
.boot{
  display:grid;place-content:center;justify-items:center;gap:14px;
  min-height:60vh;color:var(--txt-45);
}
.boot--pane{min-height:220px}
.spin{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   Sign in
   ========================================================================== */
.lock{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:24px;background:var(--bg);
}
.lock__box{
  display:grid;gap:12px;width:min(380px,100%);
  padding:34px 30px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.lock__mark{width:46px;height:46px;color:var(--blue);justify-self:center}
.lock__box h1{font-size:1.3rem;text-align:center;letter-spacing:.06em}
.lock__box p{text-align:center;color:var(--txt-45);font-size:.86rem;margin-bottom:6px}
.lock__box input{
  width:100%;padding:12px 13px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line-2);
}
.lock__box .btn{width:100%}
.lock__err{
  display:none;font-size:.82rem;color:#FFC4B4;text-align:center;
  padding:8px 10px;border-radius:8px;background:rgba(224,83,60,.14);
}
.lock__err.is-on{display:block}
.lock__box small{color:var(--txt-45);font-size:.74rem;line-height:1.5;text-align:center}

/* ==========================================================================
   Shell
   ========================================================================== */
.app{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  height:100vh;height:100dvh;overflow:hidden;
}

/* --- Top bar ------------------------------------------------------------ */
.top{
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;min-height:60px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.top__back{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:8px 12px 8px 8px;border-radius:9px;
  font-size:.82rem;font-weight:600;color:var(--txt-70);
  border:1px solid transparent;
}
.top__back:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.top__back svg{width:18px;height:18px}

.top__brand{display:flex;align-items:center;gap:10px;min-width:0}
.top__brand svg{width:30px;height:30px;color:var(--blue);flex:none}
.top__brand div{display:grid;min-width:0}
.top__brand b{font-size:1rem;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__brand span{font-size:.74rem;color:var(--txt-45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__brand.is-small svg{display:none}

.top__state{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--txt-45)}
.pip{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  transition:background-color .2s}
.top__state.is-dirty .pip{background:var(--amber)}
.top__state.is-dirty{color:var(--amber)}

.top__acts{display:flex;align-items:center;gap:9px;margin-left:auto}
/* display:contents on a desktop, so ONE copy of each button lays out inline
   in the bar; on a phone the same element becomes a bottom sheet. No
   duplicated ids, no second set of listeners. */
.sheet{display:contents}
.sheet__grip,.sheet__head,.sheet__note{display:none}
.sheet__veil{display:none}
.top__more{display:none}

/* ==========================================================================
   Views
   ========================================================================== */
.view{display:none;min-height:0}
.view.is-on{display:block}
.view--site.is-on{display:grid;grid-template-rows:minmax(0,1fr) auto}

.view--sites{overflow-y:auto;-webkit-overflow-scrolling:touch}
.wrap{max-width:900px;margin:0 auto;padding:30px 20px 60px}
.view__h{font-size:1.5rem}
.view__p{color:var(--txt-45);font-size:.84rem;margin-top:4px}

/* --- Site cards --------------------------------------------------------- */
.cards{display:grid;gap:10px;margin-top:22px}
.card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:13px;width:100%;
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .2s,background-color .2s,transform .15s;
}
.card:hover{border-color:var(--line-2);background:var(--panel-2)}
.card:active{transform:translateY(1px)}
.card__mark{
  display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:11px;
  font-size:1.15rem;font-weight:600;
  color:var(--tint,#4F7BF0);
  background:color-mix(in srgb,var(--tint,#4F7BF0) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--tint,#4F7BF0) 34%,transparent);
}
.card__txt{display:grid;gap:1px;min-width:0;flex:1}
.card__txt b{font-size:.98rem;font-weight:600}
.card__sub{font-size:.76rem;color:var(--txt-45);text-transform:capitalize}
.card__url{font-size:.74rem;color:var(--txt-45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.card.is-off{opacity:.62}
.card.is-off .card__mark{filter:grayscale(.5)}

.tag{
  display:inline-block;padding:3px 9px;border-radius:99px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  color:var(--txt-45);border:1px solid var(--line-2);
}
.tag--ok{color:var(--ok);border-color:rgba(67,201,127,.4);background:rgba(67,201,127,.1)}
.tag--note{color:var(--amber);border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.1)}

.foot-note{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--txt-45);line-height:1.6;
}
.foot-note b{color:var(--txt-70)}

/* ==========================================================================
   Inside a site
   ========================================================================== */
.body{
  display:grid;grid-template-columns:220px minmax(0,1fr) 440px;
  min-height:0;height:100%;
}

/* --- Sections rail ------------------------------------------------------ */
.side{
  display:grid;align-content:start;gap:3px;
  padding:12px 10px 30px;
  background:var(--panel);border-right:1px solid var(--line);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.side button{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:9px;
  font-size:.86rem;color:var(--txt-70);
  transition:background-color .18s,color .18s;
}
.side button i{width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:none;
  transition:background-color .18s}
.side button:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.side button.is-on{background:rgba(79,123,240,.16);color:var(--blue-2)}
.side button.is-on i{background:var(--blue)}
/* The theme section restyles the whole site rather than editing one part of
   it, so it is ruled off from the content sections. */
.side button.is-global{border-bottom:1px solid var(--line);
  margin-bottom:6px;padding-bottom:12px;border-radius:9px 9px 0 0}

.side__notes{
  display:flex;align-items:center;gap:9px;
  padding:10px 11px;margin-bottom:8px;border-radius:9px;
  font-size:.82rem;color:var(--amber);
  background:rgba(232,163,61,.1);border:1px solid rgba(232,163,61,.3);
}
.side__notes svg{width:17px;height:17px;flex:none}
.side__notes span{display:flex;align-items:center;gap:7px;min-width:0}
.side__notes b{
  display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;background:rgba(232,163,61,.28);font-size:.7rem;
}

/* --- Edit pane ---------------------------------------------------------- */
.edit{padding:22px 24px 50px;overflow-y:auto;-webkit-overflow-scrolling:touch;min-width:0}
.edit__head{margin-bottom:20px}
.edit__head h2{font-size:1.25rem}
.edit__head p{margin-top:6px;color:var(--txt-45);font-size:.84rem;max-width:62ch}

.pane-err{display:grid;gap:12px;justify-items:start;max-width:52ch;padding:24px 0}
.pane-err h2{font-size:1.1rem;color:#FFC4B4}
.pane-err p{color:var(--txt-70);font-size:.88rem}
.pane-err__hint{color:var(--txt-45) !important;font-size:.8rem !important}

.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:1fr 1fr;gap:14px}

.f{display:grid;gap:6px;min-width:0}
.f > label{font-size:.78rem;font-weight:600;color:var(--txt-70);letter-spacing:.01em}
.f input[type="text"],.f input[type="url"],.f input[type="tel"],
.f input[type="email"],.f input[type="number"],.f textarea,.f select,.drop__url{
  width:100%;padding:9px 11px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line-2);
  transition:border-color .18s,background-color .18s;
}
.f input:focus,.f textarea:focus,.f select:focus,.drop__url:focus{
  border-color:var(--blue);background:var(--panel-2);outline:none}
.f textarea{min-height:76px;resize:vertical;line-height:1.55}
.f textarea.is-tall{min-height:150px}
.f .hint{font-size:.74rem;color:var(--txt-45);line-height:1.5}
.f.is-bn input,.f.is-bn textarea{font-family:"Hind Siliguri","Outfit",sans-serif}

.f--color .row{display:flex;gap:8px;align-items:center}
.f--color input[type="color"]{
  width:46px;height:38px;padding:2px;flex:none;border-radius:8px;
  background:var(--panel);border:1px solid var(--line-2);cursor:pointer;
}
.f--color input[type="text"]{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:.84rem}

.note{
  padding:12px 14px;border-radius:10px;font-size:.8rem;line-height:1.6;
  color:var(--txt-70);background:var(--panel);border:1px solid var(--line);
  margin-bottom:16px;
}
.note b{color:var(--txt)}
.note--warn{background:rgba(232,163,61,.1);border-color:rgba(232,163,61,.32);color:#F5DDB4}
.note--warn b{color:#FFE9C4}

.notes{
  display:grid;gap:8px;padding:13px 15px;border-radius:11px;
  background:rgba(232,163,61,.09);border:1px solid rgba(232,163,61,.3);
  margin-top:14px;
}
.notes > b{font-size:.78rem;color:#FFE0AE;letter-spacing:.02em}
.notes ul{display:grid;gap:7px}
.notes li{font-size:.8rem;line-height:1.55;color:#F0DDBE}

/* --- Image slot --------------------------------------------------------- */
.f--img{gap:8px}
.drop{
  position:relative;display:grid;place-items:center;
  height:150px;border-radius:11px;overflow:hidden;cursor:pointer;
  background:var(--panel);border:1px dashed var(--line-2);
  transition:border-color .2s,background-color .2s;
}
.drop:hover,.drop.is-over{border-color:var(--blue);background:var(--panel-2)}
.drop__thumb{position:absolute;inset:0;background-size:cover;background-position:center}
.drop__hint{
  position:relative;display:grid;justify-items:center;gap:2px;
  padding:10px 14px;text-align:center;font-size:.8rem;color:var(--txt-45);
  transition:opacity .2s;
}
.drop__hint b{color:var(--txt-70);font-weight:600}
.drop.has-img .drop__hint{opacity:0;background:rgba(0,0,0,.45);border-radius:8px}
.drop.has-img:hover .drop__hint{opacity:1}
.drop.has-img:hover .drop__hint b,.drop.has-img:hover .drop__hint span{color:#fff}
.drop.is-busy{pointer-events:none;opacity:.7}
.drop__meta{display:flex;flex-wrap:wrap;gap:6px;min-height:20px}
.drop__acts{display:flex;gap:8px}

.pill{
  display:inline-block;padding:3px 9px;border-radius:99px;
  font-size:.7rem;font-weight:600;color:var(--txt-45);border:1px solid var(--line-2);
}
.pill--ok{color:var(--ok);border-color:rgba(67,201,127,.4)}
.pill--warn{color:var(--amber);border-color:rgba(232,163,61,.4)}

/* --- Repeating lists ---------------------------------------------------- */
.list{display:grid;gap:9px}
.item{border-radius:11px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.item__bar{display:flex;align-items:center;gap:9px;padding:8px 10px;background:rgba(255,255,255,.03)}
.item__n{
  display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:6px;
  font-size:.7rem;font-weight:600;color:var(--txt-45);background:rgba(255,255,255,.07);
}
.item__bar > b{flex:1;min-width:0;font-size:.82rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item__bar button{
  display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;
  font-size:.86rem;color:var(--txt-45);
}
.item__bar button:hover{background:rgba(255,255,255,.09);color:var(--txt)}
.item__bar .del:hover{background:rgba(224,83,60,.18);color:#FFB2A1}
.item__bar .fold{transition:transform .2s}
.item.is-closed .fold{transform:rotate(-90deg)}
.item__body{display:grid;gap:14px;padding:14px}
.item.is-closed .item__body{display:none}

.add{
  padding:11px 14px;border-radius:10px;text-align:center;
  font-size:.82rem;font-weight:600;color:var(--txt-45);
  border:1px dashed var(--line-2);
}
.add:hover{color:var(--blue-2);border-color:var(--blue);background:rgba(79,123,240,.07)}

/* --- Theme presets ------------------------------------------------------ */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.theme-card{
  display:grid;gap:7px;padding:8px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .2s,transform .15s;
}
.theme-card:hover{border-color:var(--line-2)}
.theme-card.is-on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(79,123,240,.25)}
.theme-card__demo{
  position:relative;display:block;height:56px;border-radius:7px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.theme-card__bar{position:absolute;left:8px;top:10px;width:44%;height:5px;border-radius:3px;opacity:.9}
.theme-card__bar--short{top:21px;width:28%;opacity:.5}
.theme-card__btn{position:absolute;left:8px;top:32px;width:24px;height:9px;border-radius:4px}
.theme-card__dot{position:absolute;right:9px;top:11px;width:11px;height:11px;border-radius:50%}
.theme-card__band{position:absolute;left:0;right:0;bottom:0;height:11px}
.theme-card__name{font-size:.7rem;color:var(--txt-45);line-height:1.35}

/* --- Preview ------------------------------------------------------------ */
.preview{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--panel);border-left:1px solid var(--line);min-width:0;
}
.preview__bar{
  display:flex;align-items:center;gap:12px;padding:9px 13px;
  border-bottom:1px solid var(--line);font-size:.76rem;color:var(--txt-45);
}
.preview__sizes{display:flex;gap:3px;margin-left:auto}
.preview__sizes button{
  padding:5px 9px;border-radius:7px;font-size:.72rem;font-weight:600;color:var(--txt-45);
}
.preview__sizes button.is-on{background:rgba(79,123,240,.18);color:var(--blue-2)}
.preview__bar a{font-size:.74rem;text-decoration:none}
.preview__stage{display:grid;place-items:start center;padding:12px;overflow:auto;background:#07080C}
.preview iframe{
  width:100%;height:100%;min-height:400px;border:0;border-radius:8px;background:#fff;
  transition:width .25s var(--ease);
}

/* --- Tab bar (phone only) ----------------------------------------------- */
.tabs{display:none}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:20px;background:rgba(0,0,0,.6);
}
.modal__box{
  display:grid;gap:14px;width:min(520px,100%);max-height:86vh;overflow-y:auto;
  padding:24px 24px 20px;border-radius:15px;
  background:var(--panel-2);border:1px solid var(--line-2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
}
.modal__box h2{font-size:1.1rem}
.modal__body{display:grid;gap:11px;font-size:.88rem;color:var(--txt-70);line-height:1.6}
.modal__body b{color:var(--txt)}
.modal__meta{font-size:.78rem;color:var(--txt-45)}
.modal__acts{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

.vers{display:grid;gap:8px}
.ver{
  display:grid;gap:1px;padding:11px 13px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);
}
.ver:hover{border-color:var(--blue);background:rgba(79,123,240,.09)}
.ver b{font-size:.88rem}
.ver span{font-size:.74rem;color:var(--txt-45)}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast{
  position:fixed;left:50%;translate:-50% 0;bottom:24px;z-index:95;
  max-width:min(460px,calc(100vw - 32px));
  padding:12px 16px;border-radius:11px;
  font-size:.84rem;line-height:1.5;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s,visibility .28s,transform .28s var(--ease);
}
.toast.is-on{opacity:1;visibility:visible;transform:none}
.toast.is-ok{border-color:rgba(67,201,127,.5)}
.toast.is-err{border-color:rgba(224,83,60,.55);color:#FFC4B4}


/* ==========================================================================
   SMALL SCREENS
   --------------------------------------------------------------------------
   EVERY responsive rule is below this line and must stay below it.

   The rules above set .side, .edit and .preview to display:grid and lay the
   body out in three columns. Anything that overrides them at equal
   specificity has to come afterwards or it silently loses. That is exactly
   how the previous editor shipped with both of its media queries dead: at
   375x812 the section list was 25px tall, the edit pane 82px, and the top bar
   ate 259px - a third of the screen - with six buttons wrapped onto three
   rows. Measure at 375 / 390 / 860 / 1180 / 1440, and cross the breakpoint
   live without a reload.
   ========================================================================== */

/* --- Laptop: drop the live preview, keep the rail and the editor -------- */
/* The overflow sheet starts HERE, not at the phone breakpoint. Laid out
   inline, the four secondary buttons plus Publish need about 1130px; at 900
   they pushed Publish off the right edge - the same "six buttons, three rows"
   failure the old editor had, just at a different width. The sheet and the
   three-pane-to-tabs switch are two separate problems and get two separate
   breakpoints. */
@media (max-width:1180px){
  .body{grid-template-columns:200px minmax(0,1fr)}
  .preview{display:none}

  .top__more{
    display:grid;place-items:center;flex:none;width:44px;height:44px;
    border:1px solid var(--line-2);border-radius:10px;color:var(--txt-70);
    transition:background-color .2s,color .2s;
  }
  .top__more[aria-expanded="true"]{background:rgba(255,255,255,.08);color:var(--txt)}
  .top__more svg{width:20px;height:20px}

  .sheet{
    display:grid;gap:10px;align-content:start;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    max-height:86dvh;overflow-y:auto;
    padding:10px 16px calc(22px + env(safe-area-inset-bottom));
    background:var(--panel-2);border-top:1px solid var(--line-2);
    border-radius:18px 18px 0 0;box-shadow:0 -22px 50px -20px rgba(0,0,0,.85);
    transform:translateY(102%);visibility:hidden;
    transition:transform .32s var(--ease),visibility .32s;
  }
  .sheet.is-open{transform:none;visibility:visible}
  .sheet__grip{display:block;justify-self:center;width:40px;height:4px;
    border-radius:4px;background:var(--line-2);margin-bottom:4px}
  .sheet__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-bottom:4px;font-size:.78rem;color:var(--txt-45);
  }
  .sheet__head b{color:var(--txt);font-size:.95rem}
  .sheet .btn{width:100%;justify-content:center;min-height:50px;font-size:.9rem}
  .sheet__note{display:block;font-size:.78rem;line-height:1.55;color:var(--txt-45)}
  .sheet__note b{color:var(--txt-70);font-weight:600}
  .sheet__veil{
    display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
  }
  .sheet__veil.is-open{opacity:1;visibility:visible}
}

/* --- Phone and small tablet: one pane at a time behind a tab bar -------- */
@media (max-width:860px){

  /* The page itself never scrolls; the active pane does. dvh rather than vh
     because a phone's viewport shrinks and grows as the URL bar hides. */
  .app{grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}

  /* --- Top bar: one row, 56px, and only the button pressed most -------- */
  .top{
    flex-wrap:nowrap;gap:9px;min-height:56px;
    padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));
  }
  /* min-WIDTH as well as min-height. With the label hidden this collapsed to
     a 36px-wide target, and it is the only way out of a site on a phone. */
  .top__back{padding:8px;gap:2px;min-height:44px;min-width:44px;justify-content:center}
  .top__back span{display:none}      /* the chevron alone is understood */
  .top__brand{min-width:0;flex:1}
  .top__brand svg{width:26px;height:26px}
  .top__brand b{font-size:.92rem}
  .top__brand.is-small span{display:block;font-size:.68rem}
  .top__state{flex:none;gap:0}
  #state-txt{display:none}           /* the pip carries it; words in the sheet */
  .top__acts{gap:8px;margin-left:0;flex:none}
  #btn-publish{padding:11px 15px;min-height:44px;font-size:.84rem}
  /* The sheet itself is already set up in the 1180 block above; only its
     clearance changes here, because a tab bar now sits under it. */
  .sheet{padding-bottom:calc(88px + env(safe-area-inset-bottom))}

  /* --- Sites list ------------------------------------------------------ */
  .wrap{padding:20px 14px 50px}
  .view__h{font-size:1.28rem}
  /* Side by side, the two badges squeeze the name into a two-line wrap and
     truncate the address to nothing. Drop them onto their own row under the
     text instead, where they have the full card width. */
  .card{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"mark text" "mark end";
    align-items:center;gap:3px 12px;padding:12px 14px;min-height:72px;
  }
  .card__mark{grid-area:mark;width:42px;height:42px}
  .card__txt{grid-area:text}
  .card__end{grid-area:end;flex-direction:row;align-items:center;
    flex-wrap:wrap;justify-content:flex-start;margin-top:4px}

  /* --- The three panes become tab panels ------------------------------- */
  .view--site.is-on{grid-template-rows:minmax(0,1fr) auto}
  .body{display:block;position:relative;min-height:0}
  .body > .side,
  .body > .edit,
  .body > .preview{position:absolute;inset:0;visibility:hidden;pointer-events:none}
  /* visibility, NOT display:none. Hiding an iframe's ancestor with display
     makes some browsers throw the document away and reload it on the way
     back, so the preview would refetch the whole client site - photographs
     and all - every time the owner flicked between tabs. */
  .body > .is-tab-on{visibility:visible;pointer-events:auto}

  /* --- Sections: a real full-height list, never a hidden side-scroller -- */
  .side{
    display:grid;align-content:start;gap:4px;border-right:0;
    padding:10px 12px 24px;overflow-x:hidden;overflow-y:auto;
  }
  .side button{min-height:50px;padding:13px 14px;font-size:.95rem;
    border-radius:10px;white-space:normal}
  .side button i{width:7px;height:7px}
  .side__notes{min-height:52px;font-size:.88rem}

  /* --- Editor ---------------------------------------------------------- */
  .edit{padding:16px 14px 34px;overflow-y:auto}
  .edit__head{margin-bottom:16px}
  .edit__head h2{font-size:1.18rem}

  /* --- Preview --------------------------------------------------------- */
  .preview{display:grid;border-left:0}
  /* A 375px screen cannot usefully show what a 1440px one looks like, and
     the size buttons set an inline width that must not survive down here. */
  .preview__sizes{display:none}
  /* The "Open" link is the only control left in this bar on a phone, so it
     gets a real target rather than the 19px of line-height it inherits. */
  .preview__bar{padding:4px 12px}
  .preview__bar a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:.84rem}
  .preview__stage{padding:0}
  .preview iframe{width:100% !important;height:100%;min-height:0;border-radius:0}

  /* --- Tab bar: thumb height, clear of the home indicator -------------- */
  .tabs{
    display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
    padding:6px 8px;padding-bottom:calc(6px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line);
  }
  .tabs button{
    display:grid;justify-items:center;align-content:center;gap:4px;
    min-height:52px;padding:7px 4px;border-radius:10px;
    font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--txt-45);
  }
  .tabs button svg{width:20px;height:20px}
  .tabs button.is-on{background:rgba(79,123,240,.16);color:var(--blue-2)}

  /* --- Fields ---------------------------------------------------------- */
  /* iOS Safari zooms the whole page in when a focused field's text is under
     16px, and does NOT zoom back out. Every typable field is bumped here. */
  .f input[type="text"],.f input[type="url"],.f input[type="tel"],
  .f input[type="email"],.f input[type="number"],.f textarea,.f select,
  .drop__url,.lock__box input{font-size:16px;padding:12px 13px}
  .f textarea{min-height:112px}
  .f--color input[type="color"]{width:52px;height:46px}
  .grid--2{grid-template-columns:1fr}

  /* --- Tap targets ----------------------------------------------------- */
  .btn{min-height:44px;padding:12px 16px}
  .mini{min-height:44px;padding:12px 15px;font-size:.82rem}
  .item__bar{gap:8px;padding:9px 10px}
  .item__bar button{width:40px;height:40px;font-size:.95rem}
  .add{min-height:48px}
  .theme-card{padding:9px}
  .ver{min-height:56px}

  /* --- Modal sits above the tab bar and never traps its buttons -------- */
  .modal{padding:14px;align-items:flex-end}
  .modal__box{
    max-height:84dvh;border-radius:16px;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .modal__acts{flex-direction:column-reverse}
  .modal__acts .btn{width:100%}

  /* --- Toast clears the tab bar ---------------------------------------- */
  .toast{
    left:12px;right:12px;translate:0 0;max-width:none;text-align:center;
    bottom:calc(76px + env(safe-area-inset-bottom));
  }

  /* --- Sign in --------------------------------------------------------- */
  .lock{padding:18px}
  .lock__box{padding:28px 20px}
  .lock__box .btn{min-height:50px}
}

/* --- Any touch device, at any width ------------------------------------- */
@media (hover:none){
  /* Once a picture is set, .drop__hint is the only thing that says it can be
     replaced, and it was revealed by :hover alone. A phone has no hover, so
     it could never be seen. Leave it on. */
  .drop.has-img .drop__hint{opacity:1;background:rgba(0,0,0,.42)}
  .drop.has-img .drop__hint b,.drop.has-img .drop__hint span{color:#fff}
  /* Nothing in this panel may depend on a title tooltip or a hover state to
     be discoverable - a touch device shows neither. */
  .card:hover{background:var(--panel)}
}