/* entity.css: entity pages (app/pages/entity.py), loaded after parrot.css and detail.css.
   T2: the History Wall in the first screen. Order: header, answer sentence, then the first wall ("Next: <occasion>",
   else the History Wall). The clip is a one-line row: beside the header from 1024 px, after the wall below that.
   Colours come from the parrot.css tokens, so both themes follow the system (and a viewer's saved choice). */

/* ---------- H1: "Tesla (TSLA)", a real space between the name and the ticker ---------- */
.ent-head .t h1 .tk { font: 600 .66em/1.1 var(--font-mono); color: var(--ink-2); letter-spacing: .01em; }

/* ---------- the top: header + answer | clip row, then the first wall ---------- */
.ent-top { display: grid; grid-template-columns: minmax(0, 1fr); }
main > .ent-top:first-child { margin-top: 22px; }               /* a hub that is one entity (/trump): no crumbs */
.ent-top .ent-head { margin: 0 0 10px; }
.ent-top .ent-lead { margin: 0; max-width: 82ch; line-height: 1.5; }
.ent-top .beta-note { margin: 8px 0 0; }
.ent-top > .section { margin-top: 18px; }
/* the clip row follows the header column in the DOM (desktop order); below 1024 px it is shown after the wall */
.ent-top > .et-r { order: 1; margin-top: 20px; }

@media (min-width: 1024px) {
  .ent-top.has-clip { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; align-items: center; }
  .ent-top.has-clip > .et-l { grid-column: 1; grid-row: 1; }
  .ent-top.has-clip > .et-r { grid-column: 2; grid-row: 1; margin-top: 0; order: 0; }
  .ent-top.has-clip > .section { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- "Next: Earnings call · today, 5:30 pm ET": a compact head joined to its wall ---------- */
.ent-next .next-h.nh-compact {
  margin: 0; padding: 10px 16px; border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: none;
}
.ent-next .nh-compact h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 18px; }
.ent-next .nh-at { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1.3 var(--font-body); color: var(--ink-2); }
.ent-next .nh-at svg { flex: none; color: var(--link); align-self: center; }
.ent-next .nh-compact .nh-sub { margin-top: 2px !important; }
.ent-next .nh-compact + .tbl-wrap.wall { border-top-left-radius: 0; border-top-right-radius: 0; }
.ent-next .nh-compact + .wall .wt thead th:first-child,
.ent-next .nh-compact + .wall .wt thead th:last-child { border-radius: 0; }
.ent-next .wall-note { margin: 8px 2px 0; }

/* ---------- the clip row: a 48 px play button with one line of text beside it ---------- */
.ent-clip.quote { margin: 0; padding: 0; overflow: hidden; }
.ent-clip .ec {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 12px 16px;
  color: var(--ink-2); font-size: 14px; line-height: 1.45; text-decoration: none;
}
.ent-clip .ec:hover { background: var(--surface-2); }
.ent-clip .ec-play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: #FFFFFF; }
.ent-clip .ec-play svg { margin-left: 2px; }
.ent-clip .ec:hover .ec-play, .ent-clip .ec:focus-visible .ec-play { background: #0A6F61; }
/* the card clips its corners (overflow: hidden): the focus ring sits inside it, so keyboard focus stays visible */
.ent-clip .ec:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--r-lg); }
.ent-clip .ec-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ent-clip .ec-1 { color: var(--ink); }
.ent-clip .ec-1 b { font-weight: 650; }
.ent-clip .ec-m { font-size: 13px; color: var(--muted); }
.ent-clip .ec-sep { display: none; }                            /* in the text ('… call · 2:44 · said …'), not shown */
.ent-clip .ec-m .t { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
.ent-clip .clip-inline { margin: 0; padding: 0 16px 14px; }

/* ---------- hub pages: the answer sentence under the H1, then the static description ---------- */
.hub-head .hub-lead { margin: 6px 0 0; max-width: 82ch; font-size: 16px; line-height: 1.5; color: var(--ink); }
.hub-head .hub-lead + .desc { margin-top: 4px; }

/* ---------- Cite line ---------- */
.cite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 28px 0 0; font-size: 13px; color: var(--muted); }
.cite-h { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink-2); }
.cite-h svg { color: var(--link); }
.cite-t { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.cite + .agent-line { margin-top: 10px; }

@media (max-width: 720px) {
  .ent-next .nh-compact h2 { font-size: 17px; }
  .ent-top > .section { margin-top: 14px; }
}