.shell.editor-is-fullpage { grid-template-columns: minmax(0, 1fr); }
.editor-is-fullpage .shell-main { margin-left: 0; min-width: 0; }
.editor-is-fullpage #main { max-width: none; padding: 0; }
.editor-is-fullpage .legal-footer { display: none; }
.fullpage-editor { position: relative; width: 100%; min-height: 100dvh; }
.fullpage-editor-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 24px; background: var(--surface, #fff); border-bottom: 1px solid var(--line, #d7e7f8); }
/* One line high (頂列方案 A, 2026-11-04): with 確認並重試 and a long status the title used to break between any two
   characters, five lines tall at 1240 px. The title gives way first and ends in … (the full title is its hover hint);
   the status shows two lines at most (the full text is its hover hint). */
.fullpage-editor-title { display: flex; gap: 12px; align-items: center; flex: 1 1 0; min-width: 220px; }
.fullpage-editor-title h1 { font-size: 24px; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fullpage-editor-title .pill { flex: none; white-space: nowrap; }
.fullpage-editor-head > .button { flex: none; white-space: nowrap; }
.fullpage-editor .save-status { margin: 0; flex: 0 1 auto; max-width: 280px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 手機標題方案 B: the desk draws and names 儲存並回行事曆 (.save-return-full). 「完成」 and its unseen tail belong to a
   phone (editor-shell.js, the phone block below); display:none here also keeps them out of the button's name. */
.fullpage-editor-head .save-return-short, .fullpage-editor-head .save-return-tail { display: none; }
.editor-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line, #d7e7f8); padding: 0 24px; }
.editor-tabs [aria-selected="true"] { color: var(--blue, #1450f5); border-bottom: 3px solid currentColor; border-radius: 0; }
.editor-tab-panel { padding: 24px; }
.editor-tab-panel[hidden] { display: none; }
/* The 畫布 tab hides without leaving layout (U1, 2026-11-04): 排出去 on 發布設定 makes the pictures inside this frame,
   and a display:none frame has no layout, so the slide measured 0 px and html2canvas failed (CanvasGradient
   non-finite). Parked instead: as wide as when shown, no height, not painted, not reachable (app.css [hidden] is
   !important, hence the override). */
.editor-canvas[hidden] { display: block !important; position: absolute; inset-inline: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.editor-canvas .ig-workbench-frame, .editor-canvas iframe { width: 100%; min-height: calc(100dvh - 220px); }
.editor-text { max-width: 900px; margin: auto; }
.editor-text-platform { margin-bottom: 24px; }
.fullpage-editor > .hint, .fullpage-editor > .editor-banners { margin: 12px 24px; }
.fullpage-editor .editor { max-width: 1080px; margin: auto; }
.fullpage-editor .button { min-height: 44px; }
.fullpage-editor :focus-visible { outline: 3px solid #32c7f9; outline-offset: 3px; }
/* 1-E: 儲存並回行事曆 is two characters longer than the old name; with 確認並重試 and a long red status the bar broke into
   two rows at 1024–1048 px (wave3-shots/nav/sweep). Here the title gives up about two characters more first. It comes
   before the phone block, whose one-line bar (1-J) needs the title's min-width: 0 to win; 188 px broke it into two. */
@media (max-width: 1100px) { .fullpage-editor-title { min-width: 188px; } }
@media (max-width: 600px) {
  /* 1-J: one line, as a phone app's bar: 「‹ 行事曆」 (or 「‹ 貼文」), the title ending in …, the save state as a sign and
     「完成」 (手機標題方案 B). The version badge folds away, or the title keeps two characters (發布設定 and the history
     still say it); a failed save, which must be read, takes a second line with 確認並重試. */
  .fullpage-editor-head { padding: 8px 12px; gap: 8px; }
  .fullpage-editor-title { flex: 1 1 0; min-width: 0; }
  .fullpage-editor-title h1 { font-size: 17px; }
  .fullpage-editor-title .pill { display: none; }
  /* 手機標題方案 B (手機標題模擬說明.md, Mike 2026-11-04): 「‹ 行事曆」 on the back button, drawn from data-short while
     its aria-label still says 回行事曆 (its words are hidden from the eye only). */
  .fullpage-editor-head .back { width: auto; min-width: 44px; padding: 0 10px; font-size: 0; gap: 0; }
  .fullpage-editor-head .back::before { content: "‹ " attr(data-short); content: "‹ " attr(data-short) / ""; font-size: 16px; }
  /* 「完成」 on the main one is drawn and starts its name; 「，儲存並回行事曆」 completes the name unseen (.visually-hidden,
     app.css), so voice control presses it by 完成 and a screen reader still hears where it goes (WCAG 2.5.3). */
  .fullpage-editor-head .save-return-full { display: none; }
  .fullpage-editor-head .save-return-short { display: inline; font-size: 16px; }
  .fullpage-editor-head .save-return-tail { display: inline; }
  .fullpage-editor-head .back-label { display: none; }
  .fullpage-editor .save-status { font-size: 13px; }
  .fullpage-editor .save-status:not(.error) { flex: none; min-width: 0; max-width: 7em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fullpage-editor .save-status.error { order: 10; flex: 1 1 60%; min-width: 0; max-width: none; }
  /* With the narrower buttons a red status fitted on the first line of a 416–600 px phone and left the title 0 px
     (審查 phone-error-status-squeezes-title): keeping the title 40% wide sends the red status to the second line. */
  .fullpage-editor-head:has(> .save-status.error) .fullpage-editor-title { min-width: 40%; }
  /* The three save states as a sign (✓ saved, ● not yet saved, … saving); the words stay for screen readers. */
  .fullpage-editor .save-status[data-sign] { flex: none; width: 20px; max-width: none; font-size: 0; text-align: center; overflow: visible; }
  .fullpage-editor .save-status[data-sign="saved"]::before { content: "✓"; content: "✓" / ""; font-size: 16px; color: var(--green); }
  .fullpage-editor .save-status[data-sign="pending"]::before { content: "●"; content: "●" / ""; font-size: 14px; color: var(--amber); }
  .fullpage-editor .save-status[data-sign="saving"]::before { content: "…"; content: "…" / ""; font-size: 16px; }
  .fullpage-editor-head .retry { order: 11; }
  .editor-tab-panel { padding: 12px; }
  .editor-tabs { padding: 0 12px; gap: 8px; }
  .editor-canvas iframe { min-height: 65dvh; }
}
.shell.editor-is-fullpage { max-width: none; margin: 0; padding: 0; display: block; }
.editor-is-fullpage #main { margin-top: 0; }
.fullpage-editor > .publish-summary { margin: 8px 24px; }
.editor-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--muted); }
.editor-brand img { width: 32px; height: 32px; }
@media (max-width: 700px) { .editor-brand { display: none; } }
/* A narrow laptop keeps the bar one line high too: the logo stays and its name goes. The title keeps about six
   characters (min-width above, version included); when even that does not fit, the buttons move to a second line. */
@media (max-width: 1200px) { .editor-brand span { display: none; } }
.editor-canvas { padding: 12px 24px; }
.editor-canvas .ig-pictures-head { margin-bottom: 12px; }
.editor-canvas .workbench > button { display: none; }
.editor-canvas .workbench-frame { margin-top: 0; }
@media (max-width: 600px) { .editor-canvas { padding: 12px; } }
/* F2-05 (U3 mockup F2首屏, 2026-11-04): at 900px and wider the 畫布 tab is exactly one window high and the frame takes
   what is left, so the page itself does not scroll and the card inside fits that height (ig-workbench.css). The frame
   asks for its content's height (ig-frame-host.js writes style.height); here that is overridden, never under 420px, so
   a very short window still scrolls the page. Phones and tablets keep the frame as tall as its content. Only while the
   tab is shown: parked on 發布設定 the frame still makes the 排出去 pictures at the height it asked for (U1). */
@media (min-width: 900px) {
  .fullpage-editor:has(> #editor-canvas:not([hidden])) { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .fullpage-editor:has(> #editor-canvas:not([hidden])) > * { flex: none; }
  .fullpage-editor > #editor-canvas:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  #editor-canvas:not([hidden]) > .ig-pictures { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  #editor-canvas:not([hidden]) .ig-pictures > * { flex: none; }
  #editor-canvas:not([hidden]) .ig-pictures > .workbench { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  #editor-canvas:not([hidden]) .workbench > :not(.workbench-frame) { flex: none; }
  #editor-canvas:not([hidden]) .workbench-frame { flex: 1 1 0; min-height: 0; }
  #editor-canvas:not([hidden]) .workbench-frame > iframe { display: block; height: 100% !important; min-height: 420px; max-height: none; }
  /* The row above the frame (工作台設計（N 頁）, 改用做好的圖) moves to the right of the tab row: without it 1280×720
     left the card 243px wide, under the 260px the check asks for. 「IG 圖片」 repeats the 畫布 tab, so it stays for
     screen readers only. The tab buttons and this row are both 44px high. */
  #editor-canvas:not([hidden]) { position: relative; }
  #editor-canvas:not([hidden]) .ig-pictures-head { position: absolute; bottom: 100%; right: 24px; margin: 0 0 1px; }
  #editor-canvas:not([hidden]) .ig-pictures-head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* NAV-S5: 改用做好的圖, 知道了 and 還原 put the focus back on that heading, the place it is meant to land; its own ring
     is clipped away with it, so the ring goes round the kind of pictures it names, as .switch does for its input. */
  #editor-canvas:not([hidden]) .ig-pictures-title:has(> h3:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
}
.editor-canvas .workbench-status:empty { display: none; }
/* The notice area above #main keeps a 14px top margin even with nothing in it (its two regions are never :empty
   themselves), so the full-page editor sat 14px low and the one-window 畫布 tab scrolled by 14px (F2-05). */
.editor-is-fullpage .notices:not(:has(> :not(:empty))) { display: none; }