/* Yordamchi — the in-product guide.
   A right-side slide-over over a dimmed page, plus the full-page chat it opens
   into. Kept in its own stylesheet rather than appended to app.css so three
   concurrent changes to public/ can be sequenced without fighting over one file.

   EVERY colour here is a token from app.css. This panel is LIGHT by default and
   goes dark only when `data-theme` says so, so a hardcoded dark value ships
   grey blocks onto a light page — that has already happened twice in this repo
   and it is not visible until somebody opens the panel in daylight. */

/* The one value app.css has no token for: a translucent cover over the page.
   Derived from existing tokens so a reskin that re-points --ink and --bg moves
   this with it. Light dims with ink; dark dims with the page's own ground,
   because dimming a dark page with near-white ink would LIGHTEN it. */
:root {
  --ydm-scrim: color-mix(in srgb, var(--ink) 46%, transparent);
  /* ~40% of the viewport from the right, floored so it stays usable on a
     laptop and capped so it does not sprawl on an ultrawide. */
  --ydm-width: clamp(440px, 40vw, 720px);
}
/* Keyed on the attribute, not on the media query. app.css moved dark onto
   `data-theme` so the Reveo workspace's choice carries here, which means a
   manager on a light OS can be reading a dark panel — and this token, left on
   `prefers-color-scheme`, would then dim that dark page with near-white ink
   and LIGHTEN it, which is the exact failure the note above describes. */
:root[data-theme='dark'] { --ydm-scrim: color-mix(in srgb, var(--bg) 74%, transparent); }

/* ------------------------------------------------------------------ opener */
/* Lives in the rail under the nav, so the assistant is one click from every
   view rather than a thing you have to be on the right page to find. */
/* Built to the rail's own row spec — 44px, --radius-sm, an .ic and a .lbl —
   rather than as a bordered oddity under the nav. It is not a nav item and
   carries no aria-current, but it lives in the rail, and a row that looked
   different there would read as something broken rather than something
   special. Sharing the shape also means the 68px collapsed rail hides its
   label for free, instead of leaving one row overflowing. */
.ydm-open {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  margin: 0 14px 4px;
  height: 44px; padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.ydm-open .ic { width: 20px; height: 20px; flex: none; color: var(--ink-3); transition: color .18s var(--ease); }
.ydm-open .ic svg { width: 20px; height: 20px; display: block; }
.ydm-open .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ydm-open:hover { background: var(--surface-hover); color: var(--ink); }
.ydm-open:hover .ic { color: var(--ink-2); }
.ydm-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ydm-open[hidden] { display: none; }

:root[data-rail='collapsed'] .ydm-open { justify-content: center; padding: 0; margin: 0 14px 4px; }
:root[data-rail='collapsed'] .ydm-open .lbl { display: none; }

/* ------------------------------------------------------------------- scrim */
.ydm-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ydm-scrim);
  opacity: 1;
  transition: opacity 180ms ease;
}
.ydm-scrim[hidden] { display: none; }

/* ------------------------------------------------------------------ drawer */
.ydm {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(var(--ydm-width), 100%);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ydm[hidden] { display: none; }
.ydm.enter { transform: translateX(100%); }

/* header ------------------------------------------------------------------ */
/* One compact line: mark, label, and the page it is about, with close on the
   right. The badge, the description and the boxed "current page" card are gone
   so the conversation starts at the top rather than after a preamble. */
.ydm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px 14px;
}
.ydm-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ydm-mark {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--blue-soft); color: var(--blue);
}
.ydm-mark svg { width: 15px; height: 15px; }
.ydm-head h2 { flex: none; font-size: 16px; letter-spacing: -0.01em; }
.ydm-here {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 10px; border-left: 1px solid var(--line);
  font-size: var(--t-small); color: var(--ink-3);
}
.ydm-close {
  all: unset; flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--ink-3); cursor: pointer;
}
.ydm-close:hover { background: var(--surface-hover); color: var(--ink); }
.ydm-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ydm-close svg { width: 15px; height: 15px; }

.ydm-div { height: 1px; margin: 0; border: 0; background: var(--line); }

/* body -------------------------------------------------------------------- */
.ydm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 8px; }

/* The current page now rides in the header line (.ydm-here); the bordered card
   that used to sit at the top of the body is gone. The eyebrow lives on: the
   suggestions block and the full-page top bar both still use it. */
.ydm-eyebrow {
  display: block;
  font-size: var(--t-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-3);
}

/* thread ------------------------------------------------------------------ */
.ydm-thread { display: flex; flex-direction: column; gap: 14px; }
.ydm-msg { display: flex; gap: 10px; align-items: flex-start; }
.ydm-msg.me { justify-content: flex-end; }
.ydm-bot {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--blue-soft); color: var(--blue);
}
.ydm-bot svg { width: 15px; height: 15px; }
/* User bubble: their own text, kept literal. */
.ydm-msg.me p {
  margin: 0; padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--t-body); line-height: 1.6;
  white-space: pre-wrap;
  background: var(--blue-soft); color: var(--ink);
  max-width: 560px;
}

/* Assistant bubble: rendered Markdown, capped to a readable line length so the
   answer is not one long edge-to-edge line. */
/* The answer fills the content column (no shrink-to-fit grey bubble), so it
   opens WIDE — the same full-width, bubble-less answer the workspace assistant
   renders. The bot avatar sits to its left; the user's own message keeps a
   bubble. */
.ydm-bubble { flex: 1; min-width: 0; }
.ydm-md {
  padding: 3px 0;
  color: var(--ink);
  font-size: var(--t-body); line-height: 1.65;
  max-width: 100%;
}
.ydm-msg.failed .ydm-md {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--red-soft); color: var(--red-ink);
}
.ydm-md > :first-child { margin-top: 0; }
.ydm-md > :last-child { margin-bottom: 0; }
.ydm-md .rt-p { margin: 0 0 12px; }
.ydm-md .rt-list { margin: 0 0 12px; padding-left: 22px; }
.ydm-md li { margin-bottom: 5px; }
.ydm-md li::marker { color: var(--ink-3); }

/* Headings render as div.rt-h.rt-hN (role=heading); `#` starts at rt-h2. */
.ydm-md .rt-h { margin: 18px 0 7px; font-family: var(--font-d); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.ydm-md .rt-h2 { font-size: 19px; }
.ydm-md .rt-h3 { font-size: 16.5px; }
.ydm-md .rt-h4 { font-size: 15px; }
.ydm-md .rt-h5 { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ydm-md .rt-h + .rt-h { margin-top: 12px; }

.ydm-md strong { font-weight: 700; color: var(--ink); }
.ydm-md em { font-style: italic; color: var(--ink-2); }
.ydm-md a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }

.ydm-md .rt-quote { margin: 0 0 12px; padding: 2px 0 2px 13px; border-left: 2px solid var(--line-strong); color: var(--ink-2); }
.ydm-md .rt-hr { height: 0; margin: 16px 0; border: 0; border-top: 1px solid var(--line); }
.ydm-md .rt-img { display: block; max-width: 100%; height: auto; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); }

.ydm-md code {
  padding: 1.5px 5px; font-family: var(--font-m); font-size: .86em;
  color: var(--ink-2); background: var(--surface); border-radius: var(--radius-xs);
}
.ydm-md .rt-pre { max-width: 100%; margin: 0 0 12px; padding: 11px 13px; overflow-x: auto; font-family: var(--font-m); font-size: 12.5px; line-height: 1.55; tab-size: 2; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xs); }
.ydm-md .rt-pre code { padding: 0; font-size: inherit; color: inherit; background: none; border-radius: 0; }

/* Tables scroll inside their own wrapper so a wide one never widens the page. */
.ydm-md .rt-tablewrap { max-width: 100%; margin: 0 0 12px; overflow-x: auto; }
.ydm-md .rt-table { border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ydm-md .rt-table th, .ydm-md .rt-table td { padding: 6px 11px; text-align: left; border: 1px solid var(--line); }
.ydm-md .rt-table th { font-weight: 700; color: var(--ink-2); background: var(--surface-2); }

/* Model-drawn SVG charts sit on a light canvas in both themes. */
.ydm-md .rt-svg { --rt-canvas: #ffffff; max-width: min(100%, 480px); margin: 0 0 12px; padding: 10px 12px; overflow-x: auto; background: var(--rt-canvas); border: 1px solid var(--line); border-radius: var(--radius-xs); }
:root[data-theme='dark'] .ydm-md .rt-svg { --rt-canvas: #eef2f0; }
.ydm-md .rt-svg svg { display: block; width: 100%; height: auto; max-width: 100%; }

/* KPI cards — a metric row, not a bulleted list. */
.ydm-md .rt-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ydm-md .rt-card { flex: 1 1 158px; min-width: 0; max-width: 300px; padding: 9px 12px 10px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-xs); }
.ydm-md .rt-card-label { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ydm-md .rt-card-value { margin-top: 3px; font-family: var(--font-d); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.ydm-md .rt-card-hint { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.ydm-md .rt-card.is-ok { border-left-color: var(--green, #16a34a); }
.ydm-md .rt-card.is-warn { border-left-color: var(--amber, #d97706); }
.ydm-md .rt-card.is-bad { border-left-color: var(--red, #dc2626); }
/* Answers that cost nothing say so quietly. A manager who can see when the
   model was used trusts the answers that came from the map. */
.ydm-src { display: block; margin-top: 6px; font-size: var(--t-eyebrow); color: var(--ink-3); }

.ydm-typing { display: inline-flex; gap: 4px; padding: 11px 12px; }
.ydm-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: ydm-pulse 1.1s infinite ease-in-out; }
.ydm-typing i:nth-child(2) { animation-delay: .16s; }
.ydm-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes ydm-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* suggestions -------------------------------------------------------------- */
.ydm-sug { margin-top: 20px; }
.ydm-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ydm-chip {
  all: unset;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  font-size: var(--t-small); line-height: 1.35;
  color: var(--ink-2); cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.ydm-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.ydm-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ydm-chip:active { background: var(--blue-soft); }

.ydm-note { margin: 18px 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--ink-3); }

/* Related pages, offered as real links so an answer can be acted on. */
.ydm-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ydm-link {
  all: unset; cursor: pointer;
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: var(--t-small); font-weight: 600;
}
.ydm-link:hover { background: var(--brand-soft); color: var(--brand-deep); }
.ydm-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The textarea's label. Present for a screen reader, absent for everyone else:
   a visible label above a one-line chat box costs a row and says nothing the
   placeholder does not. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* compose ----------------------------------------------------------------- */
.ydm-compose { padding: 12px 24px; border-top: 1px solid var(--line); }
.ydm-compose form { display: flex; gap: 8px; align-items: flex-end; }
.ydm-compose textarea {
  flex: 1; min-height: 40px; max-height: 132px;
  padding: 10px 12px; resize: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.5;
  transition: border-color 150ms ease;
}
.ydm-compose textarea::placeholder { color: var(--ink-3); }
.ydm-compose textarea:focus { outline: none; border-color: var(--blue); }
.ydm-send {
  all: unset; flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-xs);
  background: var(--blue); color: var(--surface);
  cursor: pointer;
}
.ydm-send:hover { background: var(--brand-ink); }
.ydm-send:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ydm-send[disabled] { background: var(--line-strong); cursor: default; }
.ydm-send svg { width: 16px; height: 16px; }

/* footer ------------------------------------------------------------------ */
.ydm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px 16px;
}
.ydm-quit {
  all: unset; cursor: pointer;
  padding: 6px 4px; font-size: var(--t-small); color: var(--ink-2);
}
.ydm-quit:hover { color: var(--ink); }
.ydm-quit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.ydm-full {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--blue); color: var(--surface);
  font-size: var(--t-small); font-weight: 600;
}
.ydm-full:hover { background: var(--brand-ink); }
.ydm-full:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ydm-full svg { width: 13px; height: 13px; }

/* ================================================================ full page */
/* The full chat as a real assistant app: a conversation rail on the left, a
   greeting + suggestion cards on the right until the manager asks something,
   then the thread. Structured like Metasell's, but in Reveo's design system —
   the accent is brand green, never a borrowed pink. */
.ydm-page {
  display: flex;
  flex-direction: column;
  /* Full-bleed: cancel main's padding so the assistant fills the whole content
     area edge to edge, like Metasell, rather than floating as a boxed card. */
  margin: -26px -30px -60px;
  height: calc(100vh - var(--brandbar));
  min-height: 0;
}
.ydm-page .page-head p { max-width: 60ch; }

/* No border, no radius, no margin: the rail and chat fill the area and are
   separated only by the rail's own divider line — the container box is gone. */
.ydm-shell {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 288px 1fr;
  background: var(--surface);
  overflow: hidden;
}

/* Below the desktop layout the app nav reflows to a horizontal bar and the
   100vh math no longer holds; fall back to a normal flowing block. */
@media (max-width: 1080px) {
  .ydm-page { margin: 0; height: auto; min-height: 70vh; }
}

/* rail -------------------------------------------------------------------- */
.ydm-rail {
  display: flex; flex-direction: column; min-height: 0;
  padding: 16px 14px;
  border-right: 1px solid var(--line);
  background: var(--surface-hover);
}
.ydm-rail-head {
  display: flex; align-items: center; gap: 9px;
  padding: 2px 4px 14px;
  font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink);
}
.ydm-rail-head .ydm-mark {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--blue-soft); color: var(--blue);
}
.ydm-rail-head .ydm-mark svg { width: 15px; height: 15px; }
.ydm-newconv {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.ydm-newconv:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }
.ydm-newconv:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ydm-rail-label {
  padding: 18px 6px 8px;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.ydm-convlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.ydm-conv-item {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border-radius: var(--radius-xs);
  transition: background 120ms ease;
}
.ydm-conv-item:hover { background: var(--surface); }
.ydm-conv-item.active { background: var(--brand-soft); }
.ydm-conv-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ydm-conv-title {
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ydm-conv-item.active .ydm-conv-title { color: var(--brand-deep); }
.ydm-conv-prev {
  font-size: var(--t-eyebrow); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ydm-conv-empty { padding: 4px 6px; font-size: var(--t-small); color: var(--ink-3); }

/* conversation ------------------------------------------------------------ */
.ydm-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* A slim bar over the chat: the rail toggle and the assistant's name. */
.ydm-conv-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
}
.ydm-conv-bar .ydm-mark {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--blue-soft); color: var(--blue);
}
.ydm-conv-bar .ydm-mark svg { width: 15px; height: 15px; }
.ydm-conv-name { font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink); }
.ydm-menu {
  all: unset; flex: none; cursor: pointer;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; color: var(--ink-2);
  transition: background 150ms ease, color 150ms ease;
}
.ydm-menu:hover { background: var(--surface-hover); color: var(--ink); }
.ydm-menu:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ydm-menu svg { width: 17px; height: 17px; }
.ydm-menu-label { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }

/* Rail hidden by default: the grid collapses to a single column and the rail
   is removed from the flow. The toggle in the bar brings it back. */
.ydm-shell.rail-collapsed { grid-template-columns: 1fr; }
.ydm-shell.rail-collapsed .ydm-rail { display: none; }

.ydm-conv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 30px; }
/* An empty conversation centres the greeting + cards; once a message exists the
   thread fills from the top. An explicit class rather than :has(), which some
   browsers do not recompute until an input event forces a reflow — which read
   as the cards only appearing once you started typing. */
.ydm-conv-body.is-empty { display: flex; flex-direction: column; justify-content: center; }
.ydm-conv .ydm-compose { padding: 14px 30px 20px; border-top: 1px solid var(--line); }
/* One rounded field: the textarea and the send button sit INSIDE a single
   bordered pill, not a boxed input with a detached square button beside it. */
.ydm-conv .ydm-compose form {
  max-width: 1120px; margin-left: auto; margin-right: auto;
  gap: 8px; align-items: flex-end;
  padding: 7px 7px 7px 20px;
  border: 1px solid var(--line-strong); border-radius: 26px;
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ydm-conv .ydm-compose form:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.ydm-conv .ydm-compose textarea {
  min-height: 34px; max-height: 160px; padding: 7px 0;
  border: none; border-radius: 0; background: transparent; box-shadow: none;
}
.ydm-conv .ydm-compose textarea:focus { outline: none; border-color: transparent; }
.ydm-conv .ydm-send { width: 40px; height: 40px; border-radius: 50%; }

/* hero -------------------------------------------------------------------- */
.ydm-hero { margin-bottom: 30px; }
.ydm-hi, .ydm-ask {
  margin: 0; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.01em;
}
.ydm-hi { color: var(--ink-2); }
.ydm-hi .ydm-name {
  background: linear-gradient(120deg, var(--brand), var(--brand-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ydm-ask { color: var(--ink-3); }

/* A readable centred column so the chat does not stretch across a wide screen.
   The top bar and the compose border stay full width; only the content inside
   is capped and centred. */
.ydm-hero,
.ydm-cards,
.ydm-conv-body .ydm-thread { width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto; }

/* cards ------------------------------------------------------------------- */
/* Four compact cards in a row, as Metasell has them — not two wide ones that
   stretch and read as empty on a large screen. Drops to two, then one. */
.ydm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ydm-card {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 8px;
  /* Enough height to read as a card, not so much that the text floats in an
     empty box: title top, arrow bottom, a little room between. */
  padding: 20px 20px 44px; min-height: 150px;
  border-radius: 18px;
  background: var(--surface);
  /* Soft floating elevation, no border — the way Metasell's cards sit on the
     surface. */
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
/* A playful scatter, like Metasell — each card tilts a little and straightens
   when hovered. Order matters: the :hover rule sits after the tilts so it wins. */
.ydm-card:nth-child(4n + 1) { transform: rotate(-2deg); }
.ydm-card:nth-child(4n + 2) { transform: rotate(1.5deg); }
.ydm-card:nth-child(4n + 3) { transform: rotate(-1.25deg); }
.ydm-card:nth-child(4n) { transform: rotate(2deg); }
.ydm-card:hover { box-shadow: 0 14px 32px rgba(15, 23, 42, 0.15); transform: rotate(0deg) translateY(-3px); }
.ydm-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ydm-card-title { font-family: var(--font-d); font-weight: 600; font-size: 16px; color: var(--ink); }
.ydm-card-desc {
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ydm-card-arrow {
  position: absolute; right: 16px; bottom: 16px;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--surface-hover); color: var(--ink-2);
  transition: background 160ms ease, color 160ms ease;
}
.ydm-card:hover .ydm-card-arrow { background: var(--brand-soft); color: var(--brand-deep); }
.ydm-card-arrow svg { width: 14px; height: 14px; }

@media (max-width: 1180px) {
  .ydm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ydm-shell { grid-template-columns: 1fr; }
  .ydm-rail { display: none; }
  .ydm-cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ydm { --ydm-width: 100%; }
}

/* Motion here is orientation — where the panel came from — never decoration,
   and the global reduce block in app.css already flattens the durations. This
   removes the slide outright so nothing arrives from off-screen. */
@media (prefers-reduced-motion: reduce) {
  .ydm, .ydm.enter { transform: none; transition: none; }
  .ydm-scrim { transition: none; }
  .ydm-typing i { animation: none; opacity: .6; }
}