/* The search (F1, October 10, 2026; refined with Taylor and built that night). Taylor, shown three ideas for the
   Flock cameras: "Absolutely the search. Lock that." Of the piece with Samuel's answer in: "Take Samuel's name out
   under "i'd ban them"." "Can you shrink the citations? They aren't like the star of the show here. Maybe make
   them hover links?" "Otherwise this is a lock."
   Four parts on one grid: the words, the object, the close, the notes. On a phone they run in that order; on a
   laptop the words, the close and the notes are one stack and the object stands beside it. Its ground is royal, the
   field it follows on Home: Samuel's three sentences over it say he knows where software breaks, and this is where.
   The page supplies the tokens; the values typed here are the locked ones, as fallbacks.
   Every word, figure and source is flock.data.json's. */
.fk {
  --fk-royal: var(--royal, #1F3C99);
  --fk-pale: var(--pale, #A8C8E6);
  --fk-white: var(--white, #FFFFFF);
  --fk-sand: var(--sand, #D9C4A0);
  --fk-ink: var(--ink, #000000);
  --fk-display: var(--display, "Literata", Georgia, serif);
  --fk-text: var(--text, "Lexend", system-ui, sans-serif);
  --fk-gutter: var(--gutter, 20px);
  --fk-max: var(--max, 1200px);
  --fk-band: var(--band, 56px);
  --fk-headsize: var(--head, 30px);
  --fk-lane: var(--lane, 0px);
  background: var(--fk-royal); color: var(--fk-white); font-family: var(--fk-text); font-size: 17px; line-height: 1.5;
  padding: var(--fk-band) 0;
}
.fk *, .fk *::before, .fk *::after { box-sizing: border-box; }
.fk h2, .fk p, .fk ul { margin: 0; padding: 0; }
.fk :focus-visible { outline: 3px solid var(--fk-sand); outline-offset: 3px; border-radius: 2px; }
.fk .fk-in { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--fk-gutter), var(--fk-max)); margin-inline: auto; }

/* The words */
.fk .fk-head { font-family: var(--fk-display); font-weight: 900; font-size: var(--fk-headsize); line-height: 1.08; letter-spacing: 0;
               text-wrap: balance; font-feature-settings: "liga" 0, "dlig" 0; color: var(--fk-white); max-width: 13em; }
.fk .fk-lede { margin-top: 16px; max-width: 30em; }

/* The object: the camera system's own search screen, drawn from Flock's pictures of it (its post of December 10,
   2025): a bar with Flock's mark and the Search tab, the section it calls Investigative Purpose, the field it calls
   Search Reason, the button it calls Run Search. A screen, on white, where the power bill is a sheet of paper: a
   bar across its top, its fields ruled, its answer given on it. The look's own colors and faces throughout. */
.fk .fk-obj { margin-top: 40px; }
.fk .fk-screen { max-width: 520px; overflow: hidden; border-radius: 4px; background: var(--fk-white); color: var(--fk-ink); }
.fk .fk-screen :focus-visible { outline-color: var(--fk-royal); }
/* The logo stands in the bar's middle and the tab sits on the wordmark's baseline, which is the logo's foot. */
.fk .fk-bar { display: flex; align-items: baseline; column-gap: 18px; height: 48px; padding: 14px 16px 0; background: var(--fk-pale); }
.fk .fk-logo { display: block; width: auto; height: 20px; }
.fk .fk-tab { font-weight: 600; font-size: 14px; line-height: 1; }
.fk .fk-form { display: grid; padding: 16px 16px 18px; }
.fk .fk-purpose { display: flex; align-items: center; column-gap: 12px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.fk .fk-purpose::after { content: ""; flex: 1; height: 1px; background: var(--fk-pale); }
.fk .fk-label { display: block; margin: 14px 0 6px; font-weight: 500; font-size: 13px; line-height: 1.3; }
.fk .fk-form input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 14px; border: 1px solid var(--fk-ink); border-radius: 2px;
                     background: var(--fk-white); color: var(--fk-ink); font-family: var(--fk-text); font-weight: 400; font-size: 17px; line-height: 1;
                     -webkit-appearance: none; appearance: none; opacity: 1; }
.fk .fk-form input::placeholder { color: var(--fk-ink); opacity: 0.55; }
.fk .fk-form button { height: 52px; margin: 12px 0 0; padding: 0 26px; border: 0; border-radius: 2px; background: var(--fk-sand); color: var(--fk-royal);
                      font-family: var(--fk-text); font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; }
.fk .fk-form button:disabled { cursor: default; }
.fk .fk-hint { margin-top: 10px; font-size: 14px; line-height: 1.4; }
.fk .fk-hint:empty { display: none; }
/* The screen's answer, on the screen. */
.fk .fk-answer { padding: 16px 16px 24px; border-top: 1px solid var(--fk-pale); }
.fk .fk-out { margin-top: 28px; }
/* Before a reason is entered the answer waits; without the script the proof stands as it is. */
.fk[data-ready]:not([data-searched]) .fk-out, .fk:not([data-searched]) .fk-answer { display: none; }
.fk .fk-typed { font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.fk .fk-verdict { margin-top: 6px; font-family: var(--fk-display); font-weight: 900; font-size: 56px; line-height: 1; font-feature-settings: "liga" 0, "dlig" 0; color: var(--fk-royal); }
.fk .fk-proof { max-width: 30em; }
/* The 166, drawn as what they count: one mark a search. The marks keep one size and take as many to a row as the
   screen's width holds, so the row ends on the screen's right edge, as the sentence and the line under them do. */
.fk .fk-out { max-width: 520px; }
.fk .fk-marks { display: grid; grid-template-columns: repeat(auto-fill, 9px); justify-content: space-between; gap: 5px; margin-top: 24px; }
.fk .fk-marks i { aspect-ratio: 1; border-radius: 50%; background: var(--fk-sand); }
.fk .fk-cap { margin-top: 14px; max-width: 26em; font-size: 15px; line-height: 1.45; }
/* Three records in one place (Samuel, October 10, 2026: "rotate out "they searched for an ex" "they crossed state
   lines without warrants" "they were told to cover their tracks""). Each is a sentence, the thing drawn, and a line
   under it, and one shows. Which one, and Next, stand over the record, as a search's results are counted, so Next
   never moves under the hand. Without the script the first stands alone, as the piece was locked. */
.fk .fk-rec:not([data-on]), .fk:not([data-turns]) .fk-turn { display: none; }
.fk[data-turns] .fk-out { margin-top: 10px; }
.fk .fk-proof { text-wrap: pretty; }
/* The 1,558, one mark a city or town: 82 across and 19 down, drawn as one pattern so the page carries no 1,558 parts. */
.fk .fk-field { display: block; width: 100%; height: auto; margin-top: 24px; }
.fk .fk-field circle { fill: var(--fk-sand); }
/* What the officers were told, in the words they were told it. */
.fk .fk-quote { margin-top: 20px; font-family: var(--fk-display); font-weight: 900; font-size: 30px; line-height: 1.08; font-feature-settings: "liga" 0, "dlig" 0;
                color: var(--fk-sand); text-wrap: balance; }
/* Which record, and the next. Small, as the sources' line is, and a point larger, since it is pressed. */
.fk .fk-turn { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; font-size: 13px; line-height: 1.3;
               letter-spacing: 0.1em; text-transform: uppercase; color: var(--fk-pale); }
.fk .fk-turn button { display: inline-flex; align-items: center; column-gap: 9px; min-height: 44px; margin: 0; padding: 0 2px 0 12px; border: 0; background: none;
                      color: var(--fk-white); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.fk .fk-turn button::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 2px solid var(--fk-sand); border-right: 2px solid var(--fk-sand); transform: rotate(45deg); }
.fk .fk-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The close: Samuel's answer to "They catch car thieves", then his line. No name under it. */
.fk .fk-close { margin-top: 40px; }
.fk .fk-why { max-width: 22em; text-wrap: balance; }
.fk .fk-ban { margin-top: 14px; font-family: var(--fk-display); font-weight: 900; font-size: 40px; line-height: 1.05; font-feature-settings: "liga" 0, "dlig" 0; }

/* The notes: the door, then the sources behind one small line. They open under the pointer, by a tap or by a key. */
.fk .fk-notes { display: grid; justify-items: start; row-gap: 6px; margin-top: 28px; }
.fk .fk-door { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--fk-white); text-decoration: none;
               border-bottom: 2px solid var(--fk-sand); transition: border-color 150ms; text-wrap: balance; }
.fk .fk-door:hover { border-bottom-color: var(--fk-white); }
.fk .fk-cite { position: relative; }
.fk .fk-cite summary { display: inline-flex; align-items: center; column-gap: 9px; min-height: 44px; cursor: pointer; list-style: none;
                       font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fk-pale); }
.fk .fk-cite summary::-webkit-details-marker { display: none; }
.fk .fk-cite summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid var(--fk-sand);
                              border-bottom: 2px solid var(--fk-sand); transform: rotate(45deg); }
.fk .fk-cite[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.fk .fk-cite summary:focus-visible { outline-offset: 2px; }
.fk .fk-card { position: absolute; left: 0; top: 100%; z-index: 3; display: grid; row-gap: 6px; width: max-content;
               max-width: min(100vw - 2 * var(--fk-gutter), 27em); padding: 12px 14px; list-style: none; border-radius: 2px;
               background: var(--fk-white); color: var(--fk-ink); font-size: 13px; line-height: 1.45;
               outline: 1px solid var(--fk-pale); outline-offset: -1px; }
@media (max-width: 401px) { .fk .fk-door { max-width: 10.9em; } }

/* On a laptop, two columns that share a top edge. The words are one stack that a search never moves: the head, the
   lede, Samuel's answer and his line, the door, the sources. The object is the other, and every part of it runs the
   column, so the screen, the sentence, the marks and their line end on the page's right edge. (Taylor, October 10,
   2026, of the block after a search: "There is an alignment issue in this block." The close had been set on the
   object's foot, so a search tore the words in two with a hole between them, and the object's four parts ended on
   four edges.) */
@media (min-width: 900px) {
  .fk .fk-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--fk-lane)); grid-template-rows: auto auto auto 1fr; grid-template-areas: "text obj" "close obj" "notes obj" ". obj"; }
  .fk .fk-text { grid-area: text; }
  /* The screen's top edge sits on the top of the headline's capitals. */
  .fk .fk-obj { grid-area: obj; margin-top: 10px; }
  .fk .fk-close { grid-area: close; margin-top: 48px; }
  .fk .fk-notes { grid-area: notes; margin-top: 36px; }
  .fk .fk-lede, .fk .fk-proof, .fk .fk-why { font-size: 19px; }
  .fk .fk-screen, .fk .fk-out, .fk .fk-proof, .fk .fk-cap { max-width: none; }
  .fk .fk-marks { grid-template-columns: repeat(auto-fill, 11px); gap: 6px; }
  .fk .fk-proof { text-wrap: balance; }
  .fk .fk-cap { text-wrap: pretty; }
  .fk .fk-cap { font-size: 16px; }
  .fk .fk-quote { font-size: 38px; }
  .fk .fk-ban { margin-top: 16px; font-size: 52px; }
}