/* Build pane (T-611). Uses the shell's own tokens, so both themes come for free.
   .pf-site (styles.css) already makes this element fill .app-main under the top bar. */
.bp{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);position:relative;overflow:hidden;color:var(--ink)}

/* chat column */
.bp-chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--bg2)}
.bp-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);min-height:53px}
.bp-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bp-state{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 9px;flex:none}
.bp-state:empty{display:none}
.bp-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px;display:flex;flex-direction:column;gap:10px}
.bp-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bp-msg.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.bp-msg.me{align-self:flex-end;background:var(--ink);color:var(--bg);border-bottom-right-radius:5px}
.bp-typing{display:inline-flex;gap:5px;align-items:center;padding:14px 14px}
.bp-typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:bp-dot 1.2s ease-in-out infinite}
.bp-typing i:nth-child(2){animation-delay:.15s}.bp-typing i:nth-child(3){animation-delay:.3s}
@keyframes bp-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.bp-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px}
.bp-chips:empty{display:none}
.bp-chips:not(:empty){padding-bottom:12px}
.bp-chip{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;min-height:40px;cursor:pointer;transition:border-color .15s,background .15s;text-align:start}
.bp-chip:hover{border-color:var(--mut);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.bp-form{display:flex;align-items:flex-end;gap:8px;margin:0 14px 14px;padding:8px 8px 8px 14px;border:1px solid var(--line);
  border-radius:18px;background:var(--card);transition:border-color .15s}
.bp-form:focus-within{border-color:var(--mut2)}
.bp-form textarea{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;
  line-height:1.45;resize:none;padding:8px 0;max-height:140px}
.bp-form textarea::placeholder{color:var(--mut2)}
.bp-send{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:opacity .15s}
.bp-send:disabled{opacity:.3;cursor:default}

/* preview column */
.bp-prev{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.bp-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);min-height:53px}
.bp-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.bp-seg button,.bp-undo{font:inherit;font-size:12.5px;color:var(--mut);background:transparent;border:0;border-radius:999px;
  padding:6px 12px;min-height:32px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s}
.bp-seg button.on{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.bp-note{flex:1 1 auto;min-width:0;font-size:12px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-undo{border:1px solid var(--line);color:var(--ink)}
.bp-undo:hover:not(:disabled){border-color:var(--mut)}
.bp-undo:disabled{opacity:.35;cursor:default}
.bp-stage{flex:1 1 auto;min-height:0;position:relative;display:flex;justify-content:center;overflow:hidden}
.bp-manage{position:absolute;z-index:45;inset:54px 0 0 auto;width:min(420px,100%);overflow-y:auto;overscroll-behavior:contain;padding:16px;background:var(--bg2);border-left:1px solid var(--line);box-shadow:-22px 0 50px rgba(0,0,0,.26)}
.bp-manage[hidden]{display:none}
.bp-manage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bp-manage-head b{font-size:16px}.bp-manage-head button{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:22px;cursor:pointer}
.bp-manage-section{padding:14px 0;border-top:1px solid var(--line)}
.bp-manage-section h3{margin:0 0 12px;font-size:13px;letter-spacing:.01em}
.bp-manage-field{display:block;margin:0 0 10px}.bp-manage-field span{display:block;margin-bottom:5px;font-size:11px;color:var(--mut)}
.bp-manage-field input,.bp-manage-field textarea,.bp-manage-field select{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;outline:0}
.bp-manage-field textarea{resize:vertical;line-height:1.5}.bp-manage-field input:focus,.bp-manage-field textarea:focus,.bp-manage-field select:focus{border-color:var(--mut2);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent)}
.bp-manage-actions{display:flex;gap:8px;flex-wrap:wrap}.bp-manage-action{min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:var(--ink);color:var(--bg);font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.bp-manage-action.secondary{border:1px solid var(--line);background:transparent;color:var(--ink)}
.bp-manage-action:disabled{opacity:.42;cursor:not-allowed}
.bp-manage-help,.bp-manage-loading{font-size:12px;line-height:1.5;color:var(--mut)}
.bp-manage-check{display:flex;align-items:flex-start;gap:8px;margin:9px 0;font-size:12px;line-height:1.45;color:var(--ink)}.bp-manage-check input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.bp-plus-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.bp-plus-title h3{margin:0}
.bp-plus-pill{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;font-size:10px;color:var(--mut)}
.bp-plus-pill.ok{background:color-mix(in srgb,#3e8f65 13%,transparent);border-color:color-mix(in srgb,#3e8f65 38%,var(--line));color:color-mix(in srgb,#3e8f65 65%,var(--ink))}
.bp-plus-pill.pending{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.bp-plus-readiness{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.bp-plus-label{margin:16px 0 8px;font-size:11px;font-weight:600;color:var(--mut)}
.bp-hours-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}.bp-hours-grid .bp-manage-field{margin-bottom:8px}
.bp-reminder-list{margin-top:10px}.bp-reminder-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.bp-reminder-row b,.bp-reminder-row small{display:block}.bp-reminder-row b{font-size:11px}.bp-reminder-row small{margin-top:3px;font-size:10px;color:var(--mut2)}
.bp-reminder-row button{min-height:44px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:10px;cursor:pointer}
.bp-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.bp-history-row:first-of-type{border-top:0}.bp-history-row b,.bp-history-row small{display:block}.bp-history-row b{font-size:12px}.bp-history-row small{margin-top:2px;font-size:10px;color:var(--mut2)}
.bp-history-row button{min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:11px;cursor:pointer}
.bp-lead{padding:10px 0;border-top:1px solid var(--line2)}.bp-lead b,.bp-lead small{display:block}.bp-lead b{font-size:12px}.bp-lead small{font-size:10px;color:var(--mut2)}.bp-lead p{margin:5px 0 0;font-size:11px;line-height:1.45;color:var(--mut);overflow-wrap:anywhere}
.bp-device{position:relative;width:100%;height:100%;background:#fff;flex:none}
.bp-device.is-scaled{position:absolute;left:0;top:0;transform-origin:0 0}
.bp[data-device="phone"] .bp-stage{padding:18px 0;background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
.bp[data-device="phone"] .bp-device{width:390px;max-width:100%;border:1px solid var(--line);border-radius:26px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.bp-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.bp.is-editing .bp-stage::after{content:"Rebuilding with your change\2026";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);font-size:12.5px;padding:8px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:nowrap}
.bp-progress{margin:auto;max-width:420px;padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.bp-progress .pf-spin{width:22px;height:22px;margin-bottom:8px}
.bp-progress h3{font-size:19px;letter-spacing:-.015em;font-weight:600}
.bp-progress p{font-size:14px;line-height:1.6;color:var(--mut)}
.bp-progress small{font-size:12px;color:var(--mut2);font-variant-numeric:tabular-nums}
.bp-progress small:empty{display:none}
/* What the owner looks at while the page is written: the chosen direction and the photographs
   as they arrive. Quiet — it is a preview of their site, not a feature of ours. */
.bp-progress{max-width:560px}
.bp-preview{margin-top:18px;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:18px;border-top:1px solid var(--line)}
.bp-preview[hidden]{display:none}
.bp-preview-label{font-size:11.5px;color:var(--mut2);letter-spacing:.02em}
.bp-progress .bp-preview-concept{font-size:14.5px;line-height:1.55;color:var(--ink);max-width:46ch}
.bp-swatches{display:flex;gap:6px}
.bp-swatches i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:block}
.bp-preview-type{font-size:12.5px;color:var(--mut)}
.bp-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;margin-top:4px}
.bp-shots:empty{display:none}
.bp-shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;background:var(--card2);
  animation:bp-shot .5s ease both}
@keyframes bp-shot{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bp-shots img{animation:none}}
@media(max-width:600px){.bp-shots{grid-template-columns:repeat(3,1fr)}}
/* Rendered, measured, never seen: the 390px frame the check gate reads. */
.bp-probe{position:absolute;left:-9999px;top:0;height:844px;border:0;opacity:0;pointer-events:none}

/* Go live (T-615). The only emphasised control in the pane, because it is the only one that
   leaves it. Deliberately holds NO price: the amount is on Stripe's hosted page, the one copy
   of it that cannot go stale. */
.bp-live{font:inherit;font-size:12.5px;flex:none;border:0;border-radius:999px;padding:7px 15px;min-height:34px;cursor:pointer;
  background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;gap:6px;
  touch-action:manipulation;transition:opacity .15s ease-out}
.bp-live:hover:not(:disabled){opacity:.86}
.bp-live:disabled{opacity:.3;cursor:default}
/* The menu hangs off the toolbar, so the toolbar is its containing block — NOT the preview
   column, which is a flex child that clips and pushed the panel off the bottom of the pane
   (design gate, 2026-10-08: the footer line was cut at 390px AND at 1280px, and that is the
   one line carrying where the price comes from). Capped to the space actually below the bar
   so it scrolls rather than clips on a short window. */
.bp-bar{position:relative}
.bp-live-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:20;width:min(300px,calc(100vw - 28px));
  max-height:var(--bp-live-max,calc(100vh - 140px));overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:2px}
/* The pane's toolbar is often near the bottom of the window (it is the top of the PREVIEW
   column, not of the page), so a menu that only ever drops downward hangs off the screen and
   its last line — where the price comes from — is unreadable. When there is not room below,
   it opens upward instead; `js` sets the class after measuring. */
.bp-live-menu.is-up{top:auto;bottom:calc(100% + 8px)}
.bp-live-head{font-size:11.5px;color:var(--mut2);letter-spacing:.02em;padding:7px 10px 4px}
.bp-live-opt{font:inherit;text-align:start;background:transparent;border:0;border-radius:11px;padding:10px;min-height:44px;
  cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:2px;
  touch-action:manipulation;transition:background .15s ease-out}
.bp-live-opt:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.bp-live-opt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.bp-live-opt b{font-size:14px;font-weight:600}
.bp-live-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bp-live-row strong{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap}
.bp-live-opt small{font-size:12px;color:var(--mut);line-height:1.45}
.bp-live-foot{display:block;font-size:11.5px;color:var(--mut2);line-height:1.45;padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:4px}
.bp-live-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.bp-live:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The toolbar is tight on a phone: the label goes, the tick stays. The button is still a
   44px-tall tap target even though it reads as a small pill. */
@media(max-width:600px){.bp-live span{display:none}.bp-live{padding:7px 12px;min-height:44px;min-width:44px;justify-content:center}}

/* On a phone the toolbar sits most of the way down the window, so NEITHER direction has room:
   dropping down put the last line below the fold, and flipping up pushed the two tiers off the
   top (design gate, 2026-10-08 — the screenshot showed only the footnote). A choice about money
   has to be seen whole, so below 600px it stops being a popover and becomes the native pattern:
   a sheet anchored to the bottom of the pane, full width, above a scrim. */
@media(max-width:600px){
  .bp-live-menu,.bp-live-menu.is-up{position:fixed;top:auto;bottom:0;inset-inline:0;width:auto;
    max-height:min(70vh,420px);border-radius:18px 18px 0 0;border-bottom:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(0,0,0,.42)}
  .bp-live-menu::before{content:"";position:fixed;inset:0;bottom:100%;background:rgba(0,0,0,.45);z-index:-1}
  .bp-live-head{font-size:12px;padding:10px 10px 6px}
  .bp-live-opt{padding:12px 10px}
}

.bp-tabs{display:none}
@media(max-width:860px){
  .bp{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .bp-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg2)}
  .bp-tabs button{flex:1;font:inherit;font-size:13px;color:var(--mut);background:transparent;border:0;border-radius:999px;min-height:40px;cursor:pointer}
  .bp-tabs button.on{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
  .bp-chat{border-right:0}
  .bp[data-view="preview"] .bp-chat,.bp[data-view="chat"] .bp-prev{display:none}
  .bp-seg span,.bp-undo span{display:none}
  .bp-seg button,.bp-undo{min-width:44px;min-height:44px;justify-content:center;padding:6px 10px}
  .bp-form textarea{font-size:16px} /* below 16px iOS zooms the page on focus */
  .bp-manage-field input,.bp-manage-field textarea,.bp-manage-field select{font-size:16px} /* no iOS focus zoom in the manager */
  /* Already on a phone: the phone view is the screen itself, not a picture of one. */
  .bp[data-device="phone"] .bp-stage{padding:0;background:var(--bg)}
  .bp[data-device="phone"] .bp-device{width:100%;border:0;border-radius:0;box-shadow:none}
  .bp-manage{position:fixed;inset:72px 0 0;width:100%;border-left:0}
}
@media(prefers-reduced-motion:reduce){.bp-typing i{animation:none;opacity:.6}}

/* The questions asked before a build (flows.js askQuestions): taps first, typing optional. */
.pf-q{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.pf-q-t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.pf-q-opts{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{font:inherit;font-size:13.5px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;min-height:42px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;text-align:start}
.pf-chip:hover{border-color:var(--mut)}
.pf-chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pf-q-own{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--ink);font:inherit;
  font-size:14px;width:100%;transition:border-color .15s}
.pf-q-own:focus{outline:none;border-color:var(--mut2)}
.pf-q-own::placeholder{color:var(--mut2)}
@media(max-width:640px){.pf-q-own{font-size:16px}}

/* The composer (T-693): what the owner hands the builder besides words — files, a writer,
   and whether to look the business up. Each control is OPTIONAL and says what it costs in
   time, because the default (tap through and press Build) has to stay the fast path. */
.pf-extra{margin-top:18px;display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--line);padding-top:16px}
.pf-extra-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pf-extra-h b{font-size:12.5px;font-weight:600;color:var(--mut)}
.pf-extra-h small{font-size:11.5px;color:var(--mut2)}

/* Attach. The button is a label over a hidden input: a real file picker, keyboard-reachable,
   with no JS standing between the tap and the browser's own dialog. */
.pf-attach{display:flex;flex-direction:column;gap:9px}
.pf-attach-btn{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font:inherit;font-size:13.5px;color:var(--ink);background:transparent;
  border:1px dashed var(--line);border-radius:12px;padding:11px 15px;min-height:44px;
  cursor:pointer;transition:border-color .15s,background .15s}
.pf-attach-btn:hover{border-color:var(--mut);background:color-mix(in srgb, var(--ink) 3%, transparent)}
.pf-attach-btn svg{width:16px;height:16px;flex:none}
.pf-attach-btn input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pf-attach-btn:focus-within{outline:2px solid var(--mut2);outline-offset:2px}
.pf-attach-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* One row per file. A thumbnail is the owner's own bytes, read locally — never a round trip
   to see what they just picked. */
.pf-file{display:flex;align-items:center;gap:11px;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.pf-file-th{width:34px;height:34px;flex:none;border-radius:8px;object-fit:cover;background:var(--line)}
.pf-file-ic{width:34px;height:34px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--line);color:var(--mut)}
.pf-file-ic svg{width:16px;height:16px}
.pf-file-txt{flex:1;min-width:0}
.pf-file-txt b{display:block;font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-file-txt small{display:block;font-size:11.5px;color:var(--mut2);margin-top:1px}
.pf-file.is-bad{border-color:color-mix(in srgb, #e5484d 45%, var(--line))}
.pf-file.is-bad .pf-file-txt small{color:#e5484d}
/* Inspiration vs in-the-site is a real difference in where the file ends up, so it is a
   visible switch on the row rather than something buried in a menu. */
.pf-file-role{font:inherit;font-size:11.5px;color:var(--mut);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;min-height:32px;cursor:pointer}
.pf-file-role:hover{border-color:var(--mut)}
.pf-file-role.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pf-file-x{font:inherit;font-size:16px;line-height:1;color:var(--mut2);background:transparent;
  border:0;padding:6px 8px;min-width:32px;min-height:32px;cursor:pointer;border-radius:8px}
.pf-file-x:hover{color:var(--ink);background:var(--line)}

/* The writer picker and the look-it-up switch. */
.pf-models{display:flex;flex-wrap:wrap;gap:8px}
.pf-model{font:inherit;font-size:13px;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:12px;padding:9px 13px;min-height:42px;
  cursor:pointer;text-align:start;transition:border-color .15s,background .15s,color .15s}
.pf-model:hover{border-color:var(--mut)}
.pf-model.on{border-color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, transparent)}
.pf-model b{display:block;font-size:13px;font-weight:600}
.pf-model small{display:block;font-size:11px;color:var(--mut2);margin-top:2px}
.pf-model.on small{color:var(--mut)}

.pf-switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.pf-switch input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--ink)}
.pf-switch-txt{font-size:12.5px;color:var(--mut);line-height:1.55}
.pf-switch-txt b{display:block;color:var(--ink);font-weight:600;font-size:13px}

/* The facts a lookup found, for the owner to confirm. Each one is a checkbox plus an
   editable value: "confirm" has to include "correct it", or the only option for a wrong
   phone number is to drop it. */
.pf-facts{display:flex;flex-direction:column;gap:8px}
.pf-fact{display:flex;align-items:center;gap:10px;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.pf-fact input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;accent-color:var(--ink);cursor:pointer}
.pf-fact-f{font-size:11px;font-weight:600;color:var(--mut2);text-transform:uppercase;
  letter-spacing:.04em;flex:0 0 68px}
.pf-fact-v{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px;
  padding:6px 8px;color:var(--ink);font:inherit;font-size:13px;min-height:34px}
.pf-fact-v:hover{border-color:var(--line)}
.pf-fact-v:focus{outline:none;border-color:var(--mut2);background:var(--bg)}
.pf-fact-src{font-size:11px;color:var(--mut2);flex:none;max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-fact.off{opacity:.45}
/* What the lookup could not do, under the list it belongs to. */
.pf-miss{margin:12px 0 0}
@media(max-width:640px){
  .pf-fact{flex-wrap:wrap}
  .pf-fact-f{flex:0 0 auto}
  .pf-fact-src{display:none}
  /* 16px or iOS zooms the whole page on focus. */
  .pf-fact-v{font-size:16px}
  .pf-file-txt b{font-size:14px}
  .pf-model{width:100%}
  /* The role switch and × together are wider than a phone leaves beside a filename, so the
     switch drops to its own line rather than squeezing the name to three characters. */
  .pf-file{flex-wrap:wrap}
  .pf-file-txt{flex:1 0 55%}
  .pf-file-role{order:3;margin-inline-start:45px}
}