/* MonsterLink — app chrome (login, onboarding, editor) */

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 13px; font-weight: 700; }
.input {
  padding: 12px 15px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: #fff; width: 100%; transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--ink); }
textarea.input { resize: vertical; min-height: 74px; }
select.input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23191621' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center; padding-right: 36px; }
.hint { font-size: 12.5px; color: var(--muted); }
.hint-ok { color: var(--slime-dark); font-weight: 700; }
.hint-bad { color: var(--danger); font-weight: 700; }

/* Panels */
.panel { background: var(--card); border: 1.5px solid var(--line-soft); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-soft); }
.panel + .panel { margin-top: 14px; }
.panel-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Top app bar */
.appbar {
  position: sticky; top: 0; z-index: 60; height: 60px;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: rgba(250, 247, 240, .92); backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line-soft);
}
.appbar .spacer { flex: 1; }
/* Nothing in a toolbar should wrap. At 375px these were shrinking under their
   own text: "All saved ✓" rendered 33px wide and 56px tall, three lines, and
   both buttons came out on two. */
#saveBadge, #viewBtn, #shareBtn, .appbar .btn { white-space: nowrap; flex: none; }
/* Refusing to wrap only helps if it also fits. With the wordmark the bar wants
   454px of content inside 375px of phone, so the word goes and the monster
   stays. Everything is legible again and there is 36px of slack. */
@media (max-width: 560px) {
  .appbar { gap: 10px; padding: 0 12px; }
  .appbar .logo-word { display: none; }
}
.urlpill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 40vw;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.urlpill b { font-weight: 800; }
.urlpill:hover { border-color: var(--ink); }
.avatar-chip { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); cursor: pointer; }

/* The not-live bar.
   It sits above everything the person came here to do, so it takes one line
   and gets out of the way. The message and its action are one run of text
   rather than a sentence next to a button: the button was as tall as the
   whole rest of the bar and pushed itself onto a second line on a phone,
   which is a lot of the screen spent saying something they already know. */
#notLiveBar {
  display: block; text-align: center;
  padding: 7px 16px; background: #FFF1CC; border-bottom: 1.5px solid #191621;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #191621;
}
.nlb-cta {
  /* No left margin: the whitespace between the span and the button in the
     markup already collapses to exactly one space, and adding to it reads as
     a typo. */
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 800; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.nlb-cta:hover { text-decoration-thickness: 3px; }
/* Publishing takes a moment and the label says so. Without this it stays
   clickable-looking and invites a second click on the same publish. */
.nlb-cta[disabled] { opacity: .55; cursor: default; text-decoration: none; }

/* Editor layout */
.ed-grid {
  display: grid; grid-template-columns: minmax(320px, 380px) 1fr minmax(320px, 380px);
  gap: 22px; padding: 22px; max-width: 1360px; margin: 0 auto; align-items: start;
}
.ed-preview { position: sticky; top: 82px; display: flex; justify-content: center; }
.ed-col { min-width: 0; }

/* The one panel, split into tabs */
.edtabs {
  display: flex; gap: 3px; background: var(--paper-2); border-radius: 13px;
  padding: 3px; margin-bottom: 16px;
}
.edtabs button {
  flex: 1; padding: 8px 2px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); text-align: center;
}
.edtabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(25, 22, 33, .08); }

/* Click-to-edit hover on the phone preview */
#preview { position: relative; }
#preview .ml-block { cursor: pointer; }
.ed-hova {
  position: absolute; z-index: 5; pointer-events: none;
  border: 2px solid #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}
.ed-hova button {
  pointer-events: auto; position: absolute; display: grid; place-items: center;
  background: #3B82F6; color: #fff; border: none; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(25, 22, 33, .3);
}
.ed-hova button:hover { background: #2563EB; }
/* The circle still straddles the bottom edge exactly as before; only the part
   of it that can be clicked has changed. The button box is now the lower half,
   the half sitting in the gap between blocks, and the span draws the full
   circle overflowing upward. When the whole 26px box was clickable it covered
   the vertical middle of any block shorter than about 26px, so clicking the
   centre of a heading or a divider opened "Add a block" instead of editing it. */
/* Scoped through .ed-hova so these beat `.ed-hova button` above, which is
   (0,1,1) and would otherwise keep painting the button's own blue box and
   shadow behind the circle. */
.ed-hova .ed-hova-add {
  bottom: -13px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 13px;
  background: none; box-shadow: none; border-radius: 0;
}
.ed-hova .ed-hova-add:hover { background: none; }
.ed-hova-add > span {
  position: absolute; left: 0; bottom: 0; pointer-events: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #3B82F6; color: #fff;
  box-shadow: 0 2px 8px rgba(25, 22, 33, .3);
  font-size: 17px; font-weight: 700; line-height: 1; font-family: var(--font-body);
}
.ed-hova-add:hover > span { background: #2563EB; }

/* Tap-then-edit is a phone behaviour. With a mouse, hovering already shows the
   outline and a click goes straight into the panel, so this button has no job
   on a desktop. Scoped through .ed-hova because a bare .ed-hova-add is (0,1,0)
   and loses to the .ed-hova button rule above at (0,1,1). */
.ed-hova .ed-hova-edit { display: none; }

/* The empty preview. Editor chrome rather than page content, so it sets its own
   font instead of inheriting whatever theme the page is wearing. */
.ed-empty {
  display: block; width: 100%; margin-top: 10px;
  padding: 24px 16px; border-radius: var(--r-md);
  border: 1.6px dashed var(--line); background: none;
  color: var(--muted); font-family: var(--font-body);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ed-empty:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }

/* Drag to reorder in the preview */
.ed-dragging { opacity: .35; }
/* A long press lifts a block. Without these iOS answers the same gesture with
   its own callout menu and starts selecting text, and the drag never begins. */
#preview .ml-block {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.ed-dropline {
  position: absolute; z-index: 6; height: 3px; border-radius: 2px;
  background: #3B82F6; pointer-events: none;
  box-shadow: 0 1px 4px rgba(59, 130, 246, .5);
}
body.ed-grabbing, body.ed-grabbing * { cursor: grabbing !important; user-select: none; }

/* Block rows */
.blist { display: flex; flex-direction: column; gap: 9px; }
.brow {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: #fff; border: 1.5px solid var(--line-soft); border-radius: var(--r-md);
  transition: box-shadow .15s, border-color .15s, opacity .2s;
}
.brow:hover { border-color: var(--line); box-shadow: var(--shadow-soft); }
.brow.dragging { opacity: .35; }
.brow.drop-above { box-shadow: 0 -3px 0 var(--slime-deep); }
.brow.drop-below { box-shadow: 0 3px 0 var(--slime-deep); }
.brow-grip { cursor: grab; color: var(--muted); padding: 4px 2px; touch-action: none; flex: none; }
.brow-grip:active { cursor: grabbing; }
.brow-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--paper); border-radius: 10px; font-size: 16px; }
.brow-main { flex: 1; min-width: 0; cursor: pointer; }
.brow-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-sub { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.brow-hidden .brow-title, .brow-hidden .brow-icon { opacity: .4; }
.brow-clicks { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--paper); padding: 4px 9px; border-radius: 999px; }
.brow-menu-btn { flex: none; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-weight: 800; letter-spacing: 1px; }
.brow-menu-btn:hover { background: var(--paper); color: var(--ink); }

/* Half blocks: two cells share a row, dashed slot fills a lone half */
.brow-pair { display: flex; gap: 9px; align-items: stretch; }
.brow-pair > * { flex: 1 1 0; min-width: 0; }
.brow-half { padding: 10px; gap: 8px; }
.brow-half .brow-grip { display: none; }
.brow-half .brow-icon { width: 30px; height: 30px; }
.brow-half .brow-title { font-size: 13px; }
.brow.drop-before-x { box-shadow: -3px 0 0 var(--slime-deep); }
.brow.drop-after-x { box-shadow: 3px 0 0 var(--slime-deep); }
.brow-slot {
  border: 1.6px dashed var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); font-weight: 700; font-size: 12.5px; min-height: 62px;
  transition: border-color .15s, color .15s, background .15s;
}
.brow-slot svg { opacity: .55; }
.brow-slot:hover, .brow-slot.slot-over { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.brow-slot.slot-over { border-style: solid; }
.chip-sched { font-size: 11px; background: var(--peach); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; }
.chip-half { background: var(--slime); }

/* Popover menu */
.popmenu {
  position: fixed; z-index: 120; min-width: 170px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(25,22,33,.18); padding: 6px;
}
.popmenu button { display: flex; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; gap: 9px; align-items: center; }
.popmenu button svg { flex: none; opacity: .72; }
.popmenu button:hover { background: var(--paper); }
.popmenu button.danger { color: var(--danger); }
.popmenu hr { border: 0; border-top: 1.5px solid var(--line-soft); margin: 5px 4px; }

/* Modal + sheet */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(25, 22, 33, .45); display: grid; place-items: center; padding: 18px; }
.modal { background: var(--paper); border-radius: var(--r-lg); width: min(560px, 100%); max-height: 88dvh; overflow: auto; padding: 22px; }
.modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.modal-x { font-size: 17px; padding: 6px 10px; border-radius: 10px; }
.modal-x:hover { background: var(--paper-2); }
.sheet { position: fixed; inset: 0 0 0 auto; z-index: 110; width: min(430px, 100vw); background: var(--paper); box-shadow: -20px 0 60px rgba(25,22,33,.2); padding: 20px; overflow-y: auto; animation: sheet-in .22s ease; }
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } }

/* Add block grid */
.addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addgrid button {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  background: #fff; border: 1.5px solid var(--line-soft); border-radius: var(--r-md); padding: 13px;
  transition: border-color .15s, transform .15s;
}
.addgrid button:hover { border-color: var(--ink); transform: translateY(-1px); }
.addgrid .ico { width: 34px; height: 34px; display: grid; place-items: center; background: var(--paper); border-radius: 10px; flex: none; }
.addgrid b { display: block; font-size: 14px; }
.addgrid span.blurb { font-size: 12px; color: var(--muted); }

/* Theme swatches */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.swatch { border-radius: 14px; overflow: hidden; border: 2px solid var(--line-soft); padding: 0; transition: transform .15s, border-color .15s; }
.swatch:hover { transform: translateY(-2px); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--slime); }
.swatch-body { padding: 11px 8px 9px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--pg-bg); color: var(--pg-text); }
.swatch-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--pg-btn-bg); border: var(--pg-border-w) solid var(--pg-btn-border); box-shadow: var(--pg-btn-shadow); }
.swatch-bar { width: 76%; height: 9px; border-radius: 99px; background: var(--pg-btn-bg); border: var(--pg-border-w) solid var(--pg-btn-border); }
.swatch-name { font-size: 10.5px; font-weight: 800; }

/* About length meter */
.about-meter { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.am-track { flex: 1; height: 4px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.am-track i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width .2s ease, background .2s ease; }
.am-track i[data-tone="red"] { background: var(--danger); }
.am-track i[data-tone="amber"] { background: #F0A93B; }
.am-track i[data-tone="green"] { background: var(--slime-deep); }
.about-meter .hint { flex: none; }

/* Fine-tuning sliders */
.tune-row { margin-top: 13px; }
.tune-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.tune-top label { font-size: 13px; font-weight: 600; }
.tune-val { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--paper); padding: 1px 8px; border-radius: 999px; }
input[type=range].tune {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px;
  background: var(--ink); border-radius: 2px; outline: none; cursor: pointer; margin: 8px 0;
}
input[type=range].tune::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); cursor: grab;
}
input[type=range].tune:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: 0 0 0 4px rgba(200,240,76,.5); }
input[type=range].tune::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: grab;
}

/* Segmented control */
.seg { display: flex; background: var(--paper-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { flex: 1; padding: 7px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(25,22,33,.12); }

/* Switch */
.switch { position: relative; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + i { background: var(--slime-deep); }
.switch input:checked + i::after { transform: translateX(16px); }

/* Item editors (faq/testimonial/carousel rows) */
.itemed { border: 1.5px solid var(--line-soft); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px; background: #fff; }
.itemed-top { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
.itemed-top button { font-size: 12px; padding: 4px 8px; border-radius: 8px; color: var(--muted); font-weight: 700; }
.itemed-top button:hover { background: var(--paper); color: var(--ink); }

/* Image pickers */
.imgpick { display: flex; align-items: center; gap: 12px; }
.imgpick-thumb { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--paper-2); border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 22px; overflow: hidden; flex: none; }
.imgpick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.imggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.imggrid .cell { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--paper-2); }
.imggrid .cell img { width: 100%; height: 100%; object-fit: cover; }
.imggrid .cell .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(25,22,33,.8); color: #fff; font-size: 11px; display: grid; place-items: center; }
.imggrid .add { border: 1.5px dashed var(--line); display: grid; place-items: center; font-size: 20px; color: var(--muted); border-radius: 10px; aspect-ratio: 1; }

/* Stats */
.stats-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.stat { background: var(--paper); border-radius: var(--r-md); padding: 11px 12px; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: 20px; }
.stat span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.statrow { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 6px 0; }
.statrow .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.statrow .bar { height: 7px; border-radius: 99px; background: var(--slime); min-width: 4px; border: 1px solid rgba(25,22,33,.25); }
.statrow .n { font-weight: 800; font-size: 12.5px; width: 34px; text-align: right; }

/* Save indicator */
.savebadge { font-size: 12.5px; font-weight: 700; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.savebadge.saving { color: var(--grape); }
.savebadge.saved { color: var(--slime-dark); }

/* Auth + onboarding shells */
.authwrap { min-height: 100dvh; display: grid; place-items: center; padding: 22px; }
.authcard { width: min(420px, 100%); background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 28px; box-shadow: 8px 8px 0 var(--slime); }
.authcard h1 { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; margin-bottom: 4px; }
.authcard .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

.ob-shell { display: grid; grid-template-columns: 1fr 480px; min-height: 100dvh; }
.ob-main { padding: 26px clamp(18px, 6vw, 70px) 120px; max-width: 720px; margin: 0 auto; width: 100%; }
.ob-side { background: linear-gradient(160deg, #EFE9DB, #E4DECE); display: flex; align-items: center; justify-content: center; position: sticky; top: 0; height: 100dvh; }
.steps { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 10px 0 30px; }
.steps .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; border: 2px solid var(--line); color: var(--muted); background: #fff; }
.steps .dot.on { background: var(--ink); border-color: var(--ink); color: var(--slime); }
.steps .dot.done { background: var(--slime); border-color: var(--ink); color: var(--ink); }
.steps .bar2 { width: 26px; height: 2px; background: var(--line); }
.ob-h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.02em; text-align: center; }
.ob-sub { text-align: center; color: var(--muted); margin: 6px 0 26px; }
.ob-foot { position: fixed; bottom: 0; left: 0; right: 480px; padding: 14px clamp(18px, 6vw, 70px); background: linear-gradient(transparent, var(--paper) 40%); display: flex; gap: 10px; justify-content: space-between; z-index: 40; }

/* The theme step's in-flow phone preview is mobile only; on desktop the sticky
   .ob-side preview already shows the page, so this stays hidden there. */
.look-stage { display: none; }
.look-lbl { color: var(--muted); font-size: 12.5px; }
/* Sits in the empty half of the preview when the page has no blocks yet, so a
   scratch page reads as a blank canvas rather than something that failed. */
/* Pinned to the foot of the stage with its own backing, NOT floating over the
   middle. Overlaid at bottom:20% it landed on top of the name and the socials
   whenever the preview was short, which read as a rendering fault rather than
   a note. */
.look-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 10px 22px 12px; text-align: center;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
  background: linear-gradient(transparent, var(--paper-2) 45%);
  pointer-events: none;
}
.look-note[hidden] { display: none; }

/* Template picker. Each card carries a miniature of the blocks it brings, so
   the choice shows what happens rather than only naming it. */
.tplgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tplcard {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  text-align: left; padding: 14px;
  background: #fff; border: 2px solid var(--line-soft); border-radius: var(--r-md);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tplcard:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
/* The previewed choice, held until Next commits it. */
.tplcard.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--slime); }
.tplcard b { font-size: 15px; }
.tplcard .hint { line-height: 1.35; }
/* One icon per template, centred in a soft tile. Replaced a stack of coloured
   bars that was meant to preview the blocks but came out looking the same on
   every card; the live preview now does that job properly. */
.tplcard-shape {
  display: grid; place-items: center;
  height: 58px; margin-bottom: 9px;
  background: var(--paper); border-radius: 10px; overflow: hidden;
  color: var(--ink);
}
.tplcard-shape svg { display: block; }
.tplcard.on .tplcard-shape { background: var(--slime); }

.tplbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1.5px solid var(--line-soft);
  font-size: 13.5px; color: var(--muted);
}
/* The broken-out template switch: its own card above the page, so changing
   template reads as a real, obvious option rather than a footnote. */
.tplswitch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.tplswitch .hint { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.tplswitch b { font-family: var(--font-display); font-size: 17px; }
@media (max-width: 560px) { .tplgrid { grid-template-columns: 1fr; } }

/* Section picker rows */
.secrow { display: flex; gap: 13px; align-items: center; width: 100%; text-align: left; background: #fff; border: 2px solid var(--line-soft); border-radius: var(--r-md); padding: 15px; margin-bottom: 10px; transition: border-color .15s; }
.secrow:hover { border-color: var(--line); }
.secrow.on { border-color: var(--ink); }
.secrow .ico { width: 38px; height: 38px; display: grid; place-items: center; background: var(--paper); border-radius: 11px; flex: none; }
.secrow b { display: block; font-size: 15px; }
.secrow span.blurb { font-size: 13px; color: var(--muted); }
.secrow .tick { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; flex: none; }
.secrow.on .tick { background: var(--ink); border-color: var(--ink); color: var(--slime); }

/* Mobile tab bar + responsive editor */
.tabbar { display: none; }
/* Desktop has the real preview sitting beside the panel, so the tray grabber is
   a phone-only answer to a phone-only problem. */
.tray-grab { display: none; }
@media (max-width: 1080px) {
  .ed-grid { grid-template-columns: minmax(340px, 1fr) 1fr; }
  .ed-side { grid-column: 1; }
  .ed-preview { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 800px) {
  /* The tray sits on top of this, so both need the same number. */
  :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom)); }
  .ed-grid { display: block; padding: 14px 14px 90px; }
  .ed-preview { position: static; margin-bottom: 16px; display: none; }
  .ed-col { display: none; }
  body[data-tab="blocks"] #blkCol { display: block; }
  body[data-tab="preview"] .ed-preview { display: flex; }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: rgba(250,247,240,.95); backdrop-filter: blur(10px);
    border-top: 1.5px solid var(--line-soft); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 2px; border-radius: 12px; }
  .tabbar button.on { color: var(--ink); background: var(--paper-2); }
  .tabbar .tico { height: 18px; }
  .tabbar .tico svg { display: block; }

  /* Tap a block, it stays outlined, and this opens the panel. */
  .ed-hova .ed-hova-edit {
    display: grid; place-items: center;
    top: -16px; right: 8px; bottom: auto; left: auto; transform: none;
    height: 32px; padding: 0 15px; border-radius: 999px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
  }
  /* A bit bigger for a finger. The circle still straddles the bottom edge and
     the clickable box is still only the half sitting in the gap between blocks. */
  .ed-hova .ed-hova-add { bottom: -17px; width: 34px; height: 17px; }
  .ed-hova-add > span { width: 34px; height: 34px; font-size: 21px; }

  /* ---- The controls tray ------------------------------------------------
     Lightroom's split, and Jonathan's call. The real page stays on screen at
     its true size and the controls slide up over the bottom of it, so what
     you are changing is visible while you change it. This replaces a cropped
     205px sample of three invented blocks: a window onto a stand-in was only
     ever standing in for the page itself being a tab away. */
  body[data-tab="style"] .ed-preview { display: flex; margin-bottom: 0; }
  body[data-tab="style"] .ed-grid {
    /* Edge to edge, so the preview is the width the real page will be. Gutters
       would make it 347px on a 375px phone, and a 7% narrower page wraps its
       text differently from the one being previewed. */
    padding-left: 0; padding-right: 0;
    /* So the end of the page can still be scrolled out from under the tray. */
    padding-bottom: calc(var(--tray-h, 46dvh) + var(--tabbar-h));
  }

  body[data-tab="style"] .ed-side {
    display: block;
    position: fixed; left: 0; right: 0; bottom: var(--tabbar-h);
    height: var(--tray-h, 46dvh);
    z-index: 60;
    background: var(--card);
    border-top: 1.5px solid var(--line-soft);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(25, 22, 33, .10);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* Scrolling to the end of the tray must not then scroll the page behind it. */
    overscroll-behavior: contain;
  }
  body[data-tab="style"] .ed-side .panel {
    border: 0; border-radius: 0; box-shadow: none; background: none;
    padding: 0 14px 22px;
  }

  .tray-grab {
    display: block; position: sticky; top: 0; z-index: 3;
    background: var(--card);
    padding: 9px 0 7px;
    /* The browser must not claim the gesture as a scroll before we see it. */
    touch-action: none; cursor: grab;
  }
  .tray-grab::before {
    content: ''; display: block;
    width: 42px; height: 4px; border-radius: 999px;
    background: var(--line); margin: 0 auto;
  }
  .tray-grab:active { cursor: grabbing; }
  /* A wider invisible target than the 4px bar it draws. */
  .tray-grab::after {
    content: ''; position: absolute; inset: -6px 0;
  }

  /* The sub-tabs have to stay reachable however far down the tray you scroll.
     top must equal the grabber's height exactly: any larger and sticky displaces
     the tabs downward even at rest, so they sit over the first row of swatches. */
  body[data-tab="style"] .edtabs {
    position: sticky; top: 20px; z-index: 2;
    background: var(--card);
    margin: 0 -14px; padding: 0 14px 10px;
  }

  /* The add-block picker. Two columns at 375px leaves about 95px of text
     beside a 34px icon, so every blurb wrapped hard and the cards came out
     between 121px and 193px tall. One column per row gives each card its full
     width, so the heights even out and nothing is squeezed. */
  .addgrid { grid-template-columns: 1fr; gap: 9px; }
  .addgrid button { padding: 14px; gap: 13px; align-items: center; }
  .modal { padding: 18px 16px; }

  /* No phone frame on a phone: you are already holding one. Reclaims the fixed
     330px width, the 3px border, the 4px padding and the 660px fixed height,
     and lets the preview grow with the page so the document scrolls instead of
     a 660px window scrolling inside the document. */
  .ed-preview .phone {
    width: 100%; height: auto; min-height: 62vh;
    border: 0; border-radius: 0; padding: 0;
    background: none; box-shadow: none;
  }
  .ed-preview .phone-screen {
    height: auto; min-height: 62vh; border-radius: 0; overflow: visible;
  }
  .ob-shell { grid-template-columns: 1fr; }
  .ob-side { display: none; }
  .ob-foot { right: 0; }
  .urlpill { display: none; }
  .stats-tiles { grid-template-columns: repeat(3, 1fr); }
  .sheet { width: 100vw; }

  /* These rules are keyed to what a step IS, not where it sits. They used to
     use body[data-obstep="<number>"], and when the wizard was reordered from
     four steps to three every selector silently pointed at the wrong screen:
     the look rules landed on the template picker, the picker rules matched
     nothing at all, and the fixed footer went back to covering the controls.
     Nothing failed, because no test asserts layout. Names cannot drift. */

  /* On both preview-led steps the page itself is the subject, so the wizard
     chrome gives up its space: the logo goes (it is decorative here) and the
     step dots tighten. Without this the preview gets under 200px on an SE and
     shows nothing but an avatar. The editor's Style tab reads well for exactly
     this reason: no chrome between the controls and the page. */
  body[data-obview="style"] .ob-main > .logo,
  body[data-obview="template"] .ob-main > .logo { display: none; }
  body[data-obview="style"] .steps,
  body[data-obview="template"] .steps { margin: 2px 0 6px; transform: scale(.88); transform-origin: left center; }

  /* Shared frame for both: full height column, preview takes the slack, and
     the footer joins the flow as the last row so it can never overlap. */
  body[data-obview="style"] .ob-main,
  body[data-obview="template"] .ob-main {
    height: 100dvh; padding-bottom: 0;
    display: flex; flex-direction: column; overflow: hidden;
  }
  body[data-obview="style"] section[data-step],
  body[data-obview="template"] section[data-step],
  body[data-obview="template"] #obPickWrap {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 2px;
  }
  body[data-obview="style"] .ob-sub,
  body[data-obview="template"] .ob-sub { display: none; }
  body[data-obview="style"] .ob-h1,
  body[data-obview="template"] .ob-h1 { font-size: 25px; margin-bottom: 8px; }
  body[data-obview="style"] .ob-foot,
  body[data-obview="template"] .ob-foot {
    position: static; left: auto; right: auto; padding: 12px 0 0; background: none;
  }

  .look-stage {
    display: block; position: relative; flex: 1 1 auto; min-height: 130px; overflow: hidden;
    border: 1.5px solid var(--line-soft); border-radius: 16px;
    margin-bottom: 10px; background: var(--paper-2);
  }
  /* Scrollable, not clipped: every template shares the same header, so the
     blocks that tell them apart are below the fold and must be reachable.
     Kept 1:1 scale rather than shrunk to fit, per the preview rule. */
  .look-stage > .ml-page {
    height: 100%; width: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }

  /* ---- Style step: theme, fonts and button shape in a strip below ------- */
  body[data-obview="style"] .look-panel {
    flex: 0 0 auto; max-height: 34dvh; overflow-y: auto;
    margin: 0; padding: 12px 14px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  body[data-obview="style"] #obThemes {
    display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  body[data-obview="style"] #obThemes .swatch { flex: 0 0 86px; scroll-snap-align: start; }

  /* ---- Template step: the cards swipe along the bottom ------------------ */
  body[data-obview="template"] .tplgrid {
    display: flex; gap: 10px; flex: 0 0 auto;
    overflow-x: auto; overflow-y: hidden; padding: 2px 0 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  }
  /* Narrow chips, which is what the icons bought us: a card no longer needs the
     width to show a miniature of the page, so three or four fit on screen at
     once instead of one and a half. The blurb goes with the width, since the
     icon and the live preview above already say what the template is. */
  body[data-obview="template"] .tplgrid .tplcard {
    flex: 0 0 104px; max-width: 104px; scroll-snap-align: start;
    padding: 8px; gap: 0; text-align: center;
  }
  body[data-obview="template"] .tplcard-shape { height: 44px; margin-bottom: 5px; }
  body[data-obview="template"] .tplcard-shape svg { width: 22px; height: 22px; }
  body[data-obview="template"] .tplcard b { font-size: 12px; line-height: 1.25; }
  body[data-obview="template"] .tplcard .hint { display: none; }
}