/* ============================================================================
   DetectiveCheck — blog
   Loaded after page.css, never instead of it. Everything a post shares with a
   legal page — the bar, the footer, the reading column, .doc prose, .callout,
   .toc, .faq accordion, .cta — already lives there and is not repeated here.
   This file holds only what a post has and a document does not: the byline
   row, tag pills, the answer-first takeaways box, ranked tool cards, the
   TL;DR, and the card grids used by the index and the related-posts strip.
   ============================================================================ */

  /* hero — the big graphic that opens a post.
     Drawn as inline SVG rather than shipped as a file: it inherits the theme
     tokens, so it is correct in light, dark and print without three exports;
     it costs no request and cannot arrive after the text; and it stays sharp
     at any width. The viewBox does the scaling, so there is no fixed height
     to go wrong on a phone. */
  .phero { position:relative; margin:0 0 clamp(1.5rem,3vw,2.25rem);
    border:2px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--neo-3);
    background:var(--bg); overflow:hidden; }
  .phero svg { display:block; width:100%; height:auto; }

  /* The photograph a post opens on. aspect-ratio holds the box before the
     image decodes, so the takeaways below it do not jump down the page when
     it arrives — the same reason width and height are on the tag. */
  .pphoto { display:block; width:100%; height:auto; aspect-ratio:1600/686;
    object-fit:cover; background:var(--bg-sunken); }
  .pphoto-body { aspect-ratio:1280/720; }

  /* Credit line. Only rendered for licences that require one, which is why it
     is absent from most of them rather than empty. */
  .credit { font-size:.75rem; color:var(--text-muted); padding:.5rem .875rem;
    border-top:2px solid var(--line); background:var(--bg-soft); }
  .credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

  /* Figure partway down the article, so a long post is not an unbroken column
     of text. Sits inside .doc, which styles p and a, so it opts out. */
  .bfig { margin:1.75rem 0; border:2px solid var(--line); border-radius:var(--r-card);
    box-shadow:var(--neo-2); overflow:hidden; background:var(--bg); }
  .bfig figcaption { font-size:.8125rem; color:var(--text-secondary);
    padding:.75rem .875rem; border-top:2px solid var(--line); background:var(--bg-soft);
    max-width:none; }
  .doc .bfig figcaption p { margin:0; max-width:none; }
  /* Two compositions of the same drawing, one per shape of screen. A single
     wide viewBox squeezed into 354px of phone scales its type to 7px, which
     is not small, it is unreadable.

     NOT scoped to .phero. It used to be, and that broke silently the day the
     photographs went in: the diagram moved out of the hero and into a
     <figure class="bfig"> partway down the article, the selectors stopped
     matching, and every post rendered BOTH compositions — the wide one at its
     normal size and the narrow one enormous underneath it. Twenty posts, live.
     The classes exist on nothing else, so they are matched globally now and
     cannot be orphaned again by moving the markup. */
  .h-narrow { display:none; }
  @media (max-width:719px) {
    .h-wide { display:none; }
    .h-narrow { display:block; }
  }

  /* byline — date, reading time, author. Sits under .phead h1's lede. */
  .pmeta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.125rem; margin-top:1.25rem;
    font-size:.8125rem; font-weight:600; color:var(--text-muted); }
  .pmeta span { display:inline-flex; align-items:center; gap:.4375rem; }
  .pmeta svg { width:15px; height:15px; color:var(--accent); flex-shrink:0; }

  .tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.125rem; }
  .tag { font-family:var(--font-display); font-size:.75rem; font-weight:650; letter-spacing:.01em;
    padding:.3125rem .6875rem; border:2px solid var(--line); border-radius:var(--r-pill);
    background:#fff; color:var(--text-secondary); box-shadow:var(--neo-1); }

  /* Answer-first block. It exists for the machine as much as the reader: an
     AI overview quotes the first self-contained passage that answers the
     title, so the post states its answer here before any preamble. */
  .takeaways { background:var(--accent-soft); border:2px solid var(--line); border-radius:var(--r-panel);
    box-shadow:var(--neo-2); padding:clamp(1.25rem,3vw,1.75rem); margin-bottom:1.75rem; }
  .takeaways h2 { font-family:var(--font-display); font-size:.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.12em; color:var(--accent-deep); margin-bottom:.875rem; }
  .takeaways p { color:var(--accent-deep); font-size:1.0625rem; margin-bottom:.875rem; max-width:70ch; }
  .takeaways ul { display:grid; gap:.5rem; }
  .takeaways li { position:relative; padding-left:1.625rem; color:var(--accent-deep); max-width:70ch; }
  .takeaways li::before { content:''; position:absolute; left:.25rem; top:.62em; width:7px; height:7px;
    border-radius:50%; background:var(--accent); }
  .takeaways li:last-child { margin-bottom:0; }

  /* ranked entry — the numbered card a "best tools" post is made of */
  .toolcard { border:2px solid var(--line); border-radius:var(--r-card); box-shadow:var(--neo-2);
    background:var(--bg-soft); padding:clamp(1.125rem,3vw,1.5rem); margin:0 0 1.25rem; }
  .toolhead { display:flex; align-items:flex-start; gap:.875rem; }
  .rank { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:2.25rem; height:2.25rem; border:2px solid var(--line); border-radius:var(--r-control);
    background:var(--accent); color:#fff; box-shadow:var(--neo-1);
    font-family:var(--font-display); font-weight:700; font-size:1rem; }
  .toolhead h3 { margin:0; font-family:var(--font-display); font-weight:700; font-size:1.125rem;
    letter-spacing:-.02em; line-height:1.25; }
  .toolhead .best { display:block; margin-top:.1875rem; font-family:var(--font-sans); font-size:.8125rem;
    font-weight:650; color:var(--accent); letter-spacing:0; }
  .toolcard > p { margin-top:.875rem; }
  .toolfacts { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.75rem;
    margin:1rem 0; padding:.875rem 0; border-block:1px solid var(--border); }
  .toolfacts div { min-width:0; }
  .toolfacts dt { font-size:.6875rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--text-muted); }
  .toolfacts dd { font-size:.9375rem; font-weight:600; color:var(--text-primary); overflow-wrap:anywhere; }
  .procon { display:grid; gap:1rem 1.5rem; }
  @media (min-width:640px) { .procon { grid-template-columns:1fr 1fr; } }
  .procon h4 { font-family:var(--font-display); font-size:.6875rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.09em; margin-bottom:.5rem; }
  .procon .pro h4 { color:var(--success); }
  .procon .con h4 { color:var(--danger); }
  .procon li { position:relative; padding-left:1.375rem; margin-bottom:.375rem; font-size:.9375rem;
    color:var(--text-secondary); }
  /* These cards sit inside .doc, whose `ul li::before` is a 6px blue disc.
     Setting only `content` here left the disc in place with a plus sign drawn
     on top of it, so the dimensions and the background have to be cleared
     too — a pseudo-element is one element, not two. */
  .procon li::before { width:auto; height:auto; background:none; border-radius:0;
    position:absolute; left:.1875rem; top:-.0625rem;
    font-family:var(--font-display); font-weight:700; }
  .procon .pro li::before { content:'+'; color:var(--success); }
  .procon .con li::before { content:'\2212'; color:var(--danger); }

  /* closing summary — the "so what" a reader who scrolled past everything gets */
  .tldr { background:var(--ink); color:#F2F5FA; border:2px solid var(--line);
    border-radius:var(--r-panel); box-shadow:var(--neo-3); padding:clamp(1.25rem,3vw,1.75rem);
    margin-top:2.5rem; }
  .tldr h2 { font-family:var(--font-display); font-size:.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.12em; color:#fff; margin:0 0 .75rem; padding:0; border:0; }
  .tldr p { color:rgba(242,245,250,.82); margin-bottom:0; max-width:70ch; }
  .tldr p + p { margin-top:.75rem; }
  .tldr strong { color:#fff; }

  /* card grids — blog index, and the related strip at the foot of a post */
  .postgrid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); }
  .postcard { display:flex; flex-direction:column; gap:.5rem; height:100%;
    background:#fff; border:2px solid var(--line); border-radius:var(--r-card); box-shadow:var(--neo-2);
    padding:1.25rem; transition:box-shadow .25s var(--ease), transform .25s var(--ease-spring); }
  /* The thumbnail bleeds to the card's edges, so the padding is moved off the
     card and onto the text. Negative margins rather than a wrapper because the
     card is already a flex column and a wrapper would need its own rules. */
  .postcard:has(.pcard-img) { padding:0; }
  .postcard:has(.pcard-img) > :not(.pcard-img) { margin-inline:1.25rem; }
  .postcard:has(.pcard-img) > .kick { margin-top:1.125rem; }
  .postcard:has(.pcard-img) > .more { margin-bottom:1.25rem; }
  .pcard-img { display:block; width:100%; height:auto; aspect-ratio:16/9;
    object-fit:cover; background:var(--bg-sunken);
    border-bottom:2px solid var(--line);
    border-radius:calc(var(--r-card) - 2px) calc(var(--r-card) - 2px) 0 0; }
  .postcard:hover { box-shadow:var(--neo-3); transform:translate(-1px,-1px); }
  .postcard .kick { font-family:var(--font-display); font-size:.6875rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
  /* h2 since the card heading moved up a level to stop the index skipping
     from h1 to h3. The size is deliberately unchanged: the heading level is a
     statement about structure, not about how big the text should look. */
  .postcard h2 { font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
    letter-spacing:-.02em; line-height:1.3; text-wrap:balance; margin:0; }
  .postcard p { font-size:.9375rem; color:var(--text-secondary); margin:0; }
  .postcard .more { margin-top:auto; padding-top:.5rem; font-family:var(--font-display); font-weight:650;
    font-size:.875rem; color:var(--accent); }

  .related { margin-top:clamp(2rem,4vw,3rem); }
  .related > h2 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
    font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem); margin-bottom:1.25rem; }

  :root[data-theme="dark"] .tag,
  :root[data-theme="dark"] .postcard { background-color:var(--bg); }
  :root[data-theme="dark"] .toolcard { background-color:var(--bg-sunken); }
  :root[data-theme="dark"] .takeaways { background-color:var(--bg-sunken); }
  :root[data-theme="dark"] .takeaways h2,
  :root[data-theme="dark"] .takeaways p,
  :root[data-theme="dark"] .takeaways li { color:var(--text-primary); }
  :root[data-theme="dark"] .rank,
  :root[data-theme="dark"] .btn-primary { color:#0A0F18; }
  :root[data-theme="dark"] .tldr { background:var(--bg-sunken); }
  :root[data-theme="dark"] .tldr h2,
  :root[data-theme="dark"] .tldr strong { color:var(--text-primary); }
  :root[data-theme="dark"] .tldr p { color:var(--text-secondary); }

  @media print {
    .tags, .related, .cta { display:none !important; }
    .takeaways, .toolcard, .tldr, .postcard { box-shadow:none; }
    .tldr { background:#fff; }
    .tldr h2, .tldr strong { color:#111; }
    .tldr p { color:#333; }
  }

  /* ── the lookup dock ───────────────────────────────────────────────────────
     The search control from the landing page, brought in once the reader is
     past the opening photograph. It sits over the page rather than in the
     column because the column is 64rem and the margins beside it are about
     128px on a 1280 screen — too narrow to hold a control, which is why the
     obvious "put it in the empty space" answer does not work at this width.

     Anchored bottom-centre, the width of the reading column, so it reads as
     part of the page rather than as an advert flown in over it. */
  .lookdock {
    position:fixed; z-index:70; left:50%; bottom:1rem;
    width:min(calc(100% - 2rem), 60rem);
    transform:translate(-50%, calc(100% + 2rem));
    opacity:0; pointer-events:none; visibility:hidden;
    background:var(--bg); border:2px solid var(--line); border-radius:var(--r-panel);
    box-shadow:var(--neo-3); padding:1rem 1.125rem;
    transition:transform .45s var(--ease-spring), opacity .3s var(--ease), visibility .3s;
  }
  .lookdock.is-in { transform:translate(-50%, 0); opacity:1; pointer-events:auto; visibility:visible; }

  .lookdock-head { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
  .lookdock-head p { font-family:var(--font-display); font-weight:650; font-size:.9375rem;
    margin:0; color:var(--text-primary); }
  .lookdock-x { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center;
    justify-content:center; width:1.875rem; height:1.875rem; border:2px solid var(--line);
    border-radius:var(--r-control); background:var(--bg-soft); color:var(--text-secondary);
    cursor:pointer; font-size:1rem; line-height:1; }
  .lookdock-x:hover { background:var(--bg-sunken); color:var(--text-primary); }

  /* The chips scroll sideways rather than wrapping to a second row: a dock
     that changes height as the placeholder changes would shift the page under
     the reader's thumb. */
  .lookdock .type-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-bottom:.25rem; margin-bottom:.75rem; }
  .lookdock .type-chips::-webkit-scrollbar { display:none; }
  .lookdock .type-chip { flex-shrink:0; box-shadow:var(--neo-1); }
  /* The landing page constrains this box to a hero column. In the dock it
     should fill the width it was given, or half the panel is dead space. */
  .lookdock .hero-search { box-shadow:var(--neo-2); width:100%; max-width:none; }

  @media (max-width:560px) {
    .lookdock { padding:.875rem; bottom:.625rem; }
    .lookdock-head p { font-size:.875rem; }
    /* The label is NOT hidden here, though it was. On a phone the landing
       page's form wraps and gives the button the full width — 298px at 390px
       of viewport — so hiding the text bought nothing and shipped a plain
       blue bar with no words and no icon on it. Measured, not guessed. */
  }

  /* A control that flies in unasked is exactly the thing this setting is for. */
  @media (prefers-reduced-motion: reduce) {
    .lookdock { transition:opacity .2s linear, visibility .2s; transform:translate(-50%, 0); }
  }
  @media print { .lookdock { display:none !important; } }

  /* ── reading aids ──────────────────────────────────────────────────────────
     Added by assets/blog.js. Everything here degrades to nothing if that file
     is blocked, which is why none of it carries meaning of its own. */
  .readbar { position:fixed; inset:0 0 auto 0; height:3px; z-index:80;
    background:transparent; pointer-events:none; }
  .readbar span { display:block; height:100%; width:100%; transform:scaleX(0);
    transform-origin:0 50%; background:var(--accent); will-change:transform; }

  /* Heading anchors. Hidden until the heading is hovered or the link itself is
     focused, so the article is not peppered with hashes — but reachable by
     keyboard, which display:none would prevent. */
  .hanchor { margin-left:.5rem; font-weight:400; color:var(--text-muted);
    text-decoration:none; opacity:0; transition:opacity .15s var(--ease); }
  .doc h2:hover .hanchor, .doc h3:hover .hanchor, .hanchor:focus-visible { opacity:1; }
  .doc .hanchor { color:var(--text-muted); text-decoration:none; }

  .toc a.is-here { color:var(--accent); font-weight:700; }

  .totop { position:fixed; right:1.25rem; bottom:1.25rem; z-index:65;
    width:2.75rem; height:2.75rem; display:inline-flex; align-items:center;
    justify-content:center; border:2px solid var(--line); border-radius:var(--r-control);
    background:var(--bg); color:var(--text-primary); box-shadow:var(--neo-2);
    cursor:pointer; opacity:0; visibility:hidden; transform:translateY(.5rem);
    transition:opacity .25s var(--ease), transform .25s var(--ease-spring), visibility .25s; }
  .totop.is-in { opacity:1; visibility:visible; transform:none; }
  .totop svg { width:19px; height:19px; }
  /* The dock owns the bottom-centre; on a narrow screen the two would overlap. */
  @media (max-width:900px) { .totop { bottom:calc(1.25rem + 12.5rem); } }

  /* On a screen with room to spare, the contents list stops scrolling away and
     sits in the margin the reader is not using. Below this width it stays a
     plain block above the article, because there is no margin to move it to. */
  /* 1180px was wrong and the page could not tell me: the reading column is
     64rem centred, so at 1280 each margin is 128px and a 15rem list pulled
     17.5rem left landed at x=-159 — entirely off screen, silently, because
     html carries overflow-x: clip. The column needs 64rem plus the list plus
     a gap on both sides before this is possible at all. */
  @media (min-width:1580px) {
    .toc { position:sticky; top:6.5rem; float:left; width:15rem;
      margin-left:-17rem; margin-bottom:0; max-height:calc(100vh - 9rem);
      overflow-y:auto; scrollbar-width:thin; }
    /* page.css lays the list out in columns, which is right for a wide block
       above the article and wrong for a 15rem rail: every entry wrapped after
       two words. */
    .toc ol { columns:1; column-count:1; }
    .toc li { break-inside:auto; }
    .toc + .doc, .toc ~ .doc { clear:none; }
  }

  .authorbox { display:flex; gap:1rem; align-items:flex-start; margin-top:2rem;
    padding:1.25rem; background:var(--bg); border:2px solid var(--line);
    border-radius:var(--r-card); box-shadow:var(--neo-2); }
  .authorbox svg { width:2.5rem; height:2.5rem; flex-shrink:0; color:var(--accent); }
  .authorbox h2 { font-family:var(--font-display); font-size:1rem; margin:0 0 .375rem;
    padding:0; border:0; }
  .authorbox p { font-size:.9375rem; color:var(--text-secondary); margin:0; max-width:66ch; }

  .postnav { display:grid; gap:1rem; margin-top:2rem; }
  @media (min-width:640px) { .postnav { grid-template-columns:1fr 1fr; } }
  .postnav a { display:block; padding:1rem 1.125rem; background:var(--bg);
    border:2px solid var(--line); border-radius:var(--r-card); box-shadow:var(--neo-1);
    transition:box-shadow .25s var(--ease), transform .25s var(--ease-spring); }
  .postnav a:hover { box-shadow:var(--neo-2); transform:translate(-1px,-1px); }
  .postnav .dir { display:block; font-family:var(--font-display); font-size:.6875rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent);
    margin-bottom:.25rem; }
  .postnav .ttl { font-family:var(--font-display); font-weight:650; font-size:.9375rem;
    color:var(--text-primary); line-height:1.35; }
  .postnav .next { text-align:right; }

  @media print { .readbar, .totop, .hanchor, .postnav { display:none !important; } }