/* =============================================================================
 * pdf-preview.css — full-screen "review before you save" overlay.
 *   Paired with assets/js/pdf-preview.js. SHARED across every form: pdf.js renders
 *   the ACTUAL generated PDF blob to full-width page canvases, so what you see IS
 *   the file that saves. Bar = EDIT (btn-dark) · editable filename · SAVE PDF
 *   (btn-primary) — all on the shared .btn system. (2026-07-08)
 * ========================================================================== */

/* Lock page scroll while the preview is open. Root bg left at its default (white): the OS
   home-indicator / gesture-nav strip below the web viewport is tinted from the root bg, and
   darkening it to match the scrim turned Android's bar black — owner chose to keep it white
   like the rest of the app, accepting the small iOS strip. (2026-07-21) */
html.pdf-preview-lock { overflow: hidden; }

.pdf-preview {
  position: fixed;
  inset: 0;
  /* Above EVERYTHING in a form. The deficiency coverflow gives its focused card
     z-index:100 live (controller: 100 - dist*100) and .dr-note-modal is 100, so at the old
     z-index:60 those cards painted OVER the preview on Android (WebKit composited it
     differently, so iOS looked fine). 1000 clears the form's max with headroom. (2026-07-21) */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(16, 24, 32, 0.60);   /* brand-black scrim */
}

/* Top action bar — EDIT (left) · filename (centre, editable) · SAVE PDF (right). */
.pdf-preview-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s3, 10px);
  /* SAFE-AREA TOP INSET (2026-07-21). .pdf-preview is position:fixed; inset:0, so without this
     the white bar starts at y=0 — behind the status bar (battery/clock) on a notched device or
     the installed standalone app, and EDIT/SAVE sit under it. Baked into the top value (not a
     separate padding-top) so the mobile shorthand below cannot reset it. env() is 0 on a device
     with no inset / in a normal browser tab, so this is a no-op everywhere except where the bleed
     actually happens. The home hero full-bleeds into this band on purpose; every other fixed top
     element (this bar, the shared nav) must clear it. */
  padding: calc(var(--s4, 12px) + env(safe-area-inset-top, 0px)) var(--s5, 16px) var(--s4, 12px);
  background: var(--white, #fff);
  border-bottom: 1px solid var(--divider, #e6e5e3);
}
/* The bar's EDIT/SAVE reuse .btn (+ btn-dark / btn-primary). Tighten their side
   padding here so the filename field keeps room on a phone. */
.pdf-preview-bar .btn { flex: 0 0 auto; padding: 0 var(--s4, 12px); }

/* Filename — sits in the flexible middle of the bar, centred. The field is only as wide as
   its own text (see .pdf-preview-name below); the wrap is what centres it and what clips a
   name too long for the bar. */
.pdf-preview-name-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Editable export filename — looks like the title, click the TEXT to edit. Whatever is here
   is what exports; there's no separate "save name" step.
   WIDTH FOLLOWS THE TEXT (owner 2026-07-25): this was `flex:1 1 auto; width:100%`, so the
   input box filled the whole flexible middle of the bar and every empty pixel beside the
   name was a click target that also lit up on hover. It is now shrink-to-fit — pdf-preview.js
   keeps the `size` attribute in step with the value — and the wrap centres it. `max-width`
   is what stops a very long name pushing the ‹ / ⬇ icons off the bar; the ellipsis below
   then does the truncating, exactly as before. */
.pdf-preview-name {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 4ch;
  margin: 0;
  padding: var(--s2, 8px) var(--s3, 10px);
  font: inherit;
  font-size: var(--t-body, 15px);
  font-weight: 600;
  text-align: center;
  color: var(--text, #1a1a1a);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* truncate the long name at rest; the field scrolls while focused */
  touch-action: manipulation;
}
/* `.editing-title` DELETED (owner 2026-07-25) — it hid the ‹ / ⬇ icons and flipped the field
   from centred to left-aligned the moment it got focus, which is what made the title jump
   left and restyle itself on a click. Clicking the title now changes NOTHING: it stays
   centred, the icons stay put, and you simply get a caret. */
/* Icon-only nav (2026-07-21): ‹ back stays muted (secondary); ⬇ save is tinted brand red so
   the primary action is still findable without a solid fill. .btn-icon (portal.css) gives both
   a 44px WCAG tap target. */
.pdf-preview-save { color: var(--accent, #e43338); }
/* NO hover and NO focus treatment (owner 2026-07-25). The hover fill read as a wide button
   the title is not, and the focus fill + red underline were more visual change on click.
   Consistent with the portal's standing no-focus-stroke rule on fields. */

/* WARNING TITLE (owner 2026-07-25) — set by opts.titleWarn; Weekly uses it when the
   reporting period is not the current week. Colour only: no box, no background, nothing
   that shifts the bar's geometry, so the title does not move when the warning appears or
   clears. Screen-only — it cannot reach the exported PDF (see pdf-preview.js). */
.pdf-preview-name.is-warn { color: var(--red, #E43338); }

/* Scrolling document area — pages float on the scrim like a real viewer. Clicking
   the scrim around them exits (wired in pdf-preview.js). */
.pdf-preview-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s5, 16px) var(--s4, 12px);
  cursor: pointer;                     /* the scrim reads as "tap to close" */
}
.pdf-preview-pages {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5, 16px);
  cursor: default;
}
/* Each page renders at full page width — 100% scale, what-you-see-is-the-file. */
.pdf-preview-page {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white, #fff);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}
.pdf-preview-loading {
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: var(--s8, 40px) var(--s4, 12px);
  font-size: var(--t-body, 15px);
}

/* While the file is being written, freeze the controls. */
.pdf-preview.is-saving .pdf-preview-save,
.pdf-preview.is-saving .pdf-preview-back { opacity: 0.5; pointer-events: none; }

@media (max-width: 640px) {
  .pdf-preview-bar { padding: calc(var(--s3, 10px) + env(safe-area-inset-top, 0px)) var(--s4, 12px) var(--s3, 10px); gap: var(--s2, 8px); }
  .pdf-preview-bar .btn { padding: 0 var(--s3, 10px); }
  .pdf-preview-name { font-size: var(--t-hint, 13px); }
  .pdf-preview-scroll { padding: var(--s4, 12px) var(--s2, 8px); }
}

/* =============================================================================
 * ATTACHMENTS — pilot on Site Orientation only (opts.allowAttachments).
 *   "Attach" ghost button sits just LEFT of Save PDF (~15px gap). Its paperclip +
 *   count opens a drag-reorder popup that reuses the .so-modal shell (a SEPARATE
 *   instance, scoped to .pdf-attach-modal — the base .so-modal is untouched). All
 *   square corners, palette only, no beige. (2026-07-10)
 * ========================================================================== */
.pdf-preview-attach {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 5px;   /* the bar's 10px gap + this ≈ 15px from Save PDF */
}
.pdf-preview-attach .pdf-preview-clip { flex: 0 0 auto; }
.pdf-preview-attach-label { font-weight: 600; }
/* Count state — the number reads a touch stronger than the "Attach" word. */
.pdf-preview-attach.has-attachments .pdf-preview-attach-label {
  min-width: 1ch;
  text-align: center;
}

/* --- Reorder popup: reuse the .so-modal look, slightly taller card ---------- */
.pdf-attach-modal { z-index: 1010; }   /* above the preview (.pdf-preview = 1000) */
.pdf-attach-card {
  max-width: 440px;
  min-height: 300px;                 /* "vertically increase it a little" */
  gap: var(--s4, 12px);
}
.pdf-attach-title {
  margin: 0;
  font-size: var(--t-h3, 17px);
  font-weight: 700;
  color: var(--text, #1a1a1a);
}
.pdf-attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2, 8px);
  max-height: 46vh;
  overflow-y: auto;
}
.pdf-attach-item {
  display: flex;
  align-items: center;
  gap: var(--s3, 10px);
  padding: var(--s3, 10px);
  background: var(--fill, #f6f5f4);
  border: 1px solid var(--divider, #e6e5e3);
  border-radius: 0;
}
.pdf-attach-item.sortable-ghost { opacity: 0.45; }
.pdf-attach-item.sortable-chosen { background: var(--white, #fff); }
.pdf-attach-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-3, #8d8d8d);
  cursor: grab;
  touch-action: none;
}
.pdf-attach-handle:active { cursor: grabbing; }
.pdf-attach-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--t-body, 15px);
  color: var(--text, #1a1a1a);
}
.pdf-attach-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 20px;
  color: var(--text-3, #8d8d8d);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.pdf-attach-remove:hover { color: var(--accent, #e43338); }
.pdf-attach-add {
  align-self: flex-start;
  flex: 0 0 auto;
}

/* `.rl-card` REMOVED 2026-07-27 — the share-link feature is retired; its files are
   in 99_DELETE_LATER/2026-07-27_share-link-retired. Do not re-add styling for it
   without the endpoint, which needs auth first. */
.rl-title {
  font-size: var(--t-h3, 18px);
  font-weight: 600;
  color: var(--text, #1a1a1a);
}
.rl-body { display: flex; flex-direction: column; gap: 12px; }
.rl-file {
  font-size: var(--t-body, 15px);
  color: var(--text-2, #525252);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Progress — big files on cell service need visible movement, or it reads as hung. */
.rl-bar {
  height: 6px;
  background: var(--line, #e0e0e0);
  overflow: hidden;
}
.rl-bar-fill {
  height: 100%;
  background: var(--accent, #e43338);
  transition: width 0.2s linear;
}
.rl-status, .rl-note {
  font-size: var(--t-small, 13px);
  color: var(--text-3, #8d8d8d);
}
.rl-err { font-size: var(--t-body, 15px); color: var(--accent, #e43338); }

/* The link itself — selectable, monospace so a pasted URL is easy to eyeball. */
.rl-url {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #e0e0e0);
  border-radius: 0;
  background: var(--bg-2, #f4f4f4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text, #1a1a1a);
}
/* 2026-07-20 — the red focus outline that used to sit here is GONE. Fields in this app carry
   no focus stroke at all (portal.css), and brand red on a field means ERROR — so tapping the
   link box to copy it lit up exactly like a failed validation. It escaped the global outline
   reset only because this input carries no .input class. */
.rl-url:focus { outline: none; }

.rl-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 420px) {
  /* Thumb-reachable on a phone: full-width stacked buttons, primary last. */
  .rl-actions { flex-direction: column-reverse; }
  .rl-actions .btn { width: 100%; }
}