/* Their first screen: three big cards, Continue under them. */
.crop-selected { text-align: center; color: var(--muted); margin: 18px 0 0; }
.crop-choose-title {
  text-align: center; font-size: 1.06rem; font-weight: 700;
  color: var(--ink); margin: 26px 0 16px;
}
.crop-choices { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; }
.crop-choice {
  width: 200px; height: 200px; padding: 25px; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: 4px; background: transparent;
  color: var(--accent); text-decoration: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
}
.crop-choice-text { font-size: .94rem; line-height: 1.35; }
.crop-choice strong { font-size: 1.06rem; font-weight: 700; }
.crop-choice.is-on { background: var(--accent-soft); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
.crop-choice:hover { box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08); }
.crop-choice.is-on:hover { box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
.crop-continue {
  display: block; margin: 22px auto 0; font-size: .875rem; font-weight: 700;
  padding: 6px 11px; border-radius: 3px;
}

/* The editor: their Preview mode strip — three captions, joined. */
.crop-preview-title {
  text-align: center; font-size: 1.06rem; font-weight: 700;
  margin: 20px 0 12px; color: var(--ink);
}
.crop-seg { display: flex; justify-content: center; }
.crop-seg-btn {
  display: inline-flex; align-items: center; height: 35px; padding: 6px 11px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  font-size: .875rem; cursor: pointer; user-select: none;
}
.crop-seg-btn + .crop-seg-btn { margin-left: -1px; }
.crop-seg-btn:first-child { border-radius: 3px 0 0 3px; }
.crop-seg-btn:last-child { border-radius: 0 3px 3px 0; }
.crop-seg-btn input { display: none; }
/* Their picked caption: white with the accent ring — no fill, no press-in. */
.crop-seg-btn.is-on {
  background: var(--white); border-color: var(--accent); color: var(--accent-dark);
  box-shadow: 0 0 0 1px var(--accent); z-index: 1; font-weight: 600;
}

/* Blocks: their grey band — the white margins card sits on it, the page
   preview floats below, the cream bar closes the band off. */
.crop-blocks {
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; margin-top: 22px;
  background: #f0f1f3; padding: 30px 16px 140px; box-sizing: border-box;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
}
.crop-block { width: min(780px, 100%); display: flex; flex-direction: column; align-items: center; }
.crop-margins {
  width: 100%; max-width: 780px; background: var(--white);
  border-radius: 16px; padding: 24px 30px; margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 30, .07); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px;
}
.crop-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.crop-lbl { font-size: 1.06rem; color: var(--muted); }
.crop-input {
  width: 65px; height: 30px; padding: 6px; box-sizing: border-box;
  text-align: center; border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--white); font-size: 1rem; color: var(--ink);
}
.crop-input:focus { outline: none; border-color: var(--accent); }
.crop-units { display: inline-flex; margin-left: 6px; }
.crop-unit {
  display: inline-flex; align-items: center; height: 27px; padding: 4px 8px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--muted);
  font-size: .75rem; cursor: pointer; user-select: none;
}
.crop-unit + .crop-unit { margin-left: -1px; }
.crop-unit:first-child { border-radius: 4px 0 0 4px; }
.crop-unit:last-child { border-radius: 0 4px 4px 0; }
.crop-unit input { display: none; }
.crop-unit.is-on {
  background: var(--white); border-color: var(--accent); color: var(--accent-dark);
  box-shadow: 0 0 0 1px var(--accent); z-index: 1; font-weight: 600;
}
.crop-links { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: 6px; }
.crop-link { color: var(--accent); font-size: .85rem; text-decoration: none; }
.crop-link:hover { text-decoration: none; }

.crop-block-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* The dim outside the crop box used to spill over the WHOLE page (the 9999px
   spread with nothing to clip it), which turned the editor dark grey. Clip it
   to the page it belongs to. */
.crop-preview { position: relative; display: inline-block; line-height: 0; overflow: hidden; border-radius: 6px; }
.crop-preview canvas { display: block; background: #fff; }
.crop-pageno { font-size: 1rem; color: var(--muted); }
.crop-note { text-align: center; color: var(--muted); opacity: .85; margin: 20px 0 96px; }

/* The crop box: thin white lines in the soft dark, easy on the eyes. */
.crop-box {
  position: absolute; border: 1px solid #fff; box-sizing: border-box;
  cursor: move; touch-action: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 30, .5);
}
.crop-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image:
    linear-gradient(to right, transparent calc(33.33% - 1px), rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 33.33%, transparent 0),
    linear-gradient(to right, transparent calc(66.66% - 1px), rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 66.66%, transparent 0),
    linear-gradient(to bottom, transparent calc(33.33% - 1px), rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 33.33%, transparent 0),
    linear-gradient(to bottom, transparent calc(66.66% - 1px), rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 66.66%, transparent 0);
}
.crop-handle {
  position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(15, 23, 30, .45); z-index: 2;
}
.crop-handle[data-h="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.crop-handle[data-h="n"]  { left: 50%; top: -5px; margin-left: -5px; cursor: ns-resize; }
.crop-handle[data-h="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.crop-handle[data-h="e"]  { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.crop-handle[data-h="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.crop-handle[data-h="s"]  { left: 50%; bottom: -5px; margin-left: -5px; cursor: ns-resize; }
.crop-handle[data-h="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.crop-handle[data-h="w"]  { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }

/* Page by page is their accordion: the active page carries the card and the
   preview, the rest are short rows — click a row to edit that page. */
.crop-collapsed { display: none; }
.crop-block.is-collapsed .crop-collapsed {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 780px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 16px; cursor: pointer; font: inherit;
}
.crop-block.is-collapsed .crop-margins,
.crop-block.is-collapsed .crop-block-stage { display: none; }
.crop-block.is-collapsed .crop-collapsed:hover { border-color: var(--accent); }
.crop-mini { display: block; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.crop-collapsed-num { font-size: 1rem; color: var(--muted); }

/* Their sticky footer: one cream band, one green action in the middle. */
.crop-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--amber-bg); padding: 10px 20px 20px;
  display: flex; justify-content: center;
  /* The bar floats over the preview: its empty band must not swallow drags
     aimed at a crop box that scrolled behind it — the button keeps its own
     clicks. */
  pointer-events: none;
}
.crop-bar > * { pointer-events: auto; }
.crop-bar .crop-run {
  font-size: 1.06rem; font-weight: 700; padding: 6px 12px;
  border-radius: 4px; min-width: 107px;
}

@media (max-width: 640px) {
  .crop-choices { flex-direction: column; align-items: center; }
  .crop-bar { padding-bottom: 14px; }
}

/* ------------------------------------------------- detail under the drop box
   Client: "Crop" — the files-family guide dress on the crop tool. Rides
   inside #crop-start, so the workspace replaces it once a file loads. Step
   cards reuse the parked walkthrough classes from app.css; the boxes wear
   the site-card dress. Same block as pages.css, copied because crop.html
   does not load that sheet. */
.files-guide {
  width: min(880px, 100% - 32px); margin: 56px auto 84px;
  text-align: left;
}
.files-guide .howto-steps { margin-top: 26px; }
.files-guide .guide-photo {
  display: block; max-width: 100%; height: auto; margin: 16px auto 0;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(12, 77, 143, .10);
}
.files-feats {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.files-feat {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; box-shadow: 0 14px 34px rgba(12, 77, 143, .06);
}
.files-feat > i {
  flex: 0 0 auto; font-size: 21px; line-height: 1.2; color: var(--accent-dark);
}
.files-feat b { display: block; font-size: .95rem; color: var(--ink); }
.files-feat p { margin: 3px 0 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) {
  .files-guide { margin: 40px auto 64px; }
  .files-feats { grid-template-columns: 1fr; }
}