/* neverlogoff/page-editor.css — /me/page.
   Logical properties only (RTL-ready). 360–430 px: one column + Edit/Phone/Desktop tabs.
   ≥ 1100 px: editor beside the two previews (phone + desktop side by side). Touch targets ≥ 44 px. */
.pe-main { inline-size: min(1600px, 100%); margin-inline: auto; padding-inline: 0.75rem; box-sizing: border-box; }
.pe-main * { box-sizing: border-box; }
[hidden] { display: none !important; }
.top .mark { display: inline-flex; align-items: center; min-block-size: 44px; }
.skip { min-block-size: 44px; }
.pe-hero h1 { margin-block: 0.75rem 0.25rem; }
.pe-status { min-block-size: 1.5em; color: #3d4757; }
.pe-address { overflow-wrap: anywhere; }
.fine { color: #5b6475; font-size: 0.85rem; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: ui-monospace, "Geist Mono", Consolas, monospace; font-size: 0.85rem; }
button { font: inherit; cursor: pointer; min-block-size: 44px; min-inline-size: 44px; border-radius: 10px; border: 1px solid #1d2433; background: #1d2433; color: #fff; padding-block: 0.4rem; padding-inline: 0.9rem; }
button.ghost { background: transparent; color: #1d2433; border-color: #cfd5de; }
button.small { font-size: 0.9rem; }
button.icon { padding-inline: 0; inline-size: 44px; }
button.danger { color: #a02323; }
button:disabled { opacity: 0.45; cursor: default; }
input, select, textarea { font: inherit; min-block-size: 44px; padding-block: 0.35rem; padding-inline: 0.6rem; border: 1px solid #cfd5de; border-radius: 10px; background: #fff; max-inline-size: 100%; }
textarea { inline-size: 100%; resize: vertical; }
.pe-field { display: grid; gap: 0.25rem; margin-block: 0.5rem; }
.pe-field input[type="text"], .pe-field select, .pe-field input[type="number"] { inline-size: 100%; }
.pe-check { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 44px; margin-inline-end: 0.75rem; }
.pe-check input { inline-size: 22px; block-size: 22px; min-block-size: 0; }
.pe-row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; border: 0; padding: 0; margin-block: 0.5rem; }
.pe-row legend { padding: 0; margin-block-end: 0.25rem; }
.pe-row .pe-field { flex: 1 1 9rem; }
.pe-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; position: sticky; inset-block-start: 0; background: #f6f7f9; padding-block: 0.5rem; z-index: 2; }

.pe-tabs { display: flex; gap: 0.4rem; margin-block: 0.5rem; position: sticky; inset-block-start: 0; z-index: 3; background: #f6f7f9; padding-block: 0.25rem; }
.pe-tabs button { flex: 1; background: #fff; color: #1d2433; border-color: #cfd5de; }
.pe-tabs button[aria-pressed="true"] { background: #1d2433; color: #fff; }

.pe-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pe-block { background: #fff; border: 1px solid #e3e6eb; border-radius: 12px; padding: 0.5rem; min-inline-size: 0; }
.pe-block.is-hidden { opacity: 0.65; border-style: dashed; }
.pe-block.dragging { opacity: 0.4; }
.pe-block.over { outline: 2px solid #3573b8; }
.pe-bhead { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
.pe-grip { cursor: grab; color: #8a93a3; padding-inline: 0.25rem; user-select: none; }
.pe-btitle { display: grid; min-inline-size: 0; flex: 1; }
.pe-btitle .fine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-anchor { font-size: 0.75rem; color: #8a93a3; }
.pe-bbtns { display: flex; gap: 0.25rem; }
.pe-btools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-block-start: 0.25rem; }
.pe-inline { display: inline-flex; align-items: center; gap: 0.4rem; }
.pe-settings { border-block-start: 1px solid #eef0f3; margin-block-start: 0.5rem; padding-block-start: 0.25rem; }
.pe-add { display: flex; gap: 0.5rem; margin-block: 0.75rem; }
.pe-add select { flex: 1; min-inline-size: 0; }
.pe-versions, .pe-ai { margin-block: 0.75rem; background: #fff; border: 1px solid #e3e6eb; border-radius: 12px; padding: 0.5rem 0.75rem; }
.pe-versions summary, .pe-ai summary { min-block-size: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.pe-versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 0.25rem; }

.pe-frames { display: grid; gap: 1rem; }
.pe-frame { margin: 0; min-inline-size: 0; }
.pe-frame figcaption { font-weight: 600; margin-block-end: 0.25rem; }
.pe-scale { overflow: hidden; border: 1px solid #cfd5de; border-radius: 14px; background: #fff; inline-size: 100%; }
.pe-scale iframe { border: 0; transform-origin: 0 0; display: block; }
:dir(rtl) .pe-scale iframe { transform-origin: 100% 0; }
.pe-phone { max-inline-size: 390px; }

.pe-dialog { max-inline-size: min(32rem, 92vw); border: 1px solid #cfd5de; border-radius: 14px; }
.pe-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* phone / small tablet: one thing at a time */
@media (max-width: 1099px) {
  .pe-layout[data-tab="edit"] .pe-preview { display: none; }
  .pe-layout[data-tab="phone"] .pe-edit, .pe-layout[data-tab="desktop"] .pe-edit { display: none; }
  .pe-layout[data-tab="phone"] .pe-desktop { display: none; }
  .pe-layout[data-tab="desktop"] .pe-phone { display: none; }
  .pe-phone { margin-inline: auto; }
}
/* laptop: editor beside both previews */
@media (min-width: 1100px) {
  .pe-tabs { display: none; }
  .pe-layout { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .pe-preview { position: sticky; inset-block-start: 0.5rem; }
  .pe-frames { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
}

/* R4 (feat/draft-before-account-v0, 2026-10-05): starting points · building on this device · publish */
.pe-local { margin-block: 0.25rem 0; }
.pe-start { display: grid; gap: 0.75rem; margin-block: 1rem; }
.pe-start[hidden] { display: none; }
.pe-start h2 { margin: 0; }
.pe-start-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pe-start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; } }
.pe-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.pe-card { border: 1.5px solid currentColor; border-radius: 12px; padding: 0.75rem; display: grid; gap: 0.35rem; align-content: start; }
.pe-card img { inline-size: 100%; block-size: auto; border-radius: 8px; }
.pe-card-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pe-card-btns button, .pe-card-btns a, #peStartUse, .pe-bar button { min-block-size: 44px; }
.pe-card button[aria-pressed="true"] { outline: 3px solid currentColor; outline-offset: 2px; font-weight: 700; }
.pe-start-prev { margin: 0; }
.pe-start-prev .pe-scale { overflow: hidden; }
.pe-start-prev iframe { transform-origin: 0 0; border: 1px solid currentColor; border-radius: 10px; background: #fff; }
.pe-addr-row { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.pe-addr-row input { flex: 1 1 8rem; min-inline-size: 0; min-block-size: 44px; font: inherit; }
.pe-pubaddr[hidden] { display: none; }