/* smilecorp.co.uk/changelog - laid out like bot-hosting.net's changelog (date on the left, the update
   on the right, a New/Improved/Fixed tag on every change), in Smile's navy and gold, plus product
   filters, app icons, version and platform badges. */
.cl { position: relative; overflow: hidden; }
.cl::before { content: ""; position: absolute; inset: -220px 0 auto; height: 620px; pointer-events: none; z-index: 0;
  background: radial-gradient(520px 260px at 22% 40%, rgba(242, 194, 0, .11), transparent 70%), radial-gradient(420px 240px at 82% 20%, rgba(92, 158, 255, .08), transparent 70%); }
.cl-wrap { position: relative; z-index: 1; max-width: 1040px; padding-top: 4.5rem; padding-bottom: 5rem; }

.cl-hero { padding-bottom: 2.4rem; border-bottom: 1px solid var(--border); }
.cl-eyebrow { margin: 0 0 1rem; color: var(--primary, #f2c200); font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.cl-hero h1 { margin: 0 0 1.1rem; font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.035em; }
.cl-lede { margin: 0; max-width: 640px; color: var(--text-dim); font-size: 1.08rem; line-height: 1.65; }
.cl-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.3rem 0 0; color: var(--text-dim); font-size: .88rem; min-height: 1.3em; }
.cl-stats b { color: var(--text); font-weight: 700; }

.cl-filters { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.cl-chips, .cl-products { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(6, 13, 25, .45);
  color: var(--text-dim); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.cl-chip:hover { color: var(--text); border-color: rgba(242, 194, 0, .35); }
.cl-chip.on { color: #1c1600; background: var(--primary, #f2c200); border-color: var(--primary, #f2c200); }
.cl-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.cl-chip.on .dot { box-shadow: 0 0 0 2px rgba(28, 22, 0, .25); }
.cl-chip img { width: 20px; height: 20px; border-radius: 6px; }
.cl-chip .n { font-size: .74rem; font-weight: 700; opacity: .7; }
.cl-products { margin-top: .8rem; }
.cl-products .cl-chip { padding: .4rem .85rem .4rem .45rem; font-size: .86rem; }
.cl-products .cl-chip.all { padding-left: .85rem; }
.cl-rss { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; color: var(--text-dim); font-size: .84rem; font-weight: 600; border: 1px solid transparent; }
.cl-rss:hover { color: var(--text); border-color: var(--border); }
.cl-rss svg { width: 16px; height: 16px; fill: none; stroke: #f59e0b; stroke-width: 2.2; stroke-linecap: round; }
.cl-rss svg circle { fill: #f59e0b; stroke: none; }

/* the tags: New = gold, Improved = green, Fixed = blue */
.dot.new, .tag.new { --c: 242, 194, 0; }
.dot.improved, .tag.improved { --c: 62, 207, 142; }
.dot.fixed, .tag.fixed { --c: 92, 158, 255; }
.dot { background: rgb(var(--c)); }

.cl-entry { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.5rem; padding: 2.6rem 0; border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
.cl-entry:target .cl-body { animation: cl-flash 1.8s ease-out; border-radius: 14px; }
@keyframes cl-flash { from { box-shadow: 0 0 0 10px rgba(242, 194, 0, .18); background: rgba(242, 194, 0, .05); } to { box-shadow: 0 0 0 10px transparent; background: transparent; } }
.cl-date { position: relative; }
.cl-date-in { position: sticky; top: 96px; display: grid; gap: .55rem; justify-items: start; }
.cl-date time { color: var(--text-dim); font-size: .98rem; }
.cl-latest { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  color: #1c1600; background: var(--primary, #f2c200); }
.cl-latest::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1c1600; animation: cl-pulse 1.8s infinite; }
@keyframes cl-pulse { 50% { opacity: .3; } }

.cl-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.2rem; }
.cl-icon { flex: none; width: 40px; height: 40px; border-radius: 11px; background: rgba(242, 194, 0, .1); display: grid; place-items: center; overflow: hidden; }
.cl-icon img { width: 100%; height: 100%; object-fit: cover; }
.cl-icon.logo img { width: 26px; height: 26px; }
.cl-head-text { min-width: 0; }
.cl-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.32rem; line-height: 1.3; letter-spacing: -.01em; }
.cl-head h2 a { color: inherit; }
.cl-head h2 a:hover { color: var(--primary, #f2c200); }
.cl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }
.cl-badge { display: inline-flex; align-items: center; padding: .14rem .55rem; border-radius: 7px; font-size: .74rem; font-weight: 700; background: rgba(147, 176, 214, .1); color: var(--text-dim); }
.cl-badge.ver { font-family: var(--font-mono); color: var(--primary, #f2c200); background: rgba(242, 194, 0, .1); }
.cl-badge.area { color: var(--text); }

.cl-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.cl-changes li { display: flex; gap: .85rem; align-items: flex-start; }
.cl-changes li p { flex: 1; min-width: 0; }
.cl-changes li[hidden] { display: none; }
.tag { flex: none; display: inline-flex; align-items: center; padding: .2rem .62rem; border-radius: 7px; font-size: .78rem; font-weight: 700;
  color: rgb(var(--c)); background: rgba(var(--c), .12); box-shadow: inset 0 0 0 1px rgba(var(--c), .2); margin-top: .12rem; }
.cl-changes p { margin: 0; color: var(--text-2, #c7d2e1); font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.cl-none { color: var(--text-dim); font-size: .95rem; }

.cl-empty { padding: 4rem 1rem; text-align: center; color: var(--text-dim); }
.cl-empty b { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: .3rem; }
.cl-more { display: flex; justify-content: center; padding-top: 2.4rem; }
.cl-more-btn { padding: .75rem 1.5rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(6, 13, 25, .5); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.cl-more-btn:hover { border-color: rgba(242, 194, 0, .4); }

.cl-entry.skeleton span { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(147, 176, 214, .08), rgba(147, 176, 214, .16), rgba(147, 176, 214, .08)); background-size: 200% 100%; animation: cl-shimmer 1.4s infinite; }
.cl-entry.skeleton .cl-date span { width: 110px; }
.cl-entry.skeleton .cl-body { display: grid; gap: .8rem; }
.cl-entry.skeleton .cl-body span:first-child { width: 45%; height: 22px; }
.cl-entry.skeleton .cl-body span:nth-child(2) { width: 90%; }
.cl-entry.skeleton .cl-body span:nth-child(3) { width: 70%; }
@keyframes cl-shimmer { to { background-position: -200% 0; } }

@media (max-width: 820px) {
  .cl-wrap { padding-top: 3rem; }
  .cl-entry { grid-template-columns: 1fr; gap: .9rem; padding: 2rem 0; }
  .cl-date-in { position: static; grid-auto-flow: column; justify-content: start; align-items: center; }
  .cl-changes li { flex-direction: column; gap: .35rem; }
  .cl-rss { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cl-latest::before, .cl-entry.skeleton span, .cl-entry:target .cl-body { animation: none; } }