/* O que há de novo no Leddo: mockup 75, rodada 2, forma 3 (linha do tempo). Tinta, selos com ponto e avatares das
   famílias 71 a 73. */

:root { --tinta: #17151c; --txt: #1f1b24; --txt-2: #56525e; --txt-3: #6f6a78; --txt-4: #8f8a99; --fio: #ecebf1; --fio-2: #e4e2ec;
  --suave: #f6f5f9; --violeta: #7c3aed; --mono: 'JetBrains Mono', ui-monospace, monospace; }
html, body { margin: 0; }
body { container: pg / inline-size; min-height: 100vh; background: #fafafa; color: var(--txt); font: 400 13.5px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.tp { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border-bottom: 1px solid #f0f0f0; background: #fff; }
.marca { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--violeta); }
.tp-sep { width: 1px; height: 18px; background: var(--fio-2); }
.tp-nome { font-size: 13px; font-weight: 500; color: var(--txt-2); }
.pg { max-width: 1040px; margin: 0 auto; padding: 24px 28px 40px; box-sizing: border-box; }
.rot-mono { font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-4); }

/* selos e avatares */
.sel { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--fio-2); border-radius: 6px; background: #fff; font-size: 11.5px; font-weight: 500; color: #3f3a48; white-space: nowrap; }
.sel i { width: 6px; height: 6px; border-radius: 50%; background: #a1a1aa; }
.sel b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sel.t-novidade i { background: #7c3aed; }
.sel.t-mudanca_de_regra i { background: #ea580c; }
.sel.t-melhoria i { background: #2563eb; }
.sel.t-correcao i { background: #dc2626; }
.sel.t-bastidores i { background: #a1a1aa; }
.sel.s-no-ar { color: #166534; border-color: #d3eedc; background: #f3fbf5; }
.sel.s-no-ar i { background: #16a34a; }
.sel.s-a-caminho { color: #92400e; border-color: #f6e2c4; background: #fefaf2; }
.sel.s-a-caminho i { background: #d97706; }
.sel.s-parcial { color: #3b4a63; border-color: #dfe5ee; background: #f6f8fb; }
.sel.s-parcial i { background: #64748b; }
.av { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--av, #7c3aed); color: #fff; font: 600 10px/1 Inter, sans-serif; letter-spacing: .02em; box-shadow: 0 0 0 2px #fff; }
.av.p { width: 20px; height: 20px; font-size: 9px; }
.avs { display: inline-flex; }
.avs .av + .av { margin-left: -6px; }

/* topo do dia em tinta */
.tinta { --claro: #faf9fc; --suave-t: rgba(250,249,252,.62); --fio-t: rgba(250,249,252,.12); position: relative; border-radius: 14px; background: #17151c; color: var(--claro); }
.tinta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgba(250,249,252,.08) 1px, transparent 1px), radial-gradient(45% 105% at 50% 0%, rgba(124,58,237,.2), transparent 72%); background-size: 15px 15px, 45% 130%; background-repeat: repeat, no-repeat; background-position: 0 0, 90% 0; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95), transparent 96%); mask-image: linear-gradient(180deg, rgba(0,0,0,.95), transparent 96%); }
.tinta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, transparent 6%, #8b5cf6 34%, #c4b5fd 52%, #8b5cf6 68%, transparent 94%); }
.tinta > * { position: relative; z-index: 1; }
.hero { display: grid; gap: 10px; padding: 20px 24px 18px; margin-bottom: 14px; }
.hero-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.hero .rot-mono { color: var(--suave-t); }
.hero .rot-mono::first-letter, .hs-d b::first-letter { text-transform: uppercase; }
.hero-nav { display: flex; gap: 6px; }
.nb { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid rgba(250,249,252,.16); border-radius: 8px; background: rgba(250,249,252,.06); color: var(--claro); font-size: 15px; line-height: 1; box-sizing: border-box; }
.nb.txt { font-size: 12px; font-weight: 500; }
a.nb:hover { background: rgba(250,249,252,.12); }
.nb[aria-disabled='true'] { opacity: .35; }
.hero h1 { margin: 2px 0 0; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
.hero-resumo { margin: 0; max-width: 820px; font-size: 14.5px; line-height: 1.6; color: rgba(250,249,252,.82); }
.fatos { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--fio-t); }
.fatos:empty { display: none; }
.fato { display: grid; gap: 7px; }
.fato .rot { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--suave-t); }
.sels { display: flex; flex-wrap: wrap; gap: 6px; }
.tinta .sel { border-color: rgba(250,249,252,.16); background: rgba(250,249,252,.06); color: var(--claro); }
.tinta .sel.s-no-ar i { background: #4ade80; }
.tinta .sel.s-a-caminho i { background: #fbbf24; }
.tinta .sel.s-parcial i { background: #94a3b8; }
.pessoa { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 2px; border: 1px solid rgba(250,249,252,.16); border-radius: 999px; background: rgba(250,249,252,.06); font-size: 12.5px; font-weight: 500; }
.pessoa .av { box-shadow: none; }
.pessoa b { font-weight: 600; color: var(--suave-t); font-variant-numeric: tabular-nums; }
.hero-pe { margin: 2px 0 0; font-size: 11.5px; color: var(--suave-t); }
.aviso { display: flex; gap: 10px; align-items: baseline; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--fio-2); border-radius: 10px; background: #fff; font-size: 12.5px; color: var(--txt-2); }
.aviso i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--violeta); transform: translateY(-1px); }
.aviso.falha i { background: #d97706; }

/* filtro */
.filtro { display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--fio-2); border-radius: 10px; background: #fff; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; }
.filtro::-webkit-scrollbar { display: none; }
.filtro button, .filtro a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: none; font-size: 12.5px; font-weight: 500; color: var(--txt-2); cursor: pointer; }
.filtro button b { font: 600 10.5px var(--mono); color: var(--txt-4); }
.filtro button:hover, .filtro a:hover { background: var(--suave); }
.filtro [aria-pressed='true'], .filtro [aria-current='true'] { background: var(--tinta); color: #fff; }
.filtro button[aria-pressed='true'] b { color: rgba(255,255,255,.7); }

/* linha do tempo */
.tline { list-style: none; margin: 0; padding: 6px 0; border: 1px solid var(--fio); border-radius: 12px; background: #fff; overflow: clip; }
.tl { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.tl-marg { position: relative; display: grid; justify-items: end; align-content: start; gap: 6px; padding: 14px 18px 0 0; }
.tl-marg::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--fio); }
.tl-marg::before { content: ''; position: absolute; top: 20px; right: -4px; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #c9c5d3; }
.tl.on .tl-marg::before { box-shadow: 0 0 0 1.5px var(--violeta); background: var(--violeta); }
.tl-h { font: 600 12px var(--mono); color: var(--txt-2); font-variant-numeric: tabular-nums; }
.tl-corpo { min-width: 0; }
.tl + .tl .tl-corpo { border-top: 1px solid var(--fio); }
.it-cab { display: grid; grid-template-columns: minmax(0, 1fr) 12px; align-items: center; gap: 14px; width: 100%; padding: 13px 18px 13px 20px; border: 0; background: none; text-align: left; cursor: pointer; }
.it-cab:hover { background: #fcfbfd; }
.seta { justify-self: end; width: 7px; height: 7px; border-right: 1.5px solid var(--txt-4); border-bottom: 1.5px solid var(--txt-4); transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
[aria-expanded='true'] > .seta { transform: rotate(-135deg) translateY(-1px); }
.d-tit { display: grid; gap: 4px; min-width: 0; }
.d-tit > b { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--tinta); text-wrap: pretty; }
.d-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--txt-3); }
.quem-txt { font-weight: 500; color: var(--txt-2); }

/* item aberto */
.aberto { display: grid; gap: 14px; padding: 4px 18px 18px 20px; }
.comp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comp.so { grid-template-columns: 1fr; }
.lado { padding: 12px 14px; border-radius: 10px; }
.lado h4, .linha h4 { margin: 0 0 4px; font: 600 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-4); }
.lado p, .linha p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.lado.antes { background: var(--suave); color: var(--txt-2); }
.lado.agora { background: #fff; border: 1px solid #e3dbfa; box-shadow: 0 1px 2px rgba(124,58,237,.06); color: var(--tinta); }
.lado.agora h4 { color: #6d28d9; }
.linha { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.trilhas { display: grid; gap: 6px; }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.trilha span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--suave); font-size: 12.5px; font-weight: 500; color: var(--tinta); }
.trilha i { font-style: normal; color: var(--txt-4); }
.quem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 12px; border-top: 1px solid var(--fio); font-size: 12.5px; color: var(--txt-3); }
.quem b { font-weight: 600; color: var(--txt); }
.ver-cod { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--fio-2); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 500; color: var(--txt); cursor: pointer; }
.ver-cod small { font-size: 11px; color: var(--txt-4); }
.ver-cod:hover { background: var(--suave); }
.codigo { display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--suave); }
.provas, .commits { list-style: none; margin: 0; padding: 0; display: grid; }
.provas li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; border-top: 1px dashed #dddae5; }
.provas li:first-child { border-top: 0; padding-top: 0; }
.pq { font: 600 9.5px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-4); }
.pq.agora { color: #6d28d9; }
.provas p { margin: 0; font-size: 12.5px; }
.provas code { grid-column: 2; display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--fio-2); font: 500 11.5px/1.5 var(--mono); color: #2b2733; white-space: pre-wrap; word-break: break-word; }
.provas code em { font-style: normal; color: var(--txt-4); }
.tec { margin: 0; font-size: 12.5px; color: var(--txt-2); }
.commits li { display: grid; grid-template-columns: 20px auto auto minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 7px 0; border-top: 1px solid #e7e5ee; font-size: 12px; }
.commits .av { transform: translateY(5px); box-shadow: none; }
.cm-q { color: var(--txt-3); white-space: nowrap; }
.cm-q b { color: var(--txt); font-weight: 600; }
.commits code, .manut code { font: 500 11px var(--mono); color: var(--txt-3); }
.cm-a { color: var(--txt-2); overflow-wrap: anywhere; }

/* vazio, manutenção, histórico, rodapé */
.vazio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 18px; border: 1px dashed #d6d3df; border-radius: 12px; background: #fff; }
.vazio b { font-size: 13.5px; font-weight: 600; }
.vazio span { font-size: 12.5px; color: var(--txt-3); }
.vazio button, .vazio .bt { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--fio-2); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.manut { margin-top: 14px; }
.manut-bt { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; cursor: pointer; }
.manut-bt b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #efedf5; font: 600 10px var(--mono); color: #3f3a48; box-sizing: border-box; }
.manut-bt .seta { margin-left: 4px; }
.manut ul { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--fio); border-radius: 12px; background: #fff; }
.manut li { display: grid; grid-template-columns: 20px 70px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 14px; font-size: 12.5px; color: var(--txt-2); }
.manut li + li { border-top: 1px solid var(--fio); }
.manut .av { box-shadow: none; }
.hs-cab { display: grid; gap: 4px; margin-bottom: 14px; }
.hs-cab h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; color: var(--tinta); }
.hs-cab p { margin: 0; color: var(--txt-3); }
.hs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fio); border-radius: 12px; background: #fff; overflow: clip; }
.hs li + li { border-top: 1px solid var(--fio); }
.hs-l { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; padding: 14px 18px; }
.hs-l:hover { background: #fcfbfd; }
.hs-d { display: grid; }
.hs-d b { font-weight: 600; color: var(--tinta); }
.hs-d small { font: 500 11px var(--mono); color: var(--txt-4); }
.hs-r { font-size: 12.5px; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-n { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--txt-3); white-space: nowrap; }
.rp { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--fio); font-size: 11.5px; color: var(--txt-4); }

/* larguras */
@container pg (max-width: 900px) {
  .hs-l { grid-template-columns: minmax(0, 1fr) auto; }
  .hs-r { grid-column: 1 / -1; grid-row: 2; }
}
@container pg (max-width: 640px) {
  .tp { padding: 0 16px; }
  .pg { padding: 16px 12px 32px; }
  .hero { padding: 16px 16px 14px; }
  .hero h1 { font-size: 21px; }
  .hero-resumo { font-size: 13.5px; }
  .fatos { gap: 10px 18px; }
  .filtro { width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .filtro > :last-child { margin-right: 24px; }
  .tl { grid-template-columns: 58px minmax(0, 1fr); }
  .tl-marg { padding-right: 12px; }
  .tl-marg .avs { display: none; }
  .it-cab { padding: 12px 14px; }
  .aberto { padding: 2px 14px 14px; }
  .comp { grid-template-columns: minmax(0, 1fr); }
  .linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ver-cod { margin-left: 0; }
  .provas li { grid-template-columns: minmax(0, 1fr); }
  .provas code { grid-column: 1; }
  .commits li { grid-template-columns: 20px minmax(0, 1fr); }
  .commits code, .cm-a { grid-column: 2; }
  .manut li { grid-template-columns: 20px minmax(0, 1fr); }
  .manut li span { grid-column: 2; }
}
@container pg (max-width: 360px) {
  .hero-cab { flex-direction: column; align-items: flex-start; }
}