/* The rest of the details-page picture: the connected-tools dock (four labelled groups, every tool a 48 px button), the memory tile, the phone route, the credit line and the floating sentence that says what is linked. Tiles are in agentic-picture.css. */
.dock-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 28px; margin-top: 20px; } /* four groups in a checkerboard of widths */
.dock-wide { grid-column: span 7; } /* Ship and Data */
.dock-narrow { grid-column: span 5; } /* AI and Reach */
.dock-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 17px var(--display); letter-spacing: -0.01em; } /* a group's name */
.dock-label::after { content: ""; flex: 1; height: 1px; background: var(--edge); } /* a rule after the name */
.dock-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; } /* the pill grid */
.dock-tool { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 8px; border: 1px solid var(--edge); border-radius: 14px; background: rgb(255 255 255 / 0.03); transition: border-color 0.2s, background 0.2s, opacity 0.2s; } /* a tool you can tap */
.dock-tool:hover { border-color: var(--edge-hi); background: rgb(255 255 255 / 0.07); } /* hover */
.dock-tool:focus-visible, .proj-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* keyboard focus */
.dock-name { font: 600 13.5px var(--body); white-space: nowrap; } /* a tool's name */
.dock-tool .tool-text + .dock-name { display: none; } /* a name chip already says its name */
.proj-feature .tool-text, .route-tile .tool-text, .dock-tool .tool-text { height: auto; padding: 0 6px; border: 0; background: none; font-size: 13.5px; } /* a text-only tool: the pill is the chip */
.dock-tool.is-dim { opacity: 0.28; } /* a dimmed tool */
.dock-tool.is-linked { border-color: var(--accent); background: rgb(217 119 87 / 0.16); } /* a lit tool */
.dock-tool[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } /* the picked tool */
.pair-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); } /* memory and phone side by side */
.memory { grid-column: span 7; } /* the memory tile */
.route-tile { grid-column: span 5; } /* the phone tile */
.mem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* nine items, three by three */
.mem { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px; border: 1px solid var(--edge); border-radius: 16px; background: rgb(255 255 255 / 0.03); } /* one memory item */
.mem-glyph { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgb(217 119 87 / 0.14); color: var(--accent); } /* its glyph */
.mem-glyph svg, .route-node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* line glyph style */
.mem-text { font: 600 14px/1.25 var(--body); } /* an item's name */
.route-tile .tile-label .proj-pick { display: flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: inherit; text-transform: inherit; } /* the phone title is the button */
.route { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; margin-top: 14px; } /* the route */
.route-node { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--edge); border-radius: 16px; background: rgb(255 255 255 / 0.03); font: 600 13px/1.25 var(--body); text-align: center; } /* one device in the route */
.route-node svg { width: 26px; height: 26px; color: var(--paper); } /* its glyph */
.route-claude svg { fill: var(--accent); stroke: none; } /* the Claude Code mark in the route */
.route-link { display: grid; place-items: center; color: var(--accent); font: 700 12px var(--body); } /* the words between devices */
.phone-tools { margin-top: 16px; } /* Tailscale and launchd */
.phone-note { margin-top: 16px; color: var(--muted); font: 400 14px var(--body); } /* the push line */
.footnote { max-width: 78ch; padding: 6px 6px 0; color: var(--muted); font: 400 12.5px/1.5 var(--body); } /* the credit line */
.agentic-status { position: fixed; left: 50%; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 6px; width: max-content; max-width: min(720px, calc(100vw - 24px)); padding: 6px 6px 6px 18px; border-radius: 26px; background: var(--paper); box-shadow: 0 10px 30px rgb(0 0 0 / 0.5); color: #1a1410; opacity: 0; visibility: hidden; transform: translate(-50%, 24px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; } /* the floating sentence */
.agentic-status[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* shown while something is picked */
.agentic-status-text { padding: 6px 0; font: 600 14px/1.3 var(--body); } /* what is linked */
.agentic-status-clear { min-width: 64px; min-height: 44px; border-radius: 99px; background: #1a1410; color: var(--paper); font: 700 13px var(--body); text-align: center; } /* the Clear button */
@media (max-width: 1100px) { /* tablets */
  .dock-wide, .dock-narrow, .memory, .route-tile { grid-column: span 12; } /* groups and tiles stack */
}
@media (max-width: 640px) { /* phones */
  .mem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two columns */
  .route { grid-template-columns: minmax(0, 1fr); } /* a vertical route */
  .route-node { flex-direction: row; justify-content: flex-start; padding: 10px 14px; text-align: left; } /* wide device rows */
  .dock-grid { gap: 24px; } /* tighter groups */
  .dock-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two pill columns */
}