/* App fonts (loaded only on pages that use this stylesheet — the lander is self-contained and
   keeps its own Helvetica). fridaymap.com uses the paid Adobe fonts Stolzl (geometric sans) +
   Adelle (slab serif); these are close FREE stand-ins: Outfit (≈ Stolzl) body, Zilla Slab
   (≈ Adelle) headings. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..800&family=Zilla+Slab:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  /* Giant Goldfish palette: #69D2E7 #A7DBD8 #E0E4CC #F38630 #FA6900 */
  --bg: #f7f4e8;        /* light cream (from E0E4CC) */
  --ink: #2a2018;       /* warm near-black */
  --muted: #857a68;     /* warm muted */
  --line: #e6e2ce;      /* soft cream border */
  --accent: #fa6900;    /* red-orange (primary) */
  --accent-dark: #e05d00;
  --panel: #ffffff;
  --page: #fa6900;      /* orange page background */
  --bar: var(--page);   /* top bar blends into the orange page background (no visible seam) */
  --bar-edit: var(--page); /* edit bar matches the top bar (same colour) */
  --on-bg: #fff4e6;     /* light text on orange */
  /* TOGGLE: the hairline under the top bar. `transparent` = off (no white line, the default).
     To show it, set this to a colour, e.g. rgba(255, 244, 230, 0.18). */
  --header-rule: transparent;
  /* Palette accents for reuse */
  --gold: #f38630;      /* amber */
  --sky: #69d2e7;       /* sky blue */
  --teal: #a7dbd8;      /* pale teal */
  --cream: #e0e4cc;     /* cream */
}

* {
  box-sizing: border-box;
}

html, body {
  /* Never let a stray wide element make the whole page scroll sideways on mobile. */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "stolzl", sans-serif;
  font-weight: 400;
  font-style: normal;  color: var(--on-bg);
  background: var(--page);

}

/* Slab-serif headings (≈ Adelle) over the geometric-sans body (the wordmark keeps its Helvetica). */
h1, h2, h3, h4, h5, h6 {
  font-family: "stolzl", sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

h2 {
  padding-top: 2rem;
}

.app-header {
  width: 100%;
  /* Hairline under the top bar. Controlled by the --header-rule toggle (off by default). */
  border-bottom: 1px solid var(--header-rule);
  background: var(--bar); /* dark orange, white text */
}

.header-inner {
  width: 90%;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  color: #fff4e6;
  /* Match the lander's big "GOATEDWEBSITE.COM" wordmark style, incl. its amber extrusion. */
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: -0.14em 0.14em 0 #9c3e1c;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
.brand-mark {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  /* Light "whitey-orange" version of the favicon so it reads on the orange bar (no tile),
     with the same hard extrusion shadow as the wordmark (drop-shadow = text-shadow for SVG). */
  filter: drop-shadow(-0.14em 0.14em 0 #9c3e1c);
}

/* Brand alone on the left; everything else clusters on the far right. */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-grid {
  margin: 0;
  display: flex;
  gap: 8px;
}

.github-button:hover { background: var(--accent-dark); }

/* "Your site" standalone button — shown in the top bar on desktop; a warm-white extruded pill
   with orange text. (On mobile it's hidden and the dropdown's "Your site" row shows instead.) */
.header-site-link {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  color: var(--accent);
  background: #fff4e6;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(-3px);
  box-shadow: 0 3px 0 #a84f0d;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.header-site-link:hover { transform: translateY(0); box-shadow: 0 0 0 #a84f0d; }
.header-site-ic { width: 15px; height: 15px; flex: 0 0 auto; }
/* "No live site" — muted, not clickable. */
.header-site-link.is-disabled,
.header-site-link.is-disabled:hover {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
/* The dropdown's "Your site" row is redundant on desktop (the top-bar button covers it). The
   descendant selector outweighs the base .header-menu-item { display:flex } rule below. */
.header-menu-panel .header-menu-site { display: none; }

/* Header "Sign up" — white on the orange bar (primary sign-up CTA). */
.header-btn:not(.header-btn--ghost) { background: #fff; color: var(--accent); }
.header-btn:not(.header-btn--ghost):hover { background: var(--on-bg); }

/* Right-side account cluster: username + a generic dropdown icon, or log in / sign up. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-username {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}
.header-btn--ghost {
  background: transparent;
  color: #fff4e6;
  border: 1px solid rgba(255, 244, 230, 0.3);
}
.header-btn--ghost:hover { background: rgba(255, 244, 230, 0.12); }

/* Account dropdown — opens on hover of the icon (or the menu), closes when the cursor leaves. */
.header-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* One merged box: username + hamburger icon; the whole box opens the menu on hover. */
.header-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 150px;
  max-width: 240px;
  padding: 0 12px;
  border: 1px solid rgba(255, 244, 230, 0.5);
  border-radius: 8px;
  background: transparent;
  color: var(--on-bg);
  font: inherit;
  cursor: pointer;
}
.header-menu-btn:hover { background: rgba(255, 244, 230, 0.14); }
.header-menu-btn .header-username { flex: 1; text-align: left; color: var(--on-bg); }
.header-menu-btn svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--on-bg); }

.header-menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;        /* never wider than the box itself */
  margin-top: 6px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(24, 32, 27, 0.14);
  z-index: 300;
  display: none;
  flex-direction: column;
}
/* Bridge the gap so moving from the box to the panel keeps the hover. */
.header-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.header-menu:hover .header-menu-panel,
.header-menu:focus-within .header-menu-panel { display: flex; }

.header-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-menu-item:hover { background: var(--bg); }
.header-menu-logout { color: #b73535; }
/* "No live site" — shown but not clickable. */
.header-menu-item.is-disabled { color: var(--muted); cursor: default; }
.header-menu-item.is-disabled:hover { background: none; }
.header-menu-item.is-disabled .header-menu-ic { color: var(--muted); }

.header-menu-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
}
.header-menu-logout .header-menu-ic { color: #b73535; }

/* Mobile: move "Your site" into the dropdown so the bar is just the wordmark + the account
   menu. Collapse the menu to its icon (hide the username) and use the full width so the
   wordmark keeps its full size and nothing wraps to a second line. */
@media (max-width: 560px) {
  /* Give the bar a comfortable height while the big wordmark + logo fill it. */
  .header-inner { width: 100%; padding: 12px 12px; gap: 8px; flex-wrap: nowrap; min-width: 0; }
  /* Big wordmark that fills the bar height; min-width:0 + ellipsis keeps it from ever forcing
     horizontal scroll on the narrowest phones. */
  .brand { font-size: 1.5rem; line-height: 1; text-shadow: -0.11em 0.11em 0 #9c3e1c; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .header-right { gap: 8px; min-width: 0; flex: 0 0 auto; }
  .header-site-link { display: none !important; }  /* lives in the dropdown on mobile */
  .header-menu-panel .header-menu-site { display: flex; }  /* ...where this row now shows */
  .header-menu-btn { min-width: 0; padding: 0 9px; }
  .header-menu-btn .header-username { display: none; }
  /* Panel is normally as wide as the button; the icon-only button is too narrow, so give the
     menu its own width (anchored to the right edge, it opens leftward). */
  .header-menu-panel { width: auto; min-width: 180px; }
  /* Logged out on mobile: drop the Log in / Sign up buttons from the bar so the wordmark owns
     the whole top bar (sign-in still lives on the landing page). The .header-right prefix
     out-specifies the base `.button { display: inline-flex }` rule. */
  .header-right .header-btn { display: none; }
}
@media (max-width: 380px) {
  .brand { font-size: 1.3rem; }
}

.status-item {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.status-item dt {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.status-item dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-item dd::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}

.status-item[data-state="ok"] dd::before {
  background: #14824f;
}

.status-item[data-state="pending"] dd::before {
  background: #c47a16;
}

.status-item[data-state="bad"] dd::before {
  background: #b73535;
}

.shell {
  width: min(100%, 760px);
  min-height: calc(100vh - 78px);
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  place-items: center;
}

/* Auth (sign-up / login) screen: bias the panel toward the upper-middle. Now that the top bar
   blends into the orange background, dead-centering left the panel looking low. */
.shell--auth { min-height: calc(100vh - 230px); }

.panel {
  width: min(100%, 520px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(24, 32, 27, 0.10);
}

.hidden {
  display: none !important;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

h1 {
  margin: 0 0 28px;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
}

.button,
.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.button {
  padding: 0 18px;
  color: white;
  background: var(--accent);
  border: none;
}

.panel > .button {
  width: 100%;
}

.panel > .button + .button {
  margin-top: 10px;
}

.button:hover {
  background: var(--accent-dark);
}

.github-button {
  width: 100%;
  margin-top: 22px;
  background: #24292f;
}

/* Landing / marketing entry page */
.landing {
  width: min(100%, 600px);
  text-align: center;
  padding: 48px 40px;
}

.landing-title {
  font-size: 2.6rem;
  margin-bottom: 16px;
}

.landing-sub {
  margin: 0 auto 28px;
  max-width: 460px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 1.05rem;
}

.landing-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-actions .button {
  width: auto;
  min-width: 180px;
  margin: 0;
}

.landing-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  width:fit-content;
  max-width: 460px;
  margin: 18px auto 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.landing-consent-holder {
  display: block;
  align-items: center;
  
}

.landing-consent-text {
  cursor: pointer;
}

/* Sign-up page */
.signup {
  width: min(100%, 560px);
  text-align: center;
  padding: 44px 40px;
}

.signup .landing-consent {
  margin: 24px auto;
}

/* "Why?" reads like a link but is a button (opens the popup below, no navigation). */
.why-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.why-link:hover { color: var(--accent-dark, #c85400); }

/* Small "Why GitHub?" popup — a centered card over a dim backdrop, dismissed by the ×, the
   backdrop, or Escape. Deliberately compact, so it feels like a tooltip, not a page. */
.why-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.why-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.45);
}
.why-card {
  position: relative;
  width: min(100%, 380px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  text-align: left;
  box-shadow: 0 18px 50px rgba(20, 14, 8, 0.25);
}
.why-card h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--ink); }
.why-card p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.why-card .why-more { margin: 14px 0 0; font-size: 0.88rem; }
.why-card .why-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.why-card .why-more a:hover { text-decoration: underline; }
.why-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.why-x:hover { color: var(--ink); }

.signup-back {
  display: inline-block;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.signup-back:hover {
  color: var(--ink);
}

.landing-consent input {
  margin-top: 2px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.landing-consent a {
  color: var(--accent);
  font-weight: 600;
}

.landing-consent-flash {
  color: var(--ink);
}
.landing-consent-flash input {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Publishing / loading page */
.publishing {
  text-align: center;
}

.publishing-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 24px 0 16px;
}

.publishing-bar-fill {
  height: 100%;
  width: 8%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.6s ease;
}

.publishing-status {
  margin: 0 0 32px;
  color: var(--ink);
  /* font-weight: 400; */
  
}

.publishing-tip {
  margin: 0;
  min-height: 1.3em;
  color: var(--muted);
  font-size: 0.85rem;
}

.publishing-fallback {
  display: inline-block;
  margin-top: 20px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.publishing-fallback:hover {
  text-decoration: underline;
}

/* Secondary "I don't want to connect" opt-out under the Continue button — small + quiet. */
.publishing-decline {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.publishing-decline:hover { color: var(--ink); }

/* The "…then we can't do anything" popup — just an image (reuses .why-modal/.why-card/.why-x). */
.decline-card { width: min(94vw, 560px); padding: 0; overflow: hidden; }
.decline-img { display: block; width: 100%; height: auto; border-radius: inherit; }
/* Make the × readable over the photo: white on a dark disc, top-right of the image. */
.decline-card .why-x {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.decline-card .why-x:hover { background: rgba(0, 0, 0, 0.65); color: #fff; }

.notice {
  margin: -8px 0 18px;
  padding: 12px 14px;
  border: 1px solid #d8d0c2;
  border-radius: 8px;
  background: #fbf7ed;
  color: #594b2f;
  line-height: 1.45;
}

.template-picker {
  margin: 4px 0 22px;
  max-height: min(60vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.field-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

/* Wider layout for the "Pick a template" gallery stage. The stage fits the viewport as a flex
   column: the heading, notice, and the "Create site" button stay pinned while ONLY the template
   grid scrolls — so the button is always reachable and the grid is as tall as possible. */
.shell--wide { width: min(100%, 1120px); align-content: start; padding-top: 10px; padding-bottom: 10px; }
/* Flat, box-less stage: the template cards and button sit directly on the orange page. */
.template-stage {
  width: min(100%, 1080px);
  max-height: calc(100vh - 112px);
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--on-bg);
}
.template-stage > h1 { flex: 0 0 auto; margin: 0 0 14px; color: var(--on-bg); text-align: center; }
/* Light, extruded "Create/Overwrite" button so it pops against the orange background. */
.template-stage #publish-link {
  flex: 0 0 auto;
  align-self: center;   /* don't stretch across the whole row */
  width: auto;          /* override .panel > .button { width: 100% } */
  margin: 6px 0 8px;
  padding: 0 34px;
  background: #fff4e6;
  color: #d95e00;
  font-weight: 800;
  border: none;
  box-shadow: 0 5px 0 #d9863c;
}
.template-stage #publish-link:hover { background: #ffffff; box-shadow: 0 5px 0 #d9863c; }
.template-stage #config-status { flex: 0 0 auto; color: var(--on-bg); }
.template-stage #config-status:empty { display: none; } /* no phantom gap below the button */
/* Compact, centered "you already have a site …" notice — not a full-width banner. */
.template-stage #site-notice {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 6px 14px;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
}
.template-stage #template-picker {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  /* Grid is sized to fit exactly (below), so nothing overflows — visible lets selected-card
     shadows spill into the surrounding orange instead of being clipped at the top/bottom rows. */
  overflow: visible;
  margin: 2px 0 10px;
  display: flex;
  flex-direction: column;
}

/* Fixed 3-across × 2-down grid that fills the available height, so all six templates fit
   without scrolling. The rows share the height equally and previews "cover" their cell. */
.template-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
}
.template-card { min-height: 0; }
.template-preview-frame { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }

/* On narrow screens fall back to a scrollable 2-column list with fixed-ratio previews. */
@media (max-width: 680px) {
  .template-stage #template-picker { display: block; overflow: auto; }
  .template-grid { flex: none; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .template-preview-frame { flex: none; aspect-ratio: 16 / 10; }
}

.template-card {
  position: relative; /* for the selected ✓ badge */
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink); /* dark text on the white card (the stage's cream colour is for the heading) */
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}
.template-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(24, 32, 27, 0.18); }
.template-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Selection isn't separately marked — the per-card "Overwrite/Use" button is the real action. */

/* Live-preview thumbnail: a scaled iframe (or an <img>) rendered at the top of the card. */
.template-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f2;
  border-bottom: 1px solid var(--line);
}
.template-preview-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 750px;
  border: 0;
  transform-origin: top left;
  pointer-events: none; /* clicks fall through to the card */
}
.template-preview-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.template-demo-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(24, 32, 27, 0.82);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.template-card:hover .template-demo-btn,
.template-card:focus-within .template-demo-btn { opacity: 1; }
.template-demo-btn:hover { background: var(--accent); }

/* Primary "Use / Overwrite" action, overlaid on the card (bottom-right, opposite the demo
   button) and revealed on hover/focus just like the demo button. */
.template-use-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 4;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(24, 32, 27, 0.28);
  transition: opacity 0.12s ease, background 0.12s ease;
}
.template-card:hover .template-use-btn,
.template-card:focus-within .template-use-btn { opacity: 1; }
.template-use-btn:hover { background: #d95e00; }

.template-card-meta { padding: 12px 14px 14px; display: grid; gap: 8px; }
.template-name { font-size: 0.98rem; font-weight: 800; }
.template-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.template-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(24, 32, 27, 0.06);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Full-size live demo overlay */
.template-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.template-demo-backdrop { position: absolute; inset: 0; background: rgba(24, 32, 27, 0.55); }
.template-demo-card {
  position: relative;
  width: min(100%, 1100px);
  height: min(90vh, 820px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(24, 32, 27, 0.35);
}
.template-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.template-demo-title { font-weight: 800; color: var(--ink); }
.template-demo-actions { display: flex; align-items: center; gap: 12px; }
.template-demo-link { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.template-demo-link:hover { text-decoration: underline; }
.template-demo-x { border: none; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.template-demo-x:hover { color: var(--ink); }
.template-demo-frame { flex: 1; width: 100%; border: 0; }


.status {
  min-height: 22px;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.result {
  display: grid;
  gap: 12px;
}

.primary-link,
.secondary-link {
  width: 100%;
  min-width: 0;
  padding: 0 14px;
  overflow-wrap: anywhere;
}

.primary-link {
  color: white;
  background: var(--accent);
}

.secondary-link {
  color: var(--accent-dark);
  border: 1px solid var(--line);
}

@media (max-width: 520px) {
  .status-grid {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 26px;
  }

  h1 {
    font-size: 2rem;
  }
}

/* On the editor page the body is a viewport-tall flex column: the app-header takes its
   natural height and the editor fills the exact remainder. A *definite* height (not
   min-height) is required so the nested flex:1 → iframe heights resolve and the iframe
   actually fills — otherwise it collapses and the orange page background shows below. */
body.pe-editing {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.pe-editing > [data-view="editor"] {
  flex: 1 1 auto;
  min-height: 0;
}

[data-view="editor"] {
  width: 100%;
  display: flex;
  flex-direction: column;
}

[data-view="editor"].hidden {
  display: none !important;
}

/* ── Small-screen gate ─────────────────────────────────────────────────────────
   The builder is desktop-only for now; below the breakpoint we hide it and show a
   friendly interstitial instead. Width-based (not user-agent) so a wide tablet or a
   resized desktop window behaves correctly, and rotating to landscape reveals the
   editor with no reload. Bump the breakpoint if you want to gate landscape phones too. */
.editor-mobile-gate { display: none; }

@media (max-width: 820px) {
  [data-view="editor"] { display: none !important; }

  .editor-mobile-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background: var(--page);
    color: #fff;               /* pure white reads clearer on the orange than the cream tone */
    text-align: center;
  }
  /* Message fills the space and stays vertically centered; the actions pin to the bottom. */
  .emg-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 440px);
  }
  .emg-logo {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
    margin-bottom: 28px;
  }
  .emg-logo span { opacity: 0.7; }
  .emg-card h1 {
    font-size: 1.5rem;
    line-height: 1.35;         /* the heading is a full sentence — give the wrapped lines air */
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
  }
  .emg-card p {
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0 0 12px;
    color: #fff;
  }
  .emg-card .emg-sub { opacity: 0.85; font-size: 0.95rem; }
  .emg-actions {
    flex: 0 0 auto;
    width: min(100%, 440px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* clear the iOS home indicator */
  }
  .emg-actions .button {
    background: #fff;
    color: var(--accent);
    min-width: 200px;
  }
  .emg-home {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    opacity: 0.92;
  }
  .emg-home:hover { opacity: 1; text-decoration: underline; }
}

.editor-header {
  position: relative;
  padding: 10px 20px;
  /* No bottom border: the white active tab meets the white page below with no orange line. */
  background: var(--bar-edit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* One row: the tab strip shrinks to stay beside the controls (see .editor-page-tabs).
     On narrow screens a media query stacks the controls above the tabs instead. */
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* ---- Dark-orange edit bar: recolor its controls to light-on-orange.
   (Dropdown panels that open below the bar are white cards and keep their
   own dark text — only the in-bar triggers are recolored here.) ---- */
/* Page tabs look like browser tabs sitting at the bottom of the bar: the open page is a
   solid white tab; the others are white-outlined and let the orange bar show through. */
.editor-header .editor-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  min-width: 0; /* allow the tab to shrink so many tabs stay on one row */
  overflow: hidden; /* keep contents inside a tight tab (icons never spill off) */
  color: var(--on-bg);
  background: transparent;
  border: 1px solid rgba(255, 244, 230, 0.5);
  border-radius: 9px 9px 0 0;
  transition: flex-basis 0.2s ease, flex-grow 0.2s ease,
    background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Tab sizing: page tabs get a comfortable width when there are only a few (room for the title plus
   the hover rename/delete icons) and shrink toward a floor as more are added; the home tab keeps its
   natural width. When even the shrunk tabs can't fit, the strip scrolls (updateTabCrowding adds
   .pe-tabs-crowded). The id beats .editor-page-tabs's overflow:hidden defined later. */
/* Page tabs share the strip: a few get wide (up to a cap, so the full title shows) and many shrink
   toward a floor (title ellipsises), after which the strip scrolls. flex-basis 0 makes the width
   depend on the strip, NOT on the tab's contents — so revealing the hover icons truncates the title
   without ever changing the tab's width. */
.editor-header .editor-tab-page { flex: 1 1 0; min-width: 6rem; max-width: 16rem; }
/* Home tab never shrinks (so it can't collapse "into oblivion"); it's capped so a long site name
   can't hog the bar, and its label ellipsises if needed. */
.editor-header .editor-tab-home { flex: 0 0 auto; max-width: 12rem; }
.editor-header .editor-tab-add { flex: 0 0 auto; }

/* Crowded strip scrolls with a VISIBLE thin scrollbar — much easier to grab than the OS's
   auto-hiding overlay. The strip's height is auto, so it grows to fit the scrollbar (the tabs keep
   their full height) and the bar sits right under the tab row. */
#editor-page-tabs.pe-tabs-crowded {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 244, 230, 0.6) transparent;
}
#editor-page-tabs.pe-tabs-crowded::-webkit-scrollbar { height: 8px; }
#editor-page-tabs.pe-tabs-crowded::-webkit-scrollbar-thumb { background: rgba(255, 244, 230, 0.5); border-radius: 4px; }
#editor-page-tabs.pe-tabs-crowded::-webkit-scrollbar-thumb:hover { background: rgba(255, 244, 230, 0.8); }
#editor-page-tabs.pe-tabs-crowded::-webkit-scrollbar-track { background: transparent; }
.pe-tabs-crowded .editor-tab { overflow: hidden; }
.pe-tabs-crowded .editor-tab > * { min-width: 0; max-width: 100%; }
/* When the strip scrolls, pin the "+ add page" button to the right edge so it's never scrolled off
   or clipped. A bar-colored background keeps scrolling tabs from showing through it. */
.pe-tabs-crowded .editor-tab-add {
  position: sticky;
  right: 0;
  background: var(--bar-edit);
  box-shadow: -8px 0 8px -4px rgba(0, 0, 0, 0.25);
}
.editor-header .editor-tab:hover {
  background: rgba(255, 244, 230, 0.16);
  color: var(--on-bg);
  border-color: var(--on-bg);
}
/* The open tab takes the user's page background so it reads as connected to the page below
   (--tab-bg is set from the preview's actual background; defaults to white). */
.editor-header .editor-tab--active {
  background: var(--tab-bg, #fff);
  color: var(--accent);
  border-color: var(--tab-bg, #fff);
}
.editor-header .editor-tab-add { color: var(--on-bg); }
.editor-header .editor-tab-add:hover { background: rgba(255, 244, 230, 0.16); color: var(--on-bg); }
.editor-header .editor-tab-icon { color: rgba(255, 244, 230, 0.85); }
.editor-header .editor-tab--active .editor-tab-icon { color: var(--muted); }

.editor-header .editor-addblock-btn {
  color: var(--on-bg);
  border-color: rgba(255, 244, 230, 0.55);
}
.editor-header .editor-addblock-btn:hover { background: rgba(255, 244, 230, 0.14); }

.editor-header .editor-icon-btn {
  color: var(--on-bg);
  border-color: rgba(255, 244, 230, 0.3);
}
.editor-header .editor-icon-btn:hover:not(:disabled) {
  background: rgba(255, 244, 230, 0.14);
  border-color: rgba(255, 244, 230, 0.6);
}
.editor-header .editor-icon-btn:disabled { color: rgba(255, 244, 230, 0.45); }

.editor-header .editor-settings-btn {
  color: var(--on-bg);
  border-color: rgba(255, 244, 230, 0.4);
}
.editor-header .editor-settings-btn:hover,
.editor-header .editor-settings-btn[aria-expanded="true"] {
  background: rgba(255, 244, 230, 0.16);
  color: var(--on-bg);
}

.editor-header .editor-view-btn { color: rgba(255, 244, 230, 0.7); }
.editor-header .editor-view-btn:hover { color: var(--on-bg); }
.editor-header .editor-view-btn.editor-view-on {
  background: rgba(255, 244, 230, 0.18);
  color: var(--on-bg);
}

.editor-header .editor-publish-status { color: rgba(255, 244, 230, 0.85); }

/* "save" + "publish" read as two halves of one button — same cream/ghost colours, rounded on
   the outer edges with a sharp split in the middle. Both extruded: rest raised above the
   baseline and sink down flush (aligned with the bar's other controls) when pressed. */
.editor-header .editor-actions > .button {
  background: transparent;
  color: var(--on-bg);
  border: 1px solid rgba(255, 244, 230, 0.55);
  transform: translateY(-5px);
  box-shadow: 0 5px 0 rgba(255, 244, 230, 0.6);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.editor-header .editor-actions > .button:hover:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(255, 244, 230, 0.6);
  background: rgba(255, 244, 230, 0.14);
}
.editor-header .editor-actions > .button:disabled { opacity: 0.55; }

/* Preview is a lightweight secondary action — keep it flat (no extrusion / sink), unlike the
   raised save+publish pair. Hover still tints for feedback (from the rule above). */
.editor-header .editor-actions > #editor-preview-btn,
.editor-header .editor-actions > #editor-preview-btn:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}

/* Split shape: save (left, draft) rounds the left edge; publish (right) the right edge.
   Fixed min-widths (text centred) so status text like "publishing…" / "no changes" never
   resizes the buttons and shifts the rest of the toolbar. */
#editor-savedraft-btn {
  border-radius: 8px 0 0 8px;
  margin-right: -10px; /* trims the toolbar gap down to a slim split */
  justify-content: center;
}
#editor-save-btn {
  border-radius: 0 8px 8px 0;
  justify-content: center;
}
/* Loading/status labels render smaller (with a smaller spinner) so longer messages like
   "publishing…" don't balloon the buttons and shove the toolbar around. */
#editor-save-btn[data-publish-state],
#editor-savedraft-btn[data-busy] { font-size: 0.72rem; letter-spacing: 0.01em; }

/* First publish: the SAME orange base + white text as the normal Publish button (so it reads as
   the same action), just dressed up with a subtle gradient to mark the milestone. */
#editor-save-btn.is-first-publish {
  background: linear-gradient(135deg, #fa6900, #ff9838);
  color: #fff;
  /* border-color: transparent; */
  font-weight: 800;
}
#editor-save-btn.is-first-publish:hover:not(:disabled) {
  filter: brightness(1.06);
}

/* ── First-publish celebration modal ── */
.fp-card { text-align: center; overflow: hidden; }
.fp-emoji { font-size: 3rem; line-height: 1; margin: 2px 0 8px; animation: fp-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.5) both; }
@keyframes fp-pop { from { transform: scale(0) rotate(-15deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.fp-title { text-align: center; font-size: 1.7rem; padding-top: 0; }
.fp-sub { text-align: center; }
.fp-url-box {
  background: rgba(250, 105, 0, 0.07);
  border: 1px dashed rgba(250, 105, 0, 0.45);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 6px 0 22px;
}
.fp-url-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 5px; }
.fp-url { font-size: 1.1rem; font-weight: 800; color: var(--accent); text-decoration: none; word-break: break-all; }
.fp-url:hover { text-decoration: underline; }
.fp-actions { display: flex; gap: 12px; justify-content: center; }
.fp-go { background: linear-gradient(135deg, #fa6900, #ff9838); color: #fff; font-weight: 800; padding: 12px 26px; }
.fp-go:hover { filter: brightness(1.06); }

/* First-publish loading bar (publishing phase). */
.fp-progress {
  height: 12px;
  width: 100%;
  background: rgba(250, 105, 0, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 14px;
}
.fp-progress-bar {
  height: 100%;
  width: 6%;
  border-radius: 999px;
  background: linear-gradient(135deg, #fa6900, #ff9838);
  /* Ease the width changes so each step glides rather than jumps. */
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* A subtle animated sheen so the bar reads as "working" even between steps. */
  background-size: 200% 100%;
  animation: fp-bar-sheen 1.4s linear infinite;
}
@keyframes fp-bar-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fp-progress-note { text-align: center; font-size: 0.82rem; color: var(--muted); margin: 0; }
@media (prefers-reduced-motion: reduce) { .fp-progress-bar { animation: none; } }

.fp-confetti { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; z-index: 1; }
.fp-confetto {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 13px;
  border-radius: 1px;
  opacity: 0.95;
  animation: fp-fall 1.9s ease-in forwards;
}
@keyframes fp-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(360px) rotate(420deg); opacity: 0; }
}

.editor-page-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  /* One row that grows to fill the bar and shrinks the tabs to fit (Chrome-style) rather than
     wrapping to a 2nd row. overflow: hidden (not auto) so there's no scrollbar — crowded tabs
     collapse instead, then .pe-tabs-crowded turns on scrolling. Growing gives the flex tabs a
     definite width to distribute, so a few tabs get wide (full titles) and many shrink. */
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  align-self: flex-end;
  margin-bottom: -10px; /* let the tabs meet the bar's bottom edge, like a browser tab strip */
}

/* Home tab doubles as the browser tab: clickable favicon (left) + name + home mark (right). */
.editor-tab-favicon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: cover;
  cursor: pointer;
}
.editor-tab-favicon:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor-tab-homemark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  opacity: 0.75;
}
.editor-tab-homemark svg { width: 14px; height: 14px; }

.editor-newpage-pop {
  position: absolute;
  top: calc(100% - 4px);
  left: 20px;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(24, 32, 27, 0.16);
}

.editor-newpage-pop.hidden {
  display: none !important;
}

.editor-newpage-pop input {
  width: 180px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
}

.editor-newpage-pop input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.editor-newpage-pop .button {
  min-height: 34px;
  width: auto;
  padding: 0 14px;
}

.editor-newpage-error {
  color: #b73535;
  font-size: 0.78rem;
  font-weight: 600;
  max-width: 150px;
}

.editor-tab-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
}

.editor-tab-home svg {
  width: 14px;
  height: 14px;
}

/* Page tabs: title (left) · rename pencil + delete × (right, revealed on hover) */
.editor-tab-page {
  display: inline-flex;
  align-items: center;
}

.editor-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline rename: the label becomes an editable white field right inside the tab. */
.editor-tab-label.editor-tab-editing {
  cursor: text;
  outline: none;
  background: #fff;
  color: var(--ink);
  border-radius: 5px;
  padding: 2px 6px;
  margin: 0 -6px; /* cancels the horizontal padding so the tab doesn't grow when editing */
  min-width: 34px;
  text-transform: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Rename/delete icons sit IN FLOW after the title but stay COLLAPSED (zero width) until the tab is
   hovered — so idle tabs give the whole width to the title (no wasted gap). On hover they expand and
   the title truncates (…) to make room. The tab's width is set by flex (not its contents), so this
   never resizes the tab. No pill/circle background — just the icon. */
.editor-tab-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 16px;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: width 0.12s ease, opacity 0.12s ease, margin-left 0.12s ease;
}

.editor-tab-icon svg {
  width: 11px;
  height: 11px;
}

.editor-tab-page:hover .editor-tab-icon {
  width: 15px;
  margin-left: 3px;
  opacity: 0.85;
  pointer-events: auto;
}
.editor-tab-del:hover { color: #d94c4c; opacity: 1; }
.editor-tab-rename:hover { color: var(--accent); opacity: 1; }
/* While renaming inline, keep the icons collapsed so they never crowd the edit field. */
.editor-tab-page:has(.editor-tab-editing):hover .editor-tab-icon { width: 0; margin-left: 0; opacity: 0; }

/* "Undo" pill shown briefly after a Reset-to-new-template, so the switch is reversible. */
.editor-reset-undo {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 240;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--ink, #1b2420);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(24, 32, 27, 0.28);
  font-size: 0.88rem;
}
.editor-reset-undo.hidden { display: none; }
.editor-reset-undo-action {
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 7px;
  cursor: pointer;
}
.editor-reset-undo-action:hover { filter: brightness(1.06); }
.editor-reset-undo-x {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.editor-reset-undo-x:hover { color: #fff; }

.editor-del-confirm {
  background: #b73535;
}

.editor-del-confirm:hover {
  background: #9a2b2b;
}

.editor-delpage-cancel {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

#editor-delpage-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.editor-tab[draggable="true"] {
  cursor: grab;
}

.pe-tab-dragging {
  opacity: 0.45;
}

/* Home slot highlighted while dragging: drop a page here to make it the home page */
.editor-tab-home.pe-home-droptarget {
  background: rgba(250, 105, 0, 0.1);
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  color: var(--accent);
}

/* Drop indicator: a clear vertical line in the gap between tabs */
.pe-tab-drop-before::before,
.pe-tab-drop-after::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.pe-tab-drop-before::before {
  left: -4px;
}

.pe-tab-drop-after::after {
  right: -4px;
}

.editor-tab {
  position: relative;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.editor-tab:hover {
  background: var(--bg);
  color: var(--ink);
}

.editor-tab--active {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--accent);
}

.editor-tab-add {
  font-weight: 800;
  color: var(--accent);
  padding: 5px 11px;
  text-transform: none;
}

.editor-tab-add:hover {
  background: rgba(250, 105, 0, 0.08);
  color: var(--accent);
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.editor-actions > .button {
  width: auto;
  padding: 0 18px;
  min-height: 38px;
}

.button-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.button-secondary:hover {
  background: rgba(250, 105, 0, 0.08);
}

.button-secondary:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Publish lifecycle shown on the publish button itself (see setPublishStatus): a spinner
   while publishing, green when the build finishes, red if it fails. */
#editor-save-btn[data-publish-state="publishing"]::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border: 1.5px solid rgba(255, 244, 230, 0.35);
  border-top-color: var(--on-bg);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -1px;
  animation: editor-spin 0.7s linear infinite;
}
/* "Published" uses the button's normal text colour (same as "Saving…", "Publishing…", etc.). */
#editor-save-btn[data-publish-state="error"] { color: #b73535; }
/* Keep the label full-strength while the button is showing a (disabled) status. */
.editor-header .editor-actions > #editor-save-btn[data-publish-state]:disabled { opacity: 1; }
/* Sink the publish button while it's working — it reads as pressed-and-held, not just greyed. */
.editor-header .editor-actions > #editor-save-btn[data-publish-state="publishing"] {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(255, 244, 230, 0.6);
}

@keyframes editor-spin {
  to { transform: rotate(360deg); }
}

.editor-addblock-wrap {
  position: relative;
}

.editor-addblock-wrap.hidden {
  display: none !important;
}

.editor-addblock-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.editor-addblock-btn:hover {
  background: rgba(250, 105, 0, 0.06);
}

.editor-addblock-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 200;
  min-width: 160px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(24, 32, 27, 0.14);
  display: none; /* opens on click (see .open) */
}

.editor-addblock-wrap.open .editor-addblock-menu {
  display: block;
}

.editor-addblock-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.editor-addblock-menu button:hover {
  background: var(--bg);
}

.editor-history {
  display: flex;
  gap: 4px;
}

.editor-icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
}
.editor-icon-btn svg { width: 15px; height: 15px; display: block; }

.editor-icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--muted);
}

.editor-icon-btn:disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}

.editor-settings-wrap {
  position: relative;
}

.editor-settings-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.editor-settings-btn:hover,
.editor-settings-btn[aria-expanded="true"] {
  background: var(--bg);
  color: var(--ink);
}

.editor-settings-btn svg {
  width: 17px;
  height: 17px;
}

.editor-layout-wrap.hidden {
  display: none !important;
}

.editor-settings-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 248px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(24, 32, 27, 0.16);
  padding: 14px;
  z-index: 200;
  display: none; /* opens on hover */
  flex-direction: column;
  gap: 14px;
}

.editor-settings-wrap:hover .editor-settings-panel {
  display: flex;
}

/* Transparent bridge over the gap between the button and the panel so hover stays open. */
.editor-settings-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -6px;
  right: -6px;
  height: 8px;
}

.settings-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Empty hint text (e.g. no favicon chosen yet) shouldn't add height and throw off spacing. */
.settings-hint:empty {
  display: none;
}

.settings-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.settings-hint {
  font-size: 0.75rem;
  color: var(--muted);
}

.settings-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: #fff;
}

.settings-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.settings-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 4px 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(24, 32, 27, 0.25);
}
.settings-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(24, 32, 27, 0.25);
}

.settings-action-btn {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  text-align: left;
}

.settings-action-btn:hover {
  background: var(--bg);
}

/* Filled action buttons in the settings panel (favicon, custom domain, reset to template)
   — coloured so they're clearly distinct from the neutral page-title input. */
.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.settings-ic { width: 15px; height: 15px; flex: 0 0 auto; }

.settings-btn:hover {
  background: var(--accent-dark);
}

/* Reset to template — a destructive action, so it's set apart from the others in red. */
.settings-btn--danger {
  background: #b73535;
}
.settings-btn--danger:hover {
  background: #9c2b2b;
}

/* Centered page-title field. */
.settings-item--center {
  align-items: center;
}
.settings-item--center .settings-input {
  text-align: center;
}

/* Right-aligned action row for confirmation modals. */
.pe-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.pe-modal-actions .button {
  width: auto;
  min-height: 0;
  padding: 10px 18px;
}

.settings-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

/* Custom-domain modal */
.pe-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pe-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 32, 27, 0.45);
}

.pe-modal-card {
  position: relative;
  width: min(100%, 520px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(24, 32, 27, 0.25);
}
.pe-modal-card--wide { width: min(100%, 640px); }

/* Favicon picker */
.favicon-modal-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.favicon-maker-link { font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.favicon-maker-link:hover { text-decoration: underline; }
.favicon-error { margin: 0 0 12px; font-size: 0.85rem; color: #c0392b; }
.favicon-grid { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.favicon-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 16px 0 8px;
}
.favicon-section-title:first-child { margin-top: 0; }
.favicon-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
}
.favicon-swatch {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s ease, border-color 0.06s ease, box-shadow 0.06s ease;
}
.favicon-swatch:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(24, 32, 27, 0.12);
  transform: translateY(-1px);
}
.favicon-swatch img { width: 100%; height: 100%; border-radius: 6px; display: block; }

/* Colour selector (tints every letter/shape/solid favicon) */
.favicon-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.favicon-color {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  appearance: none;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 0.06s ease;
}
.favicon-color:hover { transform: translateY(-1px); }
.favicon-color.is-active { border-color: var(--ink); }
.favicon-color-custom {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line);
  background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
.favicon-color-custom input[type="color"] {
  opacity: 0;
  width: 150%;
  height: 150%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}

.pe-modal-x {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.pe-modal-x:hover { color: var(--ink); }

.pe-modal-title {
  margin: 0 0 6px;
  padding-top: 0; /* cancel the global h2 { padding-top: 2rem } so the title sits at the top */
  font-size: 1.4rem;
}

.pe-modal-sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pe-modal-steps {
  margin: 0 0 18px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

.pe-modal-guide-link {
  margin: -6px 0 16px;
  font-size: 0.86rem;
  color: var(--muted);
}
.pe-modal-guide-link a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.pe-modal-guide-link a:hover { text-decoration: underline; }

.pe-modal-steps code,
.pe-modal-sub code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
}

.pe-modal-row {
  display: flex;
  gap: 8px;
}

.pe-modal-row input {
  flex: 1;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: #fff;
}
.pe-modal-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.pe-modal-row .button {
  width: auto;
  min-height: 0;
  padding: 0 18px;
}

.pe-modal-remove {
  margin-top: 14px;
  border: none;
  background: transparent;
  color: #b3261e;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.pe-modal-remove:hover { text-decoration: underline; }

.editor-domain-dns {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.editor-domain-dns-title {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
}

.dns-lead {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink);
}

.dns-card {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
}
.dns-card--extra { background: var(--bg); }

.dns-card-head {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
}

.dns-field { margin: 0 0 8px; }
.dns-field:last-child { margin-bottom: 0; }

.dns-field-label {
  margin: 0 0 3px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.dns-field-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.dns-field-row--value { margin-top: 6px; }

.dns-field-value {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.dns-copy-btn {
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.dns-copy-btn:hover { background: var(--bg); }
.dns-copy-btn.is-copied {
  background: var(--accent, #2f7d4f);
  border-color: var(--accent, #2f7d4f);
  color: #fff;
}

.dns-field-hint {
  margin: 4px 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
}

.editor-domain-dns-note {
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.settings-danger-link {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.settings-danger-link:hover {
  color: #b73535;
  text-decoration: underline;
}

.editor-frame-wrap {
  flex: 1;
  display: flex;      /* iframe (and, when open, the AI drawer) stretch to fill the height */
  min-height: 0;
}

#editor-iframe {
  flex: 1 1 auto;
  width: auto;
  border: none;
  display: block;
  background: #fff;
}

/* Mobile preview: constrain the iframe to a phone width, centered on a neutral backdrop */
.editor-frame-wrap.pe-mobile {
  background: #c9cfc8;
  display: flex;
  justify-content: center;
}

.editor-frame-wrap.pe-mobile #editor-iframe {
  flex: 0 0 auto;   /* stay a phone-width column, centered — don't grow to fill */
  width: 390px;
  max-width: 100%;
  border-left: 1px solid rgba(24, 32, 27, 0.18);
  border-right: 1px solid rgba(24, 32, 27, 0.18);
  box-shadow: 0 0 40px rgba(24, 32, 27, 0.2);
}

/* ---- AI assistant: edit-bar toggle + right-side chat drawer ---------------------------- */
.editor-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 244, 230, 0.5);
  background: transparent;
  color: var(--on-bg);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.editor-ai-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.editor-ai-btn:hover { background: rgba(255, 244, 230, 0.14); }
.editor-ai-btn[aria-pressed="true"] { background: #fff4e6; color: var(--accent); border-color: #fff4e6; }

/* When the drawer is open, the preview and drawer share the row. */
.editor-frame-wrap.pe-ai-open { display: flex; align-items: stretch; }
.editor-frame-wrap.pe-ai-open #editor-iframe { flex: 1 1 auto; width: auto; }
/* Mobile preview + drawer open together: keep the phone-width iframe (the pe-ai-open rule
   above would otherwise stretch it), centered in the space left of the drawer. */
.editor-frame-wrap.pe-mobile.pe-ai-open #editor-iframe {
  flex: 0 0 auto;
  width: 390px;
  margin: 0 auto;
}

.editor-ai-drawer {
  display: none;
  flex: 0 0 380px;
  max-width: 90vw;
  min-height: 0;      /* stretches to the full editor height (no fixed 65vh gap below) */
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(24, 32, 27, 0.08);
}
.editor-frame-wrap.pe-ai-open .editor-ai-drawer { display: flex; }

.ai-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.ai-drawer-title { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.ai-mode-badge {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: #b4531f;
}
.ai-close-btn {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.ai-close-btn:hover { color: var(--ink); }

/* Edits meter lives behind a small "⚡ edits" button on the AI Coder header line: hovering (or
   tapping) the button reveals a little dropdown with the remaining edits + a Top up button. */
.ai-head-spacer { flex: 1 1 auto; }
.ai-credits-wrap { position: relative; display: inline-flex; align-items: center; }
.ai-credits-wrap.hidden { display: none; }
.ai-credits-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  margin-right: 2px;
}
.ai-credits-btn:hover, .ai-credits-wrap.open .ai-credits-btn { color: var(--accent); }
/* Running low: tint the ⚡ button amber and give it a gentle pulse so it's noticeable. */
.ai-credits-btn.is-low { color: #e0902f; }
.ai-credits-btn svg { width: 17px; height: 17px; display: block; }

.ai-usage {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: none;              /* hidden until the credits button is hovered/opened */
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 8px 10px;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(24, 32, 27, 0.16);
}
/* Invisible bridge over the gap between the ⚡ button and the dropdown, so moving the mouse from the
   button down to the dropdown never leaves the hover area (which would make it vanish). */
.ai-usage::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.ai-credits-wrap:hover .ai-usage,
.ai-credits-wrap.open .ai-usage { display: flex; }
.ai-usage-text { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.ai-usage.is-low .ai-usage-text { color: #c47a16; }
.ai-usage.is-empty .ai-usage-text { color: #b73535; }
.ai-buy-more {
  flex: none;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.ai-buy-more:hover { border-color: var(--accent); color: var(--accent); }

/* One-time price line on the paywall card */
.ai-price-unit { font-size: 0.9rem; color: var(--muted); }

.ai-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg--assistant { align-self: flex-start; background: var(--bg); color: var(--ink); border-bottom-left-radius: 4px; }
.ai-msg--error { align-self: flex-start; background: #fdecec; color: #b73535; border-bottom-left-radius: 4px; }
.ai-msg--typing { color: var(--muted); font-style: italic; }
/* (hover still shows the tokens this request used via the title attribute; no help cursor) */

/* While the paywall is shown there's no chat: collapse the (empty) message area + composer so
   the paywall sits just under the header instead of being pushed to — and off — the bottom.
   A scroll only appears if the panel is genuinely too short for the card. */
.editor-ai-drawer.pe-ai-paywall #ai-messages,
.editor-ai-drawer.pe-ai-paywall #ai-composer,
.editor-ai-drawer.pe-ai-paywall #ai-attachments,
.editor-ai-drawer.pe-ai-paywall .ai-disclaimer { display: none; }
.editor-ai-drawer.pe-ai-paywall #ai-paywall {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-paywall {
  position: relative;
  margin: 14px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  text-align: center;
  box-shadow: 0 12px 30px rgba(24, 32, 27, 0.08);
}
/* X to close the full-sidebar paywall takeover and return to the chat. */
.ai-paywall-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
}
.ai-paywall-x:hover { color: var(--ink); }
.ai-paywall-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(250, 105, 0, 0.1);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ai-paywall h3 { margin: 0 0 10px; font-size: 1.28rem; line-height: 1.2; font-weight: 800; color: var(--ink); }
.ai-paywall-tag { margin: 0 0 14px; font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.ai-paywall-lead { margin: 0 0 14px; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.ai-paywall-feats {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: inline-block;
  text-align: left;
}
.ai-paywall-feats li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 7px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
}
.ai-paywall-feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 900;
}
.ai-paywall-value { margin: 0 0 14px; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.ai-paywall .ai-price { margin: 0 0 12px; color: var(--ink); font-size: 1.05rem; }
.ai-paywall .ai-price strong { font-size: 1.9rem; color: var(--accent); }
.ai-paywall .button { width: 100%; min-height: 44px; font-size: 0.95rem; }
.ai-paywall-status { display: block; margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.ai-paywall-ast { color: var(--accent); font-weight: 800; }
.ai-paywall-fineprint {
  margin: auto 0 0;      /* pushed to the bottom of the (flex-column) paywall */
  padding-top: 16px;
  max-width: 270px;
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}
.ai-paywall-fineprint a { color: var(--muted); text-decoration: underline; }
.ai-paywall-fineprint a:hover { color: var(--ink); }

.ai-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.ai-composer textarea {
  flex: 1;
  resize: none;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: #fff;
  max-height: 140px;
}
.ai-composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ai-composer .button { padding: 0 16px; min-height: 38px; align-self: flex-end; }
.ai-composer.is-disabled { opacity: 0.55; pointer-events: none; }

/* Out of edits: the composer is swapped for this single full-width "Get more edits" button. */
.ai-getmore {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.ai-getmore .button { width: 100%; min-height: 42px; }

/* Attach (paperclip) button + attached-file chips. */
.ai-attach-btn {
  align-self: flex-end;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.ai-attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.ai-attach-btn svg { width: 18px; height: 18px; }
.ai-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 0;
}
.ai-attachments.hidden { display: none; }
.ai-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.ai-attach-chip .ai-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.ai-attach-chip .ai-chip-x {
  border: none; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 50%;
}
.ai-attach-chip .ai-chip-x:hover { color: #b73535; }
/* In a user message bubble, show attachments compactly. */
.ai-msg .ai-msg-files { margin-top: 6px; font-size: 0.78rem; opacity: 0.85; }
.ai-disclaimer {
  margin: 0;
  padding: 0 14px 10px;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.editor-viewtoggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.editor-view-btn {
  width: 32px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.editor-view-btn svg {
  width: 17px;
  height: 17px;
}

.editor-view-btn:hover {
  color: var(--ink);
}

.editor-view-btn.editor-view-on {
  background: var(--bg);
  color: var(--accent);
}

@media (max-width: 600px) {
  /* Stack into two full-width rows: controls on top, tabs below (column-reverse puts the
     actions — last in the DOM — at the top). */
  .editor-header {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
  }
  /* Actions: a tidy wrapping row of controls (not a full-width column). */
  .editor-actions {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
  }
  /* save + publish grow to fill the last row and stay comfortably tappable. */
  #editor-savedraft-btn,
  #editor-save-btn {
    flex: 1 1 auto;
    min-height: 40px;
  }
  /* Tabs scroll sideways (no hover-magnify on touch), kept at a tappable size. */
  .editor-page-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    align-self: stretch;
    margin-bottom: 0;
    padding-bottom: 2px;
  }
  .editor-header .editor-tab { flex: 0 0 auto; }
  /* The device-preview toggle is redundant on a phone; hide it to save room. */
  .editor-viewtoggle {
    display: none;
  }
}