/* Wide screen layout for the builder: the editor on the left and the preview on the right, with the
   section links as a strip under the title. Header, builder, articles and footer all sit in one box,
   1440 wide with 32 gutters, so their edges line up at every width.
   index.html loads this file with media="(min-width: 900px)", so nothing here reaches phones.
   builder.css owns the base and phone styles and defines every token used here.
   1440px and up: a wider preview and two-column Profile and Look cards. */

.lc-page { padding-bottom: 0; }
.lc-mobile-only { display: none !important; }
span.lc-desktop-only { display: inline; }
p.lc-desktop-only { display: block; }

/* site.css keeps .wrap at 900px with 16 gutters, which is what pulled the header out of line. */
.lc-page .site-header .wrap, .lc-page .site-footer .wrap {
  max-width: 1440px; padding-left: var(--lc-s6); padding-right: var(--lc-s6);
}
.lc-page > main.wrap { max-width: none; padding: 0; }
.lc-page > main > .breadcrumb { display: none; }
.lc-content {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lc-s5); align-items: start;
  max-width: 1440px; margin: 0 auto; padding: 0 var(--lc-s6) var(--lc-s6);
}
.lc-content .lc-card { margin: 0; }

/* ---------- Columns ---------- */
.lc-builder {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0 var(--lc-s6); max-width: 1440px; margin: 0 auto; padding: 0 var(--lc-s6) 48px; align-items: stretch;
}
/* Cards sit 24 apart and have 24 inside; the gap between cards is the larger rhythm on the page.
   Flex, not the base grid: a sticky grid item can only move inside its own row, and the strip below
   has to stay on screen for the whole editor. */
.lc-editor { display: flex; flex-direction: column; gap: var(--lc-s5); padding-top: var(--lc-s6); }
/* The preview stays on screen while the editor scrolls (PRD 7.1) and scrolls on its own for the how to
   and hosting cards. With no panel behind it, a card cut off at the bottom looks broken, so the bottom
   edge fades. The fade covers the bottom padding, so nothing is faded once scrolled to the end. */
.lc-side {
  position: sticky; top: 0; align-self: start; max-height: 100vh;
  overflow-y: auto; gap: var(--lc-s5); padding: var(--lc-s6) 0 48px; scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
/* The bar sits under the phone here, one button wide, with the status line below it. */
.lc-side .lc-bar {
  position: static; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--lc-s2); padding: 0;
  background: none; border: 0; box-shadow: none;
}
.lc-side .lc-bar .lc-btn-primary { width: min(100%, 340px); }
.lc-side .lc-bar-status { order: 1; justify-content: center; text-align: center; }
/* A failed load (app.js) never builds the editor, so the hero stays in main and needs the shared box. */
.lc-page > main > .lc-hero { max-width: 1440px; margin: 0 auto; padding: var(--lc-s6) var(--lc-s6) 0; }
.lc-builder > .lc-error { grid-column: 1 / -1; }

/* ---------- Section links: a strip under the title that stays on screen ---------- */
/* The background and z-index let the cards scroll under it. The current section takes coral. */
.lc-builder .lc-sidenav {
  position: sticky; top: 0; z-index: 1; display: flex; gap: var(--lc-s5);
  background: var(--lc-bg); border-bottom: 1px solid var(--lc-line);
}
.lc-sidenav a {
  display: flex; align-items: center; gap: var(--lc-s2); padding: var(--lc-s2) 0 var(--lc-s3); margin-bottom: -1px;
  border-bottom: 2px solid transparent; white-space: nowrap;
  text-decoration: none; color: var(--lc-muted); font-size: var(--lc-fs-2);
}
.lc-sidenav a:hover { color: var(--lc-text); }
.lc-sidenav a[aria-current] { color: var(--lc-text); font-weight: 600; border-bottom-color: var(--lc-accent); }
.lc-sidenav .lc-icon { width: 18px; height: 18px; }
/* A jump clears the 44 strip, leaves the usual 24 gap and allows for the 24 inside the card. */
.lc-editor h2 { scroll-margin-top: 92px; }

/* ---------- Hero and import ---------- */
.lc-hero h1 { margin: 0 0 var(--lc-s1); white-space: nowrap; }
.lc-hero .lead { margin: 0 0 var(--lc-s2); }

/* ---------- Cards and fields: more room inside each card, shorter controls ---------- */
.lc-card { padding: var(--lc-s5); }
.lc-card-intro { margin-bottom: var(--lc-s4); }
.lc-field { margin-bottom: var(--lc-s3); }
.lc-field input[type="text"], .lc-field input[type="url"], .lc-field textarea { min-height: 40px; }
.lc-field textarea { min-height: 64px; }
.lc-btn { min-height: 40px; padding: var(--lc-s2) var(--lc-s4); }

/* ---------- Look ---------- */
/* Every template is in view on desktop; nothing scrolls. A sideways row hid four of the nine: Mac hides the
   scrollbar, a mouse wheel does not scroll sideways, and a half cut tile at the edge went unnoticed.
   Nine tiles make three rows of three, then five and four once tiles fit five across at about 94 px or
   more, then one row from 1440 px. Capped widths stop the tiles growing huge on a wide card. */
.lc-tiles {
  grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 128px));
  gap: var(--lc-s4) var(--lc-s3); overflow: visible; padding: 0; margin: 0;
}
@media (min-width: 1060px) { .lc-tiles { grid-template-columns: repeat(5, minmax(0, 150px)); } }
.lc-tiles button { min-width: 0; }
/* min sizes of 0 let aspect-ratio win over the thumbnail's content height, which would widen the tile. */
.lc-thumb { aspect-ratio: 1 / 1.1; min-width: 0; min-height: 0; padding: var(--lc-s2); gap: 5px; }
.lc-thumb .lc-thumb-btn { height: 9px; }
/* Capped so three short words do not stretch across the whole Look card at 1440 px. */
.lc-segmented { max-width: 420px; background: #fff; border: 1px solid var(--lc-line); }

/* ---------- Links and blocks: a ruled list with a drag handle ---------- */
.lc-card-head .lc-head-add { display: inline-flex; min-height: 36px; padding: var(--lc-s1) var(--lc-s3); font-size: var(--lc-fs-2); }
.lc-head-add .lc-icon { width: 18px; height: 18px; }
.lc-blocks { gap: 0; margin: 0; border-top: 1px solid var(--lc-line); }
.lc-block { border: 0; border-bottom: 1px solid var(--lc-line); border-radius: 0; }
.lc-block.is-open { box-shadow: none; background: var(--lc-bg); }
.lc-row { gap: var(--lc-s2); padding: var(--lc-s1) var(--lc-s1); }
.lc-row .lc-drag { display: grid; place-items: center; width: 20px; color: #aab3c0; cursor: grab; }
.lc-drag .lc-icon { width: 18px; height: 18px; stroke-width: 2.6; }
.lc-row .lc-icon-btn { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.lc-row .lc-icon-btn:hover:not([disabled]) { background: var(--lc-soft); }
.lc-block.is-dragging { opacity: .45; }
.lc-block.is-drop-before { box-shadow: inset 0 3px 0 var(--lc-accent); }
.lc-block.is-drop-after { box-shadow: inset 0 -3px 0 var(--lc-accent); }
/* The editor lines up with the row's name, past the drag handle and the icon. */
.lc-editor-panel { padding: var(--lc-s1) var(--lc-s3) var(--lc-s3) 64px; }
.lc-add-menu { margin-top: var(--lc-s3); }
.lc-add-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The photo menu has two choices, so two columns; three would leave an empty slot. */
.lc-photo-menu .lc-add-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-add-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lc-field select, .lc-social-item select, .lc-social-item input { min-height: 40px; }
.lc-social-item .lc-icon-btn { width: 32px; height: 32px; }

/* ---------- AI panel and settings ---------- */
.lc-ai-panel .lc-actions .lc-btn, .lc-settings .lc-actions .lc-btn { flex: 0 0 auto; }

/* ---------- Live preview: no card, a phone with a notch and status bar ---------- */
/* The phone sheet from builder.css becomes a plain block in the right column. */
.lc-preview { position: static; inset: auto; z-index: auto; display: block; background: none; }
.lc-preview .lc-preview-card { width: auto; max-height: none; overflow: visible; border-radius: 0; padding: 0; animation: none; }
.lc-preview-card { background: none; border: 0; box-shadow: none; padding: 0; }
.lc-preview-card .lc-card-head { align-items: flex-start; }
.lc-preview-card .lc-card-intro { margin: 0 0 var(--lc-s4); }
.lc-views {
  display: flex; gap: 2px; padding: var(--lc-s1); background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-r-pill);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.lc-views button {
  display: inline-flex; align-items: center; gap: var(--lc-s1); width: auto; height: 32px; padding: 0 var(--lc-s3);
  border: 0; border-radius: var(--lc-r-pill); background: none; font: inherit; font-size: var(--lc-fs-2); color: var(--lc-text);
}
.lc-views [aria-pressed="true"] { background: var(--lc-accent); color: #fff; }
.lc-views .lc-icon { width: 16px; height: 16px; }

/* Real phone proportions: a 393 x 852 screen (iPhone 15) inside an 11px bezel, so 340 x 711 outside.
   The width shrinks with the window height so the whole phone always fits on screen. The 54px corner
   draws the device and is not part of the corner scale. */
.lc-phone {
  position: relative; display: flex; flex-direction: column;
  width: clamp(250px, calc((100vh - 330px) * 340 / 711), 340px); aspect-ratio: 340 / 711;
  margin: 0 auto var(--lc-s2); border: 11px solid #111827; border-radius: 54px;
  box-shadow: 0 0 0 2px #cbd2dc, 0 30px 60px rgba(15, 23, 42, .2);
}
.lc-phone::before {
  content: ""; position: absolute; z-index: 1; top: 9px; left: 50%; width: 84px; height: 25px;
  margin-left: -42px; border-radius: 16px; background: #111827;
}
.lc-phone .lc-phone-status {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 6px 18px 0 22px;
  font-size: var(--lc-fs-1); font-weight: 600; color: var(--lc-text);
}
.lc-phone-status span:last-child { display: inline-flex; gap: var(--lc-s1); }
.lc-phone-status .lc-icon { width: 14px; height: 14px; stroke-width: 2.2; }
/* The page runs up behind the status bar (preview.js), so the screen's own corners need rounding. */
.lc-phone iframe { border-radius: 43px 43px 0 0; }
.lc-phone.is-wide { width: 100%; aspect-ratio: auto; border: 1px solid var(--lc-line); border-radius: var(--lc-r-row); box-shadow: none; }
.lc-phone.is-wide::before, .lc-phone.is-wide .lc-phone-status { display: none; }
.lc-phone.is-wide iframe { flex: none; height: 560px; }

/* ---------- 1440px and up: a wider preview, two-column Profile, one row of templates ---------- */
@media (min-width: 1440px) {
  .lc-builder { grid-template-columns: minmax(0, 1fr) 400px; }

  .lc-profile { display: grid; column-gap: var(--lc-s6); align-items: start; }
  .lc-profile > .lc-card-head, .lc-profile > .lc-card-intro { grid-column: 1 / -1; }

  .lc-profile { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .lc-profile > .lc-field { grid-column: 2; }
  .lc-profile > .lc-profile-photo { grid-column: 1; grid-row: 3 / span 2; margin: 0; }
  .lc-profile .lc-avatar { width: 120px; height: 120px; }
  .lc-profile .lc-avatar-row { gap: var(--lc-s4); align-items: center; }
  .lc-profile .lc-avatar-actions .lc-btn { white-space: nowrap; }
  /* The photo column is narrow here, so its two choices stack. */
  .lc-profile .lc-photo-menu .lc-add-choices { grid-template-columns: 1fr; }

  /* The tiles run across the whole card in one row of nine, about 90 px each. */
  .lc-tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}