/* =============================================================
   write-app.css: turns Pixel's writing-screen mockups (write.css + write-desktop.css,
   shipped unchanged) into the working app: real buttons and inputs, full-window layout,
   modals over the viewport, the floating block toolbar and the editor's small extras.
   Bolt, 2026-10-12. Everything here is scoped to body.w-app.
   ============================================================= */
body.w-app { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; }
.w-app [hidden] { display: none !important; }
.w-app button { font: inherit; color: inherit; cursor: pointer; }
.w-app a { color: inherit; }
.w-app .w-btn { cursor: pointer; text-decoration: none; padding: 0 22px; }
.w-app .w-btn:disabled { opacity: .55; cursor: default; }
.w-app .w-btn:focus-visible, .w-app .w-chip:focus-visible, .w-app .w-input:focus-visible, .w-app button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.w-app .w-input { outline: none; }
.w-app .w-input:focus { box-shadow: 0 0 0 3px var(--yellow); }
.w-app textarea.w-input { resize: vertical; min-height: 84px; line-height: 1.45; }
.w-app select.w-input { appearance: auto; }
.w-app .w-help { font-size: 13px; }
.w-error { background: #FFE4E0; border: 1.5px solid var(--coral-text); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; font-size: 14px; color: var(--ink); }

/* ---------- sign in (D1) ---------- */
.w-app .d-signin { min-height: 100vh; height: auto; }
.w-app .d-signin .left { min-height: 100vh; box-sizing: border-box; }
.w-app .d-card { max-width: calc(100vw - 40px); box-sizing: border-box; }
.w-app .w-pw .w-show { position: absolute; right: 12px; top: 33px; height: 30px; border: 0; background: none; font-weight: 700; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.w-app .w-pw .w-input { padding-right: 64px; }
.w-switch { cursor: pointer; margin: 4px 0 20px !important; }
.w-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.w-switch i { background: var(--paper-3, #E9E2D3) !important; transition: background .15s; }
.w-switch i::after { right: auto !important; left: 2px; transition: left .15s; }
.w-switch input:checked + i { background: var(--green) !important; }
.w-switch input:checked + i::after { left: 19px; }
.w-switch input:focus-visible + i { outline: 3px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 860px) {
  .w-app .d-signin { grid-template-columns: 1fr; }
  .w-app .d-signin .left { min-height: 0; padding: 40px 24px; border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .w-app .d-signin .left h2 { font-size: 56px; }
}

/* ---------- app header + article list (D2, D3) ---------- */
.w-app .d-apphead .brand { color: var(--ink); text-decoration: none; }
.w-acct { position: relative; }
.w-me { border: 0; background: none; padding: 0; border-radius: 50%; display: block; }
.w-acct .w-menu { top: 46px; right: 0; width: 180px; }
.w-app .w-menu > a, .w-app .w-menu > button, .w-app .w-menu form button {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-top: 1px solid var(--rule-soft);
  background: none; font: 600 15px 'DM Sans', sans-serif; color: var(--ink); text-decoration: none; text-align: left; box-sizing: border-box;
}
.w-app .w-menu > :first-child, .w-app .w-menu form:first-child button { border-top: 0; }
.w-app .w-menu > :hover, .w-app .w-menu form button:hover { background: var(--paper-2); }
.w-app .w-menu .danger { color: var(--coral-text); }
.w-app .d-listwrap { max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.w-app .d-listhead form { margin: 0; }
.w-app .w-tabs button { flex: 1; text-align: center; padding: 9px 6px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.w-app .w-tabs button.on { background: var(--ink); color: var(--paper); }
.w-app .w-tabs button b { font-family: 'Fraunces', serif; font-weight: 900; font-size: 12px; color: var(--coral-text); margin-left: 4px; }
.w-app .w-tabs button.on b { color: var(--yellow); }
.w-app .d-search input { border: 0; outline: 0; background: none; font: inherit; color: var(--ink); flex: 1; min-width: 0; height: 100%; }
.w-app .d-search:focus-within { box-shadow: 0 0 0 3px var(--yellow); }
.w-app .d-tr:not(.th) { cursor: pointer; }
.w-app .d-tr:not(.th):hover { background: var(--paper-2); }
.w-app .d-tr:last-of-type { border-radius: 0 0 16px 16px; }
.w-app .d-tr h3 a { color: inherit; text-decoration: none; }
.w-app .d-tr .w-more { border: 1.5px solid transparent; background: none; color: var(--ink); }
.w-app .d-tr .w-more[aria-expanded="true"] { border-color: var(--ink); background: var(--paper-2); }
.w-app .d-tr .w-menu { top: 60px; right: 14px; }
.w-pending { color: var(--coral-text); font-weight: 700; }
.w-status.sched { background: var(--cyan); }
.w-empty-list { padding: 40px 24px; text-align: center; color: var(--ink-3); font-size: 15px; border-top: 1px solid var(--rule-soft); }

/* ---------- modals and toasts over the viewport ---------- */
.w-app .d-scrim.w-fixed { position: fixed; inset: 0; z-index: 60; }
.w-app .d-modal.w-fixed { position: fixed; z-index: 61; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; }
.w-app .d-modal .w-btn { min-height: 46px; }
.w-app .d-modal .w-input { margin-top: 4px; }
.w-app .w-check-row a, .w-app .w-check-row button.lnk { background: none; border: 0; padding: 0; font-weight: 700; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
.w-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; max-width: min(560px, calc(100vw - 32px)); display: flex; gap: 14px; align-items: center;
  background: var(--ink); color: var(--paper); border-radius: 16px; padding: 12px 18px; font-size: 14.5px; box-shadow: 5px 6px 0 rgba(28,25,28,.2); }
.w-toast a, .w-toast button { color: var(--yellow); font-weight: 700; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.w-toast.err { background: var(--coral-text); }

/* ---------- editor shell (D4) ---------- */
.w-app .d-app { min-height: 100vh; grid-template-rows: auto 1fr; }
.w-app .d-top { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.w-app .d-top .w-icon { color: var(--ink); flex-shrink: 0; }
.d-toplink { font-family: 'Fraunces', serif; font-weight: 900; font-size: 18px; color: var(--ink) !important; text-decoration: none; white-space: nowrap; }
.w-app .d-top .saved { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-app .d-top .saved.err { color: var(--coral-text); font-weight: 700; white-space: normal; }
.w-app .d-canvas { padding: 0 0 120px; }
.w-app .d-tools { top: 69px; }
.w-app .d-tools button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 11px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 600; white-space: nowrap; }
.w-app .d-tools button:hover:not(:disabled) { border-color: var(--ink); }
.w-app .d-tools button b { font-family: 'Fraunces', serif; font-weight: 900; }
.w-app .d-tools .fmt { border-color: var(--ink); min-width: 34px; justify-content: center; font-weight: 700; }
.w-app .d-tools .fmt.on { background: var(--ink); color: var(--paper); }
.w-app .d-tools .fmt:disabled { opacity: .4; cursor: default; }
.w-app .d-side { position: sticky; top: 69px; align-self: start; height: calc(100vh - 69px); overflow-y: auto; box-sizing: border-box; }
.w-app .d-side .back { background: none; border: 0; padding: 0; }
.w-app .d-tabs button { flex: 1; text-align: center; padding: 8px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 600; }
.w-app .d-tabs button.on { background: var(--ink); color: var(--paper); }
.w-app .d-tabs button b { font-family: 'Fraunces', serif; font-weight: 900; font-size: 12px; color: var(--coral-text); margin-left: 4px; }
.w-app .d-tabs button.on b { color: var(--yellow); }
.w-app .w-chip { cursor: pointer; }
.w-app .w-seg button { flex: 1; text-align: center; padding: 12px; border: 0; background: none; font-weight: 700; font-size: 15px; }
.w-app .w-seg button + button { border-left: 1.5px solid var(--ink); }
.w-app .w-seg button.on { background: var(--yellow); }
.w-app .w-url input { border: 0; outline: 0; background: none; font: 600 14.5px 'DM Sans', sans-serif; color: var(--ink); padding: 13px 14px 13px 0; flex: 1; min-width: 0; }
.w-app .w-url:focus-within { box-shadow: 0 0 0 3px var(--yellow); }
.w-app .w-cover { margin: 0; cursor: default; }
.w-app .w-cover .w-linkbtns { display: flex; gap: 12px; margin-top: 4px; }
.w-linkbtn { background: none; border: 0; padding: 0; font-weight: 700; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
.w-linkbtn.danger { color: var(--coral-text); text-decoration-color: currentColor; }
.w-file { position: relative; overflow: hidden; }
.w-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.w-app .d-side .w-btn { min-height: 44px; font-size: 14.5px; }
.w-app .d-newcat .w-input { min-height: 40px; }
.w-app .d-src { cursor: pointer; }
.w-app .d-src.drag-over { box-shadow: 0 -3px 0 var(--coral); }
.w-app .d-src i { cursor: grab; user-select: none; }
.w-app .d-src.sel { cursor: default; }
.w-app .d-src .w-input { font-size: 13.5px; min-height: 0; padding: 7px 10px; margin-bottom: 6px; }
.w-app .d-src textarea.w-input { min-height: 60px; }
.w-tile-form { border: 1.5px dashed var(--rule); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.w-tile-form legend, .w-sub-head { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0 4px; }
.w-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-check-inline { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.w-check-inline input { width: 18px; height: 18px; accent-color: var(--ink); }

/* ---------- canvas: real blocks (D4 to D6) ---------- */
.w-app .d-col { position: relative; padding: 0 12px; }
.w-app .d-col .w-title-in, .w-app .d-col .w-sub-in { outline: none; cursor: text; }
.w-app .d-col .w-title-in:focus, .w-app .d-col .w-sub-in:focus { border-bottom-color: var(--ink-3); }
.w-app [data-ph]:empty::after { content: attr(data-ph); color: var(--ink-4); pointer-events: none; }
.w-app .d-col .r-body > h2[data-ph]:empty::after { display: block; }
.w-app .d-col .r-body > h3::before { content: none; }
.w-app .d-col .r-body > * { margin-left: 0; margin-right: 0; }
.w-app .d-blk { cursor: pointer; }
.w-app .d-blk[contenteditable] { cursor: text; outline-style: dashed; }
.w-app .d-blk:hover:not(.sel) { outline-color: var(--ink-4); }
.w-app .d-blk.sel { margin-top: 48px !important; }
.w-app .d-blk a { pointer-events: none; }
.w-app .d-blk[contenteditable] a { pointer-events: auto; cursor: text; }
.w-app .d-blk.flash { animation: wflash 1.2s ease-out 2; }
@keyframes wflash { 0%, 100% { box-shadow: 0 0 0 10px rgba(253,201,66,.38); } 50% { box-shadow: 0 0 0 14px rgba(255,94,81,.45); } }
.w-ph { color: var(--ink-4); font-style: italic; font-weight: 400; }
.w-empty-blk { display: grid; place-items: center; min-height: 140px; border: 1.8px dashed var(--ink-4); border-radius: 18px; color: var(--ink-3); font-size: 14.5px; text-align: center; padding: 16px; background: var(--paper-2); }
.w-app .d-col .r-video__frame img { pointer-events: none; }
.w-vlabel { position: absolute; left: 14px; top: 12px; z-index: 2; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }

/* floating block toolbar (one, positioned over the selected block) */
.w-btb { position: absolute; z-index: 5; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.w-btb > * { pointer-events: auto; }
.w-btb .d-btag { position: static; font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 3px 10px; border-radius: 999px; }
.w-btb .d-bctl { position: static; display: flex; gap: 4px; }
.w-btb .d-bctl button { height: 26px; min-width: 26px; padding: 0 8px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: 12px; font-weight: 700; }
.w-btb .d-bctl button.on { background: var(--ink); color: var(--paper); }
.w-btb .d-bctl button.del { color: var(--coral-text); }
.w-btb .d-bctl button:disabled { opacity: .35; cursor: default; }

/* insert points between blocks, and the menu (D5) */
.w-ins { position: relative; height: 16px; margin: -4px 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.w-ins:hover, .w-ins:focus-within, .w-ins.open { opacity: 1; }
.w-ins::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--rule); }
.w-ins button { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); font-weight: 700; line-height: 1; padding: 0; }
.w-ins.open button { background: var(--ink); color: var(--paper); }
.w-app .d-plus button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 700; background: var(--paper); padding: 0; }
.w-app .d-plus.open button { background: var(--ink); color: var(--paper); }
.w-app .d-pop { position: absolute; transform: none; z-index: 30; max-width: calc(100% - 24px); box-sizing: border-box; }
.w-app .d-pop .d-search { height: 44px; }
.w-app .w-blocks button.w-bk { text-align: left; font: inherit; background: var(--paper); color: var(--ink); }
.w-app .w-blocks button.w-bk:hover, .w-app .w-blocks button.w-bk.hot { background: var(--cream); box-shadow: var(--shadow-paper); }

/* ---------- preview (D9) ---------- */
.w-app[data-page="preview"] { overflow: hidden; }
.w-app .d-prevbar { position: sticky; top: 0; z-index: 5; }
.w-app .d-prevbar .w-devtoggle button { border: 0; background: none; font-size: 13px; padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.w-app .d-prevbar .w-devtoggle button.on { background: var(--ink); color: var(--paper); }
.w-app .d-prevstage { height: calc(100vh - 61px); }
.w-app .d-prevstage.desk .pframe { width: 100%; height: 100%; }
.w-app .d-prevstage.phone .pframe { width: 410px; height: min(844px, calc(100vh - 100px)); box-sizing: border-box; }
.w-app .w-prevframe { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); }

/* below desktop widths the side panel moves under the canvas */
@media (max-width: 980px) {
  .w-app .d-app { grid-template-columns: 1fr; }
  .w-app .d-side { position: static; height: auto; border-top: 1.5px solid var(--ink); }
  .w-app .d-canvas { border-right: 0; }
  .w-app .d-tr { grid-template-columns: 72px 1fr 110px 44px; }
  .w-app .d-tr > :nth-child(4), .w-app .d-tr > :nth-child(5) { display: none; }
  .w-app .d-filter { flex-wrap: wrap; }
  .w-app .d-filter .w-tabs, .w-app .d-search { width: 100%; flex: 1 1 100%; margin: 0; }
}
.w-app .w-cover + .w-field { margin-top: 12px; }
@media (max-width: 860px) { .w-app .d-signin .right { padding: 24px 16px; } .w-app .d-card { width: 100%; } }

/* ---------- writer accounts (2026-10-12) ---------- */
.w-appnav { display: flex; gap: 4px; margin-left: 8px; padding: 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); }
.w-appnav a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.w-appnav a.on { background: var(--ink); color: var(--paper); }
.w-who { display: block; padding: 12px 16px; font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--rule-soft); }
.w-who b { color: var(--ink); }
.w-acct .w-menu { width: 240px; }
.w-status.wait { background: var(--coral); color: #fff; }
.w-status.off { background: var(--paper-3, #E9E2D3); color: var(--ink-3); }
.w-readonly { background: var(--paper-2) !important; color: var(--ink-2); }
.w-writers { max-width: 980px; }
.w-panel { border: 1.8px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-paper); padding: 20px 22px; margin-bottom: 22px; }
.w-panel h3 { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; margin: 0 0 12px; }
.w-seg-inline { max-width: 460px; margin-bottom: 8px; }
.w-addwriter { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: end; }
.w-addwriter .w-field:nth-of-type(3) { grid-column: 1 / -1; }
.w-addwriter .w-btn { grid-column: 1 / -1; justify-self: start; }
.w-writer { border-top: 1px solid var(--rule-soft); }
.w-writer summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; padding: 12px 4px; cursor: pointer; }
.w-writer summary::-webkit-details-marker { display: none; }
.w-wname b { display: block; font-size: 15.5px; }
.w-wname small { color: var(--ink-3); font-size: 13px; }
.w-wactions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.w-wactions form { margin: 0; }
.w-wedit { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 12px; align-items: end; padding: 4px 4px 16px; }
.w-wedit .w-btn { min-height: 48px; margin-bottom: 16px; }
.w-linkbox { border: 2px solid var(--ink); border-radius: 18px; background: var(--cream); padding: 18px 20px; margin-bottom: 22px; box-shadow: var(--shadow-paper); }
.w-linkbox h3 { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; margin: 0 0 4px; }
.w-linkbox p { margin: 0 0 12px; color: var(--ink-2); }
.w-copyrow { display: flex; gap: 10px; }
.w-copyrow .w-input { flex: 1; font: 13px/1.4 ui-monospace, Consolas, monospace; }
.w-copyrow .w-btn { flex: 0 0 auto; }
.w-okbox { border: 1.5px solid var(--ink); border-radius: 14px; background: #DDF6D8; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; }
@media (max-width: 760px) {
  .w-addwriter, .w-wedit { grid-template-columns: 1fr; }
  .w-writer summary { grid-template-columns: 1fr auto; }
  .w-writer summary .meta, .w-wactions { grid-column: 1 / -1; justify-content: flex-start; }
  .w-appnav { display: none; }
}

/* Reports / Providers switch in the app header, for the admin (Bolt, 10/12) */
.m-switch { display: flex; gap: 4px; padding: 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-2); margin-left: 8px; }
.m-switch a { padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.m-switch a.on { background: var(--ink); color: var(--paper); }
.m-switch a:not(.on):hover { background: #fff; }

/* "Back to PCN", top left on every writing screen (Charming, 10/12). Outline style, so it never competes with Publish. */
.w-app .w-backpcn { flex: 0 0 auto; min-height: 38px; padding: 0 16px 0 12px; gap: 6px; font-size: 14px; border-width: 1.5px; white-space: nowrap; }
.w-app .w-backpcn svg { width: 16px; height: 16px; }
.w-app .w-backpcn:hover { background: var(--paper-2); }
.w-app .d-prevbar .w-backpcn { background: var(--paper); }
.w-app .d-signin .left .w-backpcn, .w-app .pt-left .w-backpcn { position: absolute; top: 28px; left: 56px; z-index: 1; }
@media (max-width: 767px) { .w-app .pt-left .w-backpcn { top: 22px; left: 20px; } }
@media (max-width: 860px) {
  .w-app .d-signin .left { padding-top: 78px; }
  .w-app .d-signin .left .w-backpcn { top: 22px; left: 24px; }
}
@media (max-width: 640px) {
  .w-app .w-backpcn { padding: 0 12px 0 10px; }
  .w-app .d-top .w-bp-t, .w-app .d-apphead .w-bp-t, .w-app .d-prevbar .w-bp-t { display: none; }
  /* the phone header and editor bar wrap instead of scrolling sideways */
  .w-app .d-apphead { flex-wrap: wrap; height: auto; min-height: 64px; padding: 10px 16px; row-gap: 10px; }
  .w-app .d-apphead .m-switch { margin-left: 0; }
  .w-app .d-top { flex-wrap: wrap; row-gap: 10px; padding: 10px 16px; }
  .w-app .d-prevbar { flex-wrap: wrap; height: auto; min-height: 60px; padding: 10px 16px; row-gap: 10px; }
}