/* DNEG AI Roadmap: views/detail.css
   Extras for the detail pages only (root class .dt, used by #/repo, #/capability and #/roadmap): breadcrumb, head, the folded
   sections and what sits in them (chip groups, owners, links, the "In depth" prose from R.markdown, the roadmap tree). The brief
   (.lk-brief) and the folds (.lk-fold) are styled in site.css. Print friendly. */

.dt { min-width: 0; }

/* breadcrumb */
.dt-crumbs { margin: 0 0 1rem; font-size: .8rem; }
.dt-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.dt-crumbs li { display: inline-flex; align-items: center; min-width: 0; max-width: 34ch; color: var(--muted); }
.dt-crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--muted); }
.dt-crumbs a, .dt-crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-crumbs a { color: var(--accent2); text-decoration: none; }
.dt-crumbs a:hover { text-decoration: underline; }
.dt-crumbs [aria-current] { color: var(--fg); }

/* header */
.dt-head { margin-bottom: 1.4rem; }
.dt-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dt-h1 { font-size: clamp(1.7rem, 3.1vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dt-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt-headchips { margin-top: .75rem; }
.dt-lede { margin-top: .9rem; max-width: 68ch; font-size: clamp(1.02rem, 1.4vw, 1.25rem); font-weight: 300; color: var(--fg); }
.dt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 1rem; }
.dt-actions:empty { display: none; }
.dt-dates { color: var(--accent2); }
.tag.proj { font-family: var(--mono); letter-spacing: .06em; }
.dt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag.jump { color: var(--fg); }
.tag.jump:hover { border-color: var(--accent); color: var(--accent2); }

/* the brief under the head; a fact whose value is a very long name (K.brief sets names smaller than numbers already) is set smaller
   still and kept to two lines; the whole name is in its tooltip and in the sentence above */
.dt .lk-brief { margin: 1.5rem 0 1.9rem; }
.dt .lk-fv.dt-name { display: flex; align-items: center; min-height: calc(1.1 * clamp(1.35rem, 2.1vw, 1.85rem)); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.25; }
.dt .lk-fv.dt-name > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-width: 0; overflow: hidden; overflow-wrap: break-word; }

/* body: the folded sections (K.more blocks) under the brief */
.dt-folds { margin-top: .4rem; }
.dt-sec { min-width: 0; }
.dt-prose p { max-width: 72ch; margin-bottom: .85em; color: color-mix(in srgb, var(--fg) 88%, var(--muted)); }
.dt-headline { max-width: 60ch; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 300; line-height: 1.4; }
.dt-metrics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dt-gap { font-size: .9rem; }
.dt-lead { margin-bottom: .8rem; color: var(--muted); }
.dt-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.dt-note b { color: var(--fg); font-weight: 600; }
.dt .dt-sec .grid.tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dt .dt-sec .notes { margin-top: 0; }
.dt .dt-sec .notes p { max-width: 72ch; }
.dt > .dt-gap { margin-top: -.6rem; margin-bottom: 1.4rem; }

/* what sits in the folds: chip groups ("Where it fits"), and the owners, links, record and tags blocks side by side */
.dt-assoc { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem 2.4rem; align-items: start; }
.dt-assoc .dt-group { margin: 0; }
.dt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.8rem 2.4rem; align-items: start; }
.dt-side { min-width: 0; }
.dt-side > h3 { margin: 0 0 .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); }
.dt-group { margin-bottom: 1rem; }
.dt-group:last-child { margin-bottom: 0; }
.dt-group > h4 { margin: 0 0 .35rem; font-size: .78rem; font-weight: 500; color: var(--muted); }
.dt-group > h4 .n { margin-left: 6px; font-size: .9em; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.dt-more { width: 100%; }
.dt-more > summary { display: inline-flex; padding: 1px 8px; border: 1px dashed var(--line); border-radius: 6px; font-size: .72rem; color: var(--muted); cursor: pointer; list-style: none; }
.dt-more > summary::-webkit-details-marker { display: none; }
.dt-more > summary:hover { color: var(--fg); border-color: var(--accent); }
.dt-more[open] > summary { margin-bottom: 6px; }
.dt-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dt-people li { display: flex; align-items: center; gap: 10px; }
.dt-people i { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); font-family: var(--mono); font-style: normal; font-size: .7rem; color: var(--accent2); }
.dt-people b { display: block; font-weight: 500; font-size: .92rem; }
.dt-people small { display: block; color: var(--muted); font-size: .76rem; }
.dt-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dt-links li { min-width: 0; font-size: .9rem; }
.dt-links small { display: block; color: var(--muted); font-size: .74rem; }
.dt-links small.mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-links.dt-related { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 28px; }
.dt-src { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.dt-src code { font-size: .8em; overflow-wrap: anywhere; }
.dt-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: .88rem; }
.dt-facts dt { color: var(--muted); }
.dt-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* "In depth" */
.dt-depthcard { padding: 22px 28px 26px; }
.dt-depthcard:hover { transform: none; }
.dt-depth-title { margin: 0 0 .4rem; font-size: 1.15rem; }
.dt-depthcard > .lede { max-width: 70ch; margin-bottom: 1rem; }
.dt-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: .8rem; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.dt-srcs { margin-bottom: 1rem; font-size: .84rem; }
.dt-srcs > summary { cursor: pointer; color: var(--muted); }
.dt-srcs > summary:hover { color: var(--fg); }
.dt-sources { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.dt-sources a, .dt-sources span { overflow-wrap: anywhere; font-size: .8rem; }
.dt-md { max-width: none; overflow-wrap: break-word; }   /* a long address in the text wraps instead of widening the page */
.dt-md > h2, .dt-md > h3, .dt-md > h4, .dt-md > p, .dt-md > ul, .dt-md > ol, .dt-md > blockquote { max-width: 74ch; }
.dt-md.raw { white-space: pre-wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); font-size: .8rem; }
.dt-md h2 { margin: 1.8rem 0 .6rem; font-size: 1.2rem; }
.dt-md h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }
.dt-md h4 { margin: 1.2rem 0 .4rem; font-size: .95rem; color: var(--muted); }
.dt-md > :first-child { margin-top: 0; }
.dt-md p { margin: 0 0 .85em; line-height: 1.6; color: color-mix(in srgb, var(--fg) 90%, var(--muted)); }
.dt-md ul, .dt-md ol { margin: 0 0 1em; padding-left: 1.4em; line-height: 1.55; color: color-mix(in srgb, var(--fg) 90%, var(--muted)); }
.dt-md li { margin-bottom: .3em; }
.dt-md li > ul, .dt-md li > ol { margin: .3em 0 .3em; }
.dt-md code { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); font-size: .86em; }
.dt-md :not(pre) > code { overflow-wrap: anywhere; }
.dt-md pre { margin: 0 0 1.1em; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); line-height: 1.45; }
.dt-md pre code { padding: 0; border: 0; background: none; font-size: .82rem; }
.dt-md blockquote { margin: 0 0 1em; padding: .2em 1em; border-left: 3px solid var(--accent); color: var(--muted); }
.dt-md hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line); }
.dt-md img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.dt-md .md-table { margin: 0 0 1.1em; overflow-x: auto; }
.dt-md table { border-collapse: collapse; font-size: .88rem; }
.dt-md th, .dt-md td { padding: 6px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.dt-md th { background: var(--panel2); font-weight: 600; }

/* supporting media, person-days, timeline */
.dt-media { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dt-media li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.dt-media li:last-child { border-bottom: 0; }
.dt-media a { overflow-wrap: anywhere; }
.dt-media li .chip, .dt-tl li .chip { justify-self: start; }
.dt-media time { font-size: .78rem; }
.dt-pd { max-width: 40rem; }
.dt-pd:hover { transform: none; }
.dt-pd-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: .4rem; }
.dt-pd-fig .v { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--accent2); }
.dt-pd-fig .u { font-size: 1.05rem; color: var(--fg); }
.dt-pd p { margin-bottom: .6rem; }
.dt-pd .dt-pd-year { color: var(--fg); font-size: 1rem; }
.dt-pd .dt-pd-basis { color: var(--muted); font-size: .9rem; max-width: 62ch; }
.dt-pd .dt-pd-basis b { color: var(--fg); font-weight: 600; }
.dt-pd .note { margin: .2rem 0 0; }
.dt-tl { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: 2px; }
.dt-tl li { display: grid; grid-template-columns: 8.5rem 6.5rem minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.dt-tl li:last-child { border-bottom: 0; }
.dt-tl time { color: var(--accent2); font-size: .82rem; }
.dt-tl .past .t { color: var(--muted); }

/* capability: audience sentences, examples, screenshots */
.dt-audience { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 20px; margin: 0; align-items: baseline; }
.dt-audience dt { white-space: nowrap; }
.dt-audience dd { margin: 0; color: color-mix(in srgb, var(--fg) 90%, var(--muted)); line-height: 1.5; max-width: 66ch; }
.dt-examples .card h3 { margin-bottom: .3rem; }
.dt-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dt-shots img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }

/* roadmap: project card and the tree */
.dt-project { padding: 22px 26px; }
.dt-project:hover { transform: none; }
.dt-project .eyebrow { margin-bottom: .3rem; }
.dt-ph { margin: 0 0 .5rem; font-size: 1.45rem; }
.dt-psum { max-width: 66ch; margin-bottom: .9rem; color: color-mix(in srgb, var(--fg) 85%, var(--muted)); font-size: 1rem; }
.dt-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 1.1rem; font-size: .88rem; color: var(--muted); }
.dt-pmeta b { color: var(--fg); font-weight: 500; }
.dt-pcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 32px; padding-top: 1rem; border-top: 1px solid var(--line); }
.dt-project h3 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); }
.dt-pblock { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dt-project .dt-pd { padding: 0; border: 0; background: none; }
.dt-tree { list-style: none; margin: 0; padding: 0; }
.dt-tree .dt-tree { margin-left: 22px; padding-left: 14px; border-left: 1px solid var(--line); }
.dt-tree > li { border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.dt-tree > li:last-child { border-bottom: 0; }
.dt-tree li.more { padding: 10px 0 2px; }
.dt-node { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr) 4.2rem 9.6rem 6.9rem; align-items: center; gap: 4px 12px; padding: 8px 0; font-size: .9rem; }
.dt-node > .chip:last-child { justify-self: end; }
.dt-ntitle { color: var(--fg); text-decoration: none; }
.dt-ntitle:hover { color: var(--accent2); text-decoration: underline; }
.dt-nlevel { font-size: .74rem; }
.dt-ndates { font-size: .76rem; color: var(--accent2); white-space: nowrap; }
.dt-ndates.dim { color: var(--muted); }
.dt-branch > summary { display: grid; grid-template-columns: 1fr; list-style: none; cursor: pointer; }
.dt-branch > summary::-webkit-details-marker { display: none; }
.dt-branch > summary .dt-node { padding-left: 20px; position: relative; }
.dt-branch > summary .dt-node::before { content: "\25B8"; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .8rem; transition: transform .15s var(--ease); }
.dt-branch[open] > summary .dt-node::before { transform: translateY(-50%) rotate(90deg); }
.dt-branch > summary:hover { background: color-mix(in srgb, var(--panel2) 50%, transparent); }
.dt-count { padding: 0 0 8px 20px; margin-top: -4px; color: var(--muted); font-size: .76rem; }
.dt-tree > li > .leaf, li.leaf .dt-node { padding-left: 20px; }

/* not found */
.dt-nf { margin-top: .5rem; }
.dt-h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 .9rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); font-size: 1.2rem; }
.dt-nf .dt-h2 { margin-top: 1.6rem; }
.dt-similar { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 8px; }
.dt-similar li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.dt-similar small { color: var(--muted); font-size: .78rem; }
.dt-nf .cta { margin-top: 1rem; }

@media (max-width: 760px) {
  .dt-media li { grid-template-columns: minmax(0, 1fr) auto; }
  .dt-media li .chip { grid-column: 1; justify-self: start; }
  .dt-tl li { grid-template-columns: minmax(0, 1fr) auto; }
  .dt-tl li .t { grid-column: 1 / -1; }
  .dt-node { grid-template-columns: minmax(0, 1fr) auto; }
  .dt-node .dt-ntitle { grid-column: 1 / -1; order: 3; }
  .dt-node .dt-nlevel { display: none; }
  .dt-audience { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dt-audience dd { margin-bottom: .8rem; }
  .dt-depthcard { padding: 16px 16px 20px; }
  .dt-project { padding: 16px; }
}

@media print {
  .dt-crumbs, .dt-actions, .dt-more > summary { display: none; }
  .dt-side, .dt-pd, .dt-prov { break-inside: avoid; }
  .dt-h2 { break-after: avoid; }
  .dt-md pre { white-space: pre-wrap; }
  .dt-depthcard, .dt-project, .dt-pd { background: #fff; }
  .dt-srcs:not([open]) > :not(summary) { display: block; }
  /* a closed details block that is not a fold (the sources, "+N more") prints its content too; the kit does it for the folds */
  .dt details::details-content { content-visibility: visible; display: block; }
}