/* ==========================================================================
   detail.css — the one sub-page: everything.html

   A BENTO GRID of large, airy tiles. This page has now been through three
   shapes and the reason is worth recording, because it is the same mistake
   twice: it started as ten full-width rows of sentence-long list items, then
   became ten bordered tiles containing the same sentences, then an app-style
   table with a tag column. All three still read as a block of text, because the
   problem was never the container — it was that a capability was written as a
   sentence. Twelve sentences are a paragraph however you box them.

   So a capability is now a CHIP: two to four words. Twelve chips wrap to three
   short rows instead of stacking twelve lines, which is what finally made the
   page scannable — and it made the grid tidier for free, since a chip cloud's
   height barely changes between a ten-item group and a twelve-item one.

   Layout is a fixed 3-column grid with two double-wide tiles at staggered
   positions, so every row fills exactly: 1+1+1 / 1+2 / 2+1 / 1+1+1. No
   `grid-auto-flow: dense` — it backfills holes by pulling later tiles forward,
   which would silently reorder the surface away from the landing page's order.

   Still no product frame and no motion. A reference page does not perform.
   ========================================================================== */

/* --- page head ----------------------------------------------------------- */
.phead { padding: 68px 0 0; }
.phead__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.phead .eyebrow { display: block; margin-bottom: 18px; }
.phead h1 { font-size: var(--t-display); line-height: 1.03; letter-spacing: -0.035em;
  max-width: 20ch; margin-bottom: 18px; }
.phead .lead { max-width: 56ch; }
.phead__back { display: inline-block; margin-top: 24px; font-size: 14px; color: var(--muted); }
.phead__back:hover { color: var(--ink); }

/* --- the grid ------------------------------------------------------------ */
.bento {
  --r-tile: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 46px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-tile);
  overflow: hidden;                 /* the motif bleeds off the corner */
  scroll-margin-top: 90px;          /* the landing page deep-links every tile */
}
.bt--w { grid-column: span 2; }

/* --- the module motif ---------------------------------------------------- */
/* One line drawing per box, of the module that box is describing: field rows
   for the schema, a table for views, a node graph for records, a DAG for
   workflows. Two rules keep it a background and not a decoration. It is drawn
   in `--border-2`, the same token as a hairline, so it can never compete with a
   chip — and it is PINNED TO THE BOTTOM-RIGHT AND BLEEDS OFF, which is what
   makes it read as a surface continuing past the tile rather than as an icon
   floating in space. `aria-hidden`, and no title: it carries no information the
   chips do not. */
.bt__bg {
  position: absolute; z-index: 0;
  right: -20px; bottom: -16px; width: 176px;
  color: var(--border-2);
  pointer-events: none;
  /* Dissolve away from the corner. Without this, a motif with a long straight
     run — the analytics axis, the AI panel outline, the views grid — draws a
     visible stroke up behind the chips, which reads as a stray line rather than
     as a surface. Fading it means only the corner is ever legible, so the motif
     can never be mistaken for content. */
  -webkit-mask-image: radial-gradient(115% 115% at 100% 100%, #000 30%, transparent 78%);
  mask-image: radial-gradient(115% 115% at 100% 100%, #000 30%, transparent 78%);
}
.bt--w .bt__bg { width: 224px; right: -26px; bottom: -20px; }
.bt__bg svg { display: block; width: 100%; height: auto; }
/* Positioned elements paint above in-flow content whatever the source order, so
   the tile's own content has to be raised explicitly or the motif covers it. */
.bt > :not(.bt__bg) { position: relative; z-index: 1; }

/* --- tile head: the claim, and the count as the visual anchor ------------- */
.bt__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 19px;
}
.bt__top h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 1.75vw, 21px); line-height: 1.15; letter-spacing: -0.022em;
  color: var(--ink);
}
/* Set large on purpose — it is the tile's graphic, and it is the only number on
   the page that carries the breadth claim. Above 24px WCAG treats it as large
   text (3:1), so `--faint` is safe here in a way it is not at body sizes. */
.bt__n {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3vw, 38px); line-height: 0.86; letter-spacing: -0.04em;
  color: var(--faint); flex: none; margin-top: -2px;
}

/* --- chips --------------------------------------------------------------- */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips li {
  font-size: 12.5px; line-height: 1.25; color: var(--body);
  padding: 6px 11px; border-radius: 999px;
  background: var(--sunk); border: 1px solid transparent;
}

/* A wide tile states the argument its group is making. It is set large and to a
   deliberately narrow measure so it wraps to two or three lines — that height is
   what keeps a double-width tile level with its single-width neighbour, whose
   chips wrap into more rows. */
.bt__pull {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.28; letter-spacing: -0.022em;
  color: var(--ink); margin: -4px 0 20px; max-width: 34ch; text-wrap: pretty;
}

/* --- the caveat tile ----------------------------------------------------- */
/* Full width and recessed rather than lifted. A site with no logo wall earns
   trust by naming its own edges, so this is as prominent as any group tile. */
.bt--note { grid-column: 1 / -1; background: var(--sunk); padding: 28px 28px 30px; }
.bt--note .eyebrow { color: var(--muted); }   /* faint on sunk is 4.35:1, under AA */
.bt--note h2 { font-size: clamp(21px, 2.1vw, 25px); letter-spacing: -0.024em; margin: 12px 0 7px; }
.bt--note > p { font-size: 15px; color: var(--muted); max-width: 62ch; }

.bt--note dl {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 26px 40px;
}
.bt--note dt {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 8px;
}
.bt--note dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--body); }

/* The shared `.sec` rhythm is built for the landing page, where a section is a
   whole beat. Here it lands on top of `.cta`'s own padding and opens a void. */
.rgrid + .sec--plain { padding: 40px 0 0; }

/* --- the four roles ------------------------------------------------------ */
/* Explicit column counts, not `auto-fit`: four tiles into an auto-fit track
   resolve to THREE columns at tablet width, which leaves one role stranded on
   its own row at a third of the width. 4 / 2x2 / 1 always pairs evenly. */
.rgrid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.rt { padding: 24px 24px 26px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 20px; }
.rt h3 { font-family: var(--font-display); font-weight: 500; font-size: 17px;
  letter-spacing: -0.018em; color: var(--ink); }
.rt h3 span {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.rt p { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--body); }

@media (max-width: 1040px) {
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt--w { grid-column: span 2; }
}
@media (max-width: 640px) {
  .phead { padding-top: 46px; }
  .bento { grid-template-columns: minmax(0, 1fr); padding-top: 34px; gap: 12px; }
  .bt { padding: 22px 21px 20px; }
  .bt--w, .bt--note { grid-column: span 1; }
  .rgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}