/* ============================================================
   The Christmas Times — editor + newspaper styles (CSS-first).
   Chrome (toolbar, rail, tray) is hidden on print; only .page prints.
   ============================================================ */

:root {
  --ink: #111;
  --rule: #000;
  --page-w: 8.5in;
  --page-pad: 0.45in;
  --cols: 3;
  --body-size: 10.2px;
  --leading: 1.28;
  --accent: #8b0000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #6b6b6b;
  font-family: "PT Serif", "Liberation Serif", Georgia, "Times New Roman", serif;
  color: var(--ink);
}

/* ---------------- layout: rail | page | tray ---------------- */
.app {
  display: grid;
  grid-template-columns: 400px 1fr;
  min-height: 100vh;
}

.toolbar {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 12px; align-items: center;
  background: #1f1f1f; color: #eee;
  padding: 10px 16px; font-family: system-ui, sans-serif; font-size: 13px;
}
.toolbar .spacer { flex: 1; }
.save-status { font-size: 12px; color: #aaa; margin-left: 6px; }
.save-status.status-saved { color: #7bbf6a; }
.save-status.status-unsaved, .save-status.status-saving { color: #d7c27a; }
.save-status.status-offline, .save-status.status-conflict { color: #e0975a; }

/* login gate */
.login-gate {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2a2a2a, #4a4a4a);
  font-family: system-ui, sans-serif;
}
.login-card {
  background: #fff; border-radius: 12px; padding: 32px; width: 360px;
  box-shadow: 0 12px 50px rgba(0,0,0,.45); text-align: center;
}
.login-card h1 {
  font-family: "Playfair Display", Georgia, serif; font-size: 26px; margin: 0 0 2px; color: #8b0000;
}
.login-sub { color: #777; margin: 0 0 20px; font-size: 13px; }
.login-card label { display: block; text-align: left; font-size: 13px; color: #444; margin-bottom: 12px; }
.login-card input {
  width: 100%; padding: 9px 10px; margin-top: 4px; border: 1px solid #ccc;
  border-radius: 7px; font-size: 14px; box-sizing: border-box;
}
.login-error { color: #c0392b; font-size: 13px; min-height: 18px; margin-bottom: 6px; }
.login-actions { display: flex; gap: 8px; }
.login-actions button {
  flex: 1; padding: 10px; border-radius: 7px; border: 1px solid #ccc;
  background: #f2f2f2; cursor: pointer; font-size: 14px;
}
.login-actions button.primary { background: #8b0000; color: #fff; border-color: #8b0000; }
.login-hint { color: #999; font-size: 11px; margin: 14px 0 0; }
.login-big { font-size: 20px; font-weight: 600; margin: 8px 0; }
.login-card .login-actions button.huge { padding: 18px; font-size: 20px; }

/* home: newsletter list, editors dialog */
.login-gate.dialog { background: rgba(0,0,0,.55); z-index: 50; }
.home-card { width: 440px; max-height: 90vh; overflow: auto; text-align: left; }
.home-card h1 { text-align: center; }
.home-card .login-sub { text-align: center; }
.home-h3 { font-size: 14px; margin: 18px 0 8px; color: #333; }
.home-year { font-size: 12px; color: #999; margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .05em; }
.home-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 6px; border: 1px solid #ddd; border-radius: 8px;
  background: #fafafa; cursor: pointer; font-size: 15px;
}
.home-item:hover { border-color: #8b0000; background: #fff; }
.home-item .who { margin-left: auto; font-size: 12px; color: #888; }
/* This year's newsletter: the obvious thing to click to get back to editing. */
.home-featured {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: 20px 16px; margin: 4px 0 8px; border: 2px solid #8b0000; border-radius: 12px;
  background: #8b0000; color: #fff; font-family: inherit;
}
.home-featured:hover { background: #a01010; }
.home-featured .year { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.home-featured .title { display: block; text-transform: none; font-family: "Playfair Display", Georgia, serif; font-size: 24px; margin: 4px 0; }
.home-featured .open { display: block; font-size: 14px; font-weight: 600; margin-top: 6px; }
.home-featured .who { display: block; font-size: 12px; opacity: .8; }
.home-new-toggle {
  display: block; width: 100%; margin-top: 14px; padding: 10px; cursor: pointer;
  background: none; border: 1px dashed #bbb; border-radius: 8px; color: #666; font-size: 14px;
}
.home-new-toggle:hover { border-color: #8b0000; color: #8b0000; }
.home-new-toggle[hidden] { display: none; }
.home-check { display: flex !important; align-items: center; gap: 8px; }
.home-check input { width: auto !important; margin: 0 !important; }
.home-foot { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13px; }
.home-foot a { color: #8b0000; }
.editors-form { display: flex; gap: 6px; margin: 10px 0 4px; }
.editors-form input { flex: 1; padding: 9px 10px; border: 1px solid #ccc; border-radius: 7px; font-size: 14px; }
.editors-form button { padding: 9px 14px; border-radius: 7px; border: 1px solid #8b0000; background: #8b0000; color: #fff; cursor: pointer; }
.editor-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.editor-row .tag { font-size: 11px; color: #888; }
.editor-row button { margin-left: auto; border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.toolbar button {
  background: #333; color: #eee; border: 1px solid #555;
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.toolbar button:hover { background: #444; }
.toolbar button.active { background: #c9a24a; color: #111; border-color: #c9a24a; }
.toolbar .hint { color: #aaa; font-size: 12px; }

/* rail tabs: "Articles & Photos" | "Look" */
.rail-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rail-tab {
  flex: 1; padding: 10px 6px; border-radius: 7px; border: 1px solid #555;
  background: #333; color: #ccc; font-size: 14px; cursor: pointer;
}
.rail-tab.active { background: #c9a24a; border-color: #c9a24a; color: #111; font-weight: 600; }

/* Look tab: big picture-like choice buttons */
.look-group {
  background: #313131; border: 1px solid #444; border-radius: 8px;
  padding: 10px 10px 12px; margin-bottom: 12px;
}
.rail .look-group > h3 { margin-top: 0; color: #e8d7a8; font-size: 13px; }
.look-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.look-choices--four { grid-template-columns: repeat(4, 1fr); }
.look-choices--three { grid-template-columns: repeat(3, 1fr); }
.look-dl {
  width: 100%; font: 700 8px Georgia, serif; text-align: center; padding: 3px 2px; margin: 4px 3px;
  --rule: #111; white-space: nowrap;
}
.look-dl.dateline--fancy { outline-width: 1px; outline-offset: 1px; margin: 5px 4px; }
.look-ab { width: 70%; display: flex; flex-direction: column; gap: 4px; }
.look-ab div { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 4px 3px; }
.look-ab i { display: block; height: 3px; background: #bbb; border-radius: 1px; }
.look-ab--thin div { border: 1px solid #111; }
.look-choice {
  background: #fff; color: #111; border: 3px solid #444; border-radius: 7px;
  padding: 6px 6px 4px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px; min-height: 58px; justify-content: space-between;
}
.look-choice:hover { border-color: #8a7440; }
.look-choice.active { border-color: #c9a24a; box-shadow: 0 0 0 2px #c9a24a; }
.look-choice-label { font-family: system-ui, sans-serif; font-size: 11px; color: #555; }
.look-choice.active .look-choice-label { color: #111; font-weight: 700; }
.look-font-sample { font-size: 14px; line-height: 1.15; text-align: center; white-space: nowrap; }
.look-deco img { width: 34px; height: 30px; object-fit: contain; }
.look-deco { font-size: 22px; color: #999; height: 30px; }
.look-mh { width: 100%; font-family: Georgia, serif; font-size: 9px; font-weight: 700; }
.look-mh-title { font-size: 13px; text-align: center; font-weight: 900; }
.look-mh-date { display: flex; justify-content: center; gap: 4px; padding: 1px 2px; }
.look-mh--boxed .look-mh-title { border: 1px solid #bbb; background: #fff; }
.look-mh--boxed .look-mh-date { border: 3px double #111; margin-top: 2px; }
.look-mh--classic .look-mh-title { font-variant: normal; }
.look-mh--classic .look-mh-date { justify-content: space-between; border-bottom: 1px solid #111; }
.look-rule { width: 60%; display: flex; flex-direction: column; gap: 3px; }
.look-rule i { display: block; height: 3px; background: #ccc; border-radius: 1px; }
.look-rule hr { width: 50%; margin: 1px auto; border: 0; border-top: 1px solid #111; }
.look-rule hr.long { width: 92%; }
.look-rule b { display: block; height: 3.5px; }
.look-sp { display: flex; flex-direction: column; gap: 3px; }
.look-ts { font-family: "PT Serif", "Liberation Serif", Georgia, serif; text-align: justify; height: 4.5em; overflow: hidden; color: #111; }

/* closing box card in the Articles rail */
.rail-add--secondary { background: #3a3a3a; color: #e8d7a8; border: 1px dashed #c9a24a; margin-top: 10px; }
.rail-card--closing { border-color: #c9a24a; margin-bottom: 0; }
.rail-field-label {
  display: block; font-size: 10px; color: #999; margin: 4px 0 4px;
  text-transform: uppercase; letter-spacing: .3px;
}
.staff-row { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.staff-row input {
  flex: 1; min-width: 0; background: #222; color: #eee; border: 1px solid #555;
  border-radius: 5px; padding: 6px 7px; font-size: 13px;
}
.staff-row input:focus { outline: none; border-color: #c9a24a; }
.staff-dots { color: #888; }
.staff-add {
  background: none; border: 1px dashed #666; color: #bbb; border-radius: 5px;
  padding: 5px 8px; font-size: 12px; cursor: pointer; margin-bottom: 10px;
}
.staff-add:hover { border-color: #c9a24a; color: #eee; }

/* photo pages + Christmas pictures in the rail */
.photo-page-card { padding-bottom: 8px; }
.photo-page-title {
  flex: 1; min-width: 0; background: #222; color: #eee; border: 1px solid #555;
  border-radius: 5px; padding: 6px 8px; font-size: 13px; font-weight: 600;
}
.photo-page-title:focus { outline: none; border-color: #c9a24a; }
.photo-page-card .photo-tray { margin: 0 10px 8px; grid-template-columns: repeat(4, 1fr); }
.photo-page-add {
  display: block; margin: 0 10px; padding: 8px; text-align: center; font-size: 12px;
  border: 1px dashed #666; border-radius: 6px; color: #bbb; cursor: pointer;
}
.photo-page-add:hover { border-color: #c9a24a; color: #eee; }
.tray-remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  font-size: 15px; line-height: 20px; cursor: pointer;
}
.tray-remove:hover { background: #c0392b; }
.page-thumb { cursor: grab; }
.page-thumb.dragging { opacity: .35; }
.page-thumb.drop-before { box-shadow: -4px 0 0 #c9a24a; }
.page-thumb.drop-after { box-shadow: 4px 0 0 #c9a24a; }
.clipart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.clipart-choice {
  background: #fff; border: 2px solid #444; border-radius: 6px; padding: 4px; cursor: pointer; height: 56px;
}
.clipart-choice:hover { border-color: #c9a24a; }
.clipart-choice img { width: 100%; height: 100%; object-fit: contain; }

/* content-pool rail */
.rail {
  background: #2a2a2a; color: #eee; padding: 12px;
  font-family: system-ui, sans-serif;
  overflow-y: auto; max-height: calc(100vh - 44px);
}
.rail h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #999; margin: 4px 0 10px; }
.rail-card {
  background: #383838; border: 1px solid #4a4a4a; border-radius: 6px;
  margin-bottom: 8px; position: relative;
}
.rail-card.dragging { opacity: .4; }
/* gold line between cards showing where the dragged article will drop */
.rail-drop-line {
  height: 3px; margin: 3px 2px; border-radius: 2px;
  background: #c9a24a; box-shadow: 0 0 6px rgba(201,162,74,.7);
}
.rail-card-head {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer;
}
.rail-grip { cursor: grab; color: #888; font-size: 13px; }
.rail-card-title { flex: 1; font-weight: 600; font-size: 13px; }
.rail-card-byline { font-weight: 400; font-style: italic; font-size: 12px; color: #999; }
.rail-card-del {
  background: none; border: none; color: #888; font-size: 16px; cursor: pointer; line-height: 1;
}
.rail-card-del:hover { color: #e66; }
.rail-card-editor { padding: 0 10px 10px; }
.rail-field { display: block; margin-bottom: 8px; }
.rail-field span { display: block; font-size: 10px; color: #999; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }
.rail-field input, .rail-field textarea {
  width: 100%; box-sizing: border-box; background: #222; color: #eee;
  border: 1px solid #555; border-radius: 5px; padding: 6px 8px; font-size: 13px;
  font-family: inherit; resize: vertical;
}
.rail-field textarea { line-height: 1.4; }
.rail-field input:focus, .rail-field textarea:focus { outline: none; border-color: #c9a24a; }
.rail-add {
  width: 100%; padding: 8px; margin-top: 4px;
  background: #c9a24a; color: #111; border: none; border-radius: 6px;
  font-weight: 600; cursor: pointer; font-size: 13px;
}
/* Each rail section is a card of its own, so the pieces read as separate steps. */
.rail-section {
  background: #313131; border: 1px solid #444; border-radius: 8px;
  padding: 10px 10px 12px; margin-bottom: 12px;
}
.rail-section > h3 { margin-top: 0; color: #e8d7a8; font-size: 13px; }
.rail-hint { font-size: 12px; color: #aaa; margin: -4px 0 10px; line-height: 1.35; }
.rail-upload {
  display: block; padding: 12px; text-align: center; background: #c9a24a; color: #111;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.rail-upload:hover { background: #d8b35c; }
.rail-upload input { display: none; }
.rail-section .rail-add--secondary { margin-top: 0; }
.photo-tray--small { grid-template-columns: repeat(4, 1fr); }
.pinned-row { display: flex; gap: 10px; align-items: center; }
.pinned-row img { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; border: 2px solid #c9a24a; }
.pinned-row button { flex: 1; }

/* photo tray thumbnails */
.photo-tray {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px;
}
.tray-thumb {
  position: relative; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden;
  cursor: grab; border: 2px solid transparent;
}
.tray-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-thumb:hover { border-color: #c9a24a; }
.tray-thumb.placed { opacity: .45; }
.tray-badge {
  position: absolute; bottom: 2px; left: 2px;
  background: #c9a24a; color: #111; font-size: 9px; padding: 1px 4px; border-radius: 3px;
}
.tray-empty { font-size: 11px; color: #666; font-style: italic; margin: 8px 0 0; }

.canvas-scroll { overflow-y: auto; max-height: calc(100vh - 44px); }

/* ---------------- the printed page ---------------- */
/* The stage itself is see-through: each printed page is drawn on its own white
   .sheet behind the content (z-index -1 inside the stage's stacking context). */
.page {
  width: var(--page-w);
  margin: 30px auto;
  padding: var(--page-pad);
  position: relative; z-index: 0;
}
.sheet {
  position: absolute; left: calc(-1 * var(--sheet-margin)); width: var(--page-w);
  background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.4); z-index: -1; pointer-events: none;
}
.sheet-label {
  position: absolute; right: 0; top: -20px;
  color: #eee; font-size: 11px; font-family: system-ui, sans-serif;
}

.masthead { text-align: center; }
.masthead-row {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  border-bottom: 3px double var(--rule); padding-bottom: 2px;
}
.holly { width: 64px; height: 54px; object-fit: contain; }
.title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900; font-size: 58px; letter-spacing: 1px;
  text-transform: uppercase; margin: 2px 0; line-height: 1.02;
  white-space: nowrap; overflow: hidden; min-width: 0; flex: 0 1 auto;
}
.dateline {
  display: flex; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 12px; letter-spacing: .5px;
  padding: 4px 8px 5px; margin-top: 6px; text-transform: uppercase;
}
/* Date line border choices (Look tab), lightest to heaviest. */
.dateline--none { border: 0; }
.dateline--lines { border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.dateline--single { border: 2px solid var(--rule); }
.dateline--double { border: 4px double var(--rule); }
.dateline--fancy {
  border: 4px double var(--rule); outline: 2px solid var(--rule); outline-offset: 2px;
  margin: 10px 4px 4px; text-decoration: underline;
}

/* Masthead looks, picked in the Look tab. The dateline is the only row that
   differs in shape: fields spaced evenly (boxed) or spread edge to edge (classic). */
.masthead--boxed .masthead-row {
  border: 1px solid #ccc; background: #fff; padding: 4px 14px;
  justify-content: space-between; border-bottom: 1px solid #ccc;
}
/* The title fills the space between the decorations and centers its own text,
   so it stays centered whatever the font, and with or without decorations. */
.masthead--boxed .title { flex: 1 1 0; text-align: center; }
.masthead--classic .masthead-row { gap: 22px; border-bottom: 0; }
.masthead--classic .title { text-transform: none; }
.masthead--classic .dateline {
  justify-content: space-between; text-transform: none; font-size: 15px; margin-top: 2px;
}
.masthead--classic .dateline-sep { display: none; }
/* Script titles need a little extra room above and below their flourishes. */
.title.font-script { font-size: 64px; line-height: 1.15; letter-spacing: 0; }
.dateline.font-script { font-size: 17px; letter-spacing: 0; }

/* Inline-editable masthead fields: show a placeholder when empty, and a faint
   highlight on hover/focus so it's clear they're clickable (screen only). */
.title, .dateline-field {
  cursor: text; outline: none; border-radius: 3px;
}
.title:empty::before, .dateline-field:empty::before {
  content: attr(data-placeholder); color: #bbb;
}
.title:hover, .dateline-field:hover { background: rgba(201,162,74,.12); }
.title:focus, .dateline-field:focus { background: rgba(201,162,74,.18); }
/* Show the exact letters while typing: an all-caps look hides case mistakes
   (e.g. "TimES" looks right in caps). Caps come back when you click away. */
.title:focus, .dateline-field:focus { text-transform: none; }
@media print {
  .title:hover, .dateline-field:hover,
  .title:focus, .dateline-field:focus { background: none; }
  .title:empty::before, .dateline-field:empty::before { content: ""; }
}

/* ---------------- flow layout (engine-positioned) ---------------- */
.flow-area { position: relative; margin-top: 10px; }
.text-layer, .photo-layer { position: absolute; inset: 0; }
.photo-layer { pointer-events: none; }
.photo-layer > * { pointer-events: auto; }

/* faint vertical dividers between columns (screen only, never printed) */
.col-divider {
  position: absolute; top: 0; width: 1px; background: #ddd; pointer-events: none; z-index: 1;
}

/* Each absolutely-positioned text line from the flow engine. */
.fl {
  position: absolute; white-space: nowrap; overflow: hidden;
  font-family: "PT Serif", "Liberation Serif", Georgia, serif;
  font-size: 10.2px; line-height: 13px; color: var(--ink);
}
.fl.headline, .fl.byline { overflow: visible; }
.fl.headline {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: 15px; white-space: normal;
}
.fl.byline { font-style: italic; font-size: 10px; white-space: normal; }
/* Closing staff box: paper name, address lines, staff credits, sign-off. */
.fl.closingName, .fl.closingLine, .fl.signoff, .fl.leader, .fl.leader-wrap { overflow: visible; }
.fl.signoff { color: #b3131b; }
.fl.leader { display: flex; align-items: baseline; }
.fl.leader-wrap { white-space: normal; }
.fl .leader-dots { flex: 1; border-bottom: 1.5px dotted #333; margin: 0 3px; transform: translateY(-3px); }
.fl.rule hr { width: 45%; margin: 6px auto 0; border: 0; border-top: 0.5px solid #333; }
.fl.rule hr.long { width: 90%; }

/* Box around each article (Look tab), drawn from engine-computed rects. */
.article-box { position: absolute; pointer-events: none; box-sizing: border-box; }
.article-box--thin { border: 1.5px solid var(--rule); }

/* debug: outline every text line (enable with ?debug in the URL) */
.fl.dbg-outline { outline: 1px solid rgba(255,0,0,.4); background: rgba(255,255,0,.08); }

/* Photos placed on the page (draggable + resizable). */
.flow-photo {
  position: absolute; z-index: 2; margin: 0; background: #fff; /* above the column dividers */
  cursor: move; box-sizing: border-box;
}
.flow-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow-photo figcaption {
  position: absolute; left: 0; right: 0; top: 100%;
  font-size: 9px; font-style: italic; text-align: center;
  padding: 2px 4px; background: #fff; outline: none; cursor: text;
}
/* An empty caption reserves no height in the flow (text sits right under the
   image), so collapse its box — no padding/background/height — so it can't paint
   over that text. It only expands when focused for editing, which is exactly
   when the flow reflows to open a gap for it. */
.flow-photo figcaption:empty {
  padding: 0; height: 0; background: none;
}
.flow-photo figcaption:empty:focus {
  padding: 2px 4px; height: auto; background: rgba(201,162,74,.14);
}
/* Placeholder text only while editing an empty caption; never on print. */
.flow-photo figcaption:empty::before { content: ""; color: #bbb; }
.flow-photo figcaption:empty:focus::before { content: attr(data-placeholder); }
.flow-photo figcaption:focus { background: rgba(201,162,74,.14); }
@media print {
  .flow-photo figcaption:empty { padding: 0; height: 0; background: none; }
  .flow-photo figcaption:empty::before { content: "" !important; }
  .flow-photo figcaption:focus { background: #fff; }
}
/* Boxed caption (group-photo look): double border, room for a long name list. */
.flow-photo--capbox figcaption:not(:empty) {
  top: calc(100% + 4px); border: 4px double var(--rule); font-style: normal;
  font-size: 9.5px; padding: 3px 6px; line-height: 1.25;
}
/* Christmas pictures: just the drawing, no white card behind it. */
.flow-photo--clipart { background: none; }
.flow-photo--clipart img { object-fit: contain; }
.flow-photo.selected { outline: 2px solid #c9a24a; outline-offset: 1px; z-index: 8; }
/* A small pin on the pinned photo (screen only) so it's clear it won't move with the text. */
.flow-photo--pinned::after {
  content: "📌 Pinned"; position: absolute; top: 4px; left: 4px; pointer-events: none;
  background: rgba(0,0,0,.6); color: #fff; font: 11px system-ui, sans-serif;
  padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .15s;
}
.flow-photo--pinned:hover::after, .flow-photo--pinned.selected::after { opacity: 1; }
@media print { .flow-photo--pinned::after { display: none; } }
.flow-photo.dragging { opacity: 0.5; z-index: 12; }

/* live placeholder showing where a dragged/resized photo will land */
.photo-placeholder {
  position: absolute; z-index: 7; pointer-events: none;
  border: 2px dashed #c9a24a; background: rgba(201,162,74,0.12); border-radius: 2px;
}

/* corner resize handles (only on the selected photo) */
.ph-handle {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #c9a24a; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: none; z-index: 9;
}
.flow-photo.selected .ph-handle,
.flow-photo:hover .ph-handle { display: block; }
.ph-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.ph-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.ph-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.ph-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* photo control bar (only on the selected photo) */
.ph-bar {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  display: none; gap: 2px; background: #1f1f1f; padding: 3px; border-radius: 6px;
  white-space: nowrap; font-family: system-ui, sans-serif; z-index: 10;
}
.flow-photo.selected .ph-bar { display: flex; }
.ph-bar button {
  background: #333; color: #eee; border: 1px solid #555; border-radius: 4px;
  font-size: 11px; padding: 3px 7px; cursor: pointer;
}
.ph-bar button:hover { background: #444; }
.ph-bar button.danger { color: #f88; }

/* Photo (collage) pages, after the article pages: banner title + tiled photos. */
.photo-page { position: relative; margin-top: var(--sheet-gap); }
.photo-page::before {
  content: ""; position: absolute; inset: calc(-1 * var(--sheet-margin));
  background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.4); z-index: -1;
}
.photo-page > .sheet-label { top: calc(-1 * var(--sheet-margin) - 20px); }
/* Height must stay BANNER_H (render.js). Font comes from the Look tab's title font. */
.photo-page-banner {
  height: 46px; margin: 10px 0 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; letter-spacing: .5px; line-height: 1; white-space: nowrap; overflow: hidden;
}
/* Matches .masthead--boxed .masthead-row / .masthead--classic .title. */
.photo-page-banner--boxed { border: 1px solid #ccc; background: #fff; text-transform: uppercase; }
.photo-page-banner--classic { text-transform: none; }
.photo-page-area { position: relative; margin-top: 10px; }
.photo-page-area img { position: absolute; object-fit: cover; display: block; }
.photo-page-empty {
  position: absolute; inset: 40% 0 auto; text-align: center; color: #999;
  font-family: system-ui, sans-serif; font-size: 14px;
}
@media print {
  .photo-page { break-before: page; height: auto !important; }
  .photo-page-empty { display: none; }
}

@media print {
  .ph-handle, .ph-bar, .sheet, .sheet-label, .col-divider, .photo-placeholder { display: none !important; }
  .photo-page::before { display: none; }
  .flow-photo.selected { outline: none; }
}

/* ---------------- print ---------------- */
@media print {
  @page { size: letter; margin: 0.45in; }
  body { background: #fff; }
  .toolbar, .rail { display: none !important; }
  .app { display: block; }
  .canvas-scroll { overflow: visible; max-height: none; }
  .page { width: auto; margin: 0; padding: 0; }
  /* Beats the inline screen value: in print the pages meet with no gap. */
  #stage { --sheet-gap: 0px !important; }
  [contenteditable]:focus { outline: none; }
}

/* privacy page: reading text, not a form */
.privacy-card { width: 520px; max-height: 90vh; overflow: auto; text-align: left; font-size: 14px; line-height: 1.5; color: #333; }
.privacy-card h1, .privacy-card .login-sub { text-align: center; }
.privacy-card h3 { font-size: 15px; margin: 18px 0 6px; color: #8b0000; }
.privacy-card ul { padding-left: 20px; margin: 0; }
.privacy-card .login-hint { text-align: center; }