/* /demo (site-v2): stylesheet for this page only. Layers on base.css, with
   showcase.css (the drawers and the chart tooltip) and
   example.market-insights.css (the workbench) linked from the view.

   The instrument register of /example/market-insights, lighter at the top:
   a short header with the two drawer buttons, a three-point "How to read
   this" strip, then the map with the fifteen beside it. Teal Deep marks the
   banks worth engaging on the map and nothing else here. Classes are
   prefixed dm-. */

/* ── Header ─────────────────────────────────────────────────────── */

.dm-head { padding: 44px 0 0; }
.dm-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 40px 56px;
  align-items: end;
}
.dm-head h1 { font-size: clamp(33px, 4.5vw, 57px); color: var(--ink); }
.dm-lede {
  max-width: 38em;
  margin-top: 14px;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--body);
}
.dm-label { margin-top: 12px; max-width: 46em; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.dm-drawers { display: grid; gap: 10px; }
.dm-drawer {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 12px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-family: var(--text);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.dm-drawer::after {
  content: "";
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.dm-drawer:hover { border-color: var(--ink); }
.dm-drawer:hover::after { transform: translateX(3px) rotate(45deg); }
.dm-drawer svg { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dm-drawer-text { display: grid; gap: 1px; }
.dm-drawer-text b { font-size: 16px; font-weight: 600; line-height: 1.35; }
.dm-drawer-text span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* How to read this: three short points in one strip, not a screen. It sits
   above the map on a wide screen and below it on a phone, so the map is in
   the first viewport there. */
.dm-mapsec-inner { display: flex; flex-direction: column; }
.dm-read {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(0, 1fr));
  gap: 10px 32px;
  margin-top: 34px;
  margin-bottom: 28px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.dm-read-title {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.3;
  color: var(--ink);
}
.dm-read p { font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* ── The map ────────────────────────────────────────────────────── */

.dm-mapsec { padding: 0 0 40px; }
.dm-frame { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.dm-frame-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 15px 24px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.dm-frame-title { font-family: var(--display); font-size: 17.5px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.dm-frame-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.dm-frame-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.dm-map-col { padding: 18px 20px 14px 18px; min-width: 0; }
.dm-map-lede { max-width: 44em; padding-left: 6px; font-size: 15.5px; line-height: 1.55; color: var(--body); }

/* The map itself is the How it works chart (how.css). It shares this row
   with the list, so it is drawn a little shorter than on How it works. */
.dm-frame .hw-map-wrap { height: 480px; margin-top: 10px; }

.dm-keys { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 6px 0; font-size: 14px; color: var(--body); }
.dm-key { display: inline-flex; align-items: center; gap: 8px; }

/* The fifteen, beside the map. */
.dm-list-col { border-left: 1px solid var(--rule); padding: 18px 0 10px; min-width: 0; background: var(--surface-2); }
.dm-list-title { padding: 0 20px; font-family: var(--display); font-size: 17.5px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.dm-list-note { padding: 2px 20px 10px; font-size: 13.5px; color: var(--muted); }
.dm-list { list-style: none; border-top: 1px solid var(--rule); max-height: 468px; overflow-y: auto; }
.dm-list li + li { border-top: 1px solid var(--rule); }
.dm-acct {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 1px 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 20px 9px;
  border: 0;
  background: transparent;
  font-family: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.dm-acct:hover { background: var(--surface); }
.dm-acct-rank {
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.dm-acct-name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.dm-acct:hover .dm-acct-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dm-acct-sc { display: flex; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); }
.dm-acct-sc b { font-weight: 500; color: var(--ink); }

/* ── Market insights ────────────────────────────────────────────── */

/* One bank, month by month (site-v3): the figure is monthly.css; this only
   spaces the section between the map and the insights. */
.dm-monthly { padding: 34px 0 56px; border-top: 1px solid var(--rule); }
.dm-monthly-head { margin-bottom: 8px; }
.dm-monthly-open { margin-top: 26px; }
.dm-monthly-open .dm-drawer { max-width: 420px; }

.dm-insights { padding-top: 34px; border-top: 1px solid var(--rule); }
.dm-ins-head { padding-bottom: 20px; }
.dm-ins-head h2 { font-size: clamp(28px, 3.9vw, 52px); color: var(--ink); }
.dm-ins-lede { max-width: 44em; margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--body); }

/* The workbench's full notes, folded. */
.mi-notes > summary { list-style: none; cursor: pointer; }
.mi-notes > summary::-webkit-details-marker { display: none; }
.mi-notes-sum { display: flex; align-items: center; justify-content: space-between; }
.mi-notes:not([open]) > .mi-notes-sum { margin-bottom: 0; }
.mi-notes-chev {
  flex: none;
  width: 9px; height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 160ms ease;
}
.mi-notes[open] .mi-notes-chev { transform: rotate(-135deg) translateY(-2px); }
.mi-notes[open] > .mi-notes-sum { margin-bottom: 18px; }

/* ── Close ──────────────────────────────────────────────────────── */

.dm-close h2 { max-width: 12em; color: var(--ink); }

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .dm-read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-read-title { grid-column: 1 / -1; }
  .dm-frame-body { grid-template-columns: minmax(0, 1fr); }
  .dm-list-col { border-left: 0; border-top: 1px solid var(--rule); }
  .dm-list { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-list li + li { border-top: 0; }
  .dm-list li { border-bottom: 1px solid var(--rule); }
  .dm-list li:nth-child(odd) { border-right: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .dm-head-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-drawers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .dm-head { padding-top: 28px; }
  .dm-lede { font-size: 17px; margin-top: 12px; }
  .dm-label { font-size: 13.5px; }
  .dm-drawers { grid-template-columns: minmax(0, 1fr); }
  .dm-read { order: 2; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 24px 0 0; }
  .dm-drawer-text span { display: none; }
  .dm-drawer { min-height: 52px; }
  .dm-drawers { margin-bottom: 20px; }
  .dm-frame-head { padding: 13px 16px 12px; }
  .dm-frame-count { margin-left: 0; }
  .dm-map-col { padding: 14px 10px 12px 6px; }
  .dm-map-lede { font-size: 14.5px; }
  .dm-frame .hw-map-wrap { height: 340px; }
  .dm-list { grid-template-columns: minmax(0, 1fr); }
  .dm-list li:nth-child(odd) { border-right: 0; }
  .dm-list-title, .dm-list-note { padding-left: 16px; padding-right: 16px; }
  .dm-acct { padding: 8px 16px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-drawer, .dm-drawer::after, .mi-notes-chev { transition: none; }
}