/* Shared components (DESIGN.md): pills, links, proof rows, cream tiles and cards, chips, path cards,
   captions, FAQ tabs and the embedded office frame. Colours come from tokens.css. */

/* Buttons: an ink pill, a glass pill. 52px, radius 32. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r-button); font-size: 17px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), transform var(--fast) var(--enter);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-800); }
.btn-glass { border-color: var(--line-ink); background: var(--glass-strong); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { background: var(--canvas); border-color: var(--ink-subtle); }
.btn .i { transition: transform var(--base) var(--enter); }
.btn:hover .i { transform: translateX(3px); }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); }
.text-link .i { color: var(--accent); transition: transform var(--base) var(--enter); }
.text-link:hover .i { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.actions--left { justify-content: flex-start; }

/* Proof row: small icon + fact, separated by air, not by dots. */
.proof-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; color: var(--ink-muted); font-size: 14px; }
.proof-row li { display: inline-flex; align-items: center; gap: 8px; }
.proof-row .i { flex: none; color: var(--ink); }
.proof-row--left { justify-content: flex-start; }

/* Caption under a simulation */
.sim-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 14px; }
.sim-caption .caption { display: inline-flex; align-items: flex-start; gap: 8px; }
.sim-caption .dot { margin-top: calc(.725em - 3px); }

/* Tiles: translucent cream, a hairline, no shadow until they are links under the pointer. */
.tile-grid { display: grid; gap: 16px; }
.tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.tile h3 { font-size: 18px; }
.tile p { color: var(--ink-muted); font-size: 15px; }
/* Contrast hues: an area of work carries one, and its icons, chips and scenes take it on. */
.hue-orange { --hue: var(--orange); --hue-soft: var(--orange-soft); --hue-on-ink: var(--orange-on-ink); }
.hue-blue { --hue: var(--blue); --hue-soft: var(--blue-soft); --hue-on-ink: var(--blue-on-ink); }
.hue-green { --hue: var(--green); --hue-soft: var(--green-soft); --hue-on-ink: var(--green-on-ink); }
.hue-ochre { --hue: var(--ochre); --hue-soft: var(--ochre-soft); --hue-on-ink: var(--ochre-on-ink); }
.hue-plum { --hue: var(--plum); --hue-soft: var(--plum-soft); --hue-on-ink: var(--plum-on-ink); }
.tile-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-bottom: 12px;
  border: 1px solid var(--hue-soft, var(--line)); border-radius: 12px; background: var(--hue-soft, var(--canvas)); color: var(--hue, var(--ink));
}
.tile-icon--logo img { width: 22px; height: 22px; object-fit: contain; }
.tile--link, .glass-card, .result-card { transition: background var(--base), border-color var(--base), box-shadow var(--base); }
.tile--link { padding-right: 56px; }
.tile--link > .i:last-child, .glass-card > .i:last-child { position: absolute; top: 24px; right: 24px; color: var(--ink-subtle); transition: color var(--fast), transform var(--base) var(--enter); }
.tile--link:hover, .glass-card:hover, .result-card:hover { border-color: var(--line); background: var(--canvas); box-shadow: var(--shadow-card-hover); }
.tile--link:hover > .i:last-child, .glass-card:hover > .i:last-child { color: var(--accent); transform: translateX(3px); }

/* Linked cards in a grid of three */
.glass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.glass-grid > li { display: flex; }
.glass-card { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 176px; padding: 24px 56px 24px 24px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.glass-card b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.glass-card > span:not(.tile-icon) { color: var(--ink-muted); font-size: 14.5px; }
.glass-card--ink { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.glass-card--ink > span:not(.tile-icon) { color: var(--on-glass-ink); }
.glass-card--ink .tile-icon { border-color: var(--line-on-ink); background: var(--tint-on-ink); color: var(--on-ink); }
.glass-card--ink > .i:last-child { color: var(--on-ink); }
.glass-card--ink:hover { border-color: var(--ink-800); background: var(--ink-800); }
.glass-card--ink:hover > .i:last-child { color: var(--on-ink); }

/* Case results */
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case-grid > li { display: flex; }
.result-card { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
/* Logos share one optical size: the thin wordmarks get more height than Lumoa's heavy one. */
/* Client logos are grey until the card is pointed at or focused, like the logo strip. Verduin's wordmark is small
   beside its foot drawing, so its logo gets more height to read as large as the others. */
.result-logo { display: flex; align-items: center; height: 56px; }
.result-logo img { width: auto; max-width: 220px; height: 28px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .72; transition: filter var(--base), opacity var(--base); }
.result-card:hover .result-logo img, .result-card:focus-visible .result-logo img { filter: none; opacity: 1; }
.result-logo .case-logo--topline { height: 46px; }
.result-logo .case-logo--podotherapie-verduin { height: 56px; max-width: 100%; }
.result-sector { min-height: 3em; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) { .result-sector { min-height: 0; } }
.result-figure { display: grid; gap: 4px; padding-block: 18px; border-block: 1px solid var(--line); }
.result-figure b { font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.result-figure span { color: var(--ink-muted); font-size: 14px; }
.result-meta { display: grid; gap: 6px; color: var(--ink-muted); font-size: 14px; }
.result-meta b { color: var(--ink); font-weight: 500; }
.result-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 500; }
.result-link .i { color: var(--accent); transition: transform var(--base) var(--enter); }
.result-card:hover .result-link .i { transform: translateX(3px); }

/* Chips with real, cut-out logos */
.int-rows { display: grid; border-top: 1px solid var(--line); }
.int-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.int-row h3 { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--canvas); font-size: 14px; font-weight: 500; transition: border-color var(--fast), box-shadow var(--fast);
}
.chip img { width: 20px; height: 20px; object-fit: contain; }
/* Wordmark logos show only their own symbol at chip size: the Picqer asterisk, the Woo balloon, a wider bol. */
.chip .chip-logo--picqer { object-fit: cover; object-position: 0 50%; }
.chip .chip-logo--woocommerce { width: 34px; object-fit: cover; object-position: 0 50%; }
.chip .chip-logo--bol { width: 30px; }
.chip:hover { border-color: var(--line-ink); box-shadow: var(--shadow-card-hover); }
.suite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }

/* Path cards */
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.path-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.path-card h3 { font-size: 26px; letter-spacing: -.03em; }
.path-card > p { color: var(--ink-muted); }
.path-card .actions { margin-top: auto; gap: 8px 20px; padding-top: 6px; }
.meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); font-size: 13px; font-weight: 500; }
.check-list { display: grid; gap: 10px; margin: 4px 0 8px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.check-list .i { flex: none; margin-top: 2px; color: var(--ok); }

/* FAQ: segmented tabs and plus/minus rows. Panels stack in one cell so switching never moves the page. */
.faq-tabs { display: grid; gap: 24px; }
.tab-group { display: none; justify-self: center; gap: 4px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel-solid); }
.js .tab-group { display: inline-flex; }
.tab-group [role="tab"] { min-height: 40px; padding: 8px 16px; border-radius: var(--r-small); color: var(--ink-muted); font-size: 15px; font-weight: 500; transition: color var(--fast), background var(--fast), box-shadow var(--fast); }
.tab-group [role="tab"]:hover { color: var(--ink); }
.tab-group [aria-selected="true"] { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-tab); }
@media (pointer: coarse) { .chip, .tab-group [role="tab"] { min-height: 44px; } }
.faq-tabs.is-ready .faq-panel { grid-area: 2 / 1; }
.faq-tabs.is-ready .faq-panel[hidden] { display: block; visibility: hidden; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; transition: background var(--base), border-color var(--base); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: var(--ink); transition: transform var(--base) var(--enter), background var(--base); }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus { border-color: var(--ink); background: var(--ink); }
.faq-item[open] .faq-plus::before, .faq-item[open] .faq-plus::after { background: var(--on-ink); }
.faq-item[open] .faq-plus::after { transform: rotate(0deg); }
.faq-answer { padding: 0 52px 22px 0; color: var(--ink-muted); line-height: 1.6; }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin-top: 16px; color: var(--ink-muted); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--enter), content-visibility .3s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}

/* The embedded office (contract with app.js: .new-demo-preview, .is-expanded, body.demo-expanded). */
.new-demo-preview { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); box-shadow: var(--shadow-frame); }
.new-demo-preview iframe { display: block; width: 100%; height: clamp(620px, calc(100svh - 160px), 800px); border: 0; background: var(--paper); color-scheme: light; }
.new-demo-open { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--panel-solid); font-size: 14px; font-weight: 500; transition: background var(--fast); }
.new-demo-open > span:last-child { color: var(--accent); font-size: 18px; }
.new-demo-open:hover { background: var(--canvas); }
.new-demo-preview:focus-within { border-color: var(--line-accent); }
body.demo-expanded { overflow: hidden; }
.new-demo-preview.is-expanded { position: fixed; inset: 12px; z-index: 1000; display: flex; flex-direction: column; margin: 0; box-shadow: 0 0 0 100vmax var(--scrim); }
.new-demo-preview.is-expanded iframe { flex: 1; height: 0; min-height: 0; }

@media (max-width: 960px) {
  .tile-grid--4, .glass-grid, .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-row { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .int-row { grid-template-columns: 1fr; gap: 12px; }
  .suite-grid, .path-grid { grid-template-columns: 1fr; }
  .path-card { padding: 24px; }
  .new-demo-preview iframe { height: min(72svh, 600px); }
  .new-demo-preview.is-expanded { inset: 0; border: 0; border-radius: 0; }
  .new-demo-preview.is-expanded .new-demo-open { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .faq-item summary { font-size: 17px; }
  .faq-answer { padding-right: 0; }
}
/* Phones: tiles and linked cards turn into compact rows with the icon beside the text. */
@media (max-width: 640px) {
  .tile-grid--4, .tile-grid--3, .glass-grid, .case-grid { grid-template-columns: 1fr; }
  .tile-grid { gap: 12px; }
  .glass-grid { gap: 10px; }
  .tile, .glass-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 4px; min-height: 0; padding: 18px; }
  .tile > .tile-icon, .glass-card > .tile-icon { grid-row: span 2; margin: 0; }
  .glass-card, .tile--link { padding-right: 48px; }
  .tile--link > .i:last-child, .glass-card > .i:last-child { top: 20px; right: 18px; }
  .tile h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .header-cta, .dock-btn { transition: none; }
  .btn:active, .header-cta:active, .dock-btn:active { transform: none; }
  .faq-item::details-content { transition: none; }
  .result-logo img { transition: none; }
}

/* The black pointer in the product examples (sim-cursor.js): it glides to what a scene clicks and presses it, with a
   small ring in the accent. Decoration; gone with reduced motion. */
.sim-cursor {
  position: absolute; left: 0; top: 0; z-index: 30; width: 20px; height: 24px; margin: -2px 0 0 -3px; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 2px 3px var(--cursor-shadow)); transition: transform .5s cubic-bezier(.32, .72, .18, 1), opacity .25s var(--enter);
}
.sim-cursor.is-on { opacity: 1; }
.sim-cursor svg { display: block; overflow: visible; fill: var(--ink); stroke: var(--canvas); stroke-width: 1.4; stroke-linejoin: round; transform-origin: 3px 2px; }
.sim-cursor.is-press svg { animation: cursor-press .3s var(--enter); }
.sim-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; }
.sim-cursor.is-press::after { animation: cursor-ring .48s var(--enter); }
@keyframes cursor-press { 40% { transform: scale(.82); } }
@keyframes cursor-ring { from { opacity: .75; transform: scale(.3); } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .sim-cursor { display: none; } }

/* Who did the work in an example (crew() in ui.mjs): the agent that made it and the agent that approved it, and
   under them your go-ahead, which the pointer clicks. Both states of a label share one cell, so nothing shifts. */
.sim-crew { container-type: inline-size; display: grid; gap: 8px; width: min(100%, 440px); margin: 0 auto; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--canvas); box-shadow: var(--shadow-sim); color: var(--ink); text-align: left; }
.crew-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px; }
.crew-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crew-who + .crew-who { padding-left: 12px; border-left: 1px solid var(--line); }
.crew-face { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--hue-soft, var(--accent-soft)); color: var(--hue, var(--accent)); }
.crew-face--sup { background: var(--ink); color: var(--on-ink); }
.crew-text { display: grid; min-width: 0; line-height: 1.25; }
.crew-text b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.crew-text small { overflow: hidden; color: var(--ink-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.crew-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.crew-you, .crew-go { display: inline-grid; }
.crew-you > *, .crew-go > * { grid-area: 1 / 1; }
.crew-you { color: var(--ink-muted); font-size: 12.5px; }
.crew-go {
  place-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink);
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: background var(--base) var(--enter);
}
.crew-go .crew-done { display: inline-flex; align-items: center; gap: 4px; }
.sim-crew .crew-done { visibility: hidden; }
.sim-crew:has(.crew-go.is-clicked) .crew-ask { visibility: hidden; }
.sim-crew:has(.crew-go.is-clicked) .crew-done { visibility: visible; }
.sim-crew:has(.crew-go.is-clicked) .crew-you { color: var(--green); font-weight: 500; }
.crew-go.is-clicked { background: var(--green); }
/* Inside a window: a quiet strip on the panel, no card of its own. */
.sim-crew.crew--in { width: 100%; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); box-shadow: none; }
/* Narrow: the two agents one under the other, with their full names and what they did. */
@container (max-width: 400px) {
  .crew-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .crew-who + .crew-who { padding-left: 0; border-left: 0; }
  .crew-text b, .crew-text small { white-space: normal; }
}
/* A clicked go-ahead in a proposal screen turns to done. */
.mk-btn--ink.is-clicked, .flow-btn--light.is-clicked { border-color: var(--green); background: var(--green); color: var(--on-ink); transition: background var(--base) var(--enter), border-color var(--base) var(--enter); }
@media (prefers-reduced-motion: reduce) {
  .crew-go { background: var(--green); }
  .sim-crew .crew-ask { visibility: hidden; }
  .sim-crew .crew-done { visibility: visible; }
}