[data-role="trace"] { margin-block: 1.5rem; padding: 1.2rem; background: var(--blue); border-radius: 24px; }
[data-role="trace"] figcaption { padding: .1rem .2rem .9rem; color: #fff; font-size: 19px; line-height: 1.45; }
[data-role="trace-path"] { display: grid; gap: .9rem; padding: 0 .25rem .25rem 0; list-style: none; }
[data-role="trace-node"] {
  position: relative; padding: 1rem 1.2rem 1rem 1.8rem; background: var(--panel); color: var(--body);
  border-radius: 18px; box-shadow: 5px 5px 0 #24558e;
}
[data-role="trace-node"]::before {
  content: ""; width: .4rem; height: 1.4rem; background: var(--yellow);
  position: absolute; top: 1.15rem; left: .65rem; border-radius: 999px;
}
[data-role="trace"] figcaption h3 { font: inherit; color: inherit; }
[data-role="trace-node"] h4 { display: block; font-family: var(--heading); font-size: 1.08rem; font-weight: 700; line-height: inherit; }
[data-role="trace-node"] p { margin-top: .35rem; }
[data-role="route-grid"] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.4rem; }
[data-role="route"] {
  position: relative; background: var(--pale-blue); padding: 1.3rem; display: flex; flex-direction: column;
  justify-content: flex-start; min-height: 150px; border-radius: 20px; box-shadow: 4px 5px 0 #c2d5e8;
}
[data-role="route"]:nth-child(even) { background: var(--pale-yellow); box-shadow: 4px 5px 0 #e8cc74; }
[data-role="route"] strong { font-family: var(--heading); font-size: 1.12rem; line-height: 1.35; margin-bottom: .55rem; }
[data-role="route"] span { color: var(--body); font-size: 1rem; line-height: 1.5; }
[data-role="route"]:hover { background: #edf3f8; }
[data-role="briefing-index"] { margin-top: 1.3rem; }
[data-role="briefing-index"] ul { display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; gap: .6rem; }
[data-role="briefing-index"] a {
  display: flex; align-items: center; min-height: 52px; padding: .6rem .8rem;
  background: var(--ground); border-radius: 16px; font-size: 18px;
}
[data-role="briefing-index"] a::before { content: ""; width: .35rem; height: 1.1rem; border-radius: 999px; background: var(--yellow); flex-shrink: 0; margin-right: .65rem; }
[data-role="briefing-index"] a:hover { background: var(--pale-yellow); }
@media (max-width: 1000px) and (min-width: 761px), (max-width: 540px) {
  [data-role="route-grid"] { grid-template-columns: 1fr; }
  [data-role="briefing-index"] ul { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  [data-role="route"] { min-height: 120px; padding: 1.1rem; }
  [data-role="trace"] { padding: 1rem .85rem; }
  [data-role="trace-node"] { padding: .9rem .85rem .9rem 1.6rem; }
  [data-role="trace-node"]::before { left: .55rem; }
}