/* All colors and fonts are inherited from the approved D / deep-gray themes. */
.detail-layout-comparison {align-items:start}
.detail-layout-comparison .detail-reading,.detail-layout-comparison .detail-aside {min-width:0}
.detail-layout-comparison .detail-aside {align-self:start;display:grid;gap:24px}
.detail-layout-comparison #problem-original,.detail-layout-comparison #solutions,.detail-layout-comparison #discussion,.detail-layout-comparison .discussion-item {scroll-margin-top:112px}
.detail-layout-comparison .layout-rail-section {padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.detail-layout-comparison .layout-rail-heading {display:flex;justify-content:space-between;align-items:center;gap:12px}
.detail-layout-comparison .layout-rail-heading h2 {font:600 20px/1.5 var(--display);margin:0}
.detail-layout-comparison .layout-rail-heading>span {font:400 13px/1.5 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.detail-layout-comparison .layout-rail-note {margin:10px 0 16px;font-size:13px;line-height:1.7;color:var(--muted)}
.detail-layout-comparison .layout-advice-list,.detail-layout-comparison .layout-developer-list {list-style:none;padding:0;margin:0}
.detail-layout-comparison .layout-advice-item,.detail-layout-comparison .layout-developer-item {padding:18px 0;min-width:0}
.detail-layout-comparison .layout-advice-item:first-child,.detail-layout-comparison .layout-developer-item:first-child {padding-top:0}
.detail-layout-comparison .layout-advice-item+.layout-advice-item,.detail-layout-comparison .layout-developer-item+.layout-developer-item {border-top:1px solid var(--line)}
.detail-layout-comparison .layout-advice-meta {display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:12px;line-height:1.7}
.detail-layout-comparison .layout-advice-meta a:hover {color:var(--primary);text-decoration:underline;text-underline-offset:4px}
.detail-layout-comparison .layout-advice-open {display:block;width:100%;text-align:left;color:var(--ink);background:transparent;border:0;padding:8px 0 0;cursor:pointer}
.detail-layout-comparison .layout-advice-excerpt {display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.detail-layout-comparison .layout-advice-cta {display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;line-height:1.6;color:var(--primary)}
.detail-layout-comparison .layout-advice-cta svg {width:15px;height:15px}
.detail-layout-comparison .layout-advice-open:hover .layout-advice-cta {text-decoration:underline;text-underline-offset:4px}
.detail-layout-comparison .layout-rail-actions {display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:16px;border-top:1px solid var(--line)}
.detail-layout-comparison .layout-rail-actions .text-link {display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px}
.detail-layout-comparison .layout-rail-actions .text-link:disabled {color:var(--muted);cursor:default;opacity:.7}
.detail-layout-comparison .layout-rail-empty,.detail-layout-comparison .layout-filter-empty {font-size:14px;line-height:1.9;color:var(--muted);margin:16px 0 24px}
.detail-layout-comparison .layout-page-nav {padding:0 4px}
.detail-layout-comparison .layout-page-nav h2 {font:600 13px/1.7 var(--body);color:var(--muted);margin:0 0 6px}
.detail-layout-comparison .layout-page-nav button {display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;font-size:13px;text-align:left;color:var(--muted);cursor:pointer}
.detail-layout-comparison .layout-page-nav button:hover {color:var(--primary)}
.detail-layout-comparison .layout-page-nav svg {width:16px;height:16px}
.detail-layout-comparison .layout-rail-foot {padding-top:16px;border-top:1px solid var(--line)}
.detail-layout-comparison .layout-rail-foot .text-link {font-size:12px;color:var(--muted)}
.detail-layout-comparison .layout-rail-foot .demo-note {font-size:12px;margin-top:12px}
.detail-layout-comparison .layout-discussion-filters {display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 8px}
.detail-layout-comparison .layout-discussion-filters button {border:1px solid var(--line);border-radius:8px;padding:7px 12px;min-height:38px;color:var(--muted);background:transparent;font:400 13px/1.7 var(--body);cursor:pointer}
.detail-layout-comparison .layout-discussion-filters button[aria-pressed="true"] {background:var(--selected);color:var(--ink);border-color:var(--control-border)}
.detail-layout-comparison .layout-discussion-filters button:hover {color:var(--primary)}
.detail-layout-comparison .discussion-item[hidden],.detail-layout-comparison [hidden] {display:none!important}
.detail-layout-comparison .layout-developer-link {display:block;color:var(--ink)}
.detail-layout-comparison .layout-developer-link>strong {font-size:15px;font-weight:600;line-height:1.7;display:block}
.detail-layout-comparison .layout-developer-link>.stage {display:inline-flex;margin-top:8px;font-size:11px}
.detail-layout-comparison .layout-developer-excerpt {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.8;color:var(--muted);margin:10px 0}
.detail-layout-comparison .layout-solution-author {color:var(--muted);font-size:12px;line-height:1.7}
.detail-layout-comparison .layout-developer-link:hover>strong {color:var(--primary)}
.detail-layout-comparison a:focus-visible,.detail-layout-comparison button:focus-visible {outline:2px solid var(--primary);outline-offset:4px}
.work-preview-bar.detail-comparison-bar {flex-wrap:wrap;gap:8px 24px}
.detail-comparison-bar nav {flex-wrap:wrap;gap:4px 20px}
.detail-comparison-bar a[aria-current="page"] {color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:5px}
@media(max-width:850px){.detail-layout-comparison .detail-aside {position:static}.detail-comparison-bar>span {flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.detail-layout-comparison * {scroll-behavior:auto!important}}