/* Run the engine. Two columns: what you choose on the left, what came back on the right.
   Same palette and type as the rest of the board, so this reads as another room in the same
   building rather than a separate tool. */

.enginepage { background: #F5F3EE; color: #16263D; }

.ehead { padding: 26px 32px 18px; }
.ehead .eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #8A8578; font-weight: 700; }
.ehead h1 { margin: 0 0 6px; font-family: Archivo, system-ui, sans-serif; font-size: 30px; font-weight: 800; }
.ehead .sub { margin: 0; max-width: 62ch; color: #5F584D; font-size: 14px; line-height: 1.5; }

.banner { margin: 0 32px 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; line-height: 1.45; }
.banner.warn { background: #FBEBE4; color: #8C3A16; border: 1px solid #E9C4B0; }
.banner.good { background: #E7F0E6; color: #2E5A2C; border: 1px solid #C2DBBF; }

.wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; padding: 0 32px 48px;
  align-items: start; }
@media (max-width: 900px) { .wrap { grid-template-columns: 1fr; } }

.controls { position: sticky; top: 16px; background: #fff; border: 1px solid #E3DFD6; border-radius: 12px;
  padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: #6E675B; }
.lbl-row { display: flex; align-items: center; justify-content: space-between; }
.field select { width: 100%; padding: 8px 10px; border: 1px solid #D8D3C8; border-radius: 7px;
  background: #FCFBF8; font: inherit; font-size: 13px; color: #16263D; }
.enginepage .hintline { margin: 0; font-size: 12px; color: #857E71; line-height: 1.45; }

.mini { border: 1px solid #D8D3C8; background: #FCFBF8; border-radius: 6px; padding: 3px 9px;
  font: inherit; font-size: 11px; font-weight: 700; color: #5F584D; cursor: pointer; }
.mini:hover { background: #F2EFE8; }

.shapes { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid #D8D3C8; background: #FCFBF8; font-size: 12px; cursor: pointer; }
.chip input { margin: 0; }
.chip:has(input:checked) { background: #16263D; border-color: #16263D; color: #fff; }

.run { padding: 11px 14px; border: 0; border-radius: 9px; background: #C29B4E; color: #16263D;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.run:hover { background: #B58C3F; }
.run:disabled { background: #DED8CB; color: #8A8578; cursor: default; }

.out { min-width: 0; }
.empty { padding: 48px 24px; text-align: center; color: #8A8578; background: #fff;
  border: 1px dashed #DED8CB; border-radius: 12px; }
.empty p { margin: 0; }

.post { background: #fff; border: 1px solid #E3DFD6; border-radius: 12px; padding: 18px 20px;
  margin-bottom: 20px; }
.post .tag { margin: 0 0 14px; font-size: 12px; color: #857E71; font-weight: 600; }
.post h2 { margin: 0 0 8px; font-family: Archivo, system-ui, sans-serif; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: #6E675B; }
.post pre { margin: 0 0 20px; white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.6; }

.cardcopy { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px;
  font-size: 13px; }
.cardcopy dt { color: #6E675B; font-weight: 700; }
.cardcopy dd { margin: 0; }
.cardcopy dd.none { color: #A79F90; font-style: italic; }
.cardcopy ul { margin: 0; padding-left: 18px; }
.cardcopy li { margin-bottom: 3px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { margin: 0; background: #fff; border: 1px solid #E3DFD6; border-radius: 10px; overflow: hidden; }
.card img { display: block; width: 100%; height: auto; }
.card figcaption { padding: 7px 10px; font-size: 11px; color: #6E675B; font-weight: 600;
  border-top: 1px solid #EFEBE3; }
.card.bad { border-color: #E9C4B0; }
.card.bad figcaption { color: #8C3A16; border-top-color: #F3DCD1; }
.refused { padding: 20px 14px; font-size: 12px; color: #8C3A16; background: #FDF4F0; }
.refused b { display: block; margin-bottom: 6px; font-size: 13px; }
.refused p { margin: 0; line-height: 1.5; }

/* THE TEMPLATE GROUPS. Brett's edits, then each branded set, because the two people using this page
   come to it for different cards and a flat list of 68 served neither. */
.shapes { display: block; }
.grp { border: 1px solid #E3DFD6; border-radius: 8px; background: #FCFBF8; margin-bottom: 6px; }
.grp summary { cursor: pointer; padding: 7px 10px; font-size: 12px; font-weight: 700; color: #4A4438;
  list-style: none; display: flex; justify-content: space-between; align-items: center; }
.grp summary::-webkit-details-marker { display: none; }
.grp summary b { font-weight: 700; color: #8A8578; font-size: 11px; }
.grp[open] summary { border-bottom: 1px solid #EFEBE3; }
.grpbody { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px 11px; }
.grpbody .mini { padding: 2px 8px; font-size: 10px; }
.enginepage .hintline.over { color: #8C3A16; font-weight: 700; }

/* WHICH FIELDS THE ENGINE DID NOT WRITE. A property card on a review page has no listing behind it,
   so its address is sample data. Said on the card rather than in a footnote nobody reads. */
.card figcaption .samp { display: block; margin-top: 3px; font-weight: 500; color: #8C6A2F;
  font-size: 10px; letter-spacing: .01em; }

/* SAVING A RUN. The link is the point: a run nobody can send is a run that only helped the person
   who made it. */
.whobox { display: flex; align-items: center; gap: 8px; }
.whobox label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #6E675B; }
.whobox select { flex: 1; padding: 6px 8px; border: 1px solid #D8D3C8; border-radius: 6px;
  background: #FCFBF8; font: inherit; font-size: 12px; color: #16263D; }

.saverow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 10px; background: #F7F5F0; border: 1px solid #EAE5DB; border-radius: 8px; }
.saverow input { flex: 1; min-width: 200px; padding: 6px 9px; border: 1px solid #D8D3C8;
  border-radius: 6px; background: #fff; font: inherit; font-size: 12px; }
.saverow .hintline { flex-basis: 100%; }
.saverow a { color: #16263D; font-weight: 700; }

/* A SAVED RUN, OPENED FROM A LINK. It says so, because a page that looks live and is a record from
   last Tuesday is the same class of lie as a preview drawing the wrong template. */
.archive { margin: 0 32px 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: #EDF1F6; border: 1px solid #C9D6E6; color: #24425F; font-weight: 600; }

/* THE SAVED RUN LIST. One row per run, no pictures: the list exists to choose from, not to browse. */
.runswrap { grid-template-columns: minmax(0, 1fr); }
.runlist { display: flex; flex-direction: column; gap: 6px; }
.runrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 12px 14px; background: #fff; border: 1px solid #E3DFD6; border-radius: 9px;
  text-decoration: none; color: inherit; }
.runrow:hover { border-color: #C29B4E; background: #FFFDF8; }
.rmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rmain b { font-size: 14px; }
.rside { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right;
  white-space: nowrap; font-size: 12px; font-weight: 600; }
.rmeta { font-size: 11px; color: #857E71; font-weight: 500; }
.rnote { font-size: 12px; color: #5F584D; font-style: italic; }

/* THE CARD VIEWER. Fit to the window by default, because a Story is 1080x1920 and a card you have to
   scroll to see is a card you cannot judge. "Actual size" then shows the real pixels for the times
   the question is about a hairline or a letterspacing. */
.viewer { position: fixed; inset: 0; z-index: 9998; background: rgba(20, 24, 28, .93);
  display: flex; flex-direction: column; }
.viewer[hidden] { display: none; }

.vbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: #F5F3EE;
  background: rgba(0, 0, 0, .35); font-size: 13px; }
.vbar b { font-weight: 700; }
.vcount { color: #B9B2A5; font-size: 12px; }
.vgrow { flex: 1; }
.vbtn { border: 1px solid rgba(245, 243, 238, .35); background: transparent; color: #F5F3EE;
  border-radius: 6px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; }
.vbtn:hover { background: rgba(245, 243, 238, .12); }
.vbtn.on { background: #C29B4E; border-color: #C29B4E; color: #16263D; }

.vstage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 10px 8px 4px; position: relative; }
.vstage img { max-width: calc(100% - 130px); max-height: 100%; width: auto; height: auto;
  display: block; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #fff; }

/* ACTUAL SIZE puts the stage in charge of scrolling and lets the image take its real dimensions. */
.viewer.zoomed .vstage { display: block; overflow: auto; text-align: center; }
.viewer.zoomed .vstage img { max-width: none; max-height: none; margin: 0 auto; }
.viewer.zoomed .vnav { position: fixed; top: 50%; transform: translateY(-50%); }
.viewer.zoomed .vnav.prev { left: 10px; }
.viewer.zoomed .vnav.next { right: 10px; }

.vnav { flex: none; width: 54px; height: 84px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(245, 243, 238, .12); color: #F5F3EE; font-size: 34px; line-height: 1;
  font-family: inherit; }
.vnav:hover { background: rgba(245, 243, 238, .26); }

.vsamp { margin: 0; padding: 6px 16px 12px; text-align: center; color: #C7BFA9; font-size: 12px;
  min-height: 18px; }

.card img { cursor: zoom-in; }

/* THE FULL-TEST TOGGLE. On by default: forcing a template tests the template, and letting the
   writing choose tests the engine. */
.fulltest { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 8px;
  background: #F2EFE8; border: 1px solid #E3DFD6; font-size: 12px; line-height: 1.4; cursor: pointer; }
.fulltest input { margin: 2px 0 0; flex: none; }
.fulltest b { font-size: 13px; }

/* THE FACEBOOK PREVIEW. Not a pixel-perfect forgery of Facebook, and it should not be: it is the
   post at the width and the truncation a reader meets it at, so the caption and the card can be
   judged as the one thing they actually are. */
.fb { max-width: 500px; margin: 0 0 20px; background: #fff; border: 1px solid #E3DFD6;
  border-radius: 10px; overflow: hidden; font-size: 14px; }
.fbhead { display: flex; align-items: center; gap: 9px; padding: 12px 14px 8px; }
.fbav { width: 40px; height: 40px; border-radius: 50%; background: #16263D center/cover no-repeat;
  color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center;
  justify-content: center; flex: none; }
.fbhead b { display: block; font-size: 14px; color: #050505; }
.fbmeta { font-size: 12px; color: #65676B; }

.fbtext { margin: 0; padding: 0 14px 10px; font-size: 14px; line-height: 1.36; color: #050505;
  white-space: pre-wrap; }
/* FACEBOOK CUTS AT ROUGHLY THREE LINES. Replicated because the question "does the hook survive the
   fold" cannot be answered by looking at the whole caption. */
.fb:not(.open) .fbtext { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.fbmore { display: block; margin: -6px 0 10px; padding: 0 14px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: #65676B; cursor: pointer; }
.fbmore:hover { text-decoration: underline; }

.fbimg { background: #F0F2F5; line-height: 0; }
.fbimg img { width: 100%; height: auto; display: block; cursor: zoom-in; }

.fbbar { display: flex; border-top: 1px solid #E4E6EB; }
.fbbar span { flex: 1; text-align: center; padding: 9px 0; font-size: 13px; font-weight: 600;
  color: #65676B; }

.fbswap { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px; border-top: 1px solid #E4E6EB;
  background: #FAFAF8; }
.fbswap button { border: 1px solid #D8D3C8; background: #fff; border-radius: 5px; padding: 3px 8px;
  font: inherit; font-size: 10px; font-weight: 700; color: #5F584D; cursor: pointer; }
.fbswap button.on { background: #16263D; border-color: #16263D; color: #fff; }
.fbnote { margin: 0; padding: 7px 12px 10px; font-size: 11px; color: #8A8578; background: #FAFAF8; }