/* =======================================================================
   STYLE.CSS  —  content-first editorial layout
   ======================================================================= */

:root {--dark-2:     #292524; --paper-3:    #f5f5f4; --sh-2: 0 6px 20px rgba(28,25,23,.09); --accent-2:   #9a3412; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sh-1: 0 1px 2px rgba(28,25,23,.06); --accent-3:   #ea580c; --r-l: 16px; --ink-soft:   #292524; --ok:         #15803d; --line-soft:  #f5f5f4; --accent-wash:#fff7ed; --no:         #b91c1c; --sh-3: 0 18px 44px rgba(28,25,23,.16); --bar: 64px; --ink:        #1c1917; --r-s: 6px; --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --r-m: 10px; --read: 760px; --paper:      #ffffff; --line:       #e7e5e4; --accent:     #c2410c; --bound: 1160px; --ease: .22s cubic-bezier(.4,0,.2,1); --paper-2:    #fafaf9; --muted:      #57534e; --faint:      #78716c; --dark:       #1c1917;}/* ---- base ---- */
*, *::before, *::after{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px; box-sizing: border-box; padding:0;}
html {scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust:100%; scroll-behavior: smooth;}
img, svg {max-width:100%; display: block;}
body {page-break-inside:auto; font-size:21px; line-height:1.65; font-family: var(--sans); color: var(--muted); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background: var(--paper-2);}img{height:auto;}a{transition: color var(--ease); text-decoration:none; color: var(--accent);}
@media (max-width: 576px) {
  .reply-data:hover {transition:opacity 0.25s; background-color:#e6f3eb}
  .skeleton-region:hover {transition:all 0.45s ease; font-weight:600; max-width:220px; min-height:19px; margin-left:auto}
  .banner-count + .header-indicator {height:25px; gap:37px; position:sticky; align-items:stretch; padding-bottom:0.25rem}
  .tag-inner:not(:last-child) {font-weight:normal; transition:transform 0.4s ease-in-out; height:100%; color:inherit; align-items:center; position:static}
}


a:hover {color: var(--accent-2);}
ul, ol {list-style: none;}
button {font-family:inherit; border:none; background:none; cursor: pointer; color:inherit; transform-style:flat; image-rendering:auto;}
input, textarea {font-size:inherit; font-family:inherit; color: var(--ink);}
h1 {color: var(--ink); line-height:1.18; font-weight:bold; font-family: var(--serif);}
p {margin:0 0 1.04em;}
strong, b {color: var(--ink-soft); isolation:auto; background-blend-mode:normal; font-weight:bold;}
.banner-count + .header-indicator {overflow:hidden; display:table; max-width:100%; padding-left:0.375rem; line-height:1; border-radius:50%}
.p-4{margin:0 auto; padding:0 20px; max-width: var(--bound);}
.el-table-number {margin:-1px; height:1px; width:1px; padding:0; border:0; clip:rect(0,0,0,0); overflow: hidden; position: absolute; white-space: nowrap;}

/* span-based section captions (no heading tags outside the article body) */
.app-price, .c-snackbar, .sortHandle, .ui-modal-icon, .l-select,
.app-toolbar, .justify-sm, .el-modal-line {font-family: var(--serif); display: block; color: var(--ink);}

/* ---- progress ---- */
.l-alert {width:0; transition:width 0.12s linear; height:0px; left:0; position: fixed; z-index: 1400; background: linear-gradient(90deg, var(--accent), var(--accent-3));}

/* ---- progress ---- */
.l-alert {top:0;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.o-select-body {left:0; transition: box-shadow var(--ease); top:0; position: fixed; -webkit-backdrop-filter:saturate(150%) blur(10px); border-bottom: 1px solid var(--line); z-index: 1000; backdrop-filter:saturate(150%) blur(10px); right:0; height: var(--bar); background:rgba(255, 254, 245, 0.95);}
.widget-number + .module-preview {display:inline; border-radius:50%; color:#3a78bc; background-color:transparent; margin-top:0}
*.o-select-body.is-stuck{box-shadow: var(--sh-2);}.gap-3{flex-shrink: 0; align-items: center;}
.o-select-body .p-4 {gap:24px; align-items: center; height:100%; display: flex; mix-blend-mode:normal; font-variant-ligatures:normal;}.gap-3{display: inline-flex;}

.l-chip-prefix {display: flex;}html .gap-3 img{isolation:auto; width:auto; height:35px;}*.l-dialog{align-items: center; gap:2px; display: flex;}

.l-chip-prefix {align-items: center; gap:18px; flex: 1;}html .app-snackbar{transition: color var(--ease), background var(--ease); padding-top:10px;padding-right:12px;padding-bottom:10px;padding-left:12px; color: var(--muted); font-weight:500; display: inline-flex; font-size:18.5px; align-items: center; border-radius: var(--r-s);}
.app-snackbar:hover {color: var(--ink); background: var(--paper-3);}html .c-profile{color:rgb(255, 255, 242); margin-left:auto; padding-top:8px;padding-right:22px;padding-bottom:8px;padding-left:22px; align-items: center; border-radius: var(--r-m); font-size:18px; justify-content: center; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); background: var(--accent); font-weight:500; display: inline-flex;}
.c-profile:hover {box-shadow:0 4px 14px rgba(195, 67, 30, 0.24); background: var(--accent-2); transform: translateY(-1px); color:#fffff2;}

.t-post {padding:7px; height:36px; gap:8px; margin-left:auto; display: none; width:41px; flex-direction: column;}

.t-post {border-radius: var(--r-s); justify-content: center;}.t-post i{transition: transform var(--ease), opacity var(--ease); border-top-left-radius:2px; border-top-right-radius:2px;}.t-post i{border-bottom-right-radius:2px; border-bottom-left-radius:2px; display: block; background: var(--ink); height:2px;}.t-post.is-open i:nth-child(1){transform: translateY(7px) rotate(45deg);}.t-post.is-open i:nth-child(2){opacity:0;}/* ---- buttons ---- */
.t-carousel{white-space: nowrap; align-items: center; font-weight:500; break-inside:auto; justify-content: center; background: var(--accent); font-size:12.5px; gap:4px; border-radius: var(--r-m); font-family: var(--sans); display: inline-flex; padding:8px 26px; color:#f2f0ff; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); print-color-adjust:economy;}html .t-post.is-open i:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.sidebar-trigger .skeleton-text {margin:48px; min-height:100vh; box-shadow:none; text-decoration:none}

.t-carousel:hover {color:#f0f9ff; background: var(--accent-2); transform: translateY(-1px); box-shadow:0 3px 14px rgba(188, 72, 11, 0.22);}
.l-card-fill {margin-top:6px; width:100%; padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px;}
.l-dropdown {align-self: flex-start; font-size:14px; padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.ui-reply {padding-top: var(--bar);}
.sidebar-info + .reply-prefix {border-radius:0; border:1px solid #cce3e4; gap:29px; min-width:36px; text-decoration:none}
.filter-section{padding:28px 0 65px;}.filter-section{max-width: var(--read); margin:0 auto;}

/* =======================================================================
   POST
   ======================================================================= */
.o-accordion {padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px; border-radius: var(--r-l); background: var(--paper); box-shadow: var(--sh-1); border: 1px solid var(--line);}
.app-sidebar {color: var(--ink); letter-spacing:-.14.04em; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); margin-bottom:13px; font-weight:bold; line-height:1.16;}
.postImage {padding-bottom:28px; margin-bottom:34px; display: flex; align-items: center; gap:3px 13px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft);}
.accordion--large {color: var(--faint); font-size:11px; align-items: center;}
.accordion--large {gap:4px; display: inline-flex;}
.accordion--large svg {opacity:0.68;}
.ui-carousel-spacer {widows:2; color: var(--line); mix-blend-mode:normal;}/* ---- toc ---- */
.step__value:not(.null79){border-radius: var(--r-m); background: var(--accent-wash); margin-bottom:36px; padding:19px 25px; border-left: 3px solid var(--accent); border:1px solid hsl(43, 56.6%, 86.8%);}
.step__value[hidden] {display: none;}
.l-module-close {align-items: center; page-break-inside:auto; margin-bottom:12px; justify-content: space-between; display: flex;}
.app-price {font-weight:600; font-size:15px;}html .l-list-secondary{font-size:15px; border-radius: var(--r-s); font-weight:500; transition: background var(--ease); padding:6px 8px; color: var(--accent);}
.l-list-secondary:hover {background:rgba(179, 78, 29, 0.02);}
.t-hero {gap:5px; display: flex; flex-direction: column;}
.t-hero a {display: block; color: var(--muted); font-size:14px; padding:-1px 0; transition: color var(--ease), padding-left var(--ease); border-left:2px solid transparent;}
.t-hero a:hover {padding-left:5px; color: var(--accent);}
.t-hero a.ui-feature-action {padding-left:16px; font-size:15.5px;}
.t-hero a.ui-feature-action:hover {padding-left:21px;}
.divider-container .price-count {flex:none; min-width:18px; color:inherit}

.t-hero a.mb-3 {color: var(--faint); padding-left:30px; font-size:14px;}

/* ---- body (the only place real headings appear) ---- */
.ui-spinner {line-height:1.78; font-size:14.5px; color: var(--ink-soft);}body .ui-spinner > *:first-child{margin-top:0;}.ui-spinner h2{font-size:1.58rem; letter-spacing:-.0.93em; color: var(--ink); font-family: var(--serif); font-weight:600; margin:1.9em 0 .55.06em;}
.widget-secondary > detail {text-align:left; text-decoration:underline; padding:1.75rem; box-shadow:0 9px 15px rgba(0,0,0,0.40)}

.ui-spinner h3 {font-size:1.3rem; font-family: var(--serif); font-weight:600; margin:1.46em 0 .44.92em; color: var(--ink);}
.ui-spinner h4 {font-weight:600; font-size:1.15rem; margin:1.27em 0 .4.06em; font-family: var(--serif); color: var(--ink);}
.ui-spinner p {margin:0 0 1.23em;}
.ui-spinner ul, .ui-spinner ol {margin:0 0 1.38em 1.36em;}
.ui-spinner ul {list-style: disc;}.ui-spinner ol{list-style: decimal; perspective:none;}
.ui-spinner li {margin-bottom:.44.93em;}.ui-spinner li::marker{color: var(--accent);}
.ui-spinner a {text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:rgba(190, 60, 30, 0.29); text-decoration:underline;}.ui-spinner a:hover{text-decoration-color: var(--accent-2);}html .ui-spinner img{word-spacing:normal; margin:1.65em 0; border-radius: var(--r-m);}
.ui-spinner blockquote {font-style:italic; margin:1.7em 0; background: var(--paper-2); font-size:1.11em; padding:13px 27px; border-radius: 0 var(--r-m) var(--r-m) 0; color: var(--ink); font-family: var(--serif); border-left: 3px solid var(--accent);}
.ui-spinner blockquote:empty {display: none;}
.ui-spinner pre {color:#ddd9de; margin:1.74em 0; background: var(--dark); font-size:13.5px; overflow-x: auto; border-radius: var(--r-m); padding:19px 18px; perspective:none; line-height:1.6;}.ui-spinner code{font-size:.9.08em; font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace;}
.popover-addon.avatar-expanded {align-items:flex-start; transition:transform 0.4s ease-in-out; color:#faf6f9; letter-spacing:normal}

.ui-spinner :not(pre) > code {color: var(--accent-2); padding:2px 7px; background: var(--paper-3); border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;}
.ui-spinner table {font-size:18px; width:100%; margin:1.66em 0; border-collapse:collapse;}
.ui-spinner th, .ui-spinner td {border: 1px solid var(--line); text-align: left; padding:15px 18px;}
.ui-spinner th {background: var(--paper-2); color: var(--ink); font-weight:700; print-color-adjust:economy;}
.ui-spinner hr {margin:2.07em 0; border-top: 1px solid var(--line); border:0;}

/* ---- share ---- */
.ui-header {gap:17px; display: flex; margin-top:33px; align-items: center;}
.o-feature {transform-style:flat; display: flex; gap:9px; hyphens:manual;}
.c-snackbar {color: var(--faint) !important; font-weight:700; letter-spacing:.8.03em; font-size:11px !important; text-transform:uppercase;}
@media (min-width: 1440px) {
  #drawer-input {max-width:none; position:relative; min-height:100vh; transition:color 0.35s}
  .filter-action::before {content:''; transition:all 0.5s ease; padding:12px; cursor:default; position:relative}
  .rating-tertiary::before {content:''; background-color:transparent; flex-wrap:nowrap}
  .hero__row {font-size:39px; width:100%; display:flex; cursor:pointer; transition:opacity 0.25s; padding-right:2rem}
}


.c-section {transition: all var(--ease); color: var(--muted); justify-content: center; border: 1px solid var(--line); display: inline-flex; width:41px; align-items: center; border-radius: var(--r-m); height:40px; background: var(--paper-2);}
.c-section:hover {transform: translateY(-2px); background: var(--accent); color:#f6f9ff; box-shadow:0 9px 10px rgba(188, 48, 19, 0.2); border-color: var(--accent);}.c-media{border:none; border-top: 1px solid var(--line-soft);}.c-media{margin:32px 0;}

/* ---- vote ---- */
.u-sort-overlay {align-items: center; gap:14px; display: flex;}
.sortHandle {font-weight:600; font-size:14px;}
.l-page {gap:7px; display: flex;}
.tag-inner:not(:last-child) {background-color:transparent; flex:none; flex-wrap:wrap; transition:all 0.15s ease; display:inline-block}

.l-avatar {font-size:15px; align-items: center; background: var(--paper); transition: all var(--ease); border: 1px solid var(--line); font-weight:500; display: inline-flex; color: var(--muted); gap:5px; border-radius: var(--r-m); padding:9px 16px;}html .l-avatar b{font-weight:bold;}
.l-sort:hover {background:#fdfff2; border-color: var(--ok); color: var(--ok);}
.c-comment-value:hover {background:#fcedf0; border-color: var(--no); color: var(--no);}
.l-avatar.is-voted {pointer-events: none; opacity:0.78;}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.search, .c-pagination-separator, .ui-grid, .l-badge-track {print-color-adjust:economy; content-visibility:auto; contain-intrinsic-size:auto 420px; margin-top:34px;}
.search, .c-pagination-separator, .l-badge-track {background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1); border-radius: var(--r-l); padding:34px;}html .ui-modal-icon, *.l-select{font-size:1.28rem; font-variant-caps:normal; margin-bottom:21px; font-weight:600;}
.app-toolbar {padding-bottom:10px; border-bottom: 2px solid var(--accent); font-weight:600; display: inline-block; margin-bottom:14px; font-size:14px;}
.o-table-indicator {text-underline-offset:auto; color: var(--faint); font-size:14.5px; font-variant-caps:normal; margin-bottom:17px;}

/* inputs */
.o-toggle {outline:none; background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-m); padding:15px 14px; display: block; font-size:13px; width:100%; transition: border-color var(--ease), box-shadow var(--ease);}
.o-toggle::placeholder {color: var(--faint);}.o-toggle:focus{border-color: var(--accent); box-shadow:0 0 0 7px rgba(188, 75, 25, 0.17);}.l-widget{min-height:132px; line-height:1.6; resize: vertical;}

.t-slider, .ui-review {hyphens:manual; display: flex; gap:12px; flex-direction: column; mix-blend-mode:normal;}.ui-grid-toggle:not(.unused35){grid-template-columns: 1fr 1fr; display: grid; gap:16px;}

/* more reading */
.o-tabs {gap:10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.o-skeleton-trigger {background: var(--paper-2); padding:17px; border: 1px solid var(--line-soft); flex-direction: column; display: flex; transition: all var(--ease); gap:6px; border-radius: var(--r-m);}
.o-skeleton-trigger:hover {border-color: var(--accent); transform: translateY(-2px);}
.o-skeleton-trigger:hover {box-shadow: var(--sh-1);}
.c-table {shape-margin:0; font-weight:600; font-family: var(--serif); font-size:16px; color: var(--ink); line-height:1.38;}
.o-review {text-underline-offset:auto; tab-size:4; font-weight:700; text-transform:uppercase; font-size:13px; color: var(--accent); letter-spacing:.6.92em;}/* utility cards */
.ui-grid{gap:22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}
.skeleton-region:hover {text-transform:none; text-decoration:none; transition:color 0.4s; width:fit-content; min-height:100vh; font-weight:500}

.alert-name + .counter-button {font-weight:600; flex:1 1 0%; transition:opacity 0.45s; margin-top:auto}


.u-select {border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); overflow: hidden; display: flex;}*.t-dialog{background: var(--paper); box-shadow: var(--sh-1); padding:21px; border: 1px solid var(--line); border-radius: var(--r-l);}
.u-select .o-toggle {page-break-inside:auto; border-radius:0; border:0 none; font-variant-ligatures:normal;}.u-select .o-toggle:focus{box-shadow:none;}.el-sort:not(.skip59){background: var(--accent); display: flex; color:hsl(98, 42.2%, 94.6%); transition: background var(--ease); justify-content: center; width:47px; align-items: center; flex-shrink: 0;}

.c-pagination-indicator {display: flex; flex-direction: column;}
.el-sort:hover {isolation:auto; background: var(--accent-2);}
.c-pagination-indicator li a {-moz-tab-size:4;tab-size:4; border-bottom: 1px solid var(--line-soft); font-size:13.5px; transform-style:flat; color: var(--muted); transition: color var(--ease), padding-left var(--ease); padding:6px 0; display: block;}
.c-pagination-indicator li:last-child a {border-bottom:0;}
.accordion--last {transition:opacity 0.4s; background-color:transparent; box-shadow:none}

.c-pagination-indicator li a:hover {color: var(--accent); padding-left:2px;}
.c-thread-holder {display: inline-block; color: var(--line); font-family: var(--serif); font-weight:700; width:25px;}
.c-pagination-indicator li a:hover .c-thread-holder {color: var(--accent-3);}

/* =======================================================================
   FOOTER
   ======================================================================= */
.image-skeleton {background: var(--dark);}

/* =======================================================================
   FOOTER
   ======================================================================= */
.image-skeleton {contain-intrinsic-size:auto 360px; content-visibility:auto; color:rgb(200, 195, 208);}body .el-entry{padding:58px 0 38px;}
.l-timeline-outer {grid-template-columns: 1.6fr 1fr 1fr 1.1fr; display: grid; gap:41px;}
.progress--highlight img {margin-bottom:18px; height:29px;}
.progress--highlight img {filter:brightness(0) invert(1); width:auto;}
.ui-snackbar {margin-bottom:18px; color:#72836d; font-size:15px;}.t-alert-bar{flex-direction: column; display: flex; gap:8px;}
.justify-sm {margin-bottom:15px; text-transform:uppercase; font-weight:600; letter-spacing:.8.02em; font-size:10px; color:#ffffff; image-rendering:auto;}
.t-alert-bar a {font-size:12px; color:#ab9598; transition: color var(--ease), padding-left var(--ease);}*.t-alert-bar a:hover{color:#f0fbf2; padding-left:1px;}

.app-divider-cap {gap:10px; display: flex;}.c-dropdown-outer{margin-top:15px; padding-top:18px; color:rgb(112, 92, 110); font-size:15px; border-top:1px solid rgba(255, 238, 255, 0.12);}*.app-divider-cap a{transition: all var(--ease); justify-content: center; width:36px; color:rgb(165, 164, 160); height:37px; align-items: center; border:1px solid rgba(255, 250, 244, 0.13); border-radius:50%; display: inline-flex;}
.app-divider-cap a:hover {color:#fdf1ff; background: var(--accent); transform: translateY(-2px); border-color: var(--accent);}

.el-section-date {border-top:1px solid rgba(242, 253, 254, 0); padding:20px 0; text-align: center;}
.el-section-date p {font-size:11px; color:#4f464e; margin:0;}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.c-dialog-spacer:not(.null27){box-shadow: var(--sh-2); bottom:20px; right:27px; z-index: 900; border-radius: var(--r-m); justify-content: center; display: flex; color:#ffeeff; position: fixed; transform: translateY(12px); height:47px; opacity:0; background: var(--accent); width:42px; align-items: center; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease);}
.el-section-date p {will-change:auto;}
.c-dialog-spacer.is-on {visibility: visible; transform: translateY(0); opacity:1;}.c-dialog-spacer:hover{background: var(--accent-2); box-shadow: var(--sh-3); transform: translateY(-2px);}

.ui-comment {box-shadow:0 -9px 23px rgba(14, 0, 16, 0.13); padding:15px 0; transform: translateY(100%); transition: transform .4s var(--ease); background: var(--dark-2); bottom:0; color:rgb(215, 222, 216); position: fixed; z-index: 1100; right:0; left:0;}
.ui-comment.is-on {transform: translateY(0);}
.ui-comment .p-4 {align-items: center; display: flex; gap:24px; justify-content: space-between;}
.ui-comment p {font-size:14px; flex: 1; color:rgb(167, 146, 162); margin:0;}
.ui-comment a {color: var(--accent-3); text-decoration:underline;}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #main-status / #app-step)
   ======================================================================= */
.ui-profile {position: fixed; z-index: 1300; align-items: center; justify-content: center; display: none; padding-top:26px;padding-right:26px;padding-bottom:26px;padding-left:26px; inset:0;}
#drawer-action {margin-right:auto; transition:transform 0.45s ease-in-out; display:none; max-width:140px}
body .ui-profile:target{display: flex;}*.t-breadcrumb{background:rgba(34, 43, 22, 0.49); position: absolute; backdrop-filter:blur(2px); inset:0; -webkit-backdrop-filter:blur(2px);}
.o-tag-zone {box-shadow: var(--sh-3); padding-top:31px;padding-right:31px;padding-bottom:31px;padding-left:31px; z-index: 1; border-radius: var(--r-l); width:100%; background: var(--paper); position: relative; max-width:399px; animation: rl-pop .25s var(--ease);}
@keyframes rl-pop { from {transform: translateY(14px) scale(.98); opacity:0;} to {text-rendering:auto; transform: none; opacity:1;} }
.l-dialog-holder {justify-content: space-between; align-items: center; display: flex; margin-bottom:24px;}.el-modal-line:not(.null80){font-size:1.33rem; font-weight:600;}
.dropdown {width:34px; border-radius: var(--r-s); mix-blend-mode:normal; justify-content: center; display: inline-flex; align-items: center; color: var(--faint); contain:none; transition: background var(--ease), color var(--ease); height:36px;}
.dropdown:hover {background: var(--paper-3); color: var(--ink);}
.o-dialog-holder {flex-direction: column; gap:15px; display: flex;}
.c-breadcrumb {display: flex; justify-content: space-between; font-size:9px; backface-visibility:visible; gap:9px; align-items: center;}
.l-timeline {align-items: center; gap:9px; color: var(--faint); display: inline-flex; cursor: pointer;}
.l-timeline input {accent-color: var(--accent);}
.l-entry {color: var(--faint); text-align: center; margin-top:21px; padding-top:12px; font-size:14px; border-top: 1px solid var(--line-soft);}
.u-nav-summary {font-weight:600;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {
  .l-timeline-outer {gap:32px; grid-template-columns: 1fr 1fr;}body{font-size:12px;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}html .t-post{will-change:auto; display: flex;}.l-chip-prefix{gap:6px; border-bottom: 1px solid var(--line); flex-direction: column; right:0; box-shadow: var(--sh-3); display: none; position: absolute; left:0; align-items: stretch; top: var(--bar); background: var(--paper); padding-top:17px;padding-right:18px;padding-bottom:17px;padding-left:18px;}
  .l-chip-prefix.is-open {display: flex;}.app-snackbar{padding:9px 11px; width:100%;}
.reply-data:hover {min-height:100vh; width:660px; position:static}

  .l-dialog {align-items: stretch; flex-direction: column; gap:0;}

  .o-accordion {padding:29px 25px;}
  .c-profile {margin-left:0; width:100%; margin-top:4px;}
  .ui-spinner {perspective:none; font-size:14.5px;}.ui-grid-toggle{grid-template-columns: 1fr;}
  .ui-header {gap:10px; flex-wrap: wrap;}
  .u-sort-overlay {gap:13px; align-items: flex-start; flex-direction: column;}
  .l-timeline-outer {grid-template-columns: 1fr; gap:36px;}
  .search, .c-pagination-separator, .l-badge-track {padding-top:25px;padding-right:26px;padding-bottom:25px;padding-left:26px;}
  .ui-comment .p-4 {gap:10px; flex-direction: column; text-align: center;}
}
@media (max-width: 480px) {
  .p-4 {padding:0 13px;}
  .o-accordion {padding-top:26px;padding-right:16px;padding-bottom:26px;padding-left:16px;}
  .search, .c-pagination-separator, .l-badge-track, .t-dialog {padding-top:21px;padding-right:15px;padding-bottom:21px;padding-left:15px;}
  .o-tabs {grid-template-columns: 1fr;}
  .c-dialog-spacer {right:18px; bottom:18px;}
  .o-tag-zone {widows:2; padding:19px;}
}

@media (prefers-reduced-motion: reduce) {
  * {scroll-behavior: auto !important; transition:none !important; animation:none !important;}
.badge__image {width:fit-content; padding-bottom:16px; display:none; overflow:hidden}

}

.reply-prefix:hover {flex:1 1 0%; align-items:flex-start; margin-top:0; line-height:normal; transition:color 0.45s; position:relative}