* {
  box-sizing: border-box;
}

:root {
  --trim-width: 210mm;
  --trim-height: 148mm;

  --bleed: 3mm;

  --page-width: 216mm;
  --page-height: 154mm;

  --safe-margin: 12mm;
}

html {
  background: #fff;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #111;

  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: .03em;
}

.app {
  width: min(1180px, calc(100% - 48px));
  margin: 24px auto 90px;
}

.header {
  border-bottom: 2px solid #111;
  padding-bottom: 18px;
  margin-bottom: 42px;
}

h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
}

.app-version {
  display: inline-block;
  margin-left: 10px;
  color: #888;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  vertical-align: baseline;
}

@media (max-width: 800px) {
  .app-version {
    display: block;
    margin: 5px 0 0;
    font-size: 9px;
  }
}

.hidden {
  display: none !important;
}


/* ============================================================
   MAJOR CONTROL SECTIONS
   ============================================================ */

.control-section {
  border-top: 1px solid #aaa;

  padding-top: 28px;
  margin-top: 44px;
  margin-bottom: 44px;

  scroll-margin-top: 24px;
}

.first-control-section {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.control-section-heading {
  margin-bottom: 28px;

  color: #111;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.subsection {
  margin-top: 32px;
}

.setting-group {
  margin-bottom: 32px;
}

.setting-group:last-child {
  margin-bottom: 0;
}


/* ============================================================
   FORM
   ============================================================ */

.row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.field {
  margin-bottom: 28px;
}

label,
.section-label {
  display: block;

  margin-bottom: 10px;

  font-size: 12px;
  color: #777;

  letter-spacing: .08em;
}

input[type="text"],
textarea,
input[type="number"] {
  border: 1px solid #ddd;
  border-radius: 0;

  background: #fff;

  font: inherit;
  color: #111;

  outline: none;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 14px;
}

input[type="text"]:focus,
textarea:focus,
input[type="number"]:focus {
  border-color: #777;
}

textarea {
  height: 150px;

  resize: vertical;

  line-height: 1.5;
}

.label-row {
  display: flex;
  align-items: baseline;

  gap: 12px;

  flex-wrap: wrap;
}

.label-row > span:last-child {
  margin-left: auto;
  color: #999;
}

.help {
  margin-top: 8px;

  color: #999;

  font-size: 11px;
  line-height: 1.55;
}


/* ============================================================
   PHOTO DROP
   ============================================================ */

.drop-zone {
  min-height: 210px;

  border: 1px dashed #ccc;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  cursor: pointer;

  transition: .15s;
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: #111;
  background: #fafafa;
}

.drop-zone strong {
  font-size: 14px;
  margin-bottom: 10px;
}

.drop-zone span {
  color: #aaa;
}

.status {
  border: 1px solid #ddd;
  border-top: 0;

  padding: 13px;

  color: #888;
}


/* ============================================================
   PHOTO STATUS
   ============================================================ */

.photo-status-row {
  display: flex;
  align-items: stretch;

  gap: 10px;
}

.photo-status-row .status {
  flex: 1;
}

.clear-photos-button {
  flex: 0 0 auto;

  padding: 13px 16px;

  border: 1px solid #ddd;
  border-radius: 0;

  background: #fff;
  color: #777;

  font: inherit;
  font-size: 11px;

  cursor: pointer;

  white-space: nowrap;
}

.clear-photos-button:hover {
  border-color: #111;
  color: #111;

  background: #f5f5f5;
}


/* ============================================================
   SORT BAR
   ============================================================ */

.sort-bar {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;
  min-height:52px;
  padding:10px;
  border:1px solid #ddd;
  background:#fafafa;
}

.sort-item {
  min-width:0;
  border:1px solid #bbb;
  background:#fff;
  cursor:grab;
  user-select:none;
  position:relative;
  padding:5px;
}

.sort-item img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#eee;
}

.sort-item-meta{
  display:flex;
  justify-content:space-between;
  gap:5px;
  margin-top:5px;
  font:700 9px/1.15 "Courier New",monospace;
}

.sort-item-meta span{
  color:#666;
  text-align:right;
}

.sort-item:active {
  cursor: grabbing;
}

.sort-item.dragging {
  opacity: .35;
}

.sort-item.drop-before {
  border-left: 3px solid #111;
}

.sort-item.drop-after {
  border-right: 3px solid #111;
}


/* ============================================================
   THUMBNAILS
   ============================================================ */

.thumbnail-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(150px, 1fr));

  gap: 16px;
}

.thumbnail {
  border: 1px solid #ddd;

  background: #fff;

  padding: 8px;

  position: relative;
}

.thumbnail img {
  width: 100%;
  height: 150px;

  object-fit: contain;

  display: block;

  background: #f5f5f5;
}

.thumbnail.bw img {
  filter: grayscale(100%);
}

.thumbnail-number {
  margin-top: 8px;

  font-size: 11px;

  color: #777;
}

.thumbnail-name {
  margin-top: 4px;

  font-size: 10px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.thumbnail-resolution {
  margin-top: 6px;

  font-size: 9px;
  line-height: 1.35;

  letter-spacing: .035em;
}

.thumbnail-resolution.resolution-good {
  color: #555;
}

.thumbnail-resolution.resolution-ok {
  color: #8a6500;
}

.thumbnail-resolution.resolution-low {
  color: #a30000;
  font-weight: 700;
}

.thumbnail-resolution.resolution-pending {
  color: #aaa;
}

.remove-photo {
  position: absolute;

  right: 8px;
  top: 8px;

  width: 25px;
  height: 25px;

  border: 1px solid #999;
  border-radius: 0;

  background: #fff;

  cursor: pointer;
}

.bw-toggle {
  width: 100%;

  margin-top: 8px;

  padding: 6px;

  border: 1px solid #ddd;
  border-radius: 0;

  background: #fff;

  font: inherit;
  font-size: 10px;

  cursor: pointer;
}

.bw-toggle.active {
  background: #111;
  color: #fff;
}


/* ============================================================
   SINGLE PHOTO PAGE TOGGLE
   Only created in LANDSCAPE + 2 PHOTOS mode.
   ============================================================ */

.single-page-toggle {
  width: 100%;

  margin-top: 8px;

  padding: 7px 6px;

  border: 1px solid #bbb;
  border-radius: 0;

  background: #fff;
  color: #555;

  font: inherit;
  font-size: 10px;
  letter-spacing: .04em;

  cursor: pointer;
}

.single-page-toggle:hover {
  border-color: #111;
  color: #111;
}

.single-page-toggle.active {
  border-color: #111;
  background: #111;
  color: #fff;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.button-row {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

[data-format],
[data-style],
[data-bw-optimization],
[data-photos-per-page],
[data-cover-title-placement],
[data-cover-photographer],
[data-cover-position],
[data-cover-text-color],
[data-page-color],
[data-front-cover-mode],
[data-back-cover-mode] {
  appearance: none;
  -webkit-appearance: none;

  min-height: 64px;

  padding: 0 24px;

  border: 1px solid #d6d6d6;
  border-radius: 0;

  background: #fff;
  color: #111;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;

  letter-spacing: .02em;

  cursor: pointer;

  transition:
    border-color .15s ease,
    background-color .15s ease,
    color .15s ease;
}

[data-format]:hover,
[data-style]:hover,
[data-bw-optimization]:hover,
[data-photos-per-page]:hover,
[data-cover-title-placement]:hover,
[data-cover-photographer]:hover,
[data-cover-position]:hover,
[data-cover-text-color]:hover,
[data-page-color]:hover,
[data-front-cover-mode]:hover,
[data-back-cover-mode]:hover {
  border-color: #111;
  background: #fafafa;
}

[data-format].active,
[data-style].active,
[data-bw-optimization].active,
[data-photos-per-page].active,
[data-cover-title-placement].active,
[data-cover-photographer].active,
[data-cover-position].active,
[data-cover-text-color].active,
[data-page-color].active,
[data-front-cover-mode].active,
[data-back-cover-mode].active {
  border-color: #111;

  background: #fff;
  color: #111;

  box-shadow:
    inset 0 0 0 1px #111;
}

[data-format] {
  min-width: 180px;
}

[data-style] {
  min-width: 150px;
}

[data-bw-optimization] {
  min-width: 105px;
}

[data-photos-per-page] {
  min-width: 110px;
}

[data-cover-title-placement] {
  min-width: 155px;
}

[data-cover-position] {
  min-width: 130px;
  min-height: 52px;

  font-size: 14px;
}

[data-cover-text-color] {
  min-width: 110px;
  min-height: 52px;

  font-size: 14px;
}

[data-page-color] {
  min-width: 110px;
}


/* ============================================================
   COVER CONTROLS
   ============================================================ */

.cover-controls-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 32px;
}

.cover-button-row {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.utility-button {
  appearance: none;
  -webkit-appearance: none;

  min-height: 48px;

  padding: 0 18px;

  border: 1px solid #d6d6d6;
  border-radius: 0;

  background: #fff;
  color: #111;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 14px;

  cursor: pointer;
}

.utility-button:hover {
  border-color: #111;

  background: #fafafa;
}

.cover-status {
  margin-top: 10px;

  padding: 10px 12px;

  border: 1px solid #e0e0e0;

  color: #888;

  font-size: 11px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.cover-status.resolution-good {
  color: #555;
}

.cover-status.resolution-ok {
  color: #8a6500;
}

.cover-status.resolution-low {
  color: #a30000;
  font-weight: 700;
}

.cover-placement {
  margin-top: 24px;
}

.cover-text-options {
  margin-top: 26px;

  padding-top: 22px;

  border-top: 1px solid #ddd;
}

.cover-option-group {
  margin-bottom: 24px;
}

.cover-option-group:last-child {
  margin-bottom: 0;
}

.cover-help {
  margin-top: 22px;
}


/* ============================================================
   BLEED
   ============================================================ */

.bleed-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #a30000;
  border-left: 4px solid #a30000;
  background: #fffafa;
  color: #8b0000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.bleed-row {
  display: flex;
  align-items: center;

  gap: 10px;
}

.bleed-input {
  width: 90px;
  height: 48px;

  padding: 0 12px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 16px;
}

.bleed-unit {
  color: #777;
}


/* ============================================================
   CHECKBOXES
   ============================================================ */

.checkbox-row {
  display: flex;
  flex-wrap: wrap;

  gap: 18px 28px;
}

.check {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 12px;

  color: #888;

  cursor: pointer;
}

.check input {
  appearance: none;

  width: 19px;
  height: 19px;

  border: 1px solid #aaa;

  background: #fff;

  margin: 0;

  position: relative;
}

.check input:checked {
  border-color: #111;
}

.check input:checked::after {
  content: "";

  position: absolute;

  left: 5px;
  top: 2px;

  width: 6px;
  height: 10px;

  border-right: 2px solid #111;
  border-bottom: 2px solid #111;

  transform: rotate(45deg);
}


/* ============================================================
   SUMMARY
   ============================================================ */

.summary {
  border-top: 2px solid #111;
  border-bottom: 1px solid #ddd;

  padding: 24px 0;

  margin-top: 52px;
  margin-bottom: 32px;

  scroll-margin-top: 24px;
}

.summary-line {
  display: flex;
  justify-content: space-between;

  margin: 9px 0;

  color: #777;
}

.summary-line strong {
  color: #111;
}

.total-summary-line {
  margin-top: 15px;

  padding-top: 12px;

  border-top: 1px solid #ddd;
}


/* ============================================================
   PREVIEW
   ============================================================ */

.preview-section {
  margin-top: 60px;

  scroll-margin-top: 24px;
}

.preview-heading {
  color: #777;

  font-size: 12px;

  margin-bottom: 18px;
}


/* ============================================================
   PAGE COLORS
   ============================================================ */

.zine-page {
  --page-background: #ffffff;
  --page-text: #111111;
  --page-muted: #777777;
}

.zine-page.page-color-white {
  --page-background: #ffffff;
  --page-text: #111111;
  --page-muted: #777777;
}

.zine-page.page-color-gray {
  --page-background: #d9d9d9;
  --page-text: #111111;
  --page-muted: #606060;
}

.zine-page.page-color-black {
  --page-background: #111111;
  --page-text: #f5f5f5;
  --page-muted: #bdbdbd;
}


/* ============================================================
   PAGE BASE
   ============================================================ */

.zine-page {
  width: var(--page-width);
  height: var(--page-height);

  margin: 0 auto 35px;

  border: 1px solid #ddd;

  background: var(--page-background);
  color: var(--page-text);

  position: relative;

  overflow: hidden;

  padding:
    calc(var(--bleed) + var(--safe-margin));

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


/* ============================================================
   PAGE NUMBERS
   ============================================================ */

.page-number {
  position: absolute;

  top:
    calc(
      var(--bleed) + 5mm
    );

  right:
    calc(
      var(--bleed) + 7mm
    );

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;

  color: var(--page-muted);
}

.page-label {
  position: absolute;

  top:
    calc(
      var(--bleed) + 2mm
    );

  left:
    calc(
      var(--bleed) + 3mm
    );

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;

  color: var(--page-muted);
}


/* ============================================================
   PHOTO PAGE
   ============================================================ */

.photo-layout {
  width: 100%;
  height: 100%;

  display: flex;

  gap: 8mm;

  align-items: center;
  justify-content: center;
}

.photo-frame {
  flex: 1 1 0;

  min-width: 0;
  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;
}

.photo-frame img {
  max-width: 100%;
  max-height:
    calc(100% - 14mm);

  width: auto;
  height: auto;

  object-fit: contain;

  display: block;
}

.photo-meta {
  width: 100%;

  margin-top: 4mm;

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;

  line-height: 1.35;

  color: var(--page-muted);

  word-break: break-word;
}


/* ============================================================
   COVER
   ============================================================ */



.cover-page {
  padding: 0;
}


/*
  The cover image is deliberately rendered as a CSS background
  instead of an <img> with object-fit.

  This keeps the image proportions identical in the browser
  preview and in the html2canvas PDF export.
*/

.cover-image {
  position: absolute;

  display: block;

  background-repeat: no-repeat;
  background-position: center center;

  overflow: hidden;
}


/* ------------------------------------------------------------
   FULL PAGE COVER
   ------------------------------------------------------------ */

.cover-page.cover-mode-full .cover-image {

  inset: 0;

  background-size: cover;
}


/* ------------------------------------------------------------
   CENTERED COVER IMAGE
   ------------------------------------------------------------ */

.cover-page.cover-mode-centered .cover-image {

  left:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  right:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  top:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  bottom:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  background-size: contain;
}


/* Back cover always fills the complete page */

.back-cover-page .cover-image {

  inset: 0;

  background-size: cover;
}

.cover-overlay {
  position: absolute;

  z-index: 2;

  left:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  right:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  top:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  bottom:
    calc(
      var(--bleed) +
      var(--safe-margin)
    );

  display: flex;

  flex-direction: column;

  pointer-events: none;
}

.cover-overlay.position-top-left {
  justify-content: flex-start;
  align-items: flex-start;

  text-align: left;
}

.cover-overlay.position-top-center {
  justify-content: flex-start;
  align-items: center;

  text-align: center;
}

.cover-overlay.position-center {
  justify-content: center;
  align-items: center;

  text-align: center;
}

.cover-overlay.position-bottom-left {
  justify-content: flex-end;
  align-items: flex-start;

  text-align: left;
}

.cover-overlay.position-bottom-center {
  justify-content: flex-end;
  align-items: center;

  text-align: center;
}

.cover-overlay.color-black {
  color: #000;
}

.cover-overlay.color-white {
  color: #fff;
}

.cover-overlay-title {
  max-width: 85%;

  font-size: 30px;

  line-height: 1.05;

  font-weight: 700;

  letter-spacing: .01em;

  margin-bottom: 5mm;

  overflow-wrap: anywhere;
}

.cover-overlay-name {
  max-width: 85%;

  font-size: 14px;

  line-height: 1.2;

  font-weight: 700;

  overflow-wrap: anywhere;
}

.format-a4-landscape .cover-overlay-title,
.format-a4-portrait .cover-overlay-title {
  font-size: 38px;
}

.format-a4-landscape .cover-overlay-name,
.format-a4-portrait .cover-overlay-name {
  font-size: 17px;
}


/* ============================================================
   FALLBACK TITLE PAGE
   ============================================================ */

.simple-title-page {
  display: flex;

  align-items: center;
}

.simple-title-content {
  width: 100%;

  max-width: 150mm;

  margin: 0 auto;
}

.simple-title-title {
  font-size: 24px;

  font-weight: 700;

  line-height: 1.15;

  margin-bottom: 10mm;
}

.simple-title-name {
  font-size: 12px;

  color: var(--page-muted);
}


/* ============================================================
   INFO PAGE
   ============================================================ */

.info-page {
  display: flex;

  align-items: center;
}

.info-content {
  width: 100%;

  min-width: 0;
  min-height: 0;

  max-height: 100%;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.format-a5-landscape .info-content {
  max-width: 165mm;
}

.format-a5-portrait .info-content {
  max-width: 104mm;
}

.format-a4-landscape .info-content {
  max-width: 235mm;
}

.format-a4-portrait .info-content {
  max-width: 158mm;
}

.info-heading-block {
  flex-shrink: 0;

  margin-bottom: 7mm;
}

.info-zine-title {
  font-size: 22px;

  font-weight: 700;

  line-height: 1.15;

  margin-bottom: 4mm;

  overflow-wrap: anywhere;
}

.info-photographer {
  font-size: 11px;

  color: var(--page-muted);
}

.intro-text {
  width: 100%;

  white-space: pre-wrap;

  font-size: 12px;

  line-height: 1.42;

  overflow-wrap: anywhere;

  word-break: normal;

  hyphens: auto;
}

.format-a5-portrait .intro-text {
  font-size: 11px;

  line-height: 1.38;
}


/* ============================================================
   QR CODE
   ============================================================ */

.qr-area,
.end-qr-area {
  margin-top: 7mm;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.qr-code,
.end-qr-code {
  width: 31mm;
  height: 31mm;

  padding: 1.5mm;

  background: #ffffff;

  overflow: hidden;

  flex-shrink: 0;
}

.qr-code canvas,
.end-qr-code canvas {
  display: block !important;

  width: 28mm !important;
  height: 28mm !important;
}

.qr-code img,
.end-qr-code img {
  display: none !important;
}

.qr-label,
.end-qr-label {
  margin-top: 2mm;

  max-width: 90mm;

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;

  line-height: 1.3;

  color: var(--page-muted);

  overflow-wrap: anywhere;
}


/* ============================================================
   CONTACT SHEET
   ============================================================ */

.contact-sheet-title {
  position: absolute;

  top:
    calc(
      var(--bleed) +
      12mm
    );

  left:
    calc(
      var(--bleed) +
      12mm
    );

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;

  color: var(--page-muted);
}

.contact-grid {
  position: absolute;

  left:
    calc(
      var(--bleed) +
      16mm
    );

  right:
    calc(
      var(--bleed) +
      16mm
    );

  top:
    calc(
      var(--bleed) +
      23mm
    );

  bottom:
    calc(
      var(--bleed) +
      11mm
    );

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-template-rows:
    repeat(5, minmax(0, 1fr));

  column-gap: 7mm;
  row-gap: 5mm;

  align-items: center;
  justify-items: center;
}

.contact-item {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;
}

.contact-image {
  width: 100%;

  flex: 1 1 auto;

  min-height: 0;

  display: flex;

  align-items: center;
  justify-content: center;
}

.contact-item img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
}

.contact-number {
  margin-top: 1.5mm;

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;

  color: var(--page-muted);
}


/* ============================================================
   END PAGE
   ============================================================ */

.end-page {
  display: flex;

  align-items: center;
}

.end-content {
  width: 100%;

  min-width: 0;

  margin: 0 auto;
}

.format-a5-landscape .end-content {
  max-width: 165mm;
}

.format-a5-portrait .end-content {
  max-width: 104mm;
}

.format-a4-landscape .end-content {
  max-width: 235mm;
}

.format-a4-portrait .end-content {
  max-width: 158mm;
}

.end-title {
  margin-bottom: 8mm;

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  color: var(--page-muted);
}

.end-text {
  width: 100%;

  white-space: pre-wrap;

  font-size: 12px;

  line-height: 1.42;

  overflow-wrap: anywhere;

  hyphens: auto;
}

.format-a5-portrait .end-text {
  font-size: 11px;

  line-height: 1.38;
}


/* ============================================================
   PHOTO PRINT
   ============================================================ */

.photo-print-intro {
  max-width: 760px;
  margin-bottom: 28px;
}

.photo-print-selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.photo-print-choice {
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px;
  cursor: pointer;
}

.photo-print-choice.selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.photo-print-choice img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #f5f5f5;
}

.photo-print-choice-name {
  margin-top: 7px;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-print-choice-source {
  margin-top: 3px;
  color: #999;
  font-size: 8px;
}

.photo-print-choice-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1px solid #111;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.photo-print-choice.selected .photo-print-choice-mark::after {
  content: "✓";
}


.photo-print-choice-remove {
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid #bbb;
  background: #fff;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.photo-print-choice-remove:hover {
  border-color: #111;
}

.photo-print-extra-row {
  margin-top: 8px;
}

.photo-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

[data-photo-print-paper],
[data-photo-print-size],
[data-photo-print-square],
[data-photo-print-count],
[data-photo-print-fit],
[data-photo-print-brightness],
[data-photo-print-border] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #d6d6d6;
  border-radius: 0;
  background: #fff;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  cursor: pointer;
}

[data-photo-print-paper]:hover,
[data-photo-print-size]:hover,
[data-photo-print-square]:hover,
[data-photo-print-count]:hover,
[data-photo-print-fit]:hover,
[data-photo-print-brightness]:hover,
[data-photo-print-border]:hover {
  border-color: #111;
  background: #fafafa;
}

[data-photo-print-paper].active,
[data-photo-print-size].active,
[data-photo-print-square].active,
[data-photo-print-count].active,
[data-photo-print-fit].active,
[data-photo-print-brightness].active,
[data-photo-print-border].active {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.photo-print-custom-size {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}

.photo-print-custom-size input {
  width: 82px;
  height: 42px;
  padding: 0 10px;
}

.photo-print-info {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid #ddd;
  background: #fafafa;
  color: #666;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
}

.photo-print-info.warning {
  border-color: #b9b9b9;
  color: #111;
}

.photo-print-info.error {
  border-color: #a30000;
  border-left: 4px solid #a30000;
  background: #fffafa;
  color: #8b0000;
  font-weight: 700;
}

.photo-print-create-button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 58px;
  padding: 0 26px;
  border: 1px solid #111;
  border-radius: 0;
  background: #fff;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  cursor: pointer;
}

.photo-print-create-button:hover:not(:disabled) {
  background: #111;
  color: #fff;
}

.photo-print-create-button:disabled {
  border-color: #ddd;
  color: #aaa;
  cursor: not-allowed;
}

@media (max-width: 800px) {
  .photo-print-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SIDE SECTION NAVIGATION
   ============================================================ */

.section-navigation {
  position: fixed;

  top: 50%;

  z-index: 9998;

  width: 142px;

  display: flex;
  flex-direction: column;

  transform: translateY(-50%);

  background: #ffffff;

  border: 1px solid #111111;

  box-shadow:
    0 4px 18px
    rgba(0, 0, 0, 0.08);

  transition:
    left 0.22s ease,
    right 0.22s ease;
}

.section-navigation.navigation-right {
  right: 22px;
  left: auto;
}

.section-navigation.navigation-left {
  left: 22px;
  right: auto;
}

.section-navigation button {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  min-height: 38px;

  padding: 7px 11px;

  border: 0;
  border-bottom: 1px solid #dedede;
  border-radius: 0;

  background: #ffffff;
  color: #777777;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 11px;
  font-weight: 400;

  line-height: 1.2;

  letter-spacing: 0.025em;

  text-align: left;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    padding-left 0.15s ease;
}

.section-navigation button:hover {
  background: #f5f5f5;
  color: #111111;

  padding-left: 15px;
}

.section-navigation button.active {
  background: #111111;
  color: #ffffff;
}

.section-navigation button:focus {
  outline: none;
}

.section-navigation button:focus-visible {
  outline: 1px solid #111111;
  outline-offset: -4px;
}

.section-navigation
.side-navigation-position-button {
  min-height: 34px;

  padding: 6px 10px;

  background: #fafafa;

  color: #555555;

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;

  letter-spacing: 0.04em;

  text-align: center;

  border-bottom: 0;
}

.section-navigation
.side-navigation-position-button:hover {
  padding-left: 10px;

  background: #111111;

  color: #ffffff;
}

.side-navigation-divider {
  width: 100%;

  height: 1px;

  background: #111111;

  flex: 0 0 1px;
}

.side-navigation-divider.action-divider {
  margin-top: 3px;

  height: 2px;

  flex-basis: 2px;
}

.section-navigation
.side-action-button {
  color: #111111;

  font-weight: 400;
}

.section-navigation
.side-action-button:hover {
  background: #111111;

  color: #ffffff;
}

.section-navigation
.side-pdf-button {
  font-weight: 700;
}

.section-navigation
.side-pdf-button.disabled,
.section-navigation
.side-pdf-button:disabled {
  background: #ffffff;

  color: #aaaaaa;

  cursor: not-allowed;
}

.section-navigation
.side-pdf-button.disabled:hover,
.section-navigation
.side-pdf-button:disabled:hover {
  padding-left: 11px;

  background: #ffffff;

  color: #aaaaaa;
}

.section-navigation button:last-child {
  border-bottom: 0;
}

@media (max-width: 1499px) {

  .section-navigation {
    display: none;
  }

}


/* ============================================================
   COMPACT NAVIGATION · TABLET / MOBILE BROWSER
   ============================================================ */

.mobile-navigation-button,
.mobile-navigation,
.mobile-navigation-backdrop {
  display:none;
}

@media (max-width:1499px) {
  .mobile-navigation-button {
    display:block;
    position:fixed;
    z-index:10020;
    top:calc(env(safe-area-inset-top, 0px) + 12px);
    right:calc(env(safe-area-inset-right, 0px) + 12px);
    min-width:74px;
    height:42px;
    padding:0 14px;
    border:1px solid #111;
    border-radius:0;
    background:rgba(255,255,255,.94);
    color:#111;
    box-shadow:0 4px 18px rgba(0,0,0,.08);
    font-family:"Courier New",monospace;
    font-size:11px;
    letter-spacing:.08em;
  }

  .mobile-navigation-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:10018;
    background:rgba(0,0,0,.24);
  }
  .mobile-navigation-backdrop.hidden { display:none !important; }

  .mobile-navigation {
    display:block;
    position:fixed;
    z-index:10019;
    top:calc(env(safe-area-inset-top, 0px) + 10px);
    right:calc(env(safe-area-inset-right, 0px) + 10px);
    width:min(360px, calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow:auto;
    box-sizing:border-box;
    border:1px solid #111;
    background:#fff;
    box-shadow:0 8px 28px rgba(0,0,0,.18);
    padding-bottom:8px;
  }
  .mobile-navigation.hidden { display:none !important; }
  .mobile-navigation-header {
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:2px solid #111;
    background:#fff;
    font-family:"Courier New",monospace;
    font-size:11px;
    letter-spacing:.08em;
  }
  .mobile-navigation-header button,
  .mobile-navigation-grid button {
    appearance:none;
    -webkit-appearance:none;
    border:0;
    border-radius:0;
    background:#fff;
    color:#111;
    cursor:pointer;
  }
  .mobile-navigation-header button {
    padding:7px 8px;
    border:1px solid #111;
    font-family:"Courier New",monospace;
    font-size:10px;
  }
  .mobile-navigation-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .mobile-navigation-grid button {
    min-height:52px;
    padding:10px 12px;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;
    text-align:left;
  }
  .mobile-navigation-grid button:nth-child(even) { border-right:0; }
  .mobile-navigation-grid button:active { background:#111; color:#fff; }
}

@media (max-width:560px) {
  .mobile-navigation {
    left:calc(env(safe-area-inset-left, 0px) + 8px);
    right:calc(env(safe-area-inset-right, 0px) + 8px);
    width:auto;
  }
}

/* ============================================================
   FLOATING BOTTOM NAVIGATION
   ============================================================ */

.floating-navigation {
  position: fixed;

  left: 50%;
  bottom: 18px;

  transform:
    translateX(-50%);

  z-index: 9999;

  display: flex;

  background: #fff;

  border: 1px solid #111;

  box-shadow:
    0 4px 18px
    rgba(0, 0, 0, .08);

  white-space: nowrap;
}

.floating-navigation button {
  appearance: none;
  -webkit-appearance: none;

  height: 48px;

  padding: 0 20px;

  border: 0;

  border-right:
    1px solid #d6d6d6;

  border-radius: 0;

  background: #fff;

  color: #111;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 14px;

  cursor: pointer;
}

.floating-navigation button:last-child {
  border-right: 0;
}

.floating-navigation .floating-section-step {
  width: 46px;
  min-width: 46px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
}

.floating-navigation button:hover {
  background: #111;

  color: #fff;
}

.floating-navigation button.disabled,
.floating-navigation button:disabled {
  color: #aaa;

  background: #fff;

  cursor: not-allowed;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 10px;

  margin-top: 48px;

  padding-top: 18px;

  border-top: 1px solid #ddd;

  font-size: 11px;

  color: #777;
}


/* ============================================================
   RESPONSIVE PREVIEW
   ============================================================ */

@media (max-width: 800px) {

  .app {
    width:
      calc(100% - 28px);
  }

  .row.two,
  .cover-controls-grid {
    grid-template-columns:
      1fr;
  }

  .zine-page {
    width: 100%;
    height: auto;
  }

  .format-a5-landscape,
  .format-a4-landscape {
    aspect-ratio:
      210 / 148;
  }

  .format-a5-portrait,
  .format-a4-portrait {
    aspect-ratio:
      148 / 210;
  }

  .cover-overlay-title {
    font-size: 22px;
  }

  .cover-overlay-name {
    font-size: 12px;
  }
}


/* ============================================================
   RC12 · DIRECT PDF FIXED PRINT MEASUREMENT
   ============================================================ */

/*
  Mobile editing keeps the preview responsive, but PDF geometry must never be
  measured from that reduced viewport. Export mode restores physical mm page
  dimensions and the non-mobile cover typography while measurements are taken.
*/
html.direct-pdf-measurement #preview .zine-page {
  width: var(--page-width) !important;
  min-width: var(--page-width) !important;
  max-width: none !important;
  height: var(--page-height) !important;
  min-height: var(--page-height) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  flex: none !important;
}

html.direct-pdf-measurement #preview .cover-overlay-title {
  font-size: 30px !important;
}

html.direct-pdf-measurement #preview .cover-overlay-name {
  font-size: 14px !important;
}

html.direct-pdf-measurement #preview .format-a4-landscape .cover-overlay-title,
html.direct-pdf-measurement #preview .format-a4-portrait .cover-overlay-title {
  font-size: 38px !important;
}

html.direct-pdf-measurement #preview .format-a4-landscape .cover-overlay-name,
html.direct-pdf-measurement #preview .format-a4-portrait .cover-overlay-name {
  font-size: 17px !important;
}

@media (max-width: 700px) {

  .floating-navigation {
    bottom: 12px;

    width:
      calc(100% - 24px);

    max-width: 500px;
  }

  .floating-navigation button {
    flex: 1 1 0;

    padding: 0 8px;

    font-size: 11px;
  }

  .floating-navigation .floating-section-step {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 18px;
  }
}




/* ============================================================
   PROJECT / HISTORY TOOLBAR
   ============================================================ */

.header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.project-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.project-button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #cfcfcf;
  border-radius: 0;
  background: #fff;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: .035em;
  cursor: pointer;
}

.project-button:hover:not(:disabled) {
  border-color: #111;
  background: #f7f7f7;
}

.project-button:disabled {
  color: #aaa;
  border-color: #e5e5e5;
  cursor: not-allowed;
}

.project-toolbar-divider {
  width: 1px;
  height: 28px;
  background: #ccc;
  margin: 0 2px;
}

.project-status {
  margin-top: 11px;
  color: #999;
  font-size: 10px;
  line-height: 1.45;
}

.project-status.busy {
  color: #111;
}

@media (max-width: 800px) {
  .header-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-toolbar {
    justify-content: flex-start;
  }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

  body {
    margin: 0;
  }

  .app {
    width: auto;

    margin: 0;
  }

  .header,
  .control-section,
  .summary,
  footer,
  .preview-heading,
  .page-label,
  .floating-navigation,
  .section-navigation {
    display: none !important;
  }

  .preview-section {
    display: block !important;

    margin: 0;
  }

  .zine-page {
    margin: 0;

    border: 0;

    page-break-after:
      always;

    break-after:
      page;
  }
}


.brightness-test-button {
  margin-top: 12px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d6d6d6;
  border-radius: 0;
  background: #fff;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  cursor: pointer;
}
.brightness-test-button:hover:not(:disabled) { border-color: #111; background: #fafafa; }
.brightness-test-button:disabled { opacity: .45; cursor: default; }

/* ============================================================
   PROJECT ACTIONS IN SIDE NAVIGATION
   ============================================================ */

.section-navigation .side-action-button:disabled {
  background: #ffffff;
  color: #b5b5b5;
  cursor: not-allowed;
}

.section-navigation .side-action-button:disabled:hover {
  padding-left: 11px;
  background: #ffffff;
  color: #b5b5b5;
}


/* ============================================================
   UX STEP 2 · STICKY LIVE PREVIEW
   ============================================================ */

/* Keep the photographer placement group visually separate from
   the title-placement buttons above it. */
#coverPhotographerOptions {
  margin-top: 18px;
}

.sticky-preview-dock {
  position: fixed;
  top: 50%;
  z-index: 9997;
  width: 260px;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #111;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  transition: left .22s ease, right .22s ease;
}

.sticky-preview-dock.dock-left { left: 22px; right: auto; }
.sticky-preview-dock.dock-right { right: 22px; left: auto; }

.sticky-preview-position-button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid #111;
  border-radius: 0;
  background: #fafafa;
  color: #555;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .04em;
  cursor: pointer;
}
.sticky-preview-position-button:hover { background:#111; color:#fff; }

.sticky-preview-heading {
  padding: 11px 12px 9px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  border-bottom: 1px solid #dedede;
}

.sticky-preview-viewport {
  position: relative;
  height: 350px;
  margin: 12px;
  overflow: hidden;
  background: #f6f6f6;
  border: 1px solid #e1e1e1;
}
.sticky-preview-canvas { position:absolute; inset:0; overflow:hidden; }
.sticky-preview-canvas .zine-page {
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  transform-origin:center center;
  pointer-events:none;
}
.sticky-preview-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center; color:#999; font-family:"Courier New",monospace;
  font-size:9px; letter-spacing:.06em;
}
.sticky-preview-footer {
  display:grid; grid-template-columns:42px 1fr 42px; align-items:center;
  border-top:1px solid #dedede;
}
.sticky-preview-footer button {
  appearance:none; -webkit-appearance:none; height:34px; border:0; border-radius:0;
  background:#fff; color:#111; cursor:pointer; font-family:Georgia,"Times New Roman",serif;
}
.sticky-preview-footer button:first-child { border-right:1px solid #dedede; }
.sticky-preview-footer button:last-child { border-left:1px solid #dedede; }
.sticky-preview-footer button:hover:not(:disabled) { background:#111; color:#fff; }
.sticky-preview-footer button:disabled { color:#bbb; cursor:default; }
.sticky-preview-footer span { text-align:center; font-family:"Courier New",monospace; font-size:9px; color:#777; }

@media (max-width: 1499px) { .sticky-preview-dock { display:none; } }

/* Match the visual hierarchy of END PAGE for the information page label. */
label[for="intro"] {
  color: #111;
  font-weight: 700;
}


/* ============================================================
   UX STEP 3 · FULLSCREEN REVIEW
   ============================================================ */

.sticky-preview-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.sticky-preview-fullscreen-button {
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #111;
  border-radius:0;
  background:#fff;
  color:#111;
  padding:4px 6px;
  font-family:"Courier New",monospace;
  font-size:8px;
  letter-spacing:.04em;
  cursor:pointer;
}
.sticky-preview-fullscreen-button:hover { background:#111; color:#fff; }

.fullscreen-review {
  position:fixed;
  inset:0;
  z-index:20000;
  background:#111;
  color:#fff;
  overflow:hidden;
}
.fullscreen-review.hidden { display:none !important; }

.fullscreen-review-topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:rgba(17,17,17,.92);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.fullscreen-review-title,
.fullscreen-review-page-label {
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.1em;
}
#fullscreenReviewClose {
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.7);
  border-radius:0;
  background:transparent;
  color:#fff;
  padding:7px 10px;
  font-family:"Courier New",monospace;
  font-size:9px;
  letter-spacing:.06em;
  cursor:pointer;
}
#fullscreenReviewClose:hover { background:#fff; color:#111; }

.fullscreen-review-viewport {
  position:absolute;
  top:54px;
  bottom:46px;
  left:64px;
  right:64px;
  overflow:hidden;
}
.fullscreen-review-canvas {
  position:absolute;
  inset:0;
  overflow:hidden;
}
.fullscreen-review-canvas .zine-page {
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  transform-origin:center center;
  pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.fullscreen-review-empty {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.08em;
  color:#aaa;
}
.fullscreen-review-arrow {
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  top:50%;
  z-index:4;
  width:48px;
  height:72px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:0;
  background:rgba(17,17,17,.45);
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}
.fullscreen-review-arrow:hover:not(:disabled) { background:#fff; color:#111; }
.fullscreen-review-arrow:disabled { opacity:.18; cursor:default; }
.fullscreen-review-prev { left:10px; }
.fullscreen-review-next { right:10px; }

.fullscreen-review-page-label {
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  color:#ccc;
}
body.fullscreen-review-active { overflow:hidden; }

@media (max-width: 800px) {
  .fullscreen-review-topbar { height:48px; padding:0 12px; }
  .fullscreen-review-viewport { top:48px; bottom:38px; left:6px; right:6px; }
  .fullscreen-review-arrow { width:38px; height:58px; font-size:28px; background:rgba(17,17,17,.58); }
  .fullscreen-review-prev { left:8px; }
  .fullscreen-review-next { right:8px; }
  .fullscreen-review-page-label { bottom:10px; }
  .wizard-cover-resolution { font-size:10px; }
}


/* ============================================================
   UX STEP 3.1 · EDITORIAL SECTION HIERARCHY
   ============================================================ */

/*
  The generator has grown into a long-form workspace. Main section
  headings now work like editorial chapter dividers; secondary labels
  remain intentionally lighter.
*/
.control-section {
  border-top: 0;
  padding-top: 0;
  margin-top: 46px;
  margin-bottom: 48px;
}

.first-control-section {
  padding-top: 0;
  margin-top: 0;
}

.control-section-heading {
  margin: 0 0 30px 0;
  padding: 12px 0 11px 0;
  border-top: 1px solid #8f8f8f;
  border-bottom: 1px solid #b9b9b9;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .13em;
}

.first-control-section .control-section-heading {
  border-top-color: #111;
}

/* Current workspace section: mark only the section the user is actually in.
   The thin frame follows the active section on navigation clicks and scrolling;
   all inactive sections retain their normal appearance so nothing reads as disabled. */
.control-section.section-active {
  outline: 1px solid #a9a9a9;
  outline-offset: 10px;
  background: #f6f6f6;
}

.control-section.section-active > .control-section-heading {
  border-top-color: #111;
  border-bottom-color: #111;
  box-shadow: inset 4px 0 0 #111;
  padding-left: 14px;
  background: #fafafa;
}

/* Keep local option labels subordinate to the main section divider. */
.section-label,
.field > label,
.setting-group > label {
  font-weight: 400;
}

/* On narrower screens retain hierarchy without consuming excess height. */
@media (max-width: 900px) {
  .control-section {
    margin-top: 36px;
    margin-bottom: 38px;
  }

  .control-section-heading {
    margin-bottom: 24px;
    padding-top: 10px;
    padding-bottom: 9px;
    font-size: 13px;
  }
}


/* UX STEP 3.2 · FOCUS MODE */
#focusModeButton.active,#sideFocusModeButton.active{background:#111;color:#fff;border-color:#111}
html.focus-mode-active,html.focus-mode-active body{width:100%;min-height:100%;background:#fff}
html.focus-mode-active body{overflow-y:auto}
:fullscreen{background:#fff}

/* HOME PRINT · STEP 1 */
.home-print-intro{margin-bottom:24px;color:#777;font-size:11px;line-height:1.7;letter-spacing:.06em}
.home-print-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px;max-width:820px;margin-bottom:26px}
.home-print-mode{min-height:84px;padding:18px;text-align:left;background:#fff;border:1px solid #ccc;font-family:inherit}
.home-print-mode strong,.home-print-mode span{display:block}.home-print-mode strong{font-family:Georgia,serif;font-size:17px;margin-bottom:8px}.home-print-mode span{font-size:10px;letter-spacing:.07em;color:#777}
.home-print-mode.active{border:2px solid #111}.home-print-mode.future{opacity:.48}
.home-print-instructions{max-width:820px;border:1px solid #bbb;padding:20px 22px;margin-bottom:20px;background:#fafafa}
.home-print-instruction-title{font-weight:700;letter-spacing:.12em;font-size:11px;margin-bottom:18px}
.home-print-instruction-grid{display:grid;grid-template-columns:150px 1fr;gap:8px 18px;font-size:11px;letter-spacing:.07em;margin-bottom:18px}.home-print-instruction-grid span{color:#777}.home-print-instruction-grid strong{font-weight:700}
.home-print-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.home-print-actions button{padding:16px 20px;background:#fff;border:1px solid #ccc;font-family:Georgia,serif;font-size:14px}.home-print-actions button:hover{border-color:#111}.home-print-actions button:last-child{border:2px solid #111}
@media(max-width:900px){.home-print-mode-grid{grid-template-columns:1fr}.home-print-instruction-grid{grid-template-columns:120px 1fr}}


/* ============================================================
   HOME PRINT STEP 1.7 · QUICK ZINE NATIVE GUTTER
   ============================================================ */

/*
  Normal A4 pages use 12 mm safe padding on each side. Quick Zine keeps
  the same total 24 mm but distributes it asymmetrically, shifting the
  complete content area by 6 mm without moving anything outside A4.
*/
#preview .zine-page.quick-zine-gutter-left:not(.cover-page) {
  padding-left: 18mm;
  padding-right: 6mm;
}

#preview .zine-page.quick-zine-gutter-right:not(.cover-page) {
  padding-left: 6mm;
  padding-right: 18mm;
}

.quick-zine-cover-reference-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quick-zine-cover-reference-heading {
  margin-bottom: 10mm;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.quick-zine-cover-reference-grid {
  display: flex;
  gap: 14mm;
  width: 100%;
  align-items: flex-start;
}

.quick-zine-cover-reference-item {
  flex: 1 1 0;
  min-width: 0;
}

.quick-zine-cover-reference-label,
.quick-zine-cover-reference-filename {
  font-family: "Courier New", monospace;
}

.quick-zine-cover-reference-label {
  margin-bottom: 4mm;
  font-size: 9px;
  font-weight: 700;
}

.quick-zine-cover-reference-item img {
  display: block;
  width: 100%;
  height: 105mm;
  object-fit: contain;
  object-position: center;
}

.quick-zine-cover-reference-filename {
  margin-top: 3mm;
  font-size: 6px;
  color: var(--page-muted);
  overflow-wrap: anywhere;
}


/* ============================================================
   HOME PRINT STEP 1.8 · QUICK ZINE FINISHING PASS
   ============================================================ */

/* Cover Reference: compact editorial reference, not a second cover spread. */
#preview .quick-zine-cover-reference-page {
  justify-content: center;
  align-items: center;
}

#preview .quick-zine-cover-reference-heading {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto 9mm;
}

#preview .quick-zine-cover-reference-grid {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto;
  gap: 12mm;
  justify-content: center;
  align-items: flex-start;
}

#preview .quick-zine-cover-reference-item {
  flex: 0 1 99mm;
  max-width: 99mm;
  text-align: center;
}

#preview .quick-zine-cover-reference-item img {
  width: 100%;
  height: 82mm;
  object-fit: contain;
  object-position: center;
}

#preview .quick-zine-cover-reference-label {
  text-align: center;
}

#preview .quick-zine-cover-reference-filename {
  text-align: center;
  max-width: 90mm;
  margin-left: auto;
  margin-right: auto;
}

/* One image per Quick Zine page: metadata becomes a quiet centered footer. */
#preview .zine-page.quick-zine-gutter-left .photo-meta,
#preview .zine-page.quick-zine-gutter-right .photo-meta {
  width: 100%;
  max-width: 190mm;
  margin: 4.5mm auto 0;
  padding: 0 8mm;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* End page gets a calmer text measure so the gutter does not make it look
   as if the whole block is glued to the outer edge. */
#preview .format-a4-landscape.end-page.quick-zine-gutter-left .end-content,
#preview .format-a4-landscape.end-page.quick-zine-gutter-right .end-content {
  max-width: 215mm;
  margin-left: auto;
  margin-right: auto;
}

/* Defensive: Quick Zine does not export a contact sheet in Step 1.8. */
#preview .contact-sheet-page.quick-zine-gutter-left,
#preview .contact-sheet-page.quick-zine-gutter-right {
  display: none !important;
}

/* ============================================================
   HOME PRINT STEP 1.10 · QUICK ZINE PRINT TYPOGRAPHY
   ============================================================ */
#preview .zine-page.quick-zine-gutter-left .page-number,
#preview .zine-page.quick-zine-gutter-right .page-number {
  font-size: 10px;
}

#preview .zine-page.quick-zine-gutter-left .photo-meta,
#preview .zine-page.quick-zine-gutter-right .photo-meta {
  font-size: 9.5px;
}


/* ============================================================
   HOME PRINT · SEQUENCING PRINTS / WORK PRINTS
   ============================================================ */
.sequencing-print-panel {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid #cfcfcf;
  background: #fafafa;
}

.sequencing-print-lead {
  margin-bottom: 16px;
}

.sequencing-source-label {
  display: block;
  margin: 14px 0 7px;
}

.sequencing-source-label > span {
  display: block;
  margin-bottom: 7px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sequencing-source-label input {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #aaa;
  background: #fff;
  color: #111;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.sequencing-print-info {
  margin: 14px 0;
  padding: 10px 12px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
}

.sequencing-print-specs {
  margin-top: 14px;
}


/* ============================================================
   SEQUENCING PRINTS STEP 2.3 · IMPORT SOURCE WORKFLOW
   ============================================================ */
.photo-import-source {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #d8d8d8;
  background: #fafafa;
}

.photo-import-source .sequencing-source-label {
  margin-top: 0;
}

.photo-import-source .help {
  margin-bottom: 0;
}

.sequencing-print-instructions {
  margin: 14px 0 4px;
  padding: 11px 13px;
  border-top: 1px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
}
.sequencing-print-instructions-title {
  margin-bottom: 5px;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.sequencing-print-instructions-line {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .035em;
}


/* ============================================================
   HOME PRINT STEP 3.1 · BOOKLET / HOME BINDING
   ============================================================ */
.booklet-print-panel {
  margin: 28px 0;
  padding: 18px;
  border: 1px solid #bdbdbd;
  background: #fff;
}
.booklet-print-lead { margin-bottom: 16px; }

.booklet-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 16px;
}
.booklet-mode-button {
  appearance: none;
  border: 1px solid #bcbcbc;
  background: #fafafa;
  color: #111;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
}
.booklet-mode-button strong,
.booklet-mode-button span { display:block; }
.booklet-mode-button strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  margin-bottom: 5px;
}
.booklet-mode-button span {
  font-family: "Courier New", monospace;
  font-size: 9px;
  line-height: 1.4;
  color: #666;
}
.booklet-mode-button.active {
  background:#111;
  color:#fff;
  border-color:#111;
}
.booklet-mode-button.active span { color:#ddd; }

.booklet-mode-panel.hidden { display:none; }

.booklet-status {
  margin: 13px 0;
  padding: 10px 12px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  border-top: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
}
.booklet-status.ready { background:#fafafa; }
.booklet-status.warning { background:#fffafa; color:#8b0000; border-color:#a30000; border-left:4px solid #a30000; }

@media (max-width: 800px) {
  .booklet-mode-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOW PHOTOS · SCREEN-FIRST VIEWER
   ============================================================ */
.show-viewer {
  position:fixed;
  inset:0;
  z-index:21000;
  background:#111;
  color:#fff;
  overflow:hidden;
  touch-action:pan-y;
}
.show-viewer.hidden { display:none !important; }
.show-viewer.light { background:#fff; color:#111; }
.show-viewer-stage {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(3.38vmin + env(safe-area-inset-top, 0px))
    calc(3.38vmin + env(safe-area-inset-right, 0px))
    calc(3.38vmin + env(safe-area-inset-bottom, 0px))
    calc(3.38vmin + env(safe-area-inset-left, 0px)); /* 5 mm-equivalent plus device safe areas */
  box-sizing:border-box;
}
.show-viewer-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}
.show-viewer-empty {
  display:none;
  font-family:"Courier New",monospace;
  font-size:12px;
  letter-spacing:.1em;
  opacity:.65;
}
.show-viewer-controls {
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:
    calc(8px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    8px
    calc(12px + env(safe-area-inset-left, 0px));
  box-sizing:border-box;
  background:rgba(17,17,17,.72);
  transition:opacity .18s ease;
}
.show-viewer.light .show-viewer-controls { background:rgba(255,255,255,.82); }
.show-viewer.controls-hidden .show-viewer-controls,
.show-viewer.controls-hidden .show-viewer-arrow { opacity:0; pointer-events:none; }
.show-viewer-controls button,
.show-viewer-controls span {
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.08em;
}
.show-viewer-controls button {
  appearance:none;
  -webkit-appearance:none;
  border:1px solid currentColor;
  border-radius:0;
  background:transparent;
  color:inherit;
  padding:7px 10px;
}
.show-viewer-arrow {
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  z-index:4;
  top:50%;
  width:46px;
  height:74px;
  transform:translateY(-50%);
  border:0;
  background:rgba(17,17,17,.34);
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  line-height:1;
  cursor:pointer;
  transition:opacity .18s ease, background .18s ease;
}
.show-viewer.light .show-viewer-arrow { background:rgba(255,255,255,.5); color:#111; }
.show-viewer-arrow:disabled { opacity:.12; }
.show-viewer-prev { left:calc(env(safe-area-inset-left, 0px) + 18px); }
.show-viewer-next { right:calc(env(safe-area-inset-right, 0px) + 18px); }
@media (orientation:landscape) and (max-height:600px) {
  .show-viewer-prev { left:calc(env(safe-area-inset-left, 0px) + 48px); }
  .show-viewer-next { right:calc(env(safe-area-inset-right, 0px) + 48px); }
}
body.show-viewer-active { overflow:hidden; }
@media (max-width:800px) {
  .show-viewer-arrow { width:38px; height:68px; font-size:34px; }
  .show-viewer-controls { min-height:44px; padding:6px 8px; }
  .show-viewer-controls button, .show-viewer-controls span { font-size:9px; }
}


/* 1.1 RC · compact navigation mirrors the active desktop section. */
.mobile-navigation-grid button.active {
  background:#111;
  color:#fff;
  border-color:#111;
}

/* RC10 · Context-aware PHOTO PRINT sticky preview */
.photo-print-sticky-sheet {
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center center;
  background:#fff;
  box-shadow:0 0 0 1px #bbb;
  pointer-events:none;
}
.photo-print-sticky-cut {
  position:absolute;
  background:#fff;
  box-shadow:inset 0 0 0 1px #d5d5d5;
}
.photo-print-sticky-frame {
  position:absolute;
  overflow:hidden;
  background:#fff;
}
.photo-print-sticky-frame img {
  display:block;
  width:100%;
  height:100%;
}
.photo-print-sticky-frame img.rotate-90 {
  width:100%;
  height:100%;
  transform:rotate(90deg) scale(1);
}
.photo-print-sticky-cut.show-cut-marks::before,
.photo-print-sticky-cut.show-cut-marks::after {
  content:"";
  position:absolute;
  inset:-4px;
  border:1px dashed rgba(80,80,80,.45);
  pointer-events:none;
}
.sticky-preview-fullscreen-button:disabled {
  opacity:.35;
  cursor:default;
}

/* ============================================================
   RC14 · CONSERVATIVE MOBILE FIXED CONTROLS
   Keep browser pinch zoom native. The controls below are sized only for the
   ordinary responsive layout; no VisualViewport offsets or zoom transforms are
   applied. This avoids the double-scaling/deformation seen in RC13 on Firefox
   Android while keeping the bottom bar compact at normal mobile scale.
   ============================================================ */
@media (max-width: 700px) {
  .floating-navigation {
    left: 50%;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: min(500px, calc(100vw - 12px));
    max-width: calc(100vw - 12px);
    transform: translateX(-50%);
    box-sizing: border-box;
    overflow: hidden;
  }

  .floating-navigation button {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0 4px;
    font-size: clamp(9px, 2.7vw, 11px);
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
  }

  .floating-navigation .floating-section-step {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 17px;
  }

  .mobile-navigation-button {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
  }
}

@media (max-width: 380px) {
  .floating-navigation {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
  }

  .floating-navigation button {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9px;
  }

  .floating-navigation .floating-section-step {
    flex-basis: 32px;
    width: 32px;
    min-width: 32px;
    font-size: 16px;
  }
}

/* ============================================================
   RC15 · CHROMIUM MOBILE LAYOUT HARDENING
   Reference target: Android Chrome / Chromium WebView.
   No browser-specific zoom scripting; keep native browser zoom behavior.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 700px) {
  html,
  body,
  .app,
  .header,
  .control-section,
  .subsection,
  .setting-group,
  .field,
  .row,
  .row > *,
  .cover-controls-grid,
  .cover-controls-grid > *,
  .cover-text-options,
  .cover-option-group,
  .button-row,
  .button-row > *,
  .cover-button-row,
  .cover-button-row > * {
    min-width: 0;
    max-width: 100%;
  }

  .app {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .project-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(100%, 420px);
    gap: 8px;
  }

  .project-button {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: normal;
  }

  .project-toolbar-divider {
    display: none;
  }

  .button-row,
  .cover-button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .button-row > button,
  .cover-button-row > button,
  [data-format],
  [data-style],
  [data-bw-optimization],
  [data-photos-per-page],
  [data-cover-title-placement],
  [data-cover-photographer],
  [data-cover-position],
  [data-cover-text-color],
  [data-page-color],
  [data-front-cover-mode],
  .utility-button,
  .option-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cover-status,
  .help,
  .project-status,
  .section-label,
  label,
  p,
  .photo-info,
  .photo-meta,
  .resolution-warning,
  .bleed-warning {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cover-status {
    overflow: visible;
    text-overflow: clip;
  }

  input,
  textarea,
  select {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-navigation-button {
    max-width: calc(100vw - 24px);
  }

  /* Keep the bottom bar geometrically fixed and entirely inside the layout
     viewport at normal mobile scale. Chromium handles browser chrome changes
     without JavaScript compensation. */
  .floating-navigation {
    left: 6px;
    right: 6px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    transform: none;
    display: grid;
    grid-template-columns: 34px minmax(72px, 1fr) minmax(78px, 1.15fr) minmax(56px, .8fr) minmax(56px, .8fr) 34px;
    overflow: visible;
  }

  .floating-navigation button {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    padding: 0 3px;
    font-size: clamp(8.5px, 2.55vw, 11px);
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  .floating-navigation .floating-section-step {
    width: auto;
    min-width: 0;
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .app {
    width: calc(100% - 16px);
  }

  .floating-navigation {
    left: 4px;
    right: 4px;
    grid-template-columns: 30px minmax(66px, 1fr) minmax(72px, 1.1fr) minmax(50px, .75fr) minmax(50px, .75fr) 30px;
  }

  .floating-navigation button {
    font-size: 8.5px;
    padding-left: 1px;
    padding-right: 1px;
  }
}

/* 1.1 RC16 · SHOW PHOTOS portrait controls live outside the photograph. */
@media (orientation:portrait) and (max-width:800px) {
  .show-viewer-stage {
    padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px));
  }
  .show-viewer-arrow {
    top:auto;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:64px;
    height:48px;
    transform:none;
    background:transparent;
    border:1px solid currentColor;
  }
  .show-viewer.light .show-viewer-arrow {
    background:transparent;
  }
  .show-viewer-prev {
    left:calc(25% - 32px);
  }
  .show-viewer-next {
    right:calc(25% - 32px);
  }
}


/* 1.1 RC17 · Dedicated mobile camera import. Hidden on desktop; Chromium/Android can open the rear camera directly. */
.mobile-camera-row {
  display: none;
}

@media (max-width: 800px) {
  .mobile-camera-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .take-photo-button {
    width: 100%;
    min-width: 0;
    padding: 18px 16px;
    border: 2px solid #111;
    background: #111;
    color: #fff;
    font: inherit;
    letter-spacing: .08em;
    cursor: pointer;
  }

  .take-photo-button:active {
    transform: translateY(1px);
  }

  .mobile-camera-help {
    margin-top: 0;
  }
}

/* ============================================================
   2.0 PROJECT START · TEMPLATE / WIZARD ENTRY
   ============================================================ */
.project-start-backdrop { position:fixed; inset:0; background:rgba(255,255,255,.82); z-index:5000; }
.project-start-dialog { position:fixed; z-index:5001; left:50%; top:50%; transform:translate(-50%,-50%); width:min(920px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow:auto; background:#fff; border:2px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.08); padding:28px; }
.project-start-dialog.hidden,.project-start-backdrop.hidden { display:none !important; }
.project-start-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; border-bottom:3px solid #111; padding-bottom:20px; }
.project-start-kicker,.project-template-hint { font-family:monospace; letter-spacing:.12em; color:#777; }
.project-start-header h2 { margin:8px 0 0; font-size:clamp(24px,3vw,40px); letter-spacing:.08em; }
.project-start-close,.project-start-continue,.project-template-card { border:1px solid #bbb; background:#fff; color:#111; }
.project-start-close { padding:14px 18px; white-space:nowrap; }
.project-start-intro { max-width:720px; margin:24px 0; line-height:1.55; }
.project-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.project-template-card { min-height:120px; padding:22px; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:10px; cursor:pointer; }
.project-template-card strong { font-family:Georgia,serif; font-size:22px; font-weight:400; }
.project-template-card span { font-family:monospace; line-height:1.45; color:#777; }
.project-template-card.active { background:#111; color:#fff; border-color:#111; }
.project-template-card.active span { color:#ddd; }
.project-template-custom { grid-column:1 / -1; min-height:92px; }
.project-start-footer { display:flex; gap:20px; align-items:center; justify-content:space-between; border-top:1px solid #bbb; margin-top:24px; padding-top:20px; }
.project-template-hint { max-width:620px; line-height:1.45; }
.project-start-continue { padding:18px 28px; border:2px solid #111; font-size:18px; white-space:nowrap; }
body.project-start-open { overflow:hidden; }
body.project-start-open .mobile-navigation-button,
body.project-start-open .floating-navigation { display:none !important; }

@media (max-width:700px) {
  .project-start-dialog {
    left:10px; right:10px; top:10px; bottom:10px;
    transform:none;
    width:auto;
    max-height:none;
    padding:14px;
    box-shadow:none;
  }
  .project-start-header { gap:10px; padding-bottom:12px; }
  .project-start-kicker { font-size:11px; }
  .project-start-header h2 { font-size:22px; line-height:1.12; margin-top:6px; }
  .project-start-close { padding:8px 10px; font-size:11px; flex:0 0 auto; }
  .project-start-intro { font-size:13px; line-height:1.45; margin:13px 0; }
  .project-template-grid { grid-template-columns:1fr; gap:8px; }
  .project-template-card,.project-template-custom {
    grid-column:auto;
    min-height:72px;
    padding:13px 14px;
    gap:6px;
  }
  .project-template-card strong { font-size:18px; }
  .project-template-card span { font-size:12px; line-height:1.35; }
  .project-start-footer { align-items:stretch; flex-direction:column; gap:10px; margin-top:14px; padding-top:12px; }
  .project-template-hint { font-size:11px; line-height:1.35; }
  .project-start-continue { width:100%; min-height:50px; padding:12px 18px; background:#111; color:#fff; font-size:16px; }
}


/* ============================================================
   2.0 PHOTO ZINE WIZARD · STEP 1 / ZINE INFO
   ============================================================ */
.wizard-backdrop { position:fixed; inset:0; background:rgba(255,255,255,.84); z-index:5100; }
.wizard-dialog { position:fixed; z-index:5101; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow:auto; background:#fff; border:2px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.08); padding:28px; }
.wizard-dialog.hidden,.wizard-backdrop.hidden { display:none !important; }
.wizard-header { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; border-bottom:3px solid #111; padding-bottom:18px; }
.wizard-kicker,.wizard-preview-note { font-family:monospace; letter-spacing:.12em; color:#777; }
.wizard-header h2 { margin:8px 0 0; font-size:clamp(24px,3vw,38px); letter-spacing:.07em; }
.wizard-exit,.wizard-footer button { background:#fff; color:#111; border:1px solid #aaa; }
.wizard-exit { padding:12px 16px; white-space:nowrap; }
.wizard-intro { max-width:680px; margin:22px 0; line-height:1.55; }
.wizard-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wizard-field { display:flex; flex-direction:column; gap:8px; font-family:monospace; letter-spacing:.08em; }
.wizard-field span { color:#666; }
.wizard-field em { font-style:normal; color:#999; font-size:.82em; }
.wizard-field input,.wizard-field textarea { width:100%; box-sizing:border-box; border:1px solid #c9c9c9; background:#fff; color:#111; font:18px/1.35 Georgia,serif; padding:16px; }
.wizard-field textarea { min-height:150px; resize:vertical; font-family:monospace; font-size:15px; }
.wizard-field small { align-self:flex-end; color:#999; letter-spacing:.05em; }
.wizard-optional { grid-column:1 / -1; }
.wizard-preview-note { margin-top:18px; padding-top:16px; border-top:1px solid #bbb; font-size:12px; }
.wizard-footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:18px; }
.wizard-footer button { min-height:50px; padding:12px 18px; font-size:15px; }
.wizard-footer #photoZineWizardSkip { justify-self:center; border-color:transparent; font-family:monospace; color:#666; }
.wizard-footer .wizard-next { background:#111; color:#fff; border:2px solid #111; min-width:150px; }
body.wizard-open { overflow:hidden; }
body.wizard-open .mobile-navigation-button,
body.wizard-open .floating-navigation { display:none !important; }

@media (max-width:700px) {
  .wizard-dialog { left:10px; right:10px; top:10px; bottom:10px; transform:none; width:auto; max-height:none; padding:14px; box-shadow:none; }
  .wizard-header { gap:10px; padding-bottom:12px; }
  .wizard-kicker { font-size:11px; }
  .wizard-header h2 { font-size:22px; line-height:1.12; }
  .wizard-exit { padding:8px 9px; font-size:10px; }
  .wizard-intro { font-size:13px; line-height:1.45; margin:13px 0; }
  .wizard-fields { grid-template-columns:1fr; gap:11px; }
  .wizard-optional { grid-column:auto; }
  .wizard-field { gap:6px; font-size:11px; }
  .wizard-field input { padding:13px; font-size:17px; }
  .wizard-field textarea { min-height:118px; padding:12px; font-size:13px; }
  .wizard-preview-note { font-size:10px; margin-top:12px; padding-top:10px; }
  .wizard-footer { position:sticky; bottom:-14px; background:#fff; margin:14px -14px -14px; padding:10px 14px 14px; grid-template-columns:1fr 1fr; border-top:1px solid #bbb; }
  .wizard-footer button { min-height:46px; padding:10px 8px; font-size:12px; }
  .wizard-footer #photoZineWizardSkip { grid-column:1 / -1; grid-row:1; justify-self:center; min-height:auto; padding:4px 8px; }
  .wizard-footer #photoZineWizardBack { grid-column:1; grid-row:2; }
  .wizard-footer .wizard-next { grid-column:2; grid-row:2; min-width:0; }
}

/* 2.0 ALPHA 3 · Wizard step 2 */
.wizard-step.hidden { display:none !important; }
.wizard-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0; }
.wizard-choice { min-height:112px; padding:18px; text-align:left; background:#fff; color:#111; border:1px solid #bbb; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.wizard-choice strong { font:22px/1.15 Georgia,serif; font-weight:normal; }
.wizard-choice span { font-family:monospace; color:#777; line-height:1.45; }
.wizard-choice.active { background:#171717; color:#fff; border:2px solid #171717; }
.wizard-choice.active span { color:#ddd; }
@media (max-width:700px) {
  .wizard-choice-grid { grid-template-columns:1fr; gap:10px; margin:14px 0; }
  .wizard-choice { min-height:88px; padding:14px; }
  .wizard-choice strong { font-size:19px; }
  .wizard-choice span { font-size:11px; }
}

/* 2.0 Alpha 3.1 · paused wizard return control */
.wizard-resume { background:#111 !important; color:#fff !important; border-color:#111 !important; }


/* 2.0 Alpha 3.2 · floating resume + robust mobile wizard choices */
.wizard-resume:not(.hidden) {
  display:block !important;
  position:fixed;
  z-index:10018;
  top:16px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  min-height:42px;
  padding:0 16px;
  box-shadow:0 4px 18px rgba(0,0,0,.10);
  white-space:nowrap;
}

.wizard-choice {
  position:relative;
  z-index:2;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

@media (max-width:1499px) {
  .wizard-resume:not(.hidden) {
    top:calc(env(safe-area-inset-top, 0px) + 62px);
    right:calc(env(safe-area-inset-right, 0px) + 12px);
    left:auto;
    transform:none;
    min-height:40px;
    padding:0 12px;
    font-size:10px;
    letter-spacing:.06em;
  }
}

/* 2.0 Alpha 4 · Wizard step 3 + compact mobile resume */
.wizard-subheading {
  margin:20px 0 8px;
  padding-top:14px;
  border-top:1px solid #bbb;
  font-family:monospace;
  letter-spacing:.12em;
  color:#666;
  font-size:12px;
}
.wizard-cover-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 10px;
}
.wizard-cover-file {
  min-height:48px;
  padding:10px 16px;
  border:2px solid #111;
  background:#111;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
}
.wizard-cover-file.secondary {
  background:#fff;
  color:#111;
  border:1px solid #aaa;
}

.wizard-cover-resolution {
  margin-top:8px;
  padding:9px 10px;
  border:1px solid #bbb;
  font-family:"Courier New",monospace;
  font-size:11px;
  letter-spacing:.06em;
  background:#fff;
  color:#777;
}
.wizard-cover-resolution.resolution-low {
  color:#a00000;
  border-color:#a00000;
  font-weight:700;
}
.wizard-cover-resolution.resolution-ok { color:#555; }
.wizard-cover-resolution.resolution-good { color:#111; }
.wizard-cover-status {
  padding:12px 14px;
  border:1px solid #ccc;
  font-family:monospace;
  color:#777;
  overflow-wrap:anywhere;
}
.wizard-choice-grid-compact { margin-top:8px; }

@media (max-width:1499px) {
  .wizard-resume:not(.hidden) {
    width:auto !important;
    max-width:170px;
    min-width:0;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding-left:12px;
    padding-right:12px;
  }
}

@media (max-width:800px) {
  .wizard-subheading { margin-top:14px; padding-top:10px; font-size:10px; }
  .wizard-cover-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px; }
  .wizard-cover-file { min-height:44px; padding:8px; font-size:11px; }
  .wizard-cover-status { padding:9px 10px; font-size:10px; }
}


/* 2.0 Alpha 4.1 · mobile wizard preview */
.wizard-preview-button {
  display:none;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #aaa !important;
}
@media (max-width:800px) {
  .wizard-footer {
    grid-template-columns:1fr 1fr 1fr;
  }
  .wizard-footer #photoZineWizardSkip {
    grid-column:1 / -1;
    grid-row:1;
  }
  .wizard-footer #photoZineWizardBack {
    grid-column:1;
    grid-row:2;
  }
  .wizard-footer .wizard-preview-button {
    display:block;
    grid-column:2;
    grid-row:2;
    min-width:0;
  }
  .wizard-footer .wizard-next {
    grid-column:3;
    grid-row:2;
    min-width:0;
  }
}


/* 2.0 Alpha 4.3 · review controls, cover camera, resolution sync */
.wizard-mobile-camera,
.cover-camera-button { display:none; }

/* Bring desktop review arrows slightly inward from the extreme viewport edges. */
.fullscreen-review-prev { left:clamp(24px, 3vw, 56px); }
.fullscreen-review-next { right:clamp(24px, 3vw, 56px); }

@media (max-width:800px) {
  .wizard-mobile-camera,
  .cover-camera-button { display:block; }

  .wizard-cover-actions { grid-template-columns:1fr 1fr; }
  .wizard-cover-actions .wizard-mobile-camera { grid-column:1 / -1; }

  /* In portrait the review arrows sit below the page instead of covering it. */
  @media (orientation:portrait) {
    .fullscreen-review-viewport { bottom:112px; }
    .fullscreen-review-arrow {
      top:auto;
      bottom:42px;
      width:58px;
      height:46px;
      transform:none;
      background:transparent;
      border:1px solid rgba(255,255,255,.5);
    }
    .fullscreen-review-prev { left:calc(27% - 29px); }
    .fullscreen-review-next { right:calc(27% - 29px); }
    .fullscreen-review-page-label { bottom:12px; }
  }
}

/* 2.0 Alpha 4.4 · mobile review is swipe-first and avoids browser native fullscreen */
@media (max-width:800px) {
  .fullscreen-review-arrow { display:none !important; }
  .fullscreen-review-viewport { left:6px; right:6px; bottom:38px; }
  .fullscreen-review-page-label { bottom:10px; }
}

/* 2.0 Alpha 4.5 · touch-tablet wizard affordances
   Touch-first tablets can exceed 800 CSS px in landscape. Keep camera + wizard
   preview available whenever there is no mouse/hover UI, not only by width. */
@media (hover: none) and (pointer: coarse) {
  .mobile-camera-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .wizard-mobile-camera,
  .cover-camera-button {
    display: block;
  }

  .wizard-cover-actions .wizard-mobile-camera {
    grid-column: 1 / -1;
  }

  .wizard-footer {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .wizard-footer #photoZineWizardSkip {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .wizard-footer #photoZineWizardBack {
    grid-column: 1;
    grid-row: 2;
  }

  .wizard-footer .wizard-preview-button {
    display: block;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .wizard-footer .wizard-next {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
  }

  /* Touch review is swipe-first in both tablet orientations. */
  .fullscreen-review-arrow { display: none !important; }
  .fullscreen-review-viewport { left: 8px; right: 8px; bottom: 38px; }
  .fullscreen-review-page-label { bottom: 10px; }
}

/* 2.0 Alpha 4.6 · wizard cover title position */
.wizard-position-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.wizard-position-choice {
  min-height:46px;
  padding:10px 8px;
  border:1px solid #bbb;
  background:#fff;
  color:#111;
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
}
.wizard-position-choice.active {
  background:#111;
  color:#fff;
  border-color:#111;
}
@media (max-width:800px) {
  .wizard-position-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .wizard-position-choice { min-height:42px; font-size:11px; padding:8px 5px; }
}


/* 2.0 Alpha 5 · Wizard step 4 / photographs + basic photo layout */
.wizard-photo-actions { margin-bottom:10px; }
.wizard-choice-grid-three { grid-template-columns:repeat(3,1fr); }
@media (max-width:800px) {
  .wizard-choice-grid-three { grid-template-columns:1fr; }
  .wizard-photo-actions { grid-template-columns:1fr 1fr; }
  .wizard-photo-actions .wizard-mobile-camera { grid-column:auto; }
}
@media (hover:none) and (pointer:coarse) {
  .wizard-photo-actions { display:grid; grid-template-columns:1fr 1fr; }
  .wizard-photo-actions .wizard-mobile-camera { grid-column:auto; }
}

/* 2.0 Alpha 5.1 · per-photo COLOR / B&W inside Wizard Step 4 */
.wizard-individual-photos { margin-top:14px; border-top:1px solid #ddd; padding-top:4px; }
.wizard-individual-note { margin:6px 0 10px; font-size:10px; line-height:1.45; color:#666; }
.wizard-individual-photo-strip { display:flex; gap:10px; overflow-x:auto; padding:2px 0 10px; scroll-snap-type:x proximity; }
.wizard-individual-photo-card { flex:0 0 132px; border:1px solid #ccc; background:#fff; padding:7px; scroll-snap-align:start; }
.wizard-individual-photo-card img { display:block; width:100%; height:105px; object-fit:contain; background:#f5f5f5; cursor:pointer; }
.wizard-individual-photo-card.bw img { filter:grayscale(100%); }
.wizard-individual-photo-label { margin:6px 0; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#666; }
.wizard-individual-photo-toggle { width:100%; min-height:34px; border:1px solid #111; background:#fff; color:#111; font-size:10px; font-weight:700; }
.wizard-individual-photo-toggle.active { background:#111; color:#fff; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .wizard-individual-photo-card { flex-basis:118px; }
  .wizard-individual-photo-card img { height:92px; }
  .wizard-individual-photo-toggle { min-height:38px; }
}

/* 2.0 ALPHA 5.5 · Wizard Step 5 */
.wizard-toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 18px; }
.wizard-toggle { display:flex; align-items:flex-start; gap:10px; border:1px solid #c8c8c8; padding:12px; cursor:pointer; background:#fff; min-width:0; }
.wizard-toggle:has(input:checked) { border-color:#111; background:#f6f6f6; }
.wizard-toggle input { margin:2px 0 0; flex:0 0 auto; accent-color:#111; }
.wizard-toggle span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.wizard-toggle strong { font-size:11px; letter-spacing:.04em; }
.wizard-toggle small { font-size:10px; line-height:1.35; color:#666; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .wizard-toggle-grid { grid-template-columns:1fr; gap:8px; }
  .wizard-toggle { padding:10px; }
}

/* 2.0 ALPHA 6 · Step 6 end/back cover */
#photoZineWizardStep6 .wizard-toggle-grid { margin-bottom: 18px; }
#photoZineWizardStep6 .wizard-cover-actions { margin-bottom: 8px; }

/* 2.0 ALPHA 6.1 · Wizard history controls */
.wizard-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.wizard-history-button { background:#fff; color:#111; border:1px solid #aaa; min-height:34px; padding:7px 10px; font-size:11px; }
.wizard-history-button:disabled { opacity:.28; cursor:default; }
@media (max-width:800px), (pointer:coarse) {
  .wizard-header-actions { gap:5px; }
  .wizard-history-button { min-height:32px; padding:6px 8px; font-size:10px; }
}


/* 2.0 ALPHA 6.2 · paused wizard controls stay in the normal toolbar */
.wizard-resume:not(.hidden),
.wizard-end:not(.hidden) {
  position:static !important;
  transform:none !important;
  display:inline-flex !important;
  width:auto !important;
  max-width:none !important;
  min-height:var(--control-height, 42px);
  box-shadow:none !important;
  white-space:nowrap;
}
.wizard-end { background:#fff !important; color:#111 !important; border-color:#111 !important; }

/* 2.0 ALPHA 6.3 · persistent wizard access in section navigation */
.side-wizard-access {
  border-top: 1px solid var(--line, #d8d8d8);
  border-bottom: 1px solid var(--line, #d8d8d8);
  padding: 8px 0;
  margin: 6px 0;
}
.side-wizard-label {
  padding: 3px 10px 7px;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.35;
  opacity: .62;
}
.side-wizard-button {
  font-weight: 700;
}


/* ============================================================
   2.0 ALPHA 7.2 · WIZARD REVIEW & OUTPUT POLISH
   ============================================================ */
.wizard-output-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 18px; }
.wizard-output-grid button, .wizard-output-primary { min-height:76px; padding:14px; border:1px solid #aaa; background:#fff; color:#111; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.wizard-output-grid button strong { font:18px/1.15 Georgia,serif; font-weight:normal; }
.wizard-output-grid button span { font:10px/1.4 monospace; color:#666; }
.wizard-output-grid .wizard-output-primary, #wizardFullReview.wizard-output-primary { background:#111; color:#fff; border-color:#111; }
.wizard-output-grid .wizard-output-primary span { color:#ddd; }
#wizardFullReview { width:100%; min-height:52px; align-items:center; text-align:center; font:15px/1 monospace; }
.wizard-project-check { border:1px solid #bbb; background:#f6f6f6; padding:14px; display:flex; flex-direction:column; gap:6px; margin:8px 0 18px; }
.wizard-project-check strong { font:19px/1.1 Georgia,serif; font-weight:normal; }
.wizard-project-check span { font:10px/1.45 monospace; color:#555; }
.wizard-complete-status { margin:14px 0; padding:13px; border:2px solid #111; font:12px/1.45 monospace; }
.wizard-output-secondary { border-style:dashed !important; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .wizard-output-grid { grid-template-columns:1fr; gap:8px; }
  .wizard-output-grid button { min-height:62px; padding:11px; }
  .wizard-output-grid button strong { font-size:16px; }
}

/* ALPHA 7.2 · make the required post-PDF project save unmistakable without adding color. */
.wizard-complete-status.needs-final-save { border-width:3px; background:#f6f6f6; }

/* ============================================================
   2.0 ALPHA 8 · PORTABLE WORKFLOW TEMPLATES
   ============================================================ */
.project-start-actions { display:flex; gap:10px; align-items:stretch; flex:0 0 auto; }
.project-start-secondary { padding:18px 20px; border:1px solid #aaa; background:#fff; color:#111; font:14px/1 monospace; white-space:nowrap; }
.project-start-secondary:hover { border-color:#111; }

.template-save-backdrop { position:fixed; inset:0; background:rgba(255,255,255,.78); z-index:5200; }
.template-save-dialog { position:fixed; z-index:5201; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow:auto; background:#fff; border:2px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.08); padding:26px; }
.template-save-dialog.hidden,.template-save-backdrop.hidden { display:none !important; }
.template-save-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:16px; border-bottom:3px solid #111; }
.template-save-header h2 { margin:7px 0 0; font-size:30px; letter-spacing:.07em; }
.template-save-intro,.template-save-note { font-family:monospace; color:#666; line-height:1.5; }
.template-save-intro { margin:18px 0; }
.template-name-field { display:flex; flex-direction:column; gap:8px; font-family:monospace; letter-spacing:.08em; }
.template-name-field input { border:1px solid #bbb; padding:13px; font:18px/1.25 Georgia,serif; }
.template-module-heading { margin:22px 0 9px; font:12px/1 monospace; letter-spacing:.12em; color:#666; }
.template-module-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.template-module { display:flex; align-items:flex-start; gap:10px; min-height:66px; border:1px solid #bbb; padding:12px; box-sizing:border-box; cursor:pointer; }
.template-module input { margin-top:3px; }
.template-module span { display:flex; flex-direction:column; gap:4px; }
.template-module strong { font:15px/1.15 Georgia,serif; font-weight:normal; }
.template-module small { font:10px/1.35 monospace; color:#777; }
.template-save-note { margin-top:14px; padding-top:13px; border-top:1px solid #bbb; font-size:10px; }
.template-save-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.template-save-actions button { min-height:46px; padding:10px 18px; border:1px solid #aaa; background:#fff; color:#111; }
.template-save-actions .template-save-primary { background:#111; color:#fff; border-color:#111; }
body.template-save-open { overflow:hidden; }

@media (max-width:700px) {
  .project-start-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .project-start-secondary,.project-start-continue { width:100%; min-height:50px; padding:12px; }
  .template-save-dialog { left:10px; right:10px; top:10px; bottom:10px; transform:none; width:auto; max-height:none; padding:14px; box-shadow:none; }
  .template-save-header { gap:10px; padding-bottom:12px; }
  .template-save-header h2 { font-size:22px; }
  .template-module-grid { grid-template-columns:1fr; gap:7px; }
  .template-module { min-height:58px; padding:10px; }
  .template-save-actions { display:grid; grid-template-columns:1fr 1fr; }
}

/* ============================================================
   2.0 ALPHA 8.2 · TEMPLATE BUILDER / LOCK VISIBILITY
   ============================================================ */
.template-builder-backdrop { position:fixed; inset:0; background:rgba(255,255,255,.82); z-index:5400; }
.template-builder-dialog { position:fixed; z-index:5401; left:50%; top:50%; transform:translate(-50%,-50%); width:min(920px,calc(100vw - 48px)); max-height:calc(100dvh - 40px); overflow:auto; background:#fff; border:2px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.08); padding:26px; box-sizing:border-box; }
.template-builder-dialog.hidden,.template-builder-backdrop.hidden { display:none !important; }
.template-builder-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:16px; border-bottom:3px solid #111; }
.template-builder-header h2 { margin:7px 0 0; font-size:30px; letter-spacing:.07em; }
.template-builder-intro,.template-builder-note { font:11px/1.55 monospace; color:#666; }
.template-builder-intro { margin:18px 0; }
.template-builder-name { display:flex; flex-direction:column; gap:7px; font:11px/1.3 monospace; letter-spacing:.09em; margin-bottom:16px; }
.template-builder-name input,.template-builder-card input[type="text"],.template-builder-card textarea,.template-builder-card select { border:1px solid #aaa; background:#fff; color:#111; padding:10px; box-sizing:border-box; }
.template-builder-name input { font:18px/1.25 Georgia,serif; }
.template-builder-card { border:1px solid #bbb; padding:14px; margin:10px 0; }
.template-builder-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.template-builder-card-head > div { display:flex; flex-direction:column; gap:4px; }
.template-builder-card-head strong { font:16px/1.1 Georgia,serif; font-weight:normal; letter-spacing:.03em; }
.template-builder-card-head small { font:10px/1.4 monospace; color:#777; }
.template-builder-card-head select { min-width:132px; font:10px/1.2 monospace; letter-spacing:.06em; }
.template-builder-fields,.template-builder-settings { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.template-builder-fields label,.template-builder-settings label { display:flex; flex-direction:column; gap:6px; font:10px/1.3 monospace; letter-spacing:.06em; }
.template-builder-fields em { display:flex; align-items:center; gap:5px; font-style:normal; color:#555; letter-spacing:.05em; }
.template-builder-wide { grid-column:1 / -1; }
.template-builder-fields textarea,.template-builder-settings textarea { min-height:92px; resize:vertical; font:13px/1.45 monospace; }
.template-builder-settings select { width:100%; font:12px/1.2 monospace; }
.template-builder-checks { display:grid; grid-template-columns:1fr 1fr; gap:8px; font:11px/1.4 monospace; }
.template-builder-checks label,.template-builder-check { display:flex !important; flex-direction:row !important; align-items:center; gap:7px; letter-spacing:.04em; }
.template-builder-lock { display:flex; align-items:center; gap:6px; font:10px/1.3 monospace; letter-spacing:.06em; }
.template-builder-settings.is-inactive,.template-builder-checks.is-inactive { opacity:.35; }
.template-builder-settings.is-inactive input,.template-builder-settings.is-inactive select,.template-builder-settings.is-inactive textarea,.template-builder-checks.is-inactive input { pointer-events:none; }
.template-builder-note { margin-top:16px; padding-top:14px; border-top:1px solid #bbb; }
.template-builder-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; position:sticky; bottom:-26px; background:#fff; padding:14px 0 0; border-top:1px solid #ddd; }
.template-builder-actions button { min-height:46px; padding:10px 18px; border:1px solid #aaa; background:#fff; color:#111; }
.template-builder-actions .template-save-primary { background:#111; color:#fff; border-color:#111; }
body.template-builder-open { overflow:hidden; }
/* Locked controls stay visibly locked, but the saved choice must remain unmistakable. */
.template-locked-control { opacity:.28 !important; cursor:not-allowed !important; }
button.template-locked-control.active,
.wizard-choice.template-locked-control.active {
  opacity:1 !important;
  box-shadow:0 0 0 2px #111;
}
.wizard-choice.template-locked-control.active::after {
  content:"LOCKED";
  position:absolute;
  top:8px;
  right:8px;
  padding:4px 6px;
  border:1px solid currentColor;
  background:#fff;
  color:#111;
  font:8px/1 monospace;
  letter-spacing:.12em;
}
input.template-locked-control,
textarea.template-locked-control,
select.template-locked-control {
  opacity:.62 !important;
  background:#f4f4f4 !important;
}
.template-lock-note { font:9px/1.3 monospace; letter-spacing:.08em; color:#777; }

@media(max-width:800px){
  .project-start-actions { grid-template-columns:1fr 1fr; }
  #projectStartContinue { grid-column:1 / -1; }
  .template-builder-dialog { left:8px; right:8px; top:8px; bottom:8px; transform:none; width:auto; max-height:none; padding:14px; box-shadow:none; }
  .template-builder-header h2 { font-size:23px; }
  .template-builder-card { padding:11px; }
  .template-builder-card-head { gap:8px; }
  .template-builder-card-head select { min-width:118px; padding:8px; }
  .template-builder-fields,.template-builder-settings,.template-builder-checks { grid-template-columns:1fr; }
  .template-builder-wide { grid-column:auto; }
  .template-builder-actions { bottom:-14px; margin-left:-14px; margin-right:-14px; padding:10px 14px 14px; }
  .template-builder-actions button { flex:1; }
}

/* ============================================================
   ALPHA 8.3 · TEMPLATE LOCK CLARITY
   ============================================================ */

/* Back-cover option headings use the same editorial label typography as the
   rest of the Cover section. */
.cover-option-title {
  margin-bottom: 10px;
  color: #777;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
}

/* When a template fixes a button-based choice, show the fixed choice only.
   This avoids a row of disabled alternatives that looks like it can still be
   clicked. The active fixed choice remains clearly marked LOCKED. */
button.template-locked-control:not(.active),
.wizard-choice.template-locked-control:not(.active) {
  display: none !important;
}

/* In the Template Builder AVAILABLE is not a disabled state. The controls stay
   readable and usable; changing one automatically promotes the module to
   PRESET. Only OFF is visually inactive. */
.template-builder-settings:not(.is-inactive),
.template-builder-checks:not(.is-inactive) {
  opacity: 1;
}


/* ============================================================
   2.0 ALPHA 9.1 · STORY CAPTURE / FIELD NOTES
   ============================================================ */
.story-capture-backdrop { position:fixed; inset:0; background:rgba(255,255,255,.72); z-index:1450; backdrop-filter:blur(2px); }
.story-capture-dialog { position:fixed; z-index:1460; inset:4vh 5vw; background:#fff; border:1px solid #111; box-shadow:0 18px 60px rgba(0,0,0,.18); display:flex; flex-direction:column; min-height:0; }
.story-capture-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:18px 20px 12px; border-bottom:1px solid #111; }
.story-capture-header h2 { margin:3px 0 0; font-size:20px; letter-spacing:.02em; }
.story-capture-intro { margin:0; padding:10px 20px; border-bottom:1px solid #ccc; font-family:"Courier New",monospace; font-size:12px; }

.story-capture-pager { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:7px 20px; border-bottom:1px solid #ddd; background:#fff; }
.story-capture-pager button { border:1px solid #111; background:#fff; padding:7px 10px; font:700 10px "Courier New",monospace; cursor:pointer; }
.story-capture-pager button:hover:not(:disabled) { background:#111; color:#fff; }
.story-capture-pager button:disabled { opacity:.28; cursor:default; }
.story-capture-pager span { text-align:center; font:700 10px "Courier New",monospace; letter-spacing:.04em; }
.story-capture-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; min-height:0; flex:1; overflow:hidden; }
.story-capture-main { overflow:auto; padding:18px 20px 30px; }
.story-capture-saved { overflow:auto; border-left:1px solid #111; padding:18px 14px; background:#fafafa; }
.story-capture-photo-box { min-height:210px; border:1px solid #111; display:flex; align-items:center; justify-content:center; background:#f3f3f3; font-family:"Courier New",monospace; font-size:12px; }
.story-capture-photo-box img { width:100%; height:min(42vh,360px); object-fit:contain; display:block; background:#111; }
.story-capture-photo-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 18px; }
.story-capture-photo-actions button,.story-capture-inline,.story-capture-footer button { border:1px solid #111; background:#fff; padding:10px 12px; font-family:"Courier New",monospace; font-weight:700; cursor:pointer; }
.story-capture-photo-actions button:hover,.story-capture-inline:hover,.story-capture-footer button:hover { background:#111; color:#fff; }
.story-capture-field { display:flex; flex-direction:column; gap:5px; margin:0 0 12px; font-family:"Courier New",monospace; font-size:11px; font-weight:700; }
.story-capture-field em { font-style:normal; font-weight:400; color:#777; }
.story-capture-field input,.story-capture-field textarea { border:1px solid #111; background:#fff; padding:10px; font:14px/1.4 Arial,sans-serif; }
.story-capture-field textarea { min-height:110px; resize:vertical; }
.story-capture-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }
.story-capture-meta-row { grid-template-columns:1fr 1fr auto; }
.story-capture-inline { margin-bottom:12px; min-height:39px; }
.story-capture-gps { margin:-4px 0 14px; font:11px/1.4 "Courier New",monospace; color:#555; }
.story-capture-entry-list { display:flex; flex-direction:column; gap:7px; }
.story-capture-entry-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; }
.story-capture-entry-main,.story-capture-entry-delete { border:1px solid #aaa; background:#fff; font-family:"Courier New",monospace; cursor:pointer; }
.story-capture-entry-main { text-align:left; padding:8px; min-width:0; }
.story-capture-entry-main strong,.story-capture-entry-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-capture-entry-main span { margin-top:3px; font-size:10px; color:#666; }
.story-capture-entry-delete { padding:6px; font-size:9px; }
.story-capture-empty { font:11px "Courier New",monospace; color:#777; }
.story-capture-footer { border-top:1px solid #111; padding:12px 20px; display:flex; justify-content:space-between; gap:10px; }
.story-capture-footer .wizard-next { background:#111; color:#fff; }
.story-photo-page .photo-layout { height:calc(100% - 34mm); }
.story-photo-page .photo-frame img { max-height:100%; }
.story-caption { position:absolute; left:calc(var(--bleed) + 10mm); right:calc(var(--bleed) + 10mm); bottom:calc(var(--bleed) + 9mm); min-height:19mm; }
.story-caption-meta,.story-caption-link { font:7px/1.4 "Courier New",monospace; color:var(--page-muted); word-break:break-word; }
.story-caption-note { margin-top:3mm; font:10px/1.45 Arial,sans-serif; color:var(--page-fg); white-space:pre-wrap; }
.story-text-wrap { position:absolute; left:calc(var(--bleed) + 14mm); right:calc(var(--bleed) + 14mm); top:calc(var(--bleed) + 18mm); bottom:calc(var(--bleed) + 16mm); display:flex; flex-direction:column; justify-content:center; }
.story-text-heading { margin-bottom:8mm; font:7px/1.4 "Courier New",monospace; color:var(--page-muted); }
.story-text-body { font:14px/1.55 Arial,sans-serif; white-space:pre-wrap; }
.story-text-page .story-caption-link { margin-top:8mm; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-dialog { inset:0; border:0; }
  .story-capture-header { padding:12px; }
  .story-capture-header h2 { font-size:16px; }
  .story-capture-intro { padding:8px 12px; font-size:10px; }
  .story-capture-layout { display:block; overflow:auto; }
  .story-capture-main { overflow:visible; padding:12px; }
  .story-capture-saved { overflow:visible; border-left:0; border-top:1px solid #111; padding:12px; }
  .story-capture-photo-box { min-height:180px; }
  .story-capture-photo-box img { height:32vh; }
  .story-capture-photo-actions { grid-template-columns:1fr 1fr; }
  .story-capture-photo-actions .secondary { grid-column:1/-1; }
  .story-capture-meta-row { grid-template-columns:1fr 1fr; }
  .story-capture-meta-row .story-capture-inline { grid-column:1/-1; }
  .story-capture-footer { position:sticky; bottom:0; background:#fff; padding:10px 12px; }
}

/* ============================================================
   2.0 ALPHA 9.1 · FIELD NOTES NOTEBOOK / LOCAL LIBRARY
   ============================================================ */
.field-notes-library { margin:14px 0 0; border:1px solid #bbb; background:#fafafa; padding:12px; }
.field-notes-library-head { display:flex; justify-content:space-between; gap:14px; align-items:center; font-family:"Courier New",monospace; }
.field-notes-library-head div { min-width:0; }
.field-notes-library-head strong,.field-notes-library-head span { display:block; }
.field-notes-library-head span { margin-top:3px; font-size:10px; color:#777; }
.field-notes-library-head button { border:1px solid #111; background:#fff; padding:7px 10px; font:700 10px "Courier New",monospace; cursor:pointer; }
.field-notes-library-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.field-notes-library-item { text-align:left; border:1px solid #bbb; background:#fff; padding:10px; font-family:"Courier New",monospace; cursor:pointer; }
.field-notes-library-item:hover { border-color:#111; }
.field-notes-library-item strong,.field-notes-library-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-notes-library-item span { margin-top:4px; color:#777; font-size:10px; }
.field-notes-library-empty { margin:8px 0 0; font:11px "Courier New",monospace; color:#777; }

.story-notebook-info { border-bottom:1px solid #ccc; background:#fafafa; }
.story-notebook-info summary { padding:9px 20px; font:700 11px "Courier New",monospace; cursor:pointer; letter-spacing:.04em; }
.story-notebook-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; padding:4px 20px 14px; }
.story-notebook-info-grid .story-capture-field { margin:0; }
.story-notebook-about { grid-column:1/-1; }
.story-notebook-about textarea { min-height:72px; }
.story-capture-status-row { display:flex; justify-content:space-between; gap:12px; padding:7px 20px; border-bottom:1px solid #ddd; font:10px "Courier New",monospace; color:#666; background:#fff; }
.story-capture-status-row span:last-child { color:#111; font-weight:700; }
.story-capture-entry-main { display:flex; align-items:center; gap:8px; }
.story-capture-entry-thumb { width:44px; height:44px; object-fit:cover; flex:0 0 44px; background:#eee; }
.story-capture-entry-copy { min-width:0; display:block; }
.story-capture-entry-delete { min-width:72px; }
.story-capture-footer { z-index:4; background:#fff; }
.story-capture-footer button { flex:1; }
#storyCaptureTakePhoto { display:none; }
.story-capture-photo-actions { grid-template-columns:1fr 1fr; }

/* Story Capture is the notebook itself: remove duplicate navigation/preview chrome. */
body.story-capture-open .sticky-preview-dock,
body.story-capture-open .section-navigation,
body.story-capture-open .floating-navigation,
body.story-capture-open .mobile-navigation-button,
body.story-capture-open .mobile-navigation,
body.story-capture-open .mobile-navigation-backdrop { display:none !important; }

@media (pointer:coarse) {
  #storyCaptureTakePhoto { display:block; }
  .story-capture-photo-actions { grid-template-columns:1fr 1fr; }
  .story-capture-photo-actions .secondary { grid-column:1/-1; }
}

@media (max-width:800px) {
  .field-notes-library-list { grid-template-columns:1fr; }
  .story-notebook-info summary { padding:9px 12px; }
  .story-notebook-info-grid { grid-template-columns:1fr; padding:3px 12px 12px; }
  .story-notebook-about { grid-column:auto; }
  .story-capture-status-row { padding:6px 12px; flex-direction:column; gap:3px; }
  .story-capture-pager { padding:7px 12px; position:sticky; top:0; z-index:5; }
  .story-capture-pager button { padding:8px 9px; }
  .story-capture-footer { position:relative; flex:0 0 auto; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:7px; box-shadow:0 -5px 18px rgba(0,0,0,.06); }
  .story-capture-footer .wizard-next { grid-column:1/-1; order:-1; }
  .story-capture-layout { min-height:0; }
}

/* ============================================================
   2.0 ALPHA 9.4 · FIELD NOTES / ZINE MACHINE LINKAGE
   ============================================================ */
.thumbnail-story-badge {
  margin: 3px 0 2px;
  padding: 2px 4px;
  border: 1px solid #111;
  font: 8px/1.25 "Courier New", monospace;
  letter-spacing: .04em;
  text-align: center;
  background: #fff;
  color: #111;
}
.story-photo-thumbnail .remove-photo:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.sticky-preview-canvas .story-photo-page img,
.fullscreen-review-canvas .story-photo-page img {
  image-rendering: auto;
}


/* ============================================================
   2.0 ALPHA 9.9 · STORY TEXT PAGE MODE
   ============================================================ */
.sticky-preview-raster {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:block;
  max-width:none;
  max-height:none;
  image-rendering:auto;
  pointer-events:none;
}
.sticky-preview-rendering {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font:9px/1.3 "Courier New",monospace;
  letter-spacing:.06em;
  color:#aaa;
}


/* ============================================================
   2.0 ALPHA 9.9 · STORY TEXT PAGE MODE
   Text pages are a distinct entry type. Photo capture controls
   disappear instead of looking disabled. Metadata stays optional.
   ============================================================ */
.story-capture-dialog.story-text-mode .story-capture-photo-box,
.story-capture-dialog.story-text-mode .story-capture-photo-actions { display:none !important; }
.story-capture-dialog.story-text-mode .story-capture-main { padding-top:20px; }
.story-capture-dialog.story-text-mode #storyCaptureNoteField textarea { min-height:260px; }
.story-capture-dialog.story-text-mode #storyCaptureNoteField { margin-top:0; }
@media (max-width:800px), (pointer:coarse) {
  .story-capture-dialog.story-text-mode #storyCaptureNoteField textarea { min-height:42vh; }
}


/* ============================================================
   2.0 ALPHA 9.11 · MOBILE READING REVIEW + STORY PREVIEW
   ============================================================ */
.story-capture-header-actions { display:flex; gap:8px; align-items:center; }
.story-capture-read { border:1px solid #111; background:#fff; color:#111; padding:9px 12px; font:700 10px/1 "Courier New",monospace; cursor:pointer; }
.story-capture-read:hover { background:#111; color:#fff; }

.fullscreen-review-reading-controls { display:flex; align-items:center; gap:5px; margin-left:auto; margin-right:8px; }
.fullscreen-review-reading-controls.hidden { display:none !important; }
.fullscreen-review-reading-controls button { min-width:38px; min-height:31px; border:1px solid rgba(255,255,255,.55); background:transparent; color:#fff; font:700 9px/1 "Courier New",monospace; padding:6px 8px; }
.fullscreen-review-reading-controls button.active { background:#fff; color:#111; }
.fullscreen-review.reading-review .fullscreen-review-viewport { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.fullscreen-review.reading-review .fullscreen-review-canvas .zine-page { pointer-events:none; }

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-header { align-items:center; }
  .story-capture-header-actions { gap:6px; }
  .story-capture-read { padding:8px 10px; }
  .fullscreen-review.reading-review .fullscreen-review-topbar { gap:6px; padding:0 8px; }
  .fullscreen-review.reading-review .fullscreen-review-title { display:none; }
  .fullscreen-review-reading-controls { margin:0 auto 0 0; gap:4px; }
  .fullscreen-review-reading-controls button { min-width:34px; padding:6px; }
  .fullscreen-review.reading-review .fullscreen-review-viewport { left:0; right:0; bottom:38px; background:#1b1b1b; }

  /* The responsive editor preview used fixed millimetre deductions for story
     captions, which made photographs disproportionately small on phones. Keep
     Direct PDF measurement untouched and use relative geometry only for the
     on-screen mobile preview. */
  html:not(.direct-pdf-measurement) #preview .story-photo-page .photo-layout {
    height:72%;
  }
  html:not(.direct-pdf-measurement) #preview .story-photo-page .story-caption {
    left:6%; right:6%; bottom:5%; min-height:0; max-height:20%; overflow:hidden;
  }
  html:not(.direct-pdf-measurement) #preview .story-photo-page .photo-frame img {
    max-height:100%;
  }
}

/* ============================================================
   2.0 ALPHA 9.13 · FIELD NOTES UX + LIBRARY CLEANUP
   Portrait-first mobile reader, pannable zoom and photo view.
   ============================================================ */
.fullscreen-review.reading-review .fullscreen-review-viewport {
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.fullscreen-review.reading-review .fullscreen-review-viewport::-webkit-scrollbar {
  width:0;
  height:0;
  display:none;
}
.fullscreen-review.reading-review .fullscreen-review-canvas {
  overflow:visible;
}
.fullscreen-review.reading-review .fullscreen-review-canvas .zine-page {
  pointer-events:auto;
}
.fullscreen-review.reading-review .fullscreen-review-canvas .zine-page img {
  cursor:zoom-in;
}
.fullscreen-review.reading-review.reading-ui-hidden .fullscreen-review-topbar,
.fullscreen-review.reading-review.reading-ui-hidden .fullscreen-review-page-label,
.fullscreen-review.reading-review.reading-ui-hidden .fullscreen-review-arrow {
  opacity:0;
  pointer-events:none;
}
.fullscreen-review .fullscreen-review-topbar,
.fullscreen-review .fullscreen-review-page-label,
.fullscreen-review .fullscreen-review-arrow {
  transition:opacity .14s ease;
}
.fullscreen-review-rotate-hint {
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1b1b1b;
  color:#fff;
  font-family:"Courier New",monospace;
  font-size:14px;
  letter-spacing:.08em;
  text-align:center;
  padding:24px;
}
.fullscreen-review-photo-view {
  position:absolute;
  inset:0;
  z-index:20;
  background:#111;
}
.fullscreen-review-photo-toolbar {
  position:absolute;
  left:0; right:0; top:0;
  height:52px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:0 12px;
  background:#111;
  border-bottom:1px solid #333;
  z-index:2;
}
.fullscreen-review-photo-toolbar button {
  border:1px solid #aaa;
  background:#111;
  color:#fff;
  border-radius:0;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.06em;
  padding:9px 12px;
}
.fullscreen-review-photo-viewport {
  position:absolute;
  top:52px; left:0; right:0; bottom:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
  display:block;
  background:#111;
}
.fullscreen-review-photo-viewport img {
  display:block;
  max-width:none;
  max-height:none;
  margin:0 auto;
  transform-origin:top left;
  user-select:none;
  -webkit-user-drag:none;
}

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .fullscreen-review.reading-review .fullscreen-review-arrow { display:none; }
  .fullscreen-review.reading-review #fullscreenReviewWidth { display:none; }
  .fullscreen-review.reading-review .fullscreen-review-topbar {
    height:48px;
    min-height:48px;
  }
  .fullscreen-review.reading-review .fullscreen-review-viewport {
    top:48px;
    left:0;
    right:0;
    bottom:38px;
  }
  .fullscreen-review.reading-review .fullscreen-review-reading-controls button {
    min-width:52px;
  }
}


/* ============================================================
   2.0 ALPHA 9.13 · FIELD NOTES DETAILS + LIBRARY CLEANUP
   ============================================================ */
.story-capture-audio { margin:2px 0 10px; border:1px solid #bbb; background:#fafafa; }
.story-capture-audio > summary { cursor:pointer; list-style:none; padding:9px 10px; font:700 10px/1.3 "Courier New",monospace; letter-spacing:.04em; }
.story-capture-audio > summary::-webkit-details-marker { display:none; }
.story-capture-audio > summary::before { content:"▸ "; }
.story-capture-audio[open] > summary::before { content:"▾ "; }
.story-capture-audio-body { padding:10px; border-top:1px solid #ddd; }
.story-capture-audio-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.story-capture-audio-actions button { min-height:38px; }
.story-capture-audio-player, #storyCaptureAudioPlayer { width:100%; margin-top:8px; }
.story-capture-audio-status { margin-top:7px; font:10px/1.35 "Courier New",monospace; color:#666; }
.story-capture-audio-status.recording { color:#b00020; font-weight:700; }
.story-capture-details { margin:2px 0 12px; border:1px solid #bbb; background:#fafafa; }
.story-capture-details > summary { cursor:pointer; list-style:none; padding:9px 10px; font:700 10px/1.3 "Courier New",monospace; letter-spacing:.04em; }
.story-capture-details > summary::-webkit-details-marker { display:none; }
.story-capture-details > summary::before { content:"▸ "; }
.story-capture-details[open] > summary::before { content:"▾ "; }
.story-capture-details-body { padding:10px 10px 0; border-top:1px solid #ddd; }
.field-notes-library-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; min-width:0; }
.field-notes-library-delete { border:1px solid #bbb; background:#fff; padding:8px 10px; font:700 9px "Courier New",monospace; cursor:pointer; }
.field-notes-library-delete:hover:not(:disabled) { background:#111; color:#fff; border-color:#111; }
.field-notes-library-delete:disabled { opacity:.3; cursor:default; }
@media (max-width:800px), (pointer:coarse) {
  .story-capture-details { margin-bottom:10px; }
  .story-capture-details > summary { padding:11px 10px; font-size:11px; }
  .field-notes-library-row { grid-template-columns:minmax(0,1fr) 72px; }
  .field-notes-library-delete { padding:8px 6px; }
}


/* ============================================================
   2.0 ALPHA 9.15 · FIELD NOTES FOCUS / PORTRAIT-FIRST CAPTURE
   ============================================================ */
.story-capture-focus-toggle {
  display:none;
  border:0;
  border-bottom:1px solid #bbb;
  background:#fff;
  padding:8px 12px;
  width:100%;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  text-align:left;
  font:700 10px/1.3 "Courier New",monospace;
  letter-spacing:.04em;
  cursor:pointer;
}
.story-capture-focus-toggle span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Give capture content more visual weight on desktop, too. */
.story-capture-photo-box img { height:min(50vh,470px); }
#storyCaptureNote { min-height:150px; }

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-focus-toggle { display:flex; }
  .story-capture-dialog.story-capture-focus .story-capture-chrome { display:none; }
  .story-capture-dialog.story-capture-focus .story-capture-pager { border-top:0; }
  .story-capture-main { padding-top:10px; }
  .story-capture-photo-box { min-height:240px; }
  .story-capture-photo-box img { height:44vh; max-height:520px; }
  #storyCaptureNote { min-height:180px; }
  .story-capture-dialog.story-capture-focus .story-capture-layout {
    flex:1;
    min-height:0;
  }
}

@media (max-width:800px), (pointer:coarse) {
  .story-capture-audio > summary { padding:11px 10px; font-size:11px; }
  .story-capture-audio-actions { grid-template-columns:1fr 1fr; }
  .story-capture-audio-actions #storyCaptureAudioDelete { grid-column:1 / -1; }
}


/* ============================================================
   2.0 ALPHA 9.19 · FIELD NOTES COLOR / B&W
   ============================================================ */
.story-capture-backup {
  border-style: dashed;
}
.story-capture-backup-hint {
  margin: 0 0 12px;
  padding: 0 2px;
  font: 600 10px/1.35 var(--mono);
  letter-spacing: .04em;
  color: #666;
  text-align: right;
}
@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  .story-capture-footer .story-capture-backup {
    grid-column: 1 / -1;
  }
  .story-capture-backup-hint {
    text-align: center;
    margin-bottom: 8px;
  }
}


/* ============================================================
   2.0 ALPHA 9.19 · FIELD NOTES COLOR / B&W
   Reuses the normal per-photo B&W state. Originals stay untouched.
   ============================================================ */
.story-capture-image-style {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:-8px 0 12px; padding:8px 10px; border:1px solid #bbb; background:#fafafa;
  font:700 10px/1.3 "Courier New",monospace; letter-spacing:.04em;
}
.story-capture-image-style-buttons { display:grid; grid-template-columns:1fr 1fr; gap:6px; min-width:230px; }
.story-capture-image-style-buttons button {
  min-height:34px; border:1px solid #111; background:#fff; color:#111;
  font:700 10px/1 "Courier New",monospace; cursor:pointer;
}
.story-capture-image-style-buttons button.active { background:#111; color:#fff; }
.story-capture-photo-box.story-preview-bw img { filter:grayscale(100%); }
.story-capture-dialog.story-text-mode .story-capture-image-style { display:none !important; }
@media (max-width:800px), (pointer:coarse) {
  .story-capture-image-style { margin:-4px 0 12px; padding:9px 10px; }
  .story-capture-image-style-buttons { min-width:0; width:52%; }
  .story-capture-image-style-buttons button { min-height:42px; font-size:12px; }
}

/* ============================================================
   2.0 ALPHA 9.20 · MOBILE ACCESSIBILITY TYPOGRAPHY PASS
   Mobile-only readability improvements. Keep the monochrome UI and
   preserve the existing large option buttons; strengthen labels, helper
   copy and secondary status text instead of introducing a global dark mode.
   ============================================================ */
@media (max-width: 800px), (hover:none) and (pointer:coarse) {
  /* Secondary labels should be readable without zooming. */
  .section-label,
  .cover-option-title,
  .field > label,
  .setting-group > label,
  label:not(.check) {
    color:#222;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:.07em;
  }

  /* Checkbox rows are actionable controls, not faint footnotes. */
  .check {
    min-height:44px;
    color:#222;
    font-size:14px;
    line-height:1.4;
    font-weight:600;
    align-items:flex-start;
    padding:5px 0;
  }
  .check input {
    width:22px;
    height:22px;
    flex:0 0 22px;
    margin-top:0;
    border-color:#777;
  }
  .check input:checked::after {
    left:6px;
    top:2px;
    width:7px;
    height:12px;
  }

  /* Explanatory copy remains secondary, but no longer low-contrast. */
  .help {
    margin-top:10px;
    padding:11px 13px;
    color:#222;
    background:#f2f2f2;
    border-left:4px solid #111;
    font-size:13px;
    line-height:1.5;
    letter-spacing:.025em;
  }

  /* Status / metadata text should stay compact yet legible. */
  .cover-status,
  .status,
  .project-status,
  .photo-info,
  .photo-meta,
  .resolution-warning,
  .bleed-warning {
    color:#333;
    font-size:12.5px;
    line-height:1.45;
  }

  .cover-status.resolution-good { color:#222; }
  .cover-status.resolution-ok { color:#6f5200; }

  /* Keep major section headings strong without making the whole UI larger. */
  .control-section-heading {
    color:#111;
    font-size:15px;
    font-weight:700;
  }

  /* Form controls should not fall below comfortable mobile reading size. */
  input[type="text"],
  input[type="number"],
  textarea,
  select {
    font-size:16px;
  }

  /* Small utility copy remains visibly secondary but avoids very pale gray. */
  .label-row > span:last-child,
  .bleed-unit,
  .app-version {
    color:#555;
  }
}


/* ============================================================
   2.0 ALPHA 9.21 · MOBILE HIGH-CONTRAST READABILITY PASS
   Stronger than 9.20: remove the decorative side bars, use true black
   for actionable labels and checkbox copy, and render explanatory help
   as high-contrast black cards. Mobile only; desktop unchanged.
   ============================================================ */
@media (max-width: 800px), (hover:none) and (pointer:coarse) {
  /* Local control labels: make them as readable as the large option buttons. */
  .section-label,
  .cover-option-title,
  .field > label,
  .setting-group > label,
  label:not(.check) {
    color:#000 !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    letter-spacing:.045em !important;
    opacity:1 !important;
  }

  /* Checkbox options are primary choices on mobile, not secondary copy. */
  .check,
  .check span {
    color:#000 !important;
    font-size:16px !important;
    font-weight:650 !important;
    line-height:1.35 !important;
    letter-spacing:.035em !important;
    opacity:1 !important;
  }
  .check {
    min-height:52px;
    gap:12px;
    padding:9px 0;
  }
  .check input {
    width:24px;
    height:24px;
    flex-basis:24px;
    border-color:#444;
  }

  /* Explanatory text: high contrast instead of faint gray and side bars. */
  .help {
    margin-top:10px;
    padding:14px 16px;
    color:#fff !important;
    background:#111 !important;
    border:0 !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.55 !important;
    letter-spacing:.015em !important;
    opacity:1 !important;
  }

  /* Section headings and compact metadata also need full contrast. */
  .control-section-heading {
    color:#000 !important;
    font-size:16px !important;
    font-weight:800 !important;
    letter-spacing:.11em !important;
  }
  .cover-status,
  .status,
  .project-status,
  .photo-info,
  .photo-meta,
  .resolution-warning,
  .bleed-warning,
  .label-row > span:last-child,
  .bleed-unit {
    color:#111 !important;
    opacity:1 !important;
    font-size:14px !important;
    line-height:1.4 !important;
  }

  /* Keep version subordinate, but not washed out. */
  .app-version { color:#444 !important; opacity:1 !important; }
}


/* ============================================================
   2.0 ALPHA 9.22 · FIELD NOTES MOBILE QUICK-CAPTURE ACCESSIBILITY
   Field Notes should be even easier than the main Zine Machine on
   phones: larger writing text, darker copy and more tap-friendly
   controls for rapid note entry. Desktop remains unchanged.
   ============================================================ */
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-header {
    padding:14px 16px 12px;
  }
  .story-capture-header h2 {
    font-size:22px;
    letter-spacing:.04em;
  }
  .story-capture-header .project-start-kicker,
  .story-capture-focus-toggle,
  .story-capture-status-row,
  .story-capture-pager span,
  .story-capture-backup-hint {
    color:#111 !important;
    font-size:12.5px !important;
    line-height:1.45 !important;
    letter-spacing:.04em !important;
    opacity:1 !important;
  }
  .story-capture-intro {
    padding:12px 16px;
    background:#f6f6f6;
    color:#111;
    font-size:13px;
    line-height:1.55;
  }

  .story-notebook-info summary,
  .story-capture-audio > summary,
  .story-capture-details > summary,
  .wizard-subheading {
    color:#000 !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:.05em !important;
  }
  .story-notebook-info summary {
    padding:12px 16px;
  }
  .story-capture-audio,
  .story-capture-details {
    margin:4px 0 14px;
    border-color:#111;
    background:#fff;
  }
  .story-capture-audio > summary,
  .story-capture-details > summary {
    padding:14px 14px;
  }
  .story-capture-audio-body,
  .story-capture-details-body {
    padding:14px;
    border-top-color:#111;
  }

  .story-capture-field {
    gap:7px;
    margin:0 0 16px;
    color:#000;
    font-size:13px;
  }
  .story-capture-field span,
  .story-capture-field em {
    color:#000 !important;
    opacity:1 !important;
  }
  .story-capture-field em {
    font-weight:500;
  }
  .story-capture-field input,
  .story-capture-field textarea {
    border:2px solid #111;
    padding:14px 16px;
    color:#111;
    font:400 18px/1.55 Arial,sans-serif;
  }
  .story-capture-field input::placeholder,
  .story-capture-field textarea::placeholder {
    color:#666;
    opacity:1;
  }
  #storyCaptureNote {
    min-height:52vh;
    font-size:19px;
    line-height:1.6;
  }
  .story-capture-dialog.story-text-mode #storyCaptureNoteField textarea {
    min-height:56vh;
  }

  .story-capture-pager {
    padding:10px 12px;
  }
  .story-capture-pager button,
  .story-capture-photo-actions button,
  .story-capture-inline,
  .story-capture-footer button,
  .story-capture-read,
  .project-start-close,
  .field-notes-library-head button,
  .field-notes-library-delete {
    min-height:50px;
    padding:11px 12px;
    color:#111;
    font-size:12px;
    line-height:1.2;
    letter-spacing:.045em;
  }
  .story-capture-photo-actions,
  .story-capture-audio-actions {
    gap:8px;
  }
  .story-capture-footer {
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .story-capture-backup-hint {
    margin:2px 0 12px;
    padding:0 10px;
  }

  .story-capture-gps,
  .story-capture-audio-status,
  .field-notes-library-head span,
  .field-notes-library-item span,
  .field-notes-library-empty,
  .story-capture-empty,
  .story-capture-entry-main span {
    color:#333 !important;
    font-size:12px !important;
    line-height:1.45 !important;
    opacity:1 !important;
  }
  .story-capture-saved {
    padding:14px 12px;
  }
  .story-capture-entry-main {
    padding:10px;
  }
  .story-capture-entry-main strong,
  .field-notes-library-item strong {
    color:#111;
    font-size:14px;
    line-height:1.35;
  }
  .story-capture-entry-thumb {
    width:52px;
    height:52px;
    flex-basis:52px;
  }
}


/* ============================================================
   2.0 ALPHA 9.23 · FIELD NOTES MOBILE MAXIMUM-LEGIBILITY PASS
   Push Field Notes harder toward oversized, high-readability mobile
   capture controls. Favor clarity over compactness. Desktop unchanged.
   ============================================================ */
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-field {
    font-size:14px;
    gap:8px;
    margin:0 0 18px;
  }
  .story-capture-field input,
  .story-capture-field textarea {
    padding:16px 18px;
    font:400 20px/1.6 Arial,sans-serif;
  }
  #storyCaptureNote {
    min-height:56vh;
    font-size:22px;
    line-height:1.65;
  }
  .story-capture-dialog.story-text-mode #storyCaptureNoteField textarea {
    min-height:60vh;
  }

  .story-capture-pager button,
  .story-capture-photo-actions button,
  .story-capture-inline,
  .story-capture-footer button,
  .story-capture-read,
  .project-start-close,
  .field-notes-library-head button,
  .field-notes-library-delete,
  .story-capture-audio-actions button,
  .story-capture-image-style-buttons button {
    min-height:58px;
    padding:13px 14px;
    font-size:14px !important;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.045em;
  }

  .story-capture-pager {
    gap:10px;
    padding:12px;
  }
  .story-capture-pager span {
    font-size:14px !important;
    font-weight:700 !important;
  }

  .story-capture-audio > summary,
  .story-capture-details > summary,
  .story-notebook-info summary,
  .wizard-subheading {
    font-size:15px !important;
    line-height:1.4 !important;
  }

  .story-capture-backup-hint,
  .story-capture-status-row,
  .story-capture-intro,
  .story-capture-gps,
  .story-capture-audio-status,
  .field-notes-library-head span,
  .field-notes-library-item span,
  .field-notes-library-empty,
  .story-capture-empty,
  .story-capture-entry-main span {
    font-size:13px !important;
    line-height:1.5 !important;
  }

  .story-capture-entry-main strong,
  .field-notes-library-item strong {
    font-size:15px;
    line-height:1.4;
  }
}


/* ============================================================
   2.0 ALPHA 9.25 · FIELD NOTES MOBILE SPACE / ACCESSIBILITY BALANCE
   Branch from 9.23. Keep the highly readable note editor, but remove
   nonessential mobile chrome and compact secondary controls. The
   portable .zineproj backup remains directly available inside Field
   Notes under SHOW, beside READ / WORK IN ZINE MACHINE.
   ============================================================ */
.story-capture-backup-hint-mobile { display:none; }
.story-capture-header-backup {
  border:1px solid #111;
  background:#fff;
  color:#111;
  font-family:"Courier New",monospace;
  font-weight:700;
  cursor:pointer;
}
.story-capture-header-backup:hover { background:#111; color:#fff; }

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  /* READ replaces entry-by-entry preview navigation on phones. */
  .story-capture-pager { display:none !important; }

  /* Keep the 9.23 writing experience: the NOTE remains the hero control. */
  #storyCaptureNote {
    min-height:56vh;
    font-size:22px;
    line-height:1.65;
  }

  /* Expanded metadata is useful, but should not become an XXL form. */
  .story-capture-details > summary,
  .story-capture-audio > summary {
    padding:11px 12px;
    font-size:14px !important;
    line-height:1.35 !important;
  }
  .story-capture-details-body,
  .story-capture-audio-body {
    padding:11px 11px 4px;
  }
  .story-capture-details .story-capture-field,
  .story-capture-audio .story-capture-field {
    min-width:0;
    margin-bottom:12px;
    font-size:13px;
  }
  .story-capture-details .story-capture-field input,
  .story-capture-details .story-capture-field textarea {
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:11px 13px;
    font-size:17px;
    line-height:1.45;
  }
  .story-capture-details .story-capture-inline,
  .story-capture-audio-actions button {
    min-height:48px;
    padding:10px 12px;
    font-size:12.5px !important;
  }
  .story-capture-row,
  .story-capture-meta-row { min-width:0; }
  .story-capture-meta-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .story-capture-meta-row .story-capture-field { min-width:0; }
  .story-capture-meta-row .story-capture-inline { grid-column:1 / -1; }

  /* SAVE + NEXT stays primary and large; creation buttons are secondary. */
  .story-capture-footer {
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    gap:7px;
  }
  .story-capture-footer .wizard-next {
    min-height:58px;
    padding:13px 14px;
    font-size:14px !important;
  }
  .story-capture-footer #storyCaptureNewCapture,
  .story-capture-footer #storyCaptureNewText {
    min-height:50px;
    padding:10px 9px;
    font-size:12.5px !important;
    line-height:1.2;
  }

  /* Portable backup remains one tap away after opening SHOW. */
  .story-capture-header-actions {
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .story-capture-header-backup {
    min-height:44px !important;
    padding:9px 10px !important;
    font-size:11.5px !important;
    letter-spacing:.035em;
  }

  /* The full backup explanation is unnecessary in the capture footer. */
  .story-capture-backup-hint-full { display:none; }
  .story-capture-backup-hint-mobile { display:inline; }
  .story-capture-backup-hint {
    margin:0 0 8px;
    padding:0 10px;
    font-size:11.5px !important;
    line-height:1.3 !important;
  }

  /* Do not spend screen height on an empty Saved Entries section. */
  .story-capture-saved:has(.story-capture-empty) { display:none; }
}


/* ============================================================
   2.0 ALPHA 10.0 · TRAVEL DIARY
   Field Notes capture engine + travel-specific generated pages.
   Covers/back covers remain normal Zine Machine features.
   ============================================================ */
.story-travel-options { grid-column:1/-1; border:1px solid #111; background:#fff; padding:10px 12px; font-family:"Courier New",monospace; }
.story-travel-options-title { margin-bottom:8px; font-size:10px; font-weight:700; letter-spacing:.06em; }
.story-travel-options label { display:flex; align-items:flex-start; gap:9px; padding:6px 0; font-size:10px; line-height:1.35; cursor:pointer; }
.story-travel-options input { width:18px; height:18px; flex:0 0 18px; margin:0; }

.travel-day-divider-page { position:relative; }
.travel-day-divider-wrap { position:absolute; inset:18%; display:flex; flex-direction:column; justify-content:center; border-top:1px solid var(--page-fg); border-bottom:1px solid var(--page-fg); text-align:center; }
.travel-day-divider-kicker { font:8px/1.4 "Courier New",monospace; letter-spacing:.14em; color:var(--page-muted); }
.travel-day-divider-date { margin-top:8mm; font:700 28px/1.15 Arial,sans-serif; letter-spacing:.02em; color:var(--page-fg); }

.travel-route-page { position:relative; padding:calc(var(--bleed) + 16mm) calc(var(--bleed) + 14mm); box-sizing:border-box; }
.travel-route-title { font:700 25px/1 Arial,sans-serif; letter-spacing:.03em; color:var(--page-fg); }
.travel-route-subtitle { margin-top:3mm; font:7px/1.35 "Courier New",monospace; letter-spacing:.08em; color:var(--page-muted); }
.travel-route-list { margin-top:10mm; display:flex; flex-direction:column; gap:3mm; }
.travel-route-stop { min-height:25mm; display:grid; grid-template-columns:10mm minmax(0,1fr) 22mm; gap:4mm; align-items:center; border-top:1px solid var(--page-fg); padding-top:3mm; position:relative; }
.travel-route-number { font:700 14px/1 "Courier New",monospace; }
.travel-route-copy { min-width:0; }
.travel-route-copy strong,.travel-route-copy span { display:block; overflow-wrap:anywhere; }
.travel-route-copy strong { font:700 12px/1.25 Arial,sans-serif; }
.travel-route-copy span { margin-top:2mm; font:7px/1.35 "Courier New",monospace; color:var(--page-muted); }
.travel-route-qr { width:20mm; height:20mm; }
.travel-route-qr img,.travel-route-qr canvas { width:100% !important; height:100% !important; display:block; }

.travel-contact-sheet-page { padding-bottom:calc(var(--bleed) + 10mm); }
.travel-contact-grid { position:absolute; left:calc(var(--bleed) + 10mm); right:calc(var(--bleed) + 10mm); top:calc(var(--bleed) + 27mm); bottom:calc(var(--bleed) + 12mm); display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); gap:5mm 4mm; }
.travel-contact-item { position:relative; min-width:0; display:grid; grid-template-rows:minmax(0,1fr) auto auto; }
.travel-contact-image { min-height:0; overflow:hidden; background:#eee; border:1px solid var(--page-muted); }
.travel-contact-image img { width:100%; height:100%; object-fit:cover; display:block; }
.travel-contact-number { margin-top:1.5mm; font:700 7px/1 "Courier New",monospace; }
.travel-contact-meta { margin-top:1mm; min-height:7mm; white-space:pre-line; overflow:hidden; font:6px/1.25 "Courier New",monospace; color:var(--page-muted); }

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-travel-options { padding:12px; }
  .story-travel-options-title { font-size:13px; }
  .story-travel-options label { min-height:42px; padding:7px 0; gap:11px; font-size:13px; line-height:1.4; color:#111; }
  .story-travel-options input { width:22px; height:22px; flex-basis:22px; }
}


/* ============================================================
   2.0 ALPHA 10.2 · TRAVEL ROUTE LINKS / HUMAN-READABLE STOPS
   ============================================================ */
.travel-route-copy .travel-route-coordinates {
  margin-top:1.2mm;
  font:6.5px/1.35 "Courier New",monospace;
  color:var(--page-muted);
}
.travel-route-links {
  display:flex;
  flex-wrap:wrap;
  gap:2mm 4mm;
  margin-top:2.2mm;
}
.travel-route-link {
  color:var(--page-fg);
  text-decoration:underline;
  text-underline-offset:1px;
  font:700 7px/1.2 "Courier New",monospace;
  letter-spacing:.03em;
}
.travel-route-link:hover { text-decoration-thickness:2px; }


/* ============================================================
   2.0 ALPHA 10.3 · LOCATION SCOUTING / REUSABLE QUICK LINKS
   ============================================================ */
.story-scout-options { margin:10px 0 0; border-top:1px solid #bbb; padding-top:0; }
.story-scout-options > summary { cursor:pointer; list-style:none; padding:11px 2px 4px; color:#111; font:700 10px/1.3 "Courier New",monospace; letter-spacing:.05em; }
.story-scout-options > summary::-webkit-details-marker { display:none; }
.story-scout-options > summary::before { content:"▸ "; }
.story-scout-options[open] > summary::before { content:"▾ "; }
.story-scout-options-body { padding-top:4px; }
.story-scout-hint { margin:4px 0 10px; color:#555; font:10px/1.45 "Courier New",monospace; }
.story-scout-link-settings { display:grid; grid-template-columns:160px minmax(0,1fr); gap:7px 10px; }
.story-scout-link-settings label { display:flex; flex-direction:column; gap:4px; font:700 10px/1.3 "Courier New",monospace; }
.story-scout-link-settings input { border:1px solid #111; background:#fff; color:#111; padding:9px 10px; font:14px/1.35 Arial,sans-serif; min-width:0; }
.story-scout-quick-links { margin:0 0 16px; border:1px solid #111; background:#fafafa; padding:10px; }
.story-scout-quick-links-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font:700 10px/1.3 "Courier New",monospace; letter-spacing:.05em; }
.story-scout-quick-links-head button { border:1px solid #111; background:#fff; min-height:32px; padding:5px 9px; font:700 9px/1 "Courier New",monospace; cursor:pointer; }
.story-scout-quick-link-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.story-scout-quick-link { min-height:44px; border:1px solid #111; background:#fff; color:#111; padding:9px 10px; font:700 11px/1.2 "Courier New",monospace; cursor:pointer; overflow:hidden; text-overflow:ellipsis; }
.story-scout-quick-link:hover { background:#111; color:#fff; }
.story-scout-quick-link.empty { grid-column:1/-1; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-scout-options > summary { padding:14px 2px 8px; font-size:13px; }
  .story-scout-options-body { padding-top:2px; }
  .story-scout-link-settings { grid-template-columns:1fr; gap:5px; }
  .story-scout-link-settings label:nth-child(even) { margin-bottom:8px; }
  .story-scout-hint { color:#111; font-size:12px; line-height:1.5; }
  .story-scout-link-settings label { color:#000; font-size:13px; }
  .story-scout-link-settings input { border-width:2px; padding:13px 14px; font-size:17px; }
  .story-scout-quick-links { padding:11px; margin-bottom:18px; background:#fff; }
  .story-scout-quick-links-head { font-size:13px; }
  .story-scout-quick-links-head button { min-height:44px; padding:9px 12px; font-size:11px; }
  .story-scout-quick-link { min-height:54px; font-size:14px; padding:11px 12px; }
}


/* ============================================================
   2.0 ALPHA 10.6 · SHARED DIARY QUICK LINKS
   The Quick Links toolbar is now common to Field Notes, Travel Diary and
   Location Scouting. Existing 10.3–10.5 styling remains intentionally
   unchanged; GPS placeholders stay a Location Scouting-only enhancement.
   ============================================================ */


/* ============================================================
   2.0 ALPHA 10.7 · MOBILE LIVE MAP PREVIEW
   OpenFreeMap + MapLibre. Screen-only orientation aid for Travel Diary and
   Location Scouting; never exported into zine/PDF pages.
   ============================================================ */
.story-map-preview-wrap { display:none; }
.story-map-overlay { display:none; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-map-preview-wrap {
    display:block;
    margin:10px 0 4px;
    border:2px solid #111;
    background:#fff;
  }
  .story-map-preview-wrap.hidden { display:none !important; }
  .story-map-preview-head {
    min-height:38px;
    padding:8px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #111;
    color:#111;
    font:700 11px/1.25 "Courier New",monospace;
    letter-spacing:.04em;
  }
  .story-map-preview-head span:last-child { font-size:10px; font-weight:400; }
  .story-map-preview-stage {
    position:relative;
  }
  .story-map-preview {
    width:100%;
    height:210px;
    background:#eee;
    touch-action:none;
  }
  .story-map-preview-expand {
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:5;
    display:block;
    border:1px solid #111;
    border-radius:0;
    background:rgba(255,255,255,.94);
    color:#111;
    padding:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .story-map-preview-expand span {
    display:block;
    padding:7px 9px;
    background:transparent;
    font:700 10px/1 "Courier New",monospace;
    letter-spacing:.04em;
    pointer-events:none;
  }
  .story-map-preview-expand:focus-visible {
    outline:3px solid #111;
    outline-offset:2px;
  }
  .story-map-preview-head {
    cursor:pointer;
  }
  .story-map-unavailable .story-map-preview::after {
    content:"MAP PREVIEW UNAVAILABLE";
    display:flex;
    height:100%;
    align-items:center;
    justify-content:center;
    font:700 12px/1.3 "Courier New",monospace;
  }
  .story-map-overlay {
    position:fixed;
    inset:0;
    z-index:2600;
    background:#fff;
    flex-direction:column;
  }
  .story-map-overlay:not(.hidden) { display:flex; }
  .story-map-overlay-bar {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
    border-bottom:2px solid #111;
    background:#fff;
    color:#111;
    font:700 11px/1.25 "Courier New",monospace;
    letter-spacing:.04em;
  }
  .story-map-overlay-actions { display:flex; gap:7px; }
  .story-map-overlay-actions button {
    min-height:44px;
    border:1px solid #111;
    background:#fff;
    color:#111;
    padding:8px 10px;
    font:700 11px/1 "Courier New",monospace;
  }
  .story-map-fullscreen { flex:1 1 auto; min-height:0; width:100%; }
  body.story-map-open { overflow:hidden; touch-action:none; }
  .story-map-overlay .maplibregl-ctrl-attrib,
  .story-map-preview .maplibregl-ctrl-attrib { font-size:9px; }
  .story-map-overlay .maplibregl-ctrl-top-right { top:8px; right:8px; }
}


/* ============================================================
   2.0 ALPHA 10.8 · HARDCORE DIARY
   Aesthetic commitment at notebook creation: COLOR or dramatic NOIR.
   The look is deliberately locked for the life of the notebook.
   ============================================================ */
.hardcore-look-picker {
  margin:10px 0 0; padding:12px; border:1px solid #111; background:#fafafa;
  font:700 11px/1.35 "Courier New",monospace; letter-spacing:.05em;
}
.hardcore-look-picker > span { display:block; margin-bottom:8px; }
.hardcore-look-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hardcore-look-buttons button {
  min-height:44px; border:1px solid #111; background:#fff; color:#111;
  font:700 12px/1 "Courier New",monospace; letter-spacing:.06em; cursor:pointer;
}
.hardcore-look-buttons button.active { background:#111; color:#fff; }
body.hardcore-diary .story-capture-image-style { display:none !important; }
body.hardcore-diary [data-style],
body.hardcore-diary [data-bw-optimization],
body.hardcore-diary .bw-toggle { opacity:.28; pointer-events:none; }
body.hardcore-noir .story-capture-photo-box img {
  filter:grayscale(100%) contrast(1.58) brightness(.80);
}
body.hardcore-diary .story-capture-focus-toggle::after {
  content:attr(data-hardcore-badge);
  margin-left:auto; font-weight:700; white-space:nowrap;
}
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .hardcore-look-picker { padding:14px; font-size:13px; }
  .hardcore-look-buttons button { min-height:54px; font-size:15px; }
}

body.hardcore-noir .thumbnail img,
body.hardcore-noir .story-capture-entry-thumb {
  filter:grayscale(100%) contrast(1.58) brightness(.80);
}

/* ALPHA 10.9 · DAY STORY / HARDCORE RUN */
.hardcore-setup-label{margin:13px 0 7px;font-size:10px;letter-spacing:.08em}.hardcore-minimum-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.hardcore-minimum-buttons button{min-height:42px;border:1px solid #111;background:#fff;color:#111;font:700 11px/1 "Courier New",monospace}.hardcore-minimum-buttons button.active{background:#111;color:#fff}.hardcore-photographer-field{display:block;margin-top:13px}.hardcore-photographer-field span{display:block;margin-bottom:6px}.hardcore-photographer-field input{width:100%;box-sizing:border-box;border:1px solid #111;padding:10px;font:15px/1.35 Arial,sans-serif}.hardcore-start-rule{margin-top:12px;padding-top:10px;border-top:1px solid #bbb;font:10px/1.45 "Courier New",monospace}.hardcore-frame-status{width:100%;text-align:center;font-family:"Courier New",monospace}.hardcore-frame-status strong,.hardcore-frame-status span{display:block}.hardcore-frame-status strong{font-size:24px}.hardcore-frame-status span{margin-top:9px;font-size:11px;color:#555}
body.hardcore-run-active .story-capture-chrome,body.hardcore-run-active .story-capture-pager,body.hardcore-run-active .story-scout-quick-links,body.hardcore-run-active #storyCaptureNoteField,body.hardcore-run-active #storyCaptureAudio,body.hardcore-run-active #storyCaptureDetails,body.hardcore-run-active .story-capture-saved,body.hardcore-run-active #storyCaptureAddPhoto,body.hardcore-run-active #storyCaptureRemovePhoto,body.hardcore-run-active #storyCaptureNewCapture,body.hardcore-run-active #storyCaptureNewText,body.hardcore-run-active .story-capture-image-style,body.hardcore-run-active .story-capture-backup-hint{display:none!important}body.hardcore-run-active .story-capture-layout{display:block}body.hardcore-run-active .story-capture-photo-actions{grid-template-columns:1fr;margin-bottom:0}body.hardcore-run-active #storyCaptureTakePhoto{display:block!important;grid-column:1/-1;min-height:64px;font-size:16px}body.hardcore-run-active .story-capture-photo-box{min-height:180px;background:#fafafa}body.hardcore-run-active .story-capture-footer{grid-template-columns:2fr 1fr}body.hardcore-run-active #storyCaptureSaveNext{grid-column:auto;order:0;min-height:64px}body.hardcore-run-active #storyHardcoreEndRun{display:block!important;min-height:64px}
.hardcore-cover-wrap{position:absolute;inset:var(--bleed);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:14%;box-sizing:border-box}.hardcore-cover-badge{border:2px solid currentColor;padding:5mm 7mm;font:700 15px/1 "Courier New",monospace;letter-spacing:.12em}.hardcore-cover-look{margin-top:10mm;font:700 34px/1 Arial,sans-serif;letter-spacing:.08em}.hardcore-cover-date{margin-top:8mm;font:10px/1.4 "Courier New",monospace}.hardcore-cover-photographer{margin-top:4mm;font:10px/1.4 "Courier New",monospace}.hardcore-frame-meta{position:absolute;left:calc(var(--bleed) + 10mm);bottom:calc(var(--bleed) + 7mm);font:6.5px/1.25 "Courier New",monospace;color:var(--page-muted)}.hardcore-end-wrap{position:absolute;inset:var(--bleed);display:flex;flex-direction:column;align-items:center;justify-content:center}.hardcore-end-title{font:700 24px/1 Arial,sans-serif}.hardcore-end-meta{margin-top:8mm;font:8px/1.4 "Courier New",monospace}
@media(max-width:800px),(hover:none) and (pointer:coarse){.hardcore-minimum-buttons button{min-height:52px;font-size:13px}.hardcore-photographer-field input{min-height:52px;font-size:18px}body.hardcore-run-active .story-capture-main{padding:14px}body.hardcore-run-active .story-capture-photo-box{min-height:26vh}body.hardcore-run-active .story-capture-footer{position:sticky;bottom:0;background:#fff;padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:8px}}


/* ============================================================
   2.0 ALPHA 10.10 · HARDCORE RUN SEAL / OUTPUT
   Completed runs are read-only. The sealed session can be reviewed,
   exported as a dedicated black Hardcore PDF, or cloned into a normal
   editable Zine Machine project without altering the original run.
   ============================================================ */
.story-hardcore-complete-panel{margin:auto;max-width:760px;width:calc(100% - 40px);box-sizing:border-box;border:2px solid #111;padding:28px;background:#fff;color:#111;text-align:center}.story-hardcore-complete-kicker{font:700 11px/1.4 "Courier New",monospace;letter-spacing:.12em}.story-hardcore-complete-panel h3{margin:16px 0 8px;font:700 34px/1 Arial,sans-serif;letter-spacing:.05em}.story-hardcore-complete-panel>p{font:12px/1.5 "Courier New",monospace;letter-spacing:.05em}.story-hardcore-complete-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}.story-hardcore-complete-actions button{min-height:56px;border:1px solid #111;background:#fff;color:#111;padding:12px;font:700 12px/1.25 "Courier New",monospace;letter-spacing:.05em;cursor:pointer}.story-hardcore-complete-actions .hardcore-primary{grid-column:1/-1;background:#111;color:#fff}.story-hardcore-complete-note{margin:18px 0 0!important;color:#555}.hardcore-run-ended .story-capture-layout,.hardcore-run-ended .story-capture-footer,.hardcore-run-ended .story-capture-chrome,.hardcore-run-ended .story-capture-pager,.hardcore-run-ended .story-capture-backup-hint{display:none!important}.hardcore-run-ended .story-hardcore-complete-panel{display:block!important}.hardcore-run-ended .story-capture-dialog{justify-content:center;overflow:auto}

/* Dedicated Hardcore PDF visual treatment. This class exists only while
   exporting; the normal Reader remains the neutral archival view. */
body.hardcore-pdf-theme .hardcore-cover-page,
body.hardcore-pdf-theme .hardcore-photo-page,
body.hardcore-pdf-theme .hardcore-end-page{background:#000!important;color:#fff!important;--page-bg:#000;--page-fg:#fff;--page-muted:#fff}
body.hardcore-pdf-theme .hardcore-photo-page .photo-frame{background:#000!important;border:1px solid #fff!important}
body.hardcore-pdf-theme .hardcore-frame-meta,
body.hardcore-pdf-theme .hardcore-end-meta{color:#fff!important}
body.hardcore-pdf-theme .hardcore-cover-badge{border-color:#fff!important}

@media(max-width:800px),(hover:none) and (pointer:coarse){.story-hardcore-complete-panel{width:calc(100% - 24px);padding:22px 14px}.story-hardcore-complete-panel h3{font-size:30px}.story-hardcore-complete-actions{grid-template-columns:1fr}.story-hardcore-complete-actions .hardcore-primary{grid-column:auto}.story-hardcore-complete-actions button{min-height:60px;font-size:14px}}


/* ============================================================
   2.0 ALPHA 10.11 · HARDCORE FINAL PRESENTATION + DIARY ACCESS
   ============================================================ */
/* Completed Hardcore presentation is black in Reader/Preview as well as PDF. */
body.hardcore-diary .hardcore-cover-page,
body.hardcore-diary .hardcore-photo-page,
body.hardcore-diary .hardcore-end-page,
body.hardcore-pdf-theme .hardcore-cover-page,
body.hardcore-pdf-theme .hardcore-photo-page,
body.hardcore-pdf-theme .hardcore-end-page {
  background:#000 !important; color:#fff !important; --page-bg:#000; --page-fg:#fff; --page-muted:#fff;
}
body.hardcore-diary .hardcore-photo-page .photo-frame,
body.hardcore-pdf-theme .hardcore-photo-page .photo-frame {background:#000!important;border:1px solid #fff!important;}
body.hardcore-diary .hardcore-cover-wrap,
body.hardcore-diary .hardcore-cover-badge,
body.hardcore-diary .hardcore-cover-title,
body.hardcore-diary .hardcore-cover-look,
body.hardcore-diary .hardcore-cover-date,
body.hardcore-diary .hardcore-cover-photographer,
body.hardcore-diary .hardcore-frame-meta,
body.hardcore-diary .hardcore-end-wrap,
body.hardcore-diary .hardcore-end-title,
body.hardcore-diary .hardcore-end-meta,
body.hardcore-pdf-theme .hardcore-cover-wrap,
body.hardcore-pdf-theme .hardcore-cover-badge,
body.hardcore-pdf-theme .hardcore-cover-title,
body.hardcore-pdf-theme .hardcore-cover-look,
body.hardcore-pdf-theme .hardcore-cover-date,
body.hardcore-pdf-theme .hardcore-cover-photographer,
body.hardcore-pdf-theme .hardcore-frame-meta,
body.hardcore-pdf-theme .hardcore-end-wrap,
body.hardcore-pdf-theme .hardcore-end-title,
body.hardcore-pdf-theme .hardcore-end-meta {color:#fff!important;}
body.hardcore-diary .hardcore-cover-badge, body.hardcore-pdf-theme .hardcore-cover-badge{border-color:#fff!important;}
.hardcore-cover-title{margin-top:12mm;font:700 31px/1.05 Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;}
.hardcore-cover-look{margin-top:7mm;font:700 15px/1 "Courier New",monospace;letter-spacing:.12em;}

/* A direct Library shortcut stays available from every diary. */
.story-capture-focusbar{display:none;}
.story-capture-library-quick{border:0;background:#fff;color:#111;padding:8px 12px;font:700 10px/1.3 "Courier New",monospace;letter-spacing:.04em;cursor:pointer;white-space:nowrap;}

/* Press-and-hold thumbnail peek: large enough to inspect, not a full-screen review. */
.story-entry-peek{position:fixed;z-index:6200;left:50%;top:50%;transform:translate(-50%,-50%);width:min(72vw,420px);height:min(50dvh,520px);padding:8px;background:#111;border:2px solid #fff;box-shadow:0 12px 40px rgba(0,0,0,.38);pointer-events:none;display:flex;align-items:center;justify-content:center;}
.story-entry-peek.hidden{display:none!important;}
.story-entry-peek img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#111;}

/* Desktop Hardcore setup: give the locked-run controls enough room. */
.project-start-dialog.hardcore-selected .project-start-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);align-items:start;}
.project-start-dialog.hardcore-selected .hardcore-look-picker{margin:0;width:auto;box-sizing:border-box;}
.project-start-dialog.hardcore-selected .project-start-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}

@media(max-width:800px),(hover:none) and (pointer:coarse){
  .story-capture-focusbar{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid #bbb;background:#fff;}
  .story-capture-focusbar .story-capture-focus-toggle{display:flex;border-bottom:0;width:100%;min-width:0;}
  .story-capture-library-quick{display:block;border-left:1px solid #bbb;min-height:48px;font-size:11px;}
  .story-entry-peek{width:min(78vw,460px);height:50dvh;}
}
@media(max-width:700px){
  .project-start-dialog.hardcore-selected .project-start-footer{display:flex;flex-direction:column;align-items:stretch;}
  .project-start-dialog.hardcore-selected .project-start-actions{display:grid;grid-template-columns:1fr;gap:8px;}
}

/* ============================================================
   2.0 ALPHA 10.13 · DIARY HELP / MOBILE PEEK / HARDCORE REVIEW
   ============================================================ */
.story-capture-entry-thumb {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
}
/* Reader should preview the finished Hardcore PDF rather than add an editor frame. */
.fullscreen-review.reading-review .hardcore-photo-page .photo-frame {
  border:0 !important;
}
.story-hardcore-complete-actions .hardcore-danger {
  grid-column:1/-1;
  border-color:#777;
  color:#555;
  background:#fff;
}
.story-hardcore-complete-actions .hardcore-danger:hover {
  background:#111;
  color:#fff;
  border-color:#111;
}
.diary-help-overlay {
  position:fixed;
  inset:0;
  z-index:6800;
  background:rgba(0,0,0,.72);
  padding:clamp(10px,3vw,30px);
  overflow:auto;
  box-sizing:border-box;
}
.diary-help-overlay.hidden { display:none!important; }
.diary-help-sheet {
  width:min(1040px,100%);
  margin:0 auto;
  background:#fff;
  color:#111;
  border:2px solid #111;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.diary-help-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid #111;
  font-family:"Courier New",monospace;
}
.diary-help-head span { font:700 10px/1.3 "Courier New",monospace; letter-spacing:.12em; }
.diary-help-head h2 { margin:4px 0 0; font:700 24px/1.05 Arial,sans-serif; }
.diary-help-head button { min-height:42px; border:1px solid #111; background:#fff; padding:9px 12px; font:700 11px/1 "Courier New",monospace; }
.diary-help-body { display:grid; grid-template-columns:minmax(280px,430px) minmax(0,1fr); gap:22px; padding:20px; }
.diary-help-image-wrap { position:relative; border:1px solid #111; background:#eee; overflow:hidden; }
.diary-help-image-wrap img { display:block; width:100%; height:auto; }
.diary-help-marker {
  position:absolute;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#111;
  color:#fff;
  border:2px solid #fff;
  display:grid;
  place-items:center;
  font:700 15px/1 Arial,sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.diary-help-marker::after { content:""; position:absolute; width:38px; height:2px; background:#111; top:50%; left:26px; transform-origin:left center; }
.marker-photo { left:10%; top:37%; }
.marker-links { left:10%; top:64%; }
.marker-save { right:12%; top:80%; }
.marker-save::after { left:auto; right:26px; }
.marker-text { right:12%; top:88%; }
.marker-text::after { left:auto; right:26px; }
.diary-help-steps { margin:0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:none; }
.diary-help-steps li { border:1px solid #bbb; padding:12px 14px; display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:start; }
.diary-help-steps li::before { content:counter(list-item); width:26px; height:26px; display:grid; place-items:center; background:#111; color:#fff; font:700 12px Arial,sans-serif; }
.diary-help-steps strong { font:700 12px/1.3 "Courier New",monospace; }
.diary-help-steps span { grid-column:2; font:14px/1.45 Arial,sans-serif; }
.diary-help-mode-box { margin-top:16px; padding:15px; background:#111; color:#fff; }
.diary-help-mode-box strong { display:block; font:700 13px/1.3 "Courier New",monospace; letter-spacing:.05em; }
.diary-help-mode-box p { margin:8px 0 0; font:14px/1.5 Arial,sans-serif; }
.diary-help-common { margin-top:12px; border-top:1px solid #bbb; padding-top:12px; }
.diary-help-common strong { font:700 11px/1.3 "Courier New",monospace; }
.diary-help-common p { margin:7px 0 0; font:13px/1.5 Arial,sans-serif; }
@media(max-width:800px),(hover:none) and (pointer:coarse){
  .story-capture-focusbar { grid-template-columns:minmax(0,1fr) auto auto; }
  .story-capture-library-quick { padding:8px 10px; }
  .diary-help-overlay { padding:0; background:#fff; }
  .diary-help-sheet { width:100%; min-height:100dvh; border:0; box-shadow:none; }
  .diary-help-head { position:sticky; top:0; z-index:2; background:#fff; padding:14px 12px; }
  .diary-help-head h2 { font-size:20px; }
  .diary-help-body { display:block; padding:12px; }
  .diary-help-visual { max-width:520px; margin:0 auto 16px; }
  .diary-help-steps li { padding:12px; }
  .diary-help-steps span,.diary-help-mode-box p { font-size:15px; }
}


/* ============================================================
   2.0 ALPHA 10.13 · HARDCORE READ PARITY / PEEK POLISH
   Final cleanup before the custom camera work: READ mirrors the black
   Hardcore PDF, and mobile press-and-hold entry peeks no longer flash
   the browser's blue tap/focus highlight.
   ============================================================ */
.story-capture-entry-row,
.story-capture-entry-main,
.story-capture-entry-thumb {
  -webkit-tap-highlight-color: transparent;
}
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-entry-main:active,
  .story-capture-entry-main:focus {
    outline:none;
    box-shadow:none;
  }
}

/* Hardcore READ is a preview of CREATE HARDCORE PDF, not of the neutral
   editor page. Apply the theme directly to the review overlay so it also
   works after reopening a sealed run from the Library. */
.fullscreen-review.hardcore-reader-theme,
.fullscreen-review.hardcore-reader-theme .fullscreen-review-viewport,
.fullscreen-review.hardcore-reader-theme .fullscreen-review-canvas {
  background:#000 !important;
}
.fullscreen-review.hardcore-reader-theme .hardcore-cover-page,
.fullscreen-review.hardcore-reader-theme .hardcore-photo-page,
.fullscreen-review.hardcore-reader-theme .hardcore-end-page {
  --page-background:#000;
  --page-text:#fff;
  --page-muted:#fff;
  --page-bg:#000;
  --page-fg:#fff;
  background:#000 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
.fullscreen-review.hardcore-reader-theme .hardcore-photo-page .photo-frame {
  background:#000 !important;
  border:0 !important;
}
.fullscreen-review.hardcore-reader-theme .hardcore-cover-wrap,
.fullscreen-review.hardcore-reader-theme .hardcore-cover-badge,
.fullscreen-review.hardcore-reader-theme .hardcore-cover-title,
.fullscreen-review.hardcore-reader-theme .hardcore-cover-look,
.fullscreen-review.hardcore-reader-theme .hardcore-cover-date,
.fullscreen-review.hardcore-reader-theme .hardcore-cover-photographer,
.fullscreen-review.hardcore-reader-theme .hardcore-frame-meta,
.fullscreen-review.hardcore-reader-theme .hardcore-end-wrap,
.fullscreen-review.hardcore-reader-theme .hardcore-end-title,
.fullscreen-review.hardcore-reader-theme .hardcore-end-meta {
  color:#fff !important;
}
.fullscreen-review.hardcore-reader-theme .hardcore-cover-badge {
  border-color:#fff !important;
}


/* ============================================================
   2.0 ALPHA 10.14 · HARDCORE READ / MOBILE VIEWER FIX
   Hardcore RUN COMPLETE uses the established fullscreen reader as a
   simple FIT-page viewer: swipe pages, no internal page scrollbars, and
   press-hold a photograph for PHOTO VIEW without the browser callout.
   ============================================================ */
.fullscreen-review.hardcore-reader-theme .fullscreen-review-viewport {
  overflow:hidden !important;
  overscroll-behavior:none;
  touch-action:pan-y;
}
.fullscreen-review.hardcore-reader-theme .fullscreen-review-canvas {
  overflow:hidden !important;
}
.fullscreen-review.hardcore-reader-theme .fullscreen-review-canvas img,
.fullscreen-review-photo-viewport img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
.fullscreen-review.hardcore-reader-theme .fullscreen-review-reading-controls {
  display:none !important;
}


/* ============================================================
   2.0 ALPHA 10.15 · HARDCORE PREVIEW/PDF FRAME PARITY
   ALPHA 10.11 deliberately added a white 1px frame to Hardcore photos.
   The mobile Reader later removed it, leaving desktop/editor Preview
   inconsistent. Hardcore output is now borderless everywhere.
   ============================================================ */
body.hardcore-diary .hardcore-photo-page .photo-frame,
body.hardcore-pdf-theme .hardcore-photo-page .photo-frame,
.fullscreen-review.hardcore-reader-theme .hardcore-photo-page .photo-frame {
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
}


/* ============================================================
   2.0 ALPHA 10.17 · ZINE CAMERA / HARDCORE CAMERA · PHASE 1
   4:3 mobile camera, front/rear, COLOR/NOIR viewfinder, one-shot lock.
   System camera remains available outside Hardcore.
   ============================================================ */
.hardcore-view-picker.hidden{display:none!important}
.zine-camera-overlay{position:fixed;inset:0;z-index:2600;background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
.zine-camera-overlay.hidden{display:none!important}
body.zine-camera-open{overflow:hidden!important}
.zine-camera-shell{width:min(100vw,720px);height:100dvh;max-height:100dvh;background:#080808;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.zine-camera-topbar{min-height:58px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #555;font:700 12px/1.2 "Courier New",monospace;letter-spacing:.07em}
.zine-camera-topbar button,.zine-camera-controls button{border:1px solid #aaa;background:#111;color:#fff;font:700 12px/1 "Courier New",monospace;letter-spacing:.05em}
.zine-camera-topbar button{min-height:40px;padding:8px 12px}
.zine-camera-viewfinder{position:relative;align-self:center;width:100%;aspect-ratio:3/4;max-height:calc(100dvh - 230px);background:#000;overflow:hidden}
.zine-camera-viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;touch-action:none}
.zine-camera-viewfinder.front video{transform:scaleX(-1)}
.zine-camera-viewfinder.noir video{filter:grayscale(100%) contrast(1.58) brightness(.80)}
.zine-camera-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,rgba(255,255,255,.22) 33.2%,rgba(255,255,255,.22) 33.5%,transparent 33.6%,transparent 66.4%,rgba(255,255,255,.22) 66.5%,rgba(255,255,255,.22) 66.8%,transparent 66.9%),linear-gradient(to bottom,transparent 33.1%,rgba(255,255,255,.22) 33.2%,rgba(255,255,255,.22) 33.5%,transparent 33.6%,transparent 66.4%,rgba(255,255,255,.22) 66.5%,rgba(255,255,255,.22) 66.8%,transparent 66.9%)}
.zine-camera-status{position:absolute;left:12px;right:12px;bottom:12px;padding:7px 9px;background:rgba(0,0,0,.7);font:11px/1.35 "Courier New",monospace;text-align:center;letter-spacing:.04em}
.zine-camera-status.ready{opacity:.65}
.zine-camera-controls{padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border-top:1px solid #555}
.zine-camera-controls>button:not(.zine-camera-shutter){min-height:48px;padding:8px}
.zine-camera-look-controls{display:flex;gap:6px;grid-column:1/-1;justify-content:center}
.zine-camera-look-controls button{min-height:38px;padding:7px 11px}
.zine-camera-look-controls button.active{background:#fff;color:#000;border-color:#fff}
.zine-camera-look-controls.locked button:not(.active){display:none}
.zine-camera-shutter{grid-column:2;width:74px;height:74px!important;min-height:74px!important;border:3px solid #fff!important;border-radius:50%!important;padding:6px!important;background:#000!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.zine-camera-shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#fff}
.zine-camera-shutter:disabled{opacity:.45}
.zine-camera-rule{grid-column:1/-1;text-align:center;font:10px/1.3 "Courier New",monospace;letter-spacing:.06em;color:#aaa}
.story-capture-photo-actions #storyCaptureZineCamera{display:block}
body.hardcore-run-active #storyCaptureZineCamera{display:block!important;grid-column:1/-1;min-height:64px;font-size:16px}
body.hardcore-run-active #storyCaptureTakePhoto{display:none!important}
@media(min-width:801px) and (hover:hover){.zine-camera-shell{height:min(900px,96vh);border:1px solid #555}.zine-camera-viewfinder{max-height:620px}.story-capture-photo-actions #storyCaptureZineCamera{display:none}}


/* ============================================================
   2.0 ALPHA 10.18 · ZINE CAMERA MOBILE FIT + DIARY LOOK PREVIEW
   Keep color originals non-destructive, but show the selected B/W/NOIR
   look consistently in the Diary entry preview, saved-entry thumbnail
   and press-and-hold peek. The mobile viewfinder is slightly smaller so
   controls remain comfortably visible on tall phones.
   ============================================================ */
.story-capture-photo-box img.story-image-bw,
.story-capture-entry-thumb.story-image-bw,
.story-entry-peek img.story-image-bw { filter:grayscale(100%); }
.story-capture-photo-box img.story-image-noir,
.story-capture-entry-thumb.story-image-noir,
.story-entry-peek img.story-image-noir { filter:grayscale(100%) contrast(1.58) brightness(.80); }

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .zine-camera-shell {
    height:100dvh;
    max-height:100dvh;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .zine-camera-viewfinder {
    width:auto;
    height:min(52dvh,620px);
    max-width:94vw;
    max-height:52dvh;
    aspect-ratio:3/4;
    justify-self:center;
    align-self:center;
  }
  .zine-camera-controls {
    padding-top:9px;
    padding-bottom:calc(9px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .zine-camera-controls>button:not(.zine-camera-shutter) { min-height:44px; }
  .zine-camera-look-controls button { min-height:36px; }
  .zine-camera-shutter { width:68px; height:68px!important; min-height:68px!important; }
}


/* ============================================================
   2.0 ALPHA 10.19 · ZINE CAMERA PORTRAIT CAPTURE + COMPACT CONTROLS
   Save native 4:3 camera frames as portrait 3:4, matching the mobile
   viewfinder. Put FRONT/REAR beside COLOR/NOIR to reclaim vertical space.
   ============================================================ */
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .zine-camera-viewfinder {
    height:min(59dvh,700px);
    max-height:59dvh;
    max-width:94vw;
  }
  .zine-camera-controls {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:8px;
    padding-top:8px;
  }
  #zineCameraFlip {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
  }
  .zine-camera-look-controls {
    grid-column:2 / 4;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    width:100%;
  }
  .zine-camera-look-controls.locked { grid-template-columns:1fr; }
  .zine-camera-look-controls button {
    width:100%;
    min-width:0;
    padding-left:6px;
    padding-right:6px;
  }
  .zine-camera-shutter {
    grid-column:2;
    grid-row:2;
  }
  .zine-camera-rule {
    grid-column:1 / -1;
    grid-row:3;
  }
}


/* ============================================================
   2.0 ALPHA 10.21 · ZINE CAMERA EV COMPENSATION
   Fuji-style seven-position exposure compensation: -3..+3.
   Hardware control only; unsupported cameras show EV N/A.
   ============================================================ */
.zine-camera-ev{grid-column:3;display:grid;grid-template-rows:32px auto 32px;gap:4px;align-items:center;justify-items:center;min-width:64px}
.zine-camera-ev button{width:52px;min-height:32px!important;padding:4px!important;font-size:17px!important;line-height:1!important}
.zine-camera-ev-value{font:700 12px/1.1 "Courier New",monospace;letter-spacing:.05em;white-space:nowrap;text-align:center;color:#fff}
.zine-camera-ev.unsupported{opacity:.5}
.zine-camera-ev button:disabled{opacity:.35}
@media (max-width:800px), (hover:none) and (pointer:coarse){
  .zine-camera-ev{grid-column:3;grid-row:2;align-self:center}
  .zine-camera-ev button{width:48px}
  .zine-camera-rule{grid-row:3}
}


/* ============================================================
   2.0 ALPHA 10.22 · CAMERA TOOLS + PHOTO EXPORT
   Silent one-frame camera, capability-gated SNAP focus / zoom / torch,
   centered shutter, and non-destructive original/developed export.
   ============================================================ */
.zine-camera-controls{position:relative}
.zine-camera-hardware{grid-column:1/-1;display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.zine-camera-hardware.hidden{display:none!important}
.zine-camera-hardware button{min-height:34px!important;padding:6px 10px!important;font-size:11px!important}
.zine-camera-hardware button.active{background:#fff;color:#000;border-color:#fff}
.story-photo-export.hidden{display:none!important}
@media (max-width:800px), (hover:none) and (pointer:coarse){
  .zine-camera-shutter{grid-column:1/-1!important;grid-row:2;justify-self:center;z-index:1}
  .zine-camera-ev{grid-column:3!important;grid-row:2;justify-self:center;z-index:2}
  .zine-camera-hardware{grid-row:3}
  .zine-camera-rule{grid-row:4}
  .zine-camera-hardware button{min-height:32px!important;padding:5px 8px!important;font-size:10px!important}
}


/* ============================================================
   2.0 ALPHA 10.23 · DIARY LIBRARY BATCH PHOTO EXPORT
   Export all or selected stored diary photographs as originals or developed looks.
   ============================================================ */
.field-notes-library-actions{display:flex;gap:6px;align-items:stretch}
.field-notes-library-export{border:1px solid #111;background:#111;color:#fff;padding:8px 10px;font:700 9px "Courier New",monospace;cursor:pointer}
.field-notes-library-export:disabled{opacity:.28;cursor:default}
.diary-photo-export-overlay{position:fixed;inset:0;z-index:13000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.diary-photo-export-overlay.hidden{display:none!important}
.diary-photo-export-panel{width:min(900px,100%);max-height:88vh;overflow:auto;background:#fff;border:2px solid #111;padding:16px;font-family:"Courier New",monospace}
.diary-photo-export-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #bbb;padding-bottom:12px}
.diary-photo-export-head strong,.diary-photo-export-head span{display:block}.diary-photo-export-head span{margin-top:5px;color:#666;font-size:11px}
.diary-photo-export-head button,.diary-photo-export-tools button,.diary-photo-export-actions button{border:1px solid #111;background:#fff;color:#111;padding:10px 12px;font:700 11px "Courier New",monospace;cursor:pointer}
.diary-photo-export-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 0}.diary-photo-export-tools span{margin-left:auto;font-size:11px}
.diary-photo-export-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.diary-photo-export-card{min-width:0;border:2px solid #ccc;background:#fff;padding:6px;cursor:pointer;text-align:left;font:10px "Courier New",monospace}
.diary-photo-export-card.selected{border-color:#111;background:#f0f0f0}.diary-photo-export-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#eee;-webkit-user-drag:none;user-select:none}.diary-photo-export-card span{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diary-photo-export-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.diary-photo-export-actions .primary{background:#111;color:#fff}.diary-photo-export-actions button:disabled{opacity:.3;cursor:default}
.diary-photo-export-note{margin:10px 0 0;color:#666;font:10px/1.5 "Courier New",monospace}
@media(max-width:800px),(hover:none) and (pointer:coarse){
  .field-notes-library-row{grid-template-columns:minmax(0,1fr) auto}.field-notes-library-actions{flex-direction:column}.field-notes-library-export,.field-notes-library-delete{min-width:76px;min-height:44px;padding:7px 6px}
  .diary-photo-export-overlay{padding:8px;align-items:flex-end}.diary-photo-export-panel{max-height:92vh;padding:12px}.diary-photo-export-head button{min-height:44px}.diary-photo-export-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.diary-photo-export-card{padding:5px}.diary-photo-export-actions{grid-template-columns:1fr}.diary-photo-export-actions button,.diary-photo-export-tools button{min-height:48px;font-size:12px}.diary-photo-export-tools span{width:100%;margin-left:0}
}


/* 2.0 ALPHA 10.24 · K64 CLASSIC · PHASE 1 */
.hardcore-look-choice-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
.zine-camera-viewfinder.k64 video{filter:contrast(1.08) saturate(1.05) sepia(.018) brightness(.995)}
.story-image-k64,.thumbnail-k64{filter:contrast(1.055) saturate(1.025) sepia(.025) brightness(1.005)}
.thumbnail-noir{filter:grayscale(100%) contrast(1.58) brightness(.80)}
body.hardcore-k64 .story-capture-photo-box img,body.hardcore-k64 .thumbnail img,body.hardcore-k64 .story-capture-entry-thumb{filter:contrast(1.055) saturate(1.025) sepia(.025) brightness(1.005)}
.k64-toggle{border:1px solid #111;background:#fff;color:#111;font:700 10px/1 "Courier New",monospace;letter-spacing:.05em;min-height:30px}.k64-toggle.active{background:#111;color:#fff}
.story-capture-image-style-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px),(hover:none) and (pointer:coarse){.zine-camera-look-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.zine-camera-look-controls button{font-size:10px!important;letter-spacing:.02em!important;padding-left:3px!important;padding-right:3px!important}.hardcore-look-choice-buttons button{font-size:13px}}


/* ============================================================
   2.0 ALPHA 10.25 · FORMAT ENGINE V1
   Generic page geometry: preview follows real width × height.
   ============================================================ */

@media (max-width: 800px) {
  .zine-page {
    aspect-ratio: var(--page-aspect);
  }
}

/* New formats use orientation-relative content widths instead of A4/A5-only rules. */
.format-a6-landscape .info-content,
.format-a3-landscape .info-content,
.format-letter-landscape .info-content,
.format-legal-landscape .info-content { max-width: 79%; }

.format-a6-portrait .info-content,
.format-a3-portrait .info-content,
.format-letter-portrait .info-content,
.format-legal-portrait .info-content { max-width: 73%; }

.format-square-210 .info-content { max-width: 76%; }

.format-a6-landscape .end-content,
.format-a3-landscape .end-content,
.format-letter-landscape .end-content,
.format-legal-landscape .end-content { max-width: 79%; }

.format-a6-portrait .end-content,
.format-a3-portrait .end-content,
.format-letter-portrait .end-content,
.format-legal-portrait .end-content { max-width: 73%; }

.format-square-210 .end-content { max-width: 76%; }

.format-button-row {
  flex-wrap: wrap;
}


/* ============================================================
   2.0 ALPHA 10.26 · CUSTOM SIZE
   ============================================================ */
.custom-size-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid currentColor;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.custom-size-panel.hidden { display: none !important; }
.custom-size-panel label { display: grid; gap: 6px; font-family: var(--font-mono, monospace); }
.custom-size-panel input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 8px 10px; font: inherit; background: #fff; color: #111; border: 1px solid #777; }
.custom-size-panel strong, .custom-size-panel small { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .custom-size-panel { grid-template-columns: 1fr; }
  .custom-size-panel strong, .custom-size-panel small { grid-column: 1; }
}

/* ALPHA 10.30 · Photo Print Wizard */
.wizard-test-row{display:flex;gap:10px;flex-wrap:wrap}.wizard-test-row>button{flex:1 1 220px}.pp-wizard-selection{margin-top:14px}.pp-wizard-photo-choice{appearance:none;text-align:left;font:inherit;background:#fff}.pp-wizard-cutmarks{margin-top:18px;display:flex}.photo-print-wizard-summary{margin-top:12px}


/* ALPHA 10.31 · Photo Print paper presets / favorites */
.paper-more-button{margin-top:8px;padding:10px 14px;border:1px solid #aaa;background:#fff;font:inherit;cursor:pointer;}
.paper-format-panel{margin-top:8px;padding:10px;border:1px solid #ccc;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.paper-format-panel.hidden{display:none;}
.paper-format-option{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:stretch;}
.paper-format-option .wizard-choice,.paper-format-option .option-button{width:100%;min-width:0;}
.paper-pin-button{border:1px solid #aaa;background:#fff;font-size:18px;cursor:pointer;min-height:44px;}
.paper-pin-button.pinned{background:#111;color:#fff;border-color:#111;}
.brightness-test-paper-label{margin-top:12px;}
@media (max-width:700px){.paper-format-panel{grid-template-columns:1fr}.paper-format-option{grid-template-columns:minmax(0,1fr) 52px}.paper-more-button{width:100%;min-height:48px}}


/* ALPHA 10.38 · Custom Paper favorites + separate custom print units */
.custom-paper-editor{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
  align-items:end;
  padding:14px;
  border:1px solid #aaa;
}
.custom-paper-editor label,
.custom-paper-wizard-editor label{display:grid;gap:6px;min-width:0;}
.custom-paper-editor input,
.custom-paper-wizard-editor input{width:100%;min-width:0;box-sizing:border-box;cursor:text;}
.custom-paper-editor input:focus,
.custom-paper-wizard-editor input:focus,
.custom-print-editor input:focus,
#ppWizardCustom input:focus{outline:2px solid #111;outline-offset:1px;}
.custom-paper-favorite-button{
  grid-column:1/-1;
  border:1px solid #aaa;
  background:#fff;
  padding:10px 12px;
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.custom-paper-favorite-button.pinned{background:#111;color:#fff;border-color:#111;}
.custom-paper-help{grid-column:1/-1;width:100%;margin-top:2px;font-size:11px;letter-spacing:.06em;color:#666;}
.custom-paper-wizard-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end;}
.custom-print-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end;}
.custom-print-editor label{display:grid;gap:6px;min-width:0;}
.custom-print-editor input{width:100%;min-width:0;box-sizing:border-box;cursor:text;}
.paper-format-option.no-pin{grid-template-columns:minmax(0,1fr);}
@media (max-width:700px){
  .custom-paper-editor,.custom-paper-wizard-editor,.custom-print-editor{grid-template-columns:1fr;}
  .custom-paper-help{font-size:12px;color:#333;}
  .custom-paper-favorite-button{min-height:46px;}
}

/* ALPHA 10.40 · Mode + Library diary favorites */
.project-favorites-panel{margin:0 0 16px;padding:12px;border:1px solid #bbb;background:#fafafa}.project-favorites-panel.hidden{display:none!important}.project-favorites-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px;font-family:monospace}.project-favorites-head span{font-size:11px;color:#777}.project-favorites-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.project-favorite-launch{min-height:54px;border:1px solid #111;background:#fff;text-align:left;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font:inherit}.project-favorite-launch strong{font-family:Georgia,serif;font-weight:400;font-size:17px}.project-favorite-main{display:flex;flex-direction:column;gap:3px;min-width:0}.project-favorite-main small{font:10px monospace;color:#777;white-space:normal}.project-favorite-badge{font:10px monospace;background:#111;color:#fff;padding:4px 6px;white-space:nowrap}.project-favorite-library{border-width:2px}.project-favorite-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;min-width:0}.project-favorite-row .project-favorite-launch{width:100%}.project-favorite-remove-home{min-width:104px;border:1px solid #111;background:#fff;color:#111;padding:8px 10px;font:10px monospace;cursor:pointer}.project-favorite-remove-home:hover{background:#111;color:#fff}.project-template-card-wrap{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px}.project-template-card-wrap .project-template-card{width:100%;height:100%}.project-template-wrap-custom{grid-column:1/-1}.project-template-favorite-controls{display:grid;grid-template-rows:1fr 1fr;gap:6px}.project-favorite-pin,.project-favorite-start{border:1px solid #bbb;background:#fff;font:12px monospace;cursor:pointer}.project-favorite-pin{font-size:20px}.project-favorite-pin.active,.project-favorite-start.active{background:#111;color:#fff;border-color:#111}.brightness-test-paper-buttons{display:flex;gap:10px;flex-wrap:wrap}.brightness-test-paper-buttons button{min-width:150px;min-height:54px;padding:12px 18px;border:1px solid #bbb;background:#fff;font:inherit;font-size:15px}.brightness-test-paper-buttons button.active{background:#111;color:#fff;border-color:#111}
@media(max-width:700px){.project-favorites-panel{padding:10px;margin-bottom:10px}.project-favorite-remove-home{min-width:94px;padding:7px 8px;font-size:9px}.project-favorites-list{grid-template-columns:1fr}.project-favorites-head{align-items:flex-start;flex-direction:column;gap:3px}.project-template-card-wrap{grid-template-columns:minmax(0,1fr) 66px}.project-template-favorite-controls{gap:4px}.project-favorite-start{font-size:10px}.project-favorite-launch{min-height:50px}}

.field-notes-library-favorite,.field-notes-library-home{min-width:62px;border:1px solid #bbb;background:#fff;font:11px monospace;padding:7px 8px;cursor:pointer}.field-notes-library-favorite{font-size:18px}.field-notes-library-favorite.active,.field-notes-library-home.active{background:#111;color:#fff;border-color:#111}
@media(max-width:700px){.field-notes-library-favorite,.field-notes-library-home{min-width:76px;min-height:44px;padding:7px 6px}.project-favorite-main small{font-size:9px}}


/* ============================================================
   ALPHA 10.44 · HUB / FLASH-FREE HOME
   ============================================================ */
body.boot-pending .app{visibility:hidden;}
.zine-hub{position:fixed;inset:0;z-index:4400;background:#fff;overflow:auto;padding:clamp(18px,4vw,48px);}
.zine-hub.hidden{display:none!important;}
.zine-hub-shell{width:min(920px,100%);margin:0 auto;padding:clamp(18px,3vw,32px);border:2px solid #111;background:#fff;box-shadow:12px 12px 0 rgba(0,0,0,.06);}
.zine-hub-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:3px solid #111;padding-bottom:20px;}
.zine-hub-heading h2{margin:8px 0 0;font-size:clamp(25px,4vw,42px);letter-spacing:.07em;}
.zine-hub-editor,.zine-hub-secondary button{border:1px solid #bbb;background:#fff;color:#111;font:inherit;padding:12px 16px;cursor:pointer;}
.zine-hub-intro{margin:22px 0;line-height:1.55;color:#555;}
.zine-hub-favorites{margin:0 0 18px;padding:12px;border:1px solid #bbb;background:#fafafa;}
.zine-hub-favorites.hidden{display:none!important;}
.zine-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.zine-hub-card{min-height:155px;border:1px solid #aaa;background:#fff;padding:22px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:12px;cursor:pointer;}
.zine-hub-card:hover,.zine-hub-card:focus-visible{border-color:#111;background:#fafafa;outline:none;}
.zine-hub-card strong{font-family:Georgia,serif;font-size:25px;font-weight:400;}
.zine-hub-card span{font:12px/1.5 monospace;color:#666;}
.zine-hub-secondary{margin-top:18px;padding-top:16px;border-top:1px solid #bbb;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.zine-hub-secondary span{font:11px/1.4 monospace;color:#777;}
body.hub-open{overflow:hidden;}
.project-template-card-wrap.hub-filter-hidden{display:none!important;}
.project-start-dialog.library-mode .project-start-footer{display:none!important;}
.project-start-dialog.library-mode .project-start-intro{margin-bottom:14px;}
@media(max-width:700px){
 .zine-hub{padding:10px;}
 .zine-hub-shell{border-width:1px;padding:14px;box-shadow:none;min-height:calc(100dvh - 20px);}
 .zine-hub-heading{gap:10px;padding-bottom:13px;}
 .zine-hub-heading h2{font-size:22px;line-height:1.12;}
 .zine-hub-editor{padding:8px 10px;font-size:10px;white-space:nowrap;}
 .zine-hub-intro{margin:14px 0;font-size:13px;}
 .zine-hub-favorites{padding:10px;margin-bottom:10px;}
 .zine-hub-grid{grid-template-columns:1fr;gap:8px;}
 .zine-hub-card{min-height:88px;padding:14px;gap:6px;}
 .zine-hub-card strong{font-size:20px;}
 .zine-hub-card span{font-size:11px;line-height:1.35;}
 .zine-hub-secondary{margin-top:12px;padding-top:12px;}
}


/* ALPHA 10.46 · Local template library */
.local-template-library{margin:16px 0 0;border:1px solid #bbb;background:#fafafa;padding:12px}
.local-template-library.hidden{display:none!important}
.local-template-library-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;font-family:monospace}
.local-template-library-head>div{display:flex;flex-direction:column;gap:3px}
.local-template-library-head span{font-size:10px;color:#777}
.local-template-library-head button{min-height:40px;padding:8px 12px;border:1px solid #bbb;background:#fff;font:11px monospace}
.local-template-list{display:grid;gap:8px}
.local-template-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;border:1px solid #bbb;background:#fff;padding:10px}
.local-template-info{min-width:0;padding:2px 2px 4px;display:flex;flex-direction:column;gap:3px}
.local-template-info strong{font-family:Georgia,serif;font-size:17px;font-weight:400}
.local-template-info span{font:10px monospace;color:#777;text-transform:uppercase}
.local-template-use{width:100%;min-height:48px;border:2px solid #111;background:#111;color:#fff;text-align:center;padding:10px 12px;font:12px monospace;letter-spacing:.04em}
.local-template-use:hover{background:#fff;color:#111}
.local-template-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.local-template-actions button{min-height:40px;padding:7px 9px;border:1px solid #bbb;background:#fff;font:10px monospace}
.local-template-actions button:last-child{border-color:#111}
.local-template-empty{padding:14px;border:1px dashed #bbb;color:#777;font:10px monospace;text-align:center}
@media(max-width:700px){
  .local-template-library{padding:10px}
  .local-template-library-head{align-items:flex-start}
  .local-template-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .local-template-actions button{min-height:44px;padding:8px 5px}
}

/* ALPHA 10.48 · Hub / navigation cleanup */
body.hub-open .mobile-navigation-button,body.hub-open .mobile-navigation,body.hub-open .mobile-navigation-backdrop{display:none!important;}
.zine-hub-editor{flex:0 0 auto;align-self:flex-start;text-align:center;}
@media(max-width:700px){
  .zine-hub-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;}
  .zine-hub-editor{max-width:150px;white-space:normal;line-height:1.25;padding:9px 10px;}
}
@media(max-width:430px){
  .zine-hub-heading{grid-template-columns:1fr;}
  .zine-hub-editor{justify-self:start;max-width:none;margin-top:2px;}
}


/* ALPHA 10.49 · MOBILE-FIRST SEQUENCER PHASE 1 */
.open-sequencer-button{margin-top:12px;min-height:46px;border:2px solid #111;background:#111;color:#fff;padding:10px 16px;font:700 12px/1.2 "Courier New",monospace;letter-spacing:.04em;cursor:pointer}
.sequencer-backdrop{position:fixed;inset:0;background:rgba(255,255,255,.94);z-index:6500}
.sequencer-dialog{position:fixed;z-index:6501;inset:18px;background:#fff;border:2px solid #111;display:flex;flex-direction:column;min-height:0;box-sizing:border-box}
.sequencer-dialog.hidden,.sequencer-backdrop.hidden{display:none!important}
.sequencer-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 20px;border-bottom:2px solid #111}
.sequencer-kicker{font:11px/1.3 "Courier New",monospace;letter-spacing:.12em;color:#666}.sequencer-head h2{margin:6px 0 0;font:700 28px/1 Georgia,serif;letter-spacing:.04em}.sequencer-head button,.sequencer-generate button,.sequencer-tabs button,.sequencer-page-nav button,.sequencer-page-actions button,.sequencer-direct button{border:1px solid #111;background:#fff;color:#111;min-height:44px;padding:9px 12px;font:700 11px/1.2 "Courier New",monospace;cursor:pointer}.sequencer-head button:hover,.sequencer-generate button:hover,.sequencer-tabs button.active,.sequencer-page-actions button.active,.sequencer-slot.active,.sequencer-pool-card.active{background:#111;color:#fff}
.sequencer-generate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid #bbb}.sequencer-generate span{margin-left:auto;font:10px/1.2 "Courier New",monospace;color:#666}.sequencer-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #111}.sequencer-tabs button{border-width:0 1px 0 0}.sequencer-tabs button:last-child{border-right:0}.sequencer-body{overflow:auto;min-height:0;flex:1;padding:16px 20px 24px}.sequencer-view.hidden{display:none!important}.sequencer-page-nav{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;margin-bottom:14px}.sequencer-page-nav strong{text-align:center;font:700 14px/1.2 "Courier New",monospace;letter-spacing:.08em}.sequencer-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sequencer-slots.one-slot{grid-template-columns:minmax(0,1fr)}.sequencer-slot{position:relative;border:2px solid #bbb;background:#fafafa;min-width:0;padding:8px;text-align:left;cursor:pointer}.sequencer-slot img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#eee}.sequencer-slot-meta{display:flex;justify-content:space-between;gap:6px;margin-top:7px;font:700 10px/1.2 "Courier New",monospace}.sequencer-slot-lock{position:absolute;top:14px;right:14px;background:#111;color:#fff;padding:4px 6px;font:700 9px/1 "Courier New",monospace}.sequencer-page-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.sequencer-direct{margin-top:14px;border-top:1px solid #bbb;padding-top:14px}.sequencer-direct label{display:block;margin-bottom:7px;font:700 10px/1.3 "Courier New",monospace;letter-spacing:.05em}.sequencer-direct>div{display:grid;grid-template-columns:90px 1fr;gap:8px}.sequencer-direct input{min-height:44px;border:1px solid #111;padding:7px 9px;font:16px/1 monospace;box-sizing:border-box;width:100%}.sequencer-direct small{display:block;margin-top:7px;font:10px/1.35 "Courier New",monospace;color:#666}.sequencer-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.sequencer-overview-card{border:1px solid #bbb;background:#fff;padding:8px;text-align:left;cursor:pointer}.sequencer-overview-card strong{display:block;margin-bottom:6px;font:700 10px/1.2 "Courier New",monospace}.sequencer-overview-images{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.sequencer-overview-images.one{grid-template-columns:1fr}.sequencer-overview-images img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee}.sequencer-pool-help{margin-bottom:12px;font:11px/1.4 "Courier New",monospace;color:#555}.sequencer-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.sequencer-pool-card{border:1px solid #bbb;background:#fff;padding:6px;cursor:pointer;min-width:0}.sequencer-pool-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eee}.sequencer-pool-card span{display:flex;justify-content:space-between;gap:4px;margin-top:5px;font:700 9px/1.2 "Courier New",monospace}.sequencer-pool-card.locked{outline:2px solid #111;outline-offset:-2px}
@media(max-width:700px){.open-sequencer-button{width:100%;font-size:14px;min-height:52px}.sequencer-dialog{inset:0;border:0}.sequencer-head{padding:12px 12px 10px}.sequencer-head h2{font-size:24px}.sequencer-head button{min-height:46px}.sequencer-generate{padding:8px 10px}.sequencer-generate button{flex:1 1 130px;font-size:12px}.sequencer-generate span{width:100%;margin-left:0;text-align:center}.sequencer-tabs button{min-height:50px;font-size:12px}.sequencer-body{padding:12px 10px 22px}.sequencer-slots{gap:7px}.sequencer-slot{padding:5px}.sequencer-slot-meta{font-size:9px}.sequencer-page-actions button{min-height:50px;font-size:12px}.sequencer-direct>div{grid-template-columns:82px 1fr}.sequencer-pool{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sequencer-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}}

/* ALPHA 10.50 · Sequencer header isolation */
body.sequencer-open .mobile-navigation-button,
body.sequencer-open .mobile-navigation,
body.sequencer-open .mobile-navigation-backdrop{display:none!important}
@media(max-width:700px){
  .sequencer-head{padding-right:10px}
  .sequencer-head #sequencerClose{position:static;min-width:92px;flex:0 0 auto}
}

.sequencer-direct-preview{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;margin-top:10px;border:1px solid #bbb;background:#fafafa;padding:8px;min-height:92px}
.sequencer-direct-preview img{display:block;width:96px;height:96px;object-fit:contain;background:#eee}
.sequencer-direct-preview-meta{min-width:0;display:flex;flex-direction:column;gap:4px;font:10px/1.25 "Courier New",monospace}
.sequencer-direct-preview-meta strong{font-size:12px}
.sequencer-direct-preview-meta span{overflow-wrap:anywhere;color:#555}
.sequencer-direct-preview-meta em{font-style:normal;font-weight:700}
.sequencer-direct-empty{grid-column:1/-1;align-self:center;text-align:center;color:#777;font:10px/1.3 "Courier New",monospace;letter-spacing:.04em}
@media(max-width:700px){
  .sort-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px}
  .sort-item{padding:4px}
  .sort-item-meta{display:block;font-size:8px}
  .sort-item-meta span{display:block;text-align:left;margin-top:2px}
  .sequencer-direct-preview{grid-template-columns:88px minmax(0,1fr);min-height:88px}
  .sequencer-direct-preview img{width:88px;height:88px}
}

/* ALPHA 10.52 · Sequencer isolation + mobile hold preview */
body.sequencer-open .sticky-preview-dock,
body.sequencer-open .section-navigation,
body.sequencer-open .floating-navigation {
  display:none !important;
}

body.sequencer-open .story-entry-peek {
  z-index:6605;
}

body.sequencer-open .sequencer-slot img,
body.sequencer-open .sequencer-pool-card img,
body.sequencer-open .sequencer-overview-card img,
body.sequencer-open .sequencer-direct-preview img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

@media (hover:none) and (pointer:coarse) {
  body.sequencer-open .sequencer-slot img,
  body.sequencer-open .sequencer-pool-card img,
  body.sequencer-open .sequencer-overview-card img,
  body.sequencer-open .sequencer-direct-preview img {
    pointer-events:none;
  }
}

/* ALPHA 10.53 · Sequencer control polish */
.sequencer-inline-lock{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #111;
  border-radius:0;
  background:#fff;
  color:#111;
  min-height:36px;
  padding:7px 10px;
  font:700 10px/1.1 "Courier New",monospace;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
}
.sequencer-inline-lock:hover,
.sequencer-inline-lock:focus-visible{
  background:#111;
  color:#fff;
}
.sequencer-slot.active .sequencer-inline-lock{
  border-color:#fff;
}
.sequencer-slot.active .sequencer-inline-lock:hover,
.sequencer-slot.active .sequencer-inline-lock:focus-visible{
  background:#fff;
  color:#111;
}
@media(max-width:700px){
  .sequencer-inline-lock{
    width:100%;
    min-height:40px;
    font-size:11px;
  }
}

/* Hold-to-peek is deliberately PHOTO POOL only. PAGE / OVERVIEW stay clean and
   use the existing Fullscreen Preview workflow instead. */
body.sequencer-open .sequencer-slot img,
body.sequencer-open .sequencer-overview-card img,
body.sequencer-open .sequencer-direct-preview img{
  -webkit-touch-callout:default;
}
@media (hover:none) and (pointer:coarse){
  body.sequencer-open .sequencer-slot img,
  body.sequencer-open .sequencer-overview-card img,
  body.sequencer-open .sequencer-direct-preview img{
    pointer-events:auto;
  }
}


/* ============================================================
   2.0 ALPHA 10.59 · MOBILE CAPTURE HIERARCHY
   Make the two camera actions visually immediate; keep ADD PHOTO secondary.
   Give COLOR / B&W / K64 enough width and type size on narrow phones.
   ============================================================ */
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-photo-actions {
    gap:10px;
    margin-top:12px;
    margin-bottom:20px;
  }

  #storyCaptureTakePhoto,
  #storyCaptureZineCamera {
    min-height:68px;
    padding:15px 10px;
    background:#111;
    color:#fff;
    border:2px solid #111;
    font-size:17px;
    line-height:1.15;
    letter-spacing:.08em;
    box-shadow:0 2px 0 rgba(0,0,0,.16);
  }

  #storyCaptureTakePhoto:active,
  #storyCaptureZineCamera:active {
    transform:translateY(1px);
    box-shadow:none;
  }

  .story-capture-photo-actions .secondary,
  #storyCaptureAddPhoto {
    min-height:56px;
    background:#fff;
    color:#111;
    border:1px solid #111;
    font-size:14px;
  }

  .story-capture-image-style {
    display:grid;
    grid-template-columns:minmax(88px,28%) minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:10px;
  }

  .story-capture-image-style-buttons {
    width:100%;
    min-width:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .story-capture-image-style-buttons button {
    min-width:0;
    min-height:58px;
    padding:10px 5px;
    font-size:14px !important;
    line-height:1.1;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }
}

@media (max-width:390px) {
  .story-capture-image-style {
    grid-template-columns:82px minmax(0,1fr);
    gap:7px;
    padding-left:8px;
    padding-right:8px;
  }
  .story-capture-image-style-buttons {
    gap:5px;
  }
  .story-capture-image-style-buttons button {
    font-size:13px !important;
    padding-left:3px;
    padding-right:3px;
  }
}


/* ============================================================
   2.0 ALPHA 10.61 · CAPTURE STACK / FULLSCREEN REVIEW
   ============================================================ */
.zine-camera-stack-badge {
  position:absolute;
  right:12px;
  top:12px;
  z-index:7;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 8px;
  border:1px solid #fff;
  background:rgba(0,0,0,.82);
  color:#fff;
  font:700 10px/1 "Courier New",monospace;
}
.zine-camera-stack-badge img {
  width:38px;
  height:38px;
  object-fit:cover;
  border:1px solid #fff;
}
.story-capture-stack-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-8px 0 10px;
  padding:8px 10px;
  border:1px solid #111;
  background:#f5f5f5;
  font:700 11px/1.2 "Courier New",monospace;
}
.story-capture-stack-bar button {
  border:1px solid #111;
  background:#111;
  color:#fff;
  padding:8px 10px;
  font:700 11px/1 "Courier New",monospace;
}
.capture-stack-overlay,
.story-photo-fullscreen {
  position:fixed;
  inset:0;
  z-index:10050;
  background:#050505;
  color:#fff;
}
.capture-stack-overlay.hidden,
.story-photo-fullscreen.hidden { display:none !important; }
.capture-stack-shell {
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
}
.capture-stack-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #555;
  font:700 12px/1.2 "Courier New",monospace;
}
.capture-stack-topbar button,
.capture-stack-actions button {
  border:1px solid #fff;
  background:#111;
  color:#fff;
  padding:10px 12px;
  font:700 11px/1.15 "Courier New",monospace;
}
.capture-stack-stage {
  position:relative;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:8px 44px;
}
.capture-stack-stage img {
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.capture-stack-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:38px;
  height:64px;
  border:1px solid #fff;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
}
.capture-stack-prev { left:4px; }
.capture-stack-next { right:4px; }
.capture-stack-index {
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  padding:5px 8px;
  background:rgba(0,0,0,.72);
  font:700 11px/1 "Courier New",monospace;
}
.capture-stack-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:9px 10px;
  border-top:1px solid #555;
}
.capture-stack-actions .capture-stack-primary {
  grid-column:1/-1;
  min-height:54px;
  background:#fff;
  color:#111;
  font-size:13px;
}
.capture-stack-note {
  padding:0 10px calc(9px + env(safe-area-inset-bottom));
  color:#bbb;
  text-align:center;
  font:10px/1.35 "Courier New",monospace;
}
.story-photo-fullscreen {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:54px 8px 8px;
}
.story-photo-fullscreen img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.story-photo-fullscreen > button {
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
  border:1px solid #fff;
  background:#111;
  color:#fff;
  padding:10px 12px;
  font:700 11px/1 "Courier New",monospace;
}
.story-capture-photo-box img { cursor:zoom-in; }

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-stack-bar {
    position:sticky;
    top:0;
    z-index:4;
    font-size:12px;
  }
  .story-capture-stack-bar button { min-height:44px; font-size:12px; }
  .capture-stack-topbar { font-size:13px; }
  .capture-stack-topbar button { min-height:44px; }
  .capture-stack-actions button { min-height:48px; font-size:12px; }
}


/* ============================================================
   2.0 ALPHA 10.62 · SHARE / CAPTURE STACK POLISH
   ============================================================ */
.capture-stack-actions .capture-stack-danger {
  border-color:#999;
  color:#ddd;
}
.story-share-overlay {
  position:fixed;
  inset:0;
  z-index:10120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  background:rgba(0,0,0,.68);
}
.story-share-overlay.hidden { display:none !important; }
.story-share-sheet {
  width:min(520px,100%);
  border:1px solid #fff;
  background:#0a0a0a;
  color:#fff;
  padding:0;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}
.story-share-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-bottom:1px solid #555;
  font:700 12px/1.2 "Courier New",monospace;
}
.story-share-head button,
.story-share-actions button {
  border:1px solid #fff;
  background:#111;
  color:#fff;
  padding:12px;
  font:700 12px/1.2 "Courier New",monospace;
}
.story-share-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:12px;
}
.story-share-actions .story-share-primary {
  background:#fff;
  color:#111;
  min-height:54px;
}
.story-share-sheet p {
  margin:0;
  padding:0 12px 14px;
  color:#aaa;
  font:10px/1.45 "Courier New",monospace;
  letter-spacing:.03em;
}
.story-capture-photo-box img,
.story-photo-fullscreen img,
.capture-stack-stage img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  #storyCaptureShare {
    min-height:56px;
    font-size:14px;
  }
  .story-share-overlay {
    padding:8px;
  }
  .story-share-head {
    font-size:13px;
  }
  .story-share-actions button {
    min-height:54px;
    font-size:13px;
  }
}


/* ============================================================
   2.0 ALPHA 10.63 · DISCARD DRAFT / ENTRY LOAD FEEDBACK
   ============================================================ */
.story-capture-discard {
  border-color:#777 !important;
  background:#f3f3f3 !important;
  color:#222 !important;
}
#storyCaptureEntryStatus {
  transition:background-color .18s ease,color .18s ease;
}
#storyCaptureEntryStatus.story-entry-loaded-flash {
  background:#111;
  color:#fff;
}
.story-capture-entry-thumb {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-capture-discard {
    min-height:48px;
    font-size:12px;
  }
}


/* ============================================================
   2.0 ALPHA 10.64 · DELETE CONFIRM + ONE-LEVEL UNDO
   ============================================================ */
.story-delete-undo-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 20px 0;
  padding:10px 12px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:700 11px/1.2 "Courier New",monospace;
}
.story-delete-undo-bar.hidden { display:none !important; }
.story-delete-undo-bar button {
  flex:0 0 auto;
  min-height:40px;
  border:1px solid #fff;
  background:#fff;
  color:#111;
  padding:9px 12px;
  font:700 11px/1 "Courier New",monospace;
}
.story-delete-undo-bar button.hidden { display:none !important; }
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .story-delete-undo-bar {
    position:sticky;
    bottom:172px;
    z-index:7;
    margin:8px 20px 0;
    font-size:12px;
  }
  .story-delete-undo-bar button {
    min-height:46px;
    font-size:12px;
  }
}


/* ============================================================
   2.0 ALPHA 10.67 · CREATE PAGE HELP
   ============================================================ */
.project-start-header-actions {
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.project-start-help-overlay {
  position:fixed;
  inset:0;
  z-index:6750;
  background:rgba(0,0,0,.72);
  padding:clamp(10px,3vw,28px);
  overflow:auto;
  box-sizing:border-box;
}
.project-start-help-overlay.hidden { display:none !important; }
body.project-start-help-open { overflow:hidden; }

.project-start-help-sheet {
  width:min(900px,100%);
  margin:0 auto;
  background:#fff;
  color:#111;
  border:2px solid #111;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.project-start-help-head {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:2px solid #111;
  background:#fff;
}
.project-start-help-head span {
  font:700 10px/1.3 "Courier New",monospace;
  letter-spacing:.12em;
  color:#777;
}
.project-start-help-head h2 {
  margin:4px 0 0;
  font:700 24px/1.05 Arial,sans-serif;
  letter-spacing:.04em;
}
.project-start-help-head button {
  min-height:42px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  padding:9px 12px;
  font:700 11px/1 "Courier New",monospace;
}
.project-start-help-body { padding:20px; }
.project-start-help-intro {
  margin:0 0 16px;
  max-width:720px;
  font:15px/1.5 Arial,sans-serif;
}
.project-start-help-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.project-start-help-card {
  border:1px solid #bbb;
  padding:14px;
}
.project-start-help-card strong,
.project-start-help-rule strong,
.project-start-help-note strong {
  display:block;
  font:700 12px/1.3 "Courier New",monospace;
  letter-spacing:.04em;
}
.project-start-help-card p,
.project-start-help-rule p,
.project-start-help-note p {
  margin:7px 0 0;
  font:14px/1.5 Arial,sans-serif;
}
.project-start-help-rule {
  margin-top:14px;
  padding:15px;
  background:#111;
  color:#fff;
}
.project-start-help-note {
  margin-top:12px;
  border-top:1px solid #bbb;
  padding-top:12px;
}
@media (max-width:700px) {
  .project-start-header-actions { gap:5px; }
  .project-start-header-actions .project-start-close { padding:8px 8px; }
  .project-start-help-overlay {
    padding:0;
    background:#fff;
  }
  .project-start-help-sheet {
    width:100%;
    min-height:100dvh;
    border:0;
    box-shadow:none;
  }
  .project-start-help-head { padding:14px 12px; }
  .project-start-help-head h2 { font-size:20px; }
  .project-start-help-body { padding:12px; }
  .project-start-help-intro { font-size:15px; }
  .project-start-help-grid {
    grid-template-columns:1fr;
    gap:8px;
  }
  .project-start-help-card { padding:12px; }
  .project-start-help-card p,
  .project-start-help-rule p,
  .project-start-help-note p { font-size:15px; }
}


/* ============================================================
   2.0 ALPHA 10.68 · DIARY HELP REFRESH
   ============================================================ */
.diary-help-body-v2 {
  grid-template-columns:minmax(240px,350px) minmax(0,1fr);
  align-items:start;
}
.diary-help-visual-note {
  margin:9px 0 0;
  color:#777;
  font:11px/1.45 "Courier New",monospace;
}
.diary-help-section {
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #bbb;
}
.diary-help-section:first-of-type {
  margin-top:14px;
}
.diary-help-section-title {
  display:block;
  margin-bottom:10px;
  font:700 12px/1.3 "Courier New",monospace;
  letter-spacing:.08em;
}
.diary-help-card-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.diary-help-card {
  border:1px solid #bbb;
  padding:12px;
}
.diary-help-card strong {
  display:block;
  font:700 11px/1.3 "Courier New",monospace;
  letter-spacing:.04em;
}
.diary-help-card p {
  margin:6px 0 0;
  font:13px/1.5 Arial,sans-serif;
}
.diary-help-hardcore-note {
  background:#f5f5f5;
  padding:12px;
  border-top:0;
}
@media(max-width:800px),(hover:none) and (pointer:coarse){
  .diary-help-body-v2 { display:block; }
  .diary-help-visual { max-width:520px; margin:0 auto 14px; }
  .diary-help-card-grid { grid-template-columns:1fr; gap:7px; }
  .diary-help-card { padding:12px; }
  .diary-help-card p { font-size:15px; line-height:1.48; }
  .diary-help-section-title { font-size:13px; }
  .diary-help-visual-note { font-size:12px; }
}


/* ============================================================
   2.0 ALPHA 10.69 · HELP TEXT-ONLY / MODE-SPECIFIC
   ============================================================ */
.project-start-help-rule-first {
  margin-top:0;
  margin-bottom:16px;
}
.diary-help-body-text {
  display:block;
  max-width:900px;
  margin:0 auto;
}
.diary-help-intro {
  margin:0 0 16px;
  font:14px/1.55 "Courier New",monospace;
  color:#666;
}
.diary-help-content { margin-top:4px; }
.diary-help-visual,
.diary-help-image-wrap,
.diary-help-marker {
  display:none !important;
}
@media(max-width:800px),(hover:none) and (pointer:coarse){
  .diary-help-body-text {
    max-width:none;
    padding:12px;
  }
  .diary-help-intro {
    font-size:14px;
    line-height:1.55;
  }
  .diary-help-mode-box {
    margin-top:0;
  }
}


/* ============================================================
   2.0 ALPHA 10.70 · FIELD NOTES MOVE ENTRY
   ============================================================ */
.story-capture-move {
  border-color:#111 !important;
  background:#fff !important;
  color:#111 !important;
}
.story-move-entry-overlay {
  position:fixed;
  inset:0;
  z-index:10140;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.70);
  box-sizing:border-box;
}
.story-move-entry-overlay.hidden { display:none !important; }
.story-move-entry-sheet {
  width:min(620px,100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border:2px solid #111;
  background:#fff;
  color:#111;
}
.story-move-entry-head {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-bottom:2px solid #111;
  background:#fff;
}
.story-move-entry-head span {
  font:700 10px/1.2 "Courier New",monospace;
  letter-spacing:.12em;
  color:#777;
}
.story-move-entry-head h2 {
  margin:4px 0 0;
  font:700 22px/1.1 Arial,sans-serif;
}
.story-move-entry-head button,
.story-move-entry-target {
  border:1px solid #111;
  background:#fff;
  color:#111;
}
.story-move-entry-head button {
  min-height:42px;
  padding:9px 12px;
  font:700 11px/1 "Courier New",monospace;
}
.story-move-entry-intro,
.story-move-entry-note {
  margin:0;
  padding:14px 16px;
  font:13px/1.5 "Courier New",monospace;
}
.story-move-entry-list {
  display:grid;
  gap:8px;
  padding:0 16px 16px;
}
.story-move-entry-target {
  padding:14px;
  text-align:left;
  display:grid;
  gap:6px;
}
.story-move-entry-target strong {
  font:700 14px/1.25 "Courier New",monospace;
}
.story-move-entry-target span {
  font:12px/1.35 "Courier New",monospace;
  color:#666;
}
.story-move-entry-empty {
  margin:0;
  padding:18px;
  border:1px dashed #aaa;
  text-align:center;
  font:12px/1.4 "Courier New",monospace;
}
.story-move-entry-note {
  border-top:1px solid #bbb;
  color:#666;
}
@media(max-width:800px),(hover:none) and (pointer:coarse){
  .story-capture-move {
    min-height:48px;
    font-size:12px;
  }
  .story-move-entry-overlay {
    padding:0;
    align-items:stretch;
  }
  .story-move-entry-sheet {
    width:100%;
    max-height:none;
    min-height:100dvh;
    border:0;
  }
  .story-move-entry-head { padding:14px 12px; }
  .story-move-entry-target {
    min-height:68px;
    padding:14px;
  }
  .story-move-entry-target strong { font-size:15px; }
  .story-move-entry-target span { font-size:13px; }
  .story-move-entry-intro,
  .story-move-entry-note { font-size:13px; }
}


/* ============================================================
   2.0 ALPHA 10.72 · ZINE CAMERA SINGLE / STACK
   ============================================================ */
.zine-camera-capture-controls {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px 8px;
  border:1px solid #555;
}
.zine-camera-capture-controls > span {
  color:#aaa;
  font:700 10px/1 "Courier New",monospace;
  letter-spacing:.08em;
}
.zine-camera-capture-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.zine-camera-capture-buttons button,
.zine-camera-save-immediate {
  min-height:34px;
  padding:7px 9px;
  border:1px solid #888;
  background:#111;
  color:#fff;
  font:700 10px/1 "Courier New",monospace;
  letter-spacing:.04em;
}
.zine-camera-capture-buttons button.active,
.zine-camera-save-immediate.active {
  background:#fff;
  color:#000;
  border-color:#fff;
}
.zine-camera-save-immediate {
  white-space:nowrap;
}
@media(max-width:800px),(hover:none) and (pointer:coarse){
  .zine-camera-capture-controls {
    grid-template-columns:auto 1fr;
    gap:6px;
    padding:6px;
  }
  .zine-camera-capture-controls > span {
    font-size:9px;
  }
  .zine-camera-capture-buttons button {
    min-height:32px;
    font-size:10px;
  }
  .zine-camera-save-immediate {
    grid-column:1/-1;
    width:100%;
    min-height:32px;
    font-size:10px;
  }
}
/* Hardcore keeps its established locked run camera without Diary capture-mode controls. */
body.hardcore-run-active .zine-camera-capture-controls { display:none !important; }


/* ============================================================
   2.0 ALPHA 10.72 · ZINE CAMERA MOBILE LAYOUT FIX
   Prevent the new SINGLE / STACK controls from colliding with the
   camera rule line or the top bar on mobile screens.
   ============================================================ */
#zineCameraModeLabel {
  flex:1 1 auto;
  min-width:0;
}
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .zine-camera-topbar {
    gap:10px;
    align-items:flex-start;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  }
  #zineCameraModeLabel {
    padding-top:4px;
    padding-right:8px;
    white-space:normal;
    word-break:break-word;
    line-height:1.25;
    font-size:11px;
  }
  .zine-camera-topbar button {
    min-height:38px;
    padding:8px 10px;
    font-size:11px;
    flex:0 0 auto;
  }
  .zine-camera-viewfinder {
    height:min(50dvh,560px);
    max-height:50dvh;
  }
  .zine-camera-controls {
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-auto-rows:auto;
    gap:8px;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    align-content:start;
  }
  #zineCameraFlip {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
  }
  .zine-camera-look-controls {
    grid-column:2 / 4;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:6px;
    width:100%;
  }
  .zine-camera-look-controls.locked {
    grid-template-columns:1fr;
  }
  .zine-camera-look-controls button {
    min-width:0;
    min-height:34px;
    padding:6px 4px;
    font-size:9px;
  }
  .zine-camera-shutter {
    grid-column:2 !important;
    grid-row:2;
  }
  .zine-camera-ev {
    grid-column:3 !important;
    grid-row:2;
    justify-self:center;
  }
  .zine-camera-hardware {
    grid-column:1 / -1;
    grid-row:3;
    gap:6px;
  }
  .zine-camera-hardware button {
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:10px !important;
  }
  .zine-camera-rule {
    grid-column:1 / -1;
    grid-row:4;
    margin-top:2px;
    padding-top:2px;
    line-height:1.35;
  }
  .zine-camera-capture-controls {
    grid-column:1 / -1;
    grid-row:5;
    margin-top:4px;
    padding:8px;
    grid-template-columns:1fr;
    gap:6px;
  }
  .zine-camera-capture-controls > span {
    font-size:9px;
    text-align:left;
  }
  .zine-camera-capture-buttons {
    grid-template-columns:1fr 1fr;
  }
  .zine-camera-capture-buttons button,
  .zine-camera-save-immediate {
    min-height:34px;
    font-size:10px;
  }
  .zine-camera-save-immediate {
    grid-column:auto;
    width:100%;
    white-space:normal;
    line-height:1.2;
  }
}


/* ============================================================
   2.0 ALPHA 10.73 · CAMERA POLISH / LARGER VIEWFINDER
   ============================================================ */
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .zine-camera-topbar {
    min-height:50px;
    padding-top:calc(6px + env(safe-area-inset-top));
    padding-bottom:6px;
  }
  #zineCameraModeLabel {
    font-size:10px;
    line-height:1.2;
    padding-top:3px;
  }
  .zine-camera-topbar button {
    min-height:36px;
    padding:7px 9px;
    font-size:10px;
  }

  /* Give the photograph priority again. */
  .zine-camera-viewfinder {
    height:min(55dvh,640px);
    max-height:55dvh;
    max-width:96vw;
  }

  .zine-camera-controls {
    gap:6px;
    padding:6px 9px calc(7px + env(safe-area-inset-bottom));
  }

  #zineCameraFlip {
    min-height:36px;
    padding:6px !important;
    font-size:10px;
  }

  .zine-camera-look-controls {
    gap:4px;
  }
  .zine-camera-look-controls button {
    min-height:32px;
    padding:5px 3px;
    font-size:9px !important;
  }

  .zine-camera-shutter {
    width:62px;
    height:62px !important;
    min-height:62px !important;
    padding:5px !important;
  }

  .zine-camera-ev {
    grid-template-rows:28px auto 28px;
    gap:3px;
    min-width:56px;
  }
  .zine-camera-ev button {
    width:44px;
    min-height:28px !important;
    font-size:15px !important;
  }
  .zine-camera-ev-value {
    font-size:10px;
  }

  .zine-camera-hardware {
    gap:5px;
  }
  .zine-camera-hardware button {
    min-height:28px !important;
    padding:4px 7px !important;
    font-size:9px !important;
  }

  .zine-camera-rule {
    margin:0;
    padding:1px 2px 2px;
    font-size:9px;
    line-height:1.25;
    letter-spacing:.04em;
  }

  /* Compact instrument-style capture selector. */
  .zine-camera-capture-controls {
    margin-top:0;
    padding:5px 6px;
    gap:5px;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
  }
  .zine-camera-capture-controls > span {
    font-size:8px;
    white-space:nowrap;
  }
  .zine-camera-capture-buttons {
    gap:4px;
  }
  .zine-camera-capture-buttons button {
    min-height:30px;
    padding:5px 7px;
    font-size:9px;
  }
  .zine-camera-save-immediate {
    grid-column:auto;
    width:auto;
    min-height:30px;
    padding:5px 7px;
    font-size:8px;
    white-space:nowrap;
  }
}

/* Very narrow phones: keep SAVE ENTRY readable without sacrificing the finder. */
@media (max-width:380px) {
  .zine-camera-capture-controls {
    grid-template-columns:auto minmax(0,1fr);
  }
  .zine-camera-save-immediate {
    grid-column:1 / -1;
    width:100%;
  }
}


/* ============================================================
   2.0 ALPHA 10.75 · CAMERA MOBILE LAYOUT TUNE
   Revert the over-compressed capture row on phones, keep SAVE ENTRY,
   center the shutter again and shrink the close control to a simple ×.
   ============================================================ */
#zineCameraClose{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .zine-camera-topbar {
    min-height:46px;
    gap:8px;
    align-items:center;
    padding:calc(6px + env(safe-area-inset-top)) 10px 6px;
  }
  #zineCameraModeLabel {
    flex:1 1 auto;
    min-width:0;
    padding-top:0;
    padding-right:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:10px;
    line-height:1.1;
  }
  #zineCameraClose {
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    min-height:38px;
    padding:0 !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  .zine-camera-viewfinder {
    height:min(56dvh,660px);
    max-height:56dvh;
    max-width:96vw;
  }

  .zine-camera-controls {
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:7px;
    padding:6px 10px calc(8px + env(safe-area-inset-bottom));
  }
  #zineCameraFlip {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
    min-height:34px;
    padding:6px !important;
    font-size:10px;
  }
  .zine-camera-look-controls {
    grid-column:2 / 4;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    width:100%;
  }
  .zine-camera-look-controls button {
    min-width:0;
    min-height:32px;
    padding:5px 3px;
    font-size:9px !important;
  }
  .zine-camera-shutter {
    grid-column:2 !important;
    grid-row:2;
    justify-self:center;
    width:62px;
    height:62px !important;
    min-height:62px !important;
    padding:5px !important;
  }
  .zine-camera-ev {
    grid-column:3 !important;
    grid-row:2;
    justify-self:end;
    align-self:center;
    grid-template-rows:28px auto 28px;
    gap:3px;
    min-width:48px;
  }
  .zine-camera-ev button {
    width:40px;
    min-height:28px !important;
    font-size:15px !important;
  }
  .zine-camera-ev-value {
    font-size:10px;
  }
  .zine-camera-hardware {
    grid-column:1 / -1;
    grid-row:3;
    gap:5px;
  }
  .zine-camera-hardware button {
    min-height:28px !important;
    padding:4px 7px !important;
    font-size:9px !important;
  }
  .zine-camera-rule {
    grid-column:1 / -1;
    grid-row:4;
    margin:0;
    padding:1px 2px 2px;
    font-size:9px;
    line-height:1.25;
    letter-spacing:.04em;
  }

  /* Mobile capture controls: simple stacked layout, no CAPTURE label. */
  .zine-camera-capture-controls {
    grid-column:1 / -1;
    grid-row:5;
    margin-top:0;
    padding:6px;
    gap:6px;
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .zine-camera-capture-controls > span {
    display:none;
  }
  .zine-camera-capture-buttons {
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .zine-camera-capture-buttons button,
  .zine-camera-save-immediate {
    min-height:32px;
    padding:6px 8px;
    font-size:10px;
  }
  .zine-camera-save-immediate {
    grid-column:1 / -1;
    width:100%;
    white-space:nowrap;
    line-height:1.15;
  }
}

@media (max-width:380px) {
  #zineCameraModeLabel {
    font-size:9px;
  }
  .zine-camera-look-controls button,
  .zine-camera-capture-buttons button,
  .zine-camera-save-immediate {
    font-size:9px !important;
  }
}


/* ============================================================
   2.0 ALPHA 10.76 · ZINE CAMERA FULL VIEW
   Double-tap the normal finder for a reduced full-screen shooting view.
   ============================================================ */
.zine-camera-fullview-close,
.zine-camera-fullview-shutter,
.zine-camera-fullview-stack { display:none; }

.zine-camera-overlay.zine-camera-fullview {
  background:#000;
  padding:0 !important;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-shell {
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  position:relative;
  background:#000;
  border:0 !important;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-topbar,
.zine-camera-overlay.zine-camera-fullview .zine-camera-controls {
  display:none !important;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-viewfinder {
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  background:#000;
  touch-action:manipulation;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-viewfinder video {
  width:100%;
  height:100%;
  object-fit:cover;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-status,
.zine-camera-overlay.zine-camera-fullview .zine-camera-stack-badge {
  display:none !important;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-close,
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-shutter {
  display:flex !important;
  position:absolute;
  z-index:30;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-close {
  top:calc(12px + env(safe-area-inset-top));
  right:12px;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.28);
  color:#fff;
  font:700 26px/1 Arial,sans-serif;
  border-radius:50%;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-shutter {
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:80px;
  height:80px;
  padding:7px;
  border:3px solid rgba(255,255,255,.86);
  background:rgba(0,0,0,.22);
  border-radius:50%;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-shutter span {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:rgba(255,255,255,.82);
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-shutter:disabled {
  opacity:.45;
}
.zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-stack:not(.hidden) {
  display:block !important;
  position:absolute;
  z-index:30;
  left:14px;
  bottom:calc(34px + env(safe-area-inset-bottom));
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.30);
  color:#fff;
  font:700 11px/1 "Courier New",monospace;
  letter-spacing:.07em;
}

@media (orientation:landscape) and (max-height:600px) {
  .zine-camera-overlay.zine-camera-fullview .zine-camera-fullview-shutter {
    width:68px;
    height:68px;
    bottom:calc(12px + env(safe-area-inset-bottom));
  }
}


/* ============================================================
   2.0 ALPHA 10.77 · FULL VIEW TAP / CHROME PROMPT FIX
   Full View now uses only the app's CSS fullscreen layer. We deliberately
   do not invoke the browser Fullscreen API, avoiding Chrome's instructional
   fullscreen popup. Finder taps use pointer events for immediate shutter.
   ============================================================ */
.zine-camera-overlay.zine-camera-fullview .zine-camera-viewfinder {
  touch-action:none !important;
  -webkit-user-select:none;
  user-select:none;
}