/* Job files — the per-job file share.
 *
 * Its own stylesheet because BOTH front doors use it: the estimating app (web/index.html) and
 * the Plan Room (web/plans.html). Each page supplies the tokens --panel/--line/--accent/etc,
 * so the same markup takes on whichever identity it is rendered inside.
 *
 * Built to read as a drive: rows, not cards, because a PM scans a job's files for a name and a
 * date, and cards put four items on a screen that fits thirty. The one thing given real visual
 * weight is the visibility chip on a folder — it is what stops a subcontract ending up
 * somewhere a foreman can open it.
 */

.jfl-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.jfl-crumbs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 200px; flex-wrap: wrap; }
.jfl-crumb {
  background: none; border: none; color: var(--accent); font: inherit; font-size: 13.5px;
  padding: 2px 4px; border-radius: 4px; cursor: pointer;
}
.jfl-crumb:hover { background: var(--panel-2); }
.jfl-crumb:last-of-type { color: inherit; font-weight: 600; }
.jfl-crumb-sep { color: var(--muted); }
.jfl-bar-right { display: flex; align-items: center; gap: 8px; }
.jfl-search {
  font: inherit; font-size: 13px; padding: 5px 9px; min-width: 210px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; color: inherit;
}
.jfl-linklike { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* The drop zone is the whole list, not a dashed rectangle off to one side — dropping a file
   "somewhere on the files screen" should always work. */
.jfl-drop { border: 1.5px dashed transparent; border-radius: 10px; padding: 2px; transition: background .12s, border-color .12s; }
.jfl-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.jfl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jfl-table th {
  text-align: left; font-weight: 500; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.jfl-table th.num, .jfl-table td.num { text-align: right; }
.jfl-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.jfl-row:hover td { background: var(--panel-2); }
.jfl-name a { color: inherit; text-decoration: none; }
.jfl-name a:hover { color: var(--accent); text-decoration: underline; }
.jfl-open-folder { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.jfl-open-folder:hover { color: var(--accent); text-decoration: underline; }
.jfl-in { color: var(--muted); font-size: 12px; margin-left: 8px; }
.jfl-note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.jfl-actions { width: 34px; text-align: right; }
.jfl-menu-btn {
  background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 4px; cursor: pointer;
}
.jfl-menu-btn:hover { color: inherit; background: var(--line); }
.jfl-empty { padding: 22px 10px; }
.jfl-foot { margin-top: 10px; color: var(--muted); font-size: 12px; }
.jfl-searching { padding: 6px 10px; color: var(--muted); font-size: 12.5px; }

/* Version badge — only ever shown when there IS more than one, so its presence alone says
   "this file has history". */
.jfl-ver {
  margin-left: 8px; padding: 1px 6px; border-radius: 10px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.jfl-ver:hover { border-color: var(--warn); }
.jfl-deleted td { opacity: .55; }

.jfl-vis {
  margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); color: var(--muted); cursor: help; white-space: nowrap;
}
.jfl-vis.vis-field { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.jfl-vis.vis-pm { color: var(--muted); background: var(--panel-2); }
.jfl-vis.vis-est { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.jfl-vis.vis-del { color: var(--err); background: var(--bad-soft); border-color: color-mix(in srgb, var(--err) 35%, transparent); }

.jfl-progress {
  position: relative; height: 26px; margin: 4px 0 8px; border-radius: 6px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line);
  display: flex; align-items: center;
}
/* An author display: overrides the [hidden] attribute's UA rule, so without this the upload
   bar sat on every job screen as an empty grey strip, permanently. */
.jfl-progress[hidden] { display: none; }
.jfl-progress span { position: relative; padding: 0 10px; font-size: 12.5px; }
.jfl-progress-fill {
  position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 30%, transparent);
  transition: width .15s;
}
.jfl-err { padding: 0 10px; color: var(--err); font-size: 12.5px; }

/* The line that says where a job's files really live. Staff only — a foreman has no use for a
   server path. Worded so nobody has to ask whether the app holds a copy of the drive or is
   looking straight at it, because "there is only one live version" is the entire point. */
.jfl-share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.jfl-share b { color: inherit; font-weight: 600; }
.jfl-share > span:first-child { flex: 1; min-width: 240px; }
.jfl-share-off { font-style: italic; }
.jfl-err-inline { color: var(--warn); cursor: help; }
.jfl-candidate {
  padding: 8px 10px; border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--line); font-size: 13.5px;
}

/* A folder with nothing in it still has to be reachable — somebody drops files into it next
   week — but it should not compete with the ones that hold the job's actual paperwork. */
.jfl-folder-empty .jfl-open-folder { color: var(--muted); }
.jfl-count { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.jfl-none { opacity: .6; }
.jfl-when { white-space: nowrap; }

/* --- the drawing register ------------------------------------------------------------------
   A folder of drawings renders as a set, not a file list: disciplines in binding order, sheets
   in numeric order. The sheet NUMBER carries the weight, because that is what somebody is
   looking for — nobody scans a drawing list by title. */
.jfl-reg-head { color: var(--muted); font-size: 12.5px; padding: 4px 2px 10px; }
.jfl-disc { margin-bottom: 18px; }
.jfl-disc-name {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.jfl-disc-name span {
  font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .7;
}
.jfl-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.jfl-sheet {
  display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px;
  /* A jobsite target, not a mouse target. */
  min-height: 46px;
}
.jfl-sheet:hover { border-color: var(--accent); }
.jfl-sheet-no {
  font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent);
  flex: none; min-width: 74px;
}
.jfl-sheet-title {
  flex: 1; min-width: 0; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jfl-sheet-rev, .jfl-sheet-mk {
  flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.jfl-sheet-mk { color: var(--warn); }

/* --- the full-screen sheet ------------------------------------------------------------------
   Over the app rather than in a browser tab: on an iPad a new tab means leaving the job, and
   coming back means finding it again.

   This block used its own fixed dark palette (not var(--panel)/var(--line)/etc.) because
   #jfl-viewer is appended straight to <body> (see jobFiles.js), outside the #pl-files
   subtree that's the only place the Plan Room maps those generic names onto its green
   palette — so var(--panel) here would have resolved fine in the estimating app but to
   nothing at all in the Plan Room. Stage 0 (one light system everywhere, gangbox-two-doors
   still kept as two products) swaps that fixed palette from dark to light rather than
   wiring it through custom properties that are not reliably in scope here. */
body.jfl-viewing { overflow: hidden; }
.jfl-viewer {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: #EAEDF2;
}
.jfl-v-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top));
  background: #FFFFFF; border-bottom: 1px solid #B2BCCD; color: #0F1830;
}
.jfl-v-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.jfl-v-id b { font-size: 15px; font-variant-numeric: tabular-nums; }
.jfl-v-id span { font-size: 13px; color: #4F5A70; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jfl-v-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.jfl-v-count { font-size: 12.5px; color: #4F5A70; font-variant-numeric: tabular-nums; min-width: 74px; text-align: center; }
.jfl-v-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 10px;
  font: inherit; font-size: 17px; line-height: 1; text-decoration: none;
  background: #F2F4F8; color: #0F1830; border: 1px solid #B2BCCD; border-radius: 8px; cursor: pointer;
}
.jfl-v-btn:hover:not([disabled]) { border-color: #0B6E6D; }
.jfl-v-btn[disabled] { opacity: .35; cursor: default; }
.jfl-v-frame { flex: 1; width: 100%; border: 0; background: #EAEDF2; }
.jfl-sheet-hist {
  flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

/* --- the sheet rail --------------------------------------------------------------------------
   PlanGrid's and Procore's shape: the drawing fills the screen, the set sits beside it. Every
   target is a full row and there is no hover state anywhere, because a finger does not hover. */
.jfl-v-body { flex: 1; display: flex; min-height: 0; }
.jfl-v-rail {
  width: 0; flex: none; overflow-y: auto; overflow-x: hidden;
  background: #F2F4F8; border-right: 1px solid #B2BCCD;
  transition: width .16s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.jfl-v-rail.open { width: 296px; }
@media (max-width: 820px) {
  /* On a phone the rail covers the sheet rather than squeezing it — a drawing squeezed into
     200px is not a drawing. */
  .jfl-v-rail.open { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: min(86vw, 340px); }
}
.jfl-v-railhead {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #4F5A70; background: #F2F4F8;
  border-bottom: 1px solid #B2BCCD;
}
.jfl-v-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid #B2BCCD; color: #0F1830;
  font: inherit; cursor: pointer;
  padding: 10px 12px; min-height: 48px;   /* a gloved finger */
}
.jfl-v-row.now { background: #D5EEEC; color: #0F1830; box-shadow: inset 3px 0 0 #0B6E6D; }
.jfl-v-row-no { flex: none; min-width: 74px; font-weight: 650; font-variant-numeric: tabular-nums; color: #0B6E6D; }
.jfl-v-row.now .jfl-v-row-no { color: #095A59; }
.jfl-v-row-title { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jfl-v-row-rev { flex: none; font-size: 11px; color: #4F5A70; }
.jfl-v-btn.on { background: #D5EEEC; border-color: #0B6E6D; }
.jfl-viewer { position: fixed; inset: 0; }
.jfl-v-body { position: relative; }

/* --- what came before this sheet -------------------------------------------------------------
   Brian: "keeping them all together and showing the latest plan/page with the older versions
   behind it." Behind, not beside — a superseded drawing is only interesting while you are
   looking at the one that replaced it. */
/* overflow-x is stated OUTRIGHT. With only overflow-y set, CSS computes the other axis from
   `visible` to `auto`, so the box grew a horizontal scrollbar the moment one file name was long
   — which is exactly what it did. */
.jfl-hist { display: grid; gap: 2px; max-height: 62vh; overflow-y: auto; overflow-x: hidden; }
.jfl-hist-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.jfl-hist-row.now { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.jfl-hist-rev {
  flex: none; min-width: 62px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.jfl-hist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jfl-hist-name { overflow-wrap: anywhere; }
/* The whole path is on the title attribute; the row shows the end of it, which is the part
   that says WHICH issue this copy came from. */
.jfl-hist-where { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.jfl-hist-when { flex: none; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.jfl-hist-row .btn { flex: none; text-decoration: none; }
.jfl-sheet-hist { cursor: pointer; }
.jfl-sheet-hist:hover { border-color: var(--accent); }
.jfl-v-hist {
  flex: none; font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 10px;
  background: #F2F4F8; color: #095A59; border: 1px solid #B2BCCD; cursor: pointer;
}
.jfl-v-hist:hover { border-color: #0B6E6D; }

/* --- markup ------------------------------------------------------------------------------
   The top survey ask, 13 of 14. In markup mode the PDF pane is replaced by a picture of the
   sheet with a canvas over it, because nothing can be drawn in register on top of the
   browser's own PDF view — see web/js/sheetMarkup.js.

   Everything here is finger-first: nothing depends on hover, the tool targets are 44px, and
   the toolbar floats over the drawing at the bottom where a thumb reaches rather than at the
   top with the sheet chrome. */
.jfl-mk { flex: 1; position: relative; min-width: 0; background: #EAEDF2; overflow: hidden; }
.jfl-mk-stagewrap { position: absolute; inset: 0; overflow: hidden; }
.jfl-mk-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.jfl-mk-img,
.jfl-mk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jfl-mk-img { background: #fff; user-select: none; -webkit-user-drag: none; }
/* Without this the browser claims every gesture for scrolling and nothing draws on a tablet. */
.jfl-mk-canvas { touch-action: none; cursor: crosshair; }
.jfl-mk-load {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; color: #4F5A70; font-size: 14px; pointer-events: none;
}

.jfl-mk-tools {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #FFFFFF; border: 1px solid #B2BCCD; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15,24,48,.25);
  max-width: calc(100% - 20px); flex-wrap: wrap; justify-content: center;
}
.jfl-mk-pens { display: flex; gap: 6px; }
.jfl-mk-pen {
  width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer;
  background: #F2F4F8; border: 1px solid #B2BCCD;
}
.jfl-mk-pen::after {
  content: ""; display: block; width: 20px; height: 20px; margin: 0 auto;
  border-radius: 50%; background: var(--mk-ink); border: 1px solid rgba(15,24,48,.25);
}
.jfl-mk-pen.on { border-color: #0B6E6D; background: #D5EEEC; }
.jfl-mk-tool {
  min-height: 44px; padding: 0 14px; font: inherit; font-size: 14px; cursor: pointer;
  background: #F2F4F8; color: #0F1830; border: 1px solid #B2BCCD; border-radius: 10px;
}
.jfl-mk-tool.primary { background: #D5EEEC; border-color: #0B6E6D; }
.jfl-mk-tool[disabled] { opacity: .35; cursor: default; }

/* --- the sheet rail's thumbnails ------------------------------------------------------------
   Brian: "a grid on the side to select a different one, with a thumbnail of what the image is."
   A-103 and A-104 read as the same word to somebody hunting for the sheet with the stair on it;
   a picture is how anybody actually finds a drawing.

   Fixed box with a white ground so the row height never depends on whether the thumbnail has
   arrived — 266 rows reflowing as images stream in is worse than no thumbnails at all. */
.jfl-v-thumb {
  flex: none; width: 110px; height: 76px; object-fit: contain;
  background: #fff; border: 1px solid #B2BCCD; border-radius: 4px;
  /* An image that fails to render is a blank white box, which is honest — the row is still
     there and still says which sheet it is. */
}
.jfl-v-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jfl-v-rowtext .jfl-v-row-no { min-width: 0; font-size: 13.5px; }
.jfl-v-rowtext .jfl-v-row-title { font-size: 12px; color: #4F5A70; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jfl-v-row.now .jfl-v-row-title { color: #095A59; }
.jfl-v-row-rev { align-self: flex-start; margin-top: 2px; }

/* --- the set as one continuous scroll -------------------------------------------------------
   Brian: "plans should be an infinite scroll." Every sheet is its own PDF, so this is a stack
   of renders rather than a PDF view — see the note above paintViewer() for what that trades.

   --ar is set by the first sheet that loads (a set is one paper size throughout); the value
   here is only what holds the boxes open for the half-second before that happens. */
.jfl-v-scroll {
  flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden;
  background: #EAEDF2; scroll-behavior: auto;
  --ar: 1.4142;
  padding-bottom: env(safe-area-inset-bottom);
}
.jfl-v-page {
  margin: 0 auto 14px; padding: 0; max-width: 1600px;
  /* The box is the right shape before its image arrives, so the scrollbar does not lurch as
     renders stream in and scrolling to sheet 200 works from the first frame. */
  aspect-ratio: var(--ar);
  background: #fff; position: relative;
  box-shadow: 0 1px 10px rgba(15,24,48,.35);
}
.jfl-v-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Which sheet you are on, on the sheet itself — scrolling past a boundary is otherwise the one
   moment the header is ambiguous. A light frosted chip now that the page beneath it is white
   paper, not a dark canvas. */
.jfl-v-pagecap {
  position: absolute; left: 0; top: 0; z-index: 1;
  padding: 5px 11px; font-size: 12px; color: #0F1830;
  background: rgba(255,255,255,.88); border: 1px solid #B2BCCD; border-bottom-right-radius: 6px;
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jfl-v-pagecap b { color: #0B6E6D; margin-right: 6px; }
@media (max-width: 820px) { .jfl-v-page { margin-bottom: 8px; } }

/* --- register: list or thumbnails, and a way to see one sheet's details ---------------------
   Brian asked for a search box, a details popup and a toggle. The toggle is the one that
   changes how the screen is used: a sheet NUMBER is how you look a drawing up, a PICTURE is how
   you find the one with the stair on it when you cannot remember its number. */
.jfl-reg-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 2px 10px;
}
.jfl-reg-bar .jfl-reg-head { padding: 0; flex: 1; min-width: 0; }
.jfl-reg-view { display: flex; flex: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.jfl-reg-vbtn {
  font: inherit; font-size: 13px; padding: 8px 14px; min-height: 38px; cursor: pointer;
  background: var(--panel); color: var(--muted); border: 0;
}
.jfl-reg-vbtn + .jfl-reg-vbtn { border-left: 1px solid var(--line); }
.jfl-reg-vbtn.on { background: var(--panel-2); color: var(--accent); font-weight: 600; }

/* The "i". Deliberately small and quiet: opening the drawing is the job, and details are the
   footnote — a badge you can hit with a thumb but never mistake for the main action. */
.jfl-sheet-i {
  flex: none; width: 22px; height: 22px; line-height: 20px; text-align: center;
  font-size: 12px; font-weight: 700; font-style: italic; font-family: Georgia, serif;
  border-radius: 50%; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel-2);
}
.jfl-sheet-i:hover { color: var(--accent); border-color: var(--accent); }

.jfl-sheetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.jfl-card {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.jfl-card:hover { border-color: var(--accent); }
/* White ground and a fixed shape so the grid does not reflow as renders stream in. */
.jfl-card-img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: contain; background: #fff; }
.jfl-card-foot { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; min-width: 0; }
.jfl-card-title {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jfl-card-rev, .jfl-card-mk, .jfl-card-hist { position: absolute; top: 6px; }
.jfl-card-rev { right: 6px; }
.jfl-card-mk { left: 6px; }
.jfl-card-hist { left: 6px; top: 6px; }
.jfl-card-mk ~ .jfl-card-hist { left: 64px; }
.jfl-card-i { position: absolute; right: 6px; bottom: 6px; }

.jfl-det { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.jfl-det-img {
  flex: none; width: 260px; aspect-ratio: 1.5; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.jfl-det-facts {
  flex: 1; min-width: 220px; display: grid; grid-template-columns: auto 1fr;
  gap: 5px 14px; margin: 0; font-size: 13.5px;
}
.jfl-det-facts dt { color: var(--muted); white-space: nowrap; }
.jfl-det-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Finding a sheet in a rail of 266 of them. */
.jfl-v-railsearch { position: sticky; top: 0; z-index: 2; padding: 8px; background: #F2F4F8;
  border-bottom: 1px solid #B2BCCD; }
.jfl-v-qbox {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; min-height: 40px;
  background: #FFFFFF; color: #0F1830; border: 1px solid #B2BCCD; border-radius: 7px;
}
.jfl-v-qbox::placeholder { color: #4F5A70; }
.jfl-v-railempty { padding: 18px 14px; color: #4F5A70; font-size: 13px; }

/* Pen, arrow, box, note. Same 44px targets as the colours beside them. */
.jfl-mk-kinds { display: flex; gap: 6px; padding-right: 10px; border-right: 1px solid #B2BCCD; }
.jfl-mk-kind {
  width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1;
  background: #F2F4F8; color: #2A3650; border: 1px solid #B2BCCD;
}
.jfl-mk-kind.on { border-color: #0B6E6D; background: #D5EEEC; color: #0F1830; }


/* --- the overlay's legend -------------------------------------------------------------------
   Brian: "the description of the overlay is confusing — red = old, blue = new. This should also
   be a legend on the plan viewer." So it is two words and two colours, sitting on the drawing
   while it is being read, instead of a paragraph above it. Light frosted chip, same reasoning
   as .jfl-v-pagecap above — it sits on the white sheet image, not a dark canvas. */
.jfl-mk-legend {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 8px 12px; border-radius: 9px;
  background: rgba(255,255,255,.9); border: 1px solid #B2BCCD;
  color: #0F1830; font-size: 12.5px; pointer-events: none;
}
.jfl-lg-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.jfl-lg-item b { color: #4F5A70; font-weight: 500; }
.jfl-lg-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.jfl-lg-old { background: #dc2626; }
.jfl-lg-new { background: #2563eb; }
.jfl-lg-same { background: #c6cbd1; }
@media (max-width: 620px) { .jfl-mk-legend { font-size: 11.5px; gap: 10px; padding: 6px 9px; } }