/* The details-page picture (markup: tools/agentic-components/picture-body.html, stamped into the page): a dark bento board of tiles, here the projects. The dock, memory and phone tiles are in agentic-picture-tools.css, the repo dock in agentic-repo-dock.css. */
.agentic-board, .repo-dock { --tile: var(--ink-raised); --tile-hi: #221e1a; --edge: #2c2622; --edge-hi: #4a4038; --muted: var(--paper-soft); --accent: #d97757; --accent-ink: #1c0f08; --gap: 14px; --pad: 24px; } /* surfaces and the one accent (Claude coral), from the page's own tokens */
.agentic-board { display: grid; gap: var(--gap); margin-top: var(--gap); } /* the tiles, one under another */
.agentic-board .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the text version of the picture, for screen readers */
.agentic-board ul, .agentic-board ol, .repo-dock ul { margin: 0; padding: 0; list-style: none; } /* no bullets */
.agentic-board button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* plain buttons */
.agentic-board svg { display: block; } /* no inline gaps under marks */
.tile { position: relative; padding: var(--pad); border: 1px solid var(--edge); border-radius: 28px; background: var(--tile); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); transition: opacity 0.25s, border-color 0.25s, background 0.25s; } /* every bento tile */
.tile-label { margin: 0; color: var(--muted); font: 700 12px var(--body); letter-spacing: 0.14em; text-transform: uppercase; } /* small caps label */
.tile-sub { margin: 6px 0 18px; color: var(--muted); font: 400 15px var(--body); } /* line under a label */
.board-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 14px 6px 0; } /* the row above the project tiles */
.board-label h2 { margin: 0; font: 700 22px var(--display); letter-spacing: -0.02em; } /* "Projects" */
.board-label p { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 400 13px var(--body); } /* the legend */
.dash-key { width: 18px; height: 18px; border: 2px dashed var(--accent); border-radius: 6px; } /* the dashed-frame legend sample */
.proj-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); } /* twelve columns */
.proj-feature:nth-child(1) { grid-column: span 5; } /* eSIMs5G */
.proj-feature:nth-child(2) { grid-column: span 7; } /* GourmetAI */
.proj-small { grid-column: span 2; padding: 18px; } /* the six own projects */
.proj-feature { min-height: 280px; padding: 28px; background: linear-gradient(200deg, rgb(217 119 87 / 0.1), var(--tile) 60%); } /* the two real products are bigger */
.proj-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 44px; outline: none; } /* the whole tile is the button */
.proj-pick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* stretches the tap area over the tile */
.proj-pick:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; } /* keyboard focus */
.logo { grid-row: span 2; width: 64px; height: 64px; border-radius: 16px; object-fit: cover; } /* project logo */
.proj-name { align-self: end; font: 750 24px/1.15 var(--display); letter-spacing: -0.02em; } /* a featured project's name */
.proj-count { align-self: start; color: var(--muted); font: 400 13px var(--body); } /* "9 tools" */
.proj-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } /* a tile's own tools */
.tool-item { display: flex; align-items: center; gap: 8px; transition: opacity 0.2s, box-shadow 0.2s; } /* mark and name */
.proj-feature .tool-item, .route-tile .tool-item { padding: 5px 12px 5px 5px; border: 1px solid var(--edge); border-radius: 12px; background: rgb(255 255 255 / 0.04); } /* named pill */
.tool { flex: none; width: 30px; height: 30px; border-radius: 8px; } /* an official mark */
.tool-text { display: grid; place-items: center; width: auto; height: 30px; padding: 0 10px; border: 1px solid var(--edge-hi); background: #2c2622; font: 700 12px var(--body); } /* a plain name chip: no official file */
.tool-name { font: 600 13px var(--body); } /* a tool's name in a pill */
.proj-small .tool-name { display: none; } /* the small tiles show marks only */
.proj-small .proj-pick { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } /* logo above name */
.proj-small .logo { grid-row: auto; width: 48px; height: 48px; } /* smaller logo */
.proj-small .proj-name { align-self: auto; font-size: 16px; } /* smaller name */
.proj-small .proj-tools { gap: 6px; margin-top: 14px; max-width: 100%; } /* tighter mark rows */
.proj-small .tool { width: 28px; height: 28px; } /* mark size */
.proj-small .tool-text { width: auto; height: 28px; } /* chip height */
.proj-small .tool-item { gap: 0; } /* no gap without a name */
.proj.is-linked { border-color: var(--accent); background: linear-gradient(180deg, rgb(217 119 87 / 0.14), var(--tile)); } /* a lit tile */
.proj.is-dim { opacity: 0.42; } /* a dimmed tile */
.tool-item.is-dim { opacity: 0.28; } /* a dimmed mark */
.tool-item.is-hit .tool { box-shadow: 0 0 0 2px var(--accent); } /* the matching mark inside a lit tile */
@media (hover: hover) { .proj:not(.is-dim):hover { border-color: var(--edge-hi); background-color: var(--tile-hi); } } /* mouse: a quiet border change, no movement */
@media (max-width: 1100px) { /* tablets */
  .proj-feature:nth-child(1), .proj-feature:nth-child(2) { grid-column: span 12; min-height: 0; } /* big tiles at full width */
  .proj-small { grid-column: span 4; } /* three per row */
}
@media (max-width: 640px) { /* phones */
  .agentic-board, .repo-dock { --pad: 18px; } /* tighter tiles */
  .tile { border-radius: 22px; } /* smaller corners */
  .proj-feature { padding: 20px; } /* featured padding */
  .proj-small { grid-column: span 6; padding: 16px; } /* two per row */
  .proj-name { font-size: 21px; } /* featured name */
  .logo { width: 56px; height: 56px; } /* featured logo */
}