/* ===========================================================================
   SolutionsDataHub -- 画面イメージ v2, part 2/2: ③ API公開, ④ 権限,
   hotspot dots, motion, narrow screens.
   Motion (only under html.dh-motion): chart bars grow, review checks and new
   request lines rise, hotspot rings pulse. transform / opacity only.
   =========================================================================== */

/* ---- ③ API公開: switches change the request -------------------------------------- */
.dh-tour-api { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.dh-tour-live { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px; background: #E2F3EA; font-size: 13px; letter-spacing: 0; color: #237A4C; }
.dh-tour-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.dh-tour-sw { margin: 0; padding: 0; list-style: none; }
.dh-tour-sw li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dh-hair); }
.dh-tour-sw li:first-child { padding-top: 4px; }
.dh-tour-sw b { display: block; font-size: 13.5px; color: var(--navy); }
.dh-tour-sw small { display: block; font-size: 13px; color: var(--muted); }
.dh-tour-switch { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: #B7C6D5; cursor: pointer; transition: background-color var(--dur-3) var(--ease-soft); }
.dh-tour-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(16, 42, 67, 0.3); transition: transform var(--dur-3) var(--ease-soft); }
.dh-tour-switch[aria-checked="true"] { background: var(--dh-acc); }
.dh-tour-switch[aria-checked="true"]::after { transform: translateX(18px); }
.dh-tour-req .dh-sql { margin: 0; padding: 14px 16px; border-radius: 10px; font-size: 12px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.dh-tour-hd { display: block; color: var(--dh-code-tx); }
.dh-tour-hd[hidden] { display: none; }
.dh-tour-h--log { margin-top: 16px; }
.dh-tour-log { margin: 0; padding: 0; list-style: none; }
.dh-tour-log li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 42px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--dh-hair); font-size: 13px; color: var(--muted); }
.dh-tour-log b { font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-tour-log li > :last-child { text-align: right; }

/* ---- ④ 権限: who is looking changes rows and columns ------------------------------ */
.dh-tour-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.dh-tour-roles .dh-tour-h { margin: 0; }
.dh-tour-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.dh-tour-role { position: relative; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; font: 700 13px/1.4 'Noto Sans JP', sans-serif; color: var(--muted); cursor: pointer; }
.dh-tour-role[aria-pressed="true"] { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(16, 42, 67, 0.16); }
.dh-tour-rnote { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--dh-acc-ink); font-weight: 700; }
.dh-tour-tblw { overflow-x: auto; border: 1px solid var(--dh-hair); border-radius: 12px; }
.dh-tour-tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.dh-tour-tbl th { padding: 10px 14px; background: var(--dh-rail); font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; white-space: nowrap; }
.dh-tour-tbl td { padding: 11px 14px; border-top: 1px solid var(--dh-hair); color: var(--ink); white-space: nowrap; }
.dh-tour-tbl td:first-child { font-weight: 700; color: var(--navy); }
.dh-tour-tbl .m { display: none; padding: 1px 7px; border-radius: 5px; background: var(--dh-flat); font-size: 13px; font-weight: 700; color: var(--muted); }
/* the lock = the same drawing as 特長 05 (.dh-f5-x), so a hidden cell still reads as "locked" when the word is gone (phones) */
.dh-tour-tbl .m::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.6'/%3E%3Cpath d='M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.6'/%3E%3Cpath d='M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7'/%3E%3C/svg%3E") center / contain no-repeat; }
.dh-tour-tbl[data-role="sales"] [data-col="margin"] .v, .dh-tour-tbl[data-role="ai"] :is([data-col="rep"], [data-col="tel"]) .v { display: none; }
.dh-tour-tbl[data-role="sales"] [data-col="margin"] .m, .dh-tour-tbl[data-role="ai"] :is([data-col="rep"], [data-col="tel"]) .m { display: inline-block; }
.dh-tour-tbl[data-role="sales"] tr[data-region]:not([data-region="関東"]) { display: none; }

/* ---- hotspot dots (added by datahub-tour.js, removed once the control is used) ---- */
.dh-tour-dot, .dh-hero-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--white); pointer-events: none; }
.dh-tour-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); opacity: 0; }
html.dh-motion .dh-tour-dot::after { animation: dh-tour-ring 2.2s var(--ease-out) infinite; }

/* ---- motion ------------------------------------------------------------------------ */
html.dh-motion .dh-tour.is-live .is-enter { animation: dh-tour-in 0.35s var(--ease-out) both; }
html.dh-motion .dh-tour-cols.is-anim i { animation: dh-tour-grow-y 0.6s var(--ease-out) calc(var(--i, 0) * 0.07s) both; }
html.dh-motion .dh-tour-cols.is-anim b { animation: dh-tour-in 0.35s var(--ease-out) calc(0.3s + var(--i, 0) * 0.07s) both; }
html.dh-motion .dh-tour-goal.is-anim .dh-tour-track i { animation: dh-tour-grow-x 0.55s var(--ease-out) calc(0.1s + var(--i, 0) * 0.45s) both; }
html.dh-motion .dh-tour-checks.is-anim li { animation: dh-tour-in 0.35s var(--ease-out) calc(var(--i, 0) * 0.18s) both; }
html.dh-motion .dh-tour-hd.is-new { animation: dh-tour-in 0.3s var(--ease-out) both; }
@keyframes dh-tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dh-tour-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes dh-tour-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dh-tour-ring { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---- narrow screens --------------------------------------------------------------- */
@media (max-width: 899px) {
  .dh-tour-ed, .dh-tour-api { grid-template-columns: minmax(0, 1fr); }
  .dh-tour.is-live .dh-tour-panel { min-height: 0; }
}
@media (max-width: 599px) {
  .dh-tour-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-tour-tab { min-height: 48px; font-size: 14px; }
  .dh-tour-panel { padding: 16px 14px 18px; }
  .dh-tour-q { font-size: 13px; padding: 8px 12px; }
  .dh-tour-say { font-size: 13.5px; align-items: flex-start; }
  .dh-tour-chart { padding: 14px 12px 10px; }
  /* columns -> rows: at 13px a product name (「キーボード」) is wider than one of
     5 columns (~43px at 360px), so each bar gets a row: name | bar | value */
  .dh-tour-cols { flex-direction: column; gap: 8px; height: auto; padding: 4px 0 2px; }
  .dh-tour-cols::after { display: none; }
  .dh-tour-cols li { flex: none; display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 3em; align-items: center; column-gap: 8px; }
  .dh-tour-cols span { grid-area: 1 / 1; height: auto; line-height: 1.5; }
  .dh-tour-cols i { grid-area: 1 / 2; justify-self: start; width: calc(var(--h) * 100%); height: 14px; margin: 0; border-radius: 0 4px 4px 0; transform-origin: left center; }
  .dh-tour-cols b { grid-area: 1 / 3; text-align: right; }
  html.dh-motion .dh-tour-cols.is-anim i { animation-name: dh-tour-grow-x; }
  .dh-tour-goal-n { font-size: 40px; }
  /* quarter legend: a 17% slot cannot hold 「3Q〜4Q」 at 13px, so the keys just flow */
  .dh-tour-qtr { flex-wrap: wrap; gap: 2px 14px; }
  .dh-tour-qtr li { flex: none; padding-right: 0; }
  /* 監査ログ: the endpoint is the same on every line (and in the request above) */
  .dh-tour-log li { grid-template-columns: 44px minmax(0, 1fr) 42px; }
  .dh-tour-log li > :nth-child(3) { display: none; }
  .dh-tour-crumb { display: none; }
  /* 権限: one row of roles; the table fits the screen so the hidden columns are SEEN
     (地域 goes: the role note already names the region) */
  .dh-tour-seg { display: grid; grid-template-columns: repeat(3, auto); width: 100%; }
  .dh-tour-role { padding: 8px 6px; white-space: nowrap; }
  .dh-tour-tbl { min-width: 0; }
  .dh-tour-tbl th, .dh-tour-tbl td { padding: 9px 5px; }
  .dh-tour-tbl :is(th, td):nth-child(2) { display: none; }
  .dh-tour-tbl .dh-mono { font-size: 12px; }
  /* a hidden cell is the lock alone; the role note above says in words what is hidden.
     The word stays in the DOM (font-size 0) for screen readers. */
  .dh-tour-tbl .m { width: 24px; height: 20px; padding: 0; font-size: 0; line-height: 20px; text-align: center; }
  .dh-tour-tbl .m::before { width: 14px; height: 14px; margin: 0; vertical-align: -3px; }
}

@media (max-width: 379px) {
  .dh-tour-tbl th, .dh-tour-tbl td { padding: 9px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .dh-tour *, .dh-tour *::before, .dh-tour *::after { animation: none !important; transition: none !important; }
}