/* ===========================================================================
   SolutionsDataHub -- 特長, part 2/2: crops 03 (saved query -> API in use),
   04 (an AI agent asking through MCP), 05 (who may see what + audit log),
   and the motion of every crop. Layout and crops 01-02: datahub-feat.css.
   Motion: datahub-motion.js latch. Start states live ONLY under
   html.dh-motion [data-dh-latch]:not(.dh-seen), so no JS / reduced motion =
   final state. --t = step delay. Transform / opacity only.
   Contrast: #8A5A00 on #FDF1CC 5.26 · --muted on --dh-flat 4.93 · --dh-code-kw on --dh-code 9.29 ·
   --muted on --dh-rail 5.20 · --dh-acc-ink on --dh-tint 6.3.
   =========================================================================== */

/* ---- 03: saved query, published as an API, and the apps calling it -------- */
.dh-f3-pub { display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-left: auto; padding: 0 9px; border-radius: 6px; background: var(--dh-acc); font-weight: 700; color: var(--white); white-space: nowrap; }
.dh-f3-pub svg { stroke-width: 2; }
.dh-f3-sql { margin: 0; overflow: hidden; white-space: pre; }
.dh-f3-ep { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; overflow: hidden; border-radius: 6px; background: var(--dh-code); font-size: 12px; color: var(--dh-code-tx); white-space: nowrap; }
.dh-f3-ep b { color: var(--dh-code-kw); }
.dh-f3-apps { display: grid; gap: 7px; }
.dh-f3-apps li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--ink); }
.dh-f3-apps i { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--dh-flat); }
.dh-f3-apps i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--dh-acc); transform: scaleX(var(--w, 1)); transform-origin: 0 50%; }
.dh-f3-apps b { color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 04: another app's window (the agent), reading through MCP ------------- */
.dh-top.dh-f4-top { background: var(--dh-rail); border-bottom: 1px solid var(--dh-hair); color: var(--muted); }
.dh-f4-app { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); }
.dh-f4-top .dh-feat-crumb { color: var(--muted); }
.dh-f4-me { justify-self: end; max-width: 88%; padding: 8px 12px; border-radius: 12px 12px 3px 12px; background: var(--navy); font-weight: 700; color: var(--white); }
.dh-f4-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--dh-hair); border-radius: 8px; background: var(--dh-rail); font-weight: 700; color: var(--dh-acc-ink); }
.dh-f4-ans { display: grid; gap: 6px; max-width: 92%; padding: 10px 12px; border: 1px solid var(--dh-hair); border-radius: 3px 12px 12px 12px; color: var(--ink); }
.dh-f4-ans ul { display: grid; gap: 4px; }
.dh-f4-ans li { position: relative; display: grid; padding-left: 13px; }
.dh-f4-ans li::before { content: ""; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.dh-f4-ans b { color: var(--navy); }
.dh-f4-note { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }

/* ---- 05: role x data matrix; the AI row cannot see contact details -------- */
.dh-f5-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dh-f5-t :is(th, td) { height: 32px; padding: 0 4px; border-bottom: 1px solid var(--dh-hair); text-align: center; }
.dh-f5-t thead th { height: auto; padding: 0 1px 6px; font-weight: 700; line-height: 1.35; color: var(--muted); vertical-align: bottom; }
.dh-f5-t thead th:first-child { width: 36%; }   /* 「AIエージェント」 at 13px still fits at 360px */
.dh-f5-t tbody th { overflow: hidden; font-weight: 700; text-align: left; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.dh-f5-t svg { margin: 0 auto; }
.dh-f5-y { color: var(--dh-ok); stroke-width: 2; }
.dh-f5-n { display: block; width: 10px; height: 2px; margin: 0 auto; border-radius: 1px; background: var(--dh-rule); }
.dh-f5-ai :is(th, td) { background: var(--dh-tint); }
.dh-f5-ai th { color: var(--dh-acc-ink); }
.dh-f5-x { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; background: #FDF1CC; color: #8A5A00; }
.dh-f5-log li { display: flex; align-items: center; gap: 10px; height: 26px; border-bottom: 1px dashed var(--dh-hair); color: var(--ink); white-space: nowrap; }
.dh-f5-log .dh-mono { font-size: 12px; color: var(--muted); }
.dh-f5-log span:last-child { margin-left: auto; color: var(--muted); }

/* ---- motion: plays once per crop ------------------------------------------- */
html.dh-motion .dh-seen .dh-feat-step { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); transition-delay: var(--t, 0ms); }
html.dh-motion .dh-seen .dh-f3-apps i::before { transition: transform 0.9s var(--ease-soft) calc(var(--t, 0ms) + 150ms); }
html.dh-motion [data-dh-latch]:not(.dh-seen) .dh-feat-step { opacity: 0; transform: translateY(6px); }
html.dh-motion [data-dh-latch]:not(.dh-seen) .dh-f3-apps i::before { transform: scaleX(0); }
/* Reduced motion needs no rule: html.dh-motion is never set then, and
   datahub-motion.js drops it if the setting changes mid-visit. */