/* ---------------------------------------------------------------------------
   The insights hub, the landing and the article (web/DESIGN.md D3): TradingView's editorial grammar
   on the app's tokens. scripts/build-docs.mjs links it after docs.css, which owns the page base, the
   article frame (breadcrumb, title, text column, table of contents) and the reading type; this
   sheet adds the hub (title, pills, featured card, grid, search dialog) and what only an insights
   article has (byline, cover, direct answer, related cards). The face is Pretendard from the shell
   island's stylesheet; nothing here declares a font, a colour literal or a radius off the scale.
--------------------------------------------------------------------------- */

.insights-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.insight-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: var(--block-gap);
}
.insight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.insight-tabs button {
  position: relative;
  box-sizing: border-box;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  color: var(--text-body);
  font: inherit;
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
/* A 34px pill is a 44px target: the hit area reaches 5px past it above and below. */
.insight-tabs button::before {
  content: "";
  position: absolute;
  inset: -5px 0;
}
.insight-tabs button:hover {
  background: var(--line-strong);
  color: var(--text-primary);
}
.insight-tabs button[aria-pressed="true"] {
  background: var(--action-fill);
  color: var(--accent-contrast);
}
.insight-search-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 280px;
  max-width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-control);
  color: var(--text-secondary);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}
.insight-search-open:hover {
  color: var(--text-primary);
}
.insight-search-open kbd {
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}
/* A shortcut hint means nothing without a keyboard, and the narrow search bar needs the room. */
@media (hover: none), (pointer: coarse), (max-width: 620px) {
  .insight-search-open kbd {
    display: none;
  }
}
/* The landing has no toolbar: its grid (and the language links above it) stand a block under the title. */
.insight-global-grid {
  margin-top: var(--block-gap);
}
.insight-count {
  margin: 24px 0;
  color: var(--text-muted);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.insight-empty {
  padding: 64px 0;
  color: var(--text-muted);
  text-align: center;
}
.insight-empty[hidden],
.insights-main [hidden] {
  display: none;
}
.insight-reset {
  margin-top: 16px;
  padding: 0 20px;
  height: 40px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* ---- the card: a 16:9 cover, a kicker, a title, two lines of the answer, the date ---- */

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 24px;
}
.insight-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.insight-cover {
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  aspect-ratio: 16 / 9;
}
.insight-cover picture,
.insight-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.insight-cover img {
  object-fit: cover;
}
.insight-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 16px;
}
.insight-kicker {
  color: var(--text-muted);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
}
.insight-card h2 {
  margin-top: 8px;
  color: var(--text-primary);
  font-size: var(--card-title-size);
  line-height: var(--card-title-line);
  font-weight: var(--card-title-weight);
}
.insight-card:hover h2 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.insight-card-excerpt {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.insight-card-meta {
  margin-top: auto;
  padding-top: 12px;
}
.insight-card-date {
  color: var(--text-muted);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.insight-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* The newest article opens the hub: the cover on the left seven twelfths, the copy on the right
   five (from 1024px; below it the card stacks and takes the whole row). */
.insight-grid > .insight-card[data-featured] {
  grid-column: 1 / -1;
}

/* ---- the search dialog ---- */

.insight-dialog {
  box-sizing: border-box;
  width: min(720px, calc(100% - 2 * var(--gutter)));
  max-height: 75dvh;
  margin: 13dvh auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-popover);
  color: var(--text-primary);
}
.insight-dialog::backdrop {
  background: var(--surface-scrim);
}
.insight-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-hairline);
}
.insight-search-row:focus-within {
  border-bottom-color: var(--text-muted);
}
.insight-search-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 18px;
  line-height: 28px;
}
.insight-search-row input:focus-visible {
  outline: none;
}
.insight-search-row button {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  color: var(--text-body);
  font: inherit;
  font-size: var(--body-size);
  line-height: var(--body-line);
  cursor: pointer;
}
.insight-search-row button:hover {
  background: var(--line-strong);
  color: var(--text-primary);
}
.insight-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.insight-search-summary {
  margin: 0;
  padding: 12px 16px 4px;
  color: var(--text-muted);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}
.insight-search-results {
  max-height: 55dvh;
  margin: 0;
  padding: 4px 8px 12px;
  overflow: auto;
  list-style: none;
}
.insight-search-results a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}
.insight-search-results a:hover,
.insight-search-results a:focus {
  background: var(--surface-control);
  color: var(--text-primary);
  outline-offset: -2px;
}
.insight-result-text {
  min-width: 0;
}
.insight-result-section {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.insight-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--block-gap);
  color: var(--text-muted);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.insight-languages a[aria-current] {
  color: var(--text-primary);
}
.insights-hero + .insight-languages {
  justify-content: center;
}

/* ---- an article: byline, cover, the direct answer, the contents, related ---- */

.insight-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.insight-byline > span:first-child {
  color: var(--text-primary);
  font-weight: 600;
}
.insight-revision {
  min-width: 0;
  overflow-wrap: anywhere;
}
.insight-copy {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 500;
  cursor: pointer;
}
.insight-copy:hover {
  border-color: var(--text-muted);
}
/* A live region that is always in the layout, so the announcement of a copy is never lost; it is
   empty (and zero-width) until a press fills it, and then reads beside the button. */
.insight-copy-status {
  min-width: 0;
  color: var(--text-secondary);
}
.insight-disclosure {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}
.insight-cover--article {
  margin-top: 24px;
}
.insight-direct-answer {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--line-hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
}
.insight-direct-answer span {
  color: var(--text-muted);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
}
.insight-direct-answer p {
  margin-top: 8px;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 28px;
}
.insight-aside .insight-languages {
  margin-top: 32px;
}
.insight-related .insight-grid {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .insight-tabs button {
    height: 48px;
    padding: 0 26px;
    font-size: 16px;
    line-height: 24px;
  }
  .insight-tabs button::before {
    inset: 0;
  }
  .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .insight-grid > .insight-card[data-featured] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: center;
  }
  .insight-grid > .insight-card[data-featured] .insight-card-copy {
    padding-top: 0;
  }
  .insight-grid > .insight-card[data-featured] h2 {
    font-size: var(--page-title-size);
    line-height: var(--page-title-line);
  }
  .insight-grid > .insight-card[data-featured] .insight-card-excerpt {
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
    -webkit-line-clamp: 4;
  }
  .insight-grid > .insight-card[data-featured] .insight-card-meta {
    margin-top: 24px;
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  .insight-toolbar {
    gap: 12px;
  }
  .insight-search-open {
    order: -1;
    width: 100%;
  }
  .insight-direct-answer {
    padding: 16px 20px;
  }
}