/* LLD Light Compare — scoped under .lldc. Theme: Bosa Blog Dark (black surface, #EB5A3E accent). */
@property --lldc-cat-a { syntax: '<number>'; inherits: false; initial-value: 0.22; }   /* registered so the card tint can animate on hover */

.lldc {
  --lldc-bg: #000000;
  --lldc-surface: #0b0b0b;
  --lldc-surface-2: #141414;
  --lldc-hair: #262626;
  --lldc-hair-2: #5a5a5a;   /* control borders and the modeled underline: 3.0:1 on black (WCAG 1.4.11), less on lighter surfaces */
  --lldc-text: #e6e6e6;
  --lldc-text-2: #a6a6a6;
  --lldc-muted: #8a8a8a;    /* 5.3:1 or better on every surface the small labels sit on */
  --lldc-a: #eb5a3e;      /* light A = site accent */
  --lldc-b: #3b9edb;      /* light B */
  --lldc-a-soft: rgba(235, 90, 62, 0.14);
  --lldc-b-soft: rgba(59, 158, 219, 0.14);
  --lldc-claim: #8a8a8a;
  /* rating tints (RGB triplets so they can be used at any alpha): the Borderlands loot ladder, applied to measured
     output vs the maker's claim. Unrated (modeled / no claim) stays neutral. */
  --lldc-tier-legendary: 255, 160, 0;
  --lldc-tier-epic: 170, 70, 240;
  --lldc-tier-rare: 60, 130, 255;
  --lldc-tier-uncommon: 70, 210, 70;
  --lldc-tier-common: 205, 205, 205;
  --lldc-tier-none: 120, 120, 120;
  --lldc-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lldc-serif: 'Playfair Display', Georgia, serif;
  --lldc-radius: 10px;
  --lldc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lldc-over: cubic-bezier(0.2, 0.9, 0.3, 1.18);   /* overshoot: things land with a small bounce */
  --lldc-dur: 900ms;
  /* results choreography: bars, then the chart draws on, then the colour cards, then the CCT markers travel */
  --lldc-t-bars: 150ms; --lldc-t-chart: 600ms; --lldc-t-color: 900ms; --lldc-t-cct: 1300ms;

  color: var(--lldc-text);
  font-family: var(--lldc-sans);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 32px;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  background: var(--lldc-bg);   /* the design assumes a black surface; this guarantees it whatever the page behind */
  color-scheme: dark;           /* native scrollbars, the select popup and the search clear button render dark */
  scroll-margin-top: 12px;
  -webkit-text-size-adjust: 100%;
}
.lldc *, .lldc *::before, .lldc *::after { box-sizing: border-box; }
/* Element resets at (0,1,1). They beat a theme's bare-element rules (button, input, h2, td, img) and tie with
   ".entry-content td"-style rules, where this stylesheet wins by being enqueued after the theme. Every component
   rule below is written ".lldc .lldc-x" (0,2,0) or stronger, so components always beat both the resets and the
   theme. */
.lldc button, .lldc input, .lldc select, .lldc textarea {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; line-height: inherit;
  margin: 0; min-height: 0; box-shadow: none; text-shadow: none; border-radius: 0; appearance: none; -webkit-appearance: none;
}
.lldc button { background: none; border: 0; padding: 0; cursor: pointer; }
.lldc input, .lldc select { background: none; border: 0; padding: 0; height: auto; width: auto; }
.lldc h2, .lldc h3, .lldc h4, .lldc p { font: inherit; color: inherit; margin: 0; padding: 0; text-transform: none; letter-spacing: normal; }
.lldc table { border: 0; margin: 0; padding: 0; background: none; border-spacing: 0; }
.lldc tr, .lldc th, .lldc td { border: 0; padding: 0; background: none; }
.lldc img, .lldc svg { border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; background: none; }
.lldc ul, .lldc ol, .lldc li { list-style: none; margin: 0; padding: 0; }
.lldc a { color: var(--lldc-text-2); text-decoration: underline; text-underline-offset: 2px; background: none; box-shadow: none; border-bottom: 0; }
.lldc a:where(:hover) { color: #fff; }   /* stays at (0,1,1): link components set their own hover colour */
.lldc button:focus-visible, .lldc input:focus-visible, .lldc select:focus-visible, .lldc a:focus-visible {
  outline: 2px solid var(--lldc-a); outline-offset: 2px;
}
.lldc tr:focus-visible, .lldc th:focus-visible, .lldc summary:focus-visible { outline: 2px solid var(--lldc-a); outline-offset: -2px; }
.lldc .lldc-hidden { display: none !important; }
.lldc .lldc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The results choreography and the smooth scrolling run regardless of the OS "reduce motion" setting (editorial decision,
   2026-10-20: with the setting on, every transition collapsed to 1 ms while the stagger delays stayed, which read as
   dropped frames). Nothing loops and nothing flashes more than twice; the longest sequence ends after about 4 s. */

/* ---------- branded header ---------- */
.lldc { --lldc-brand: #197ac4; }   /* Low Light Defense blue, sampled from the site mark */
.lldc .lldc-hero {
  display: flex; align-items: center; gap: 22px; margin: 0 0 22px; padding: 22px 24px 20px; border-radius: 14px; position: relative; overflow: hidden;
  color: inherit; text-decoration: none; cursor: pointer; transition: border-color 200ms, box-shadow 200ms;
  background: radial-gradient(120% 140% at 0% 0%, rgba(25, 122, 196, .22), rgba(25, 122, 196, 0) 55%), linear-gradient(180deg, #121417, #060708);
  border: 1px solid var(--lldc-hair);
}
.lldc .lldc-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--lldc-brand), rgba(25, 122, 196, .15)); }
.lldc .lldc-hero:hover { border-color: rgba(25, 122, 196, .5); box-shadow: 0 0 0 1px rgba(25, 122, 196, .25), 0 10px 30px rgba(0, 0, 0, .5); }
.lldc .lldc-hero:hover .lldc-hero-mark { filter: drop-shadow(0 0 26px rgba(25, 122, 196, .7)); }
.lldc .lldc-hero-mark { width: 92px; height: auto; flex: none; filter: drop-shadow(0 0 18px rgba(25, 122, 196, .45)); }
.lldc .lldc-hero-text { min-width: 0; }
.lldc .lldc-hero-brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--lldc-sans); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 15px; line-height: 1; margin: 0 0 8px; }
.lldc .lldc-hero-brand-1 { color: #fff; }
.lldc .lldc-hero-brand-2 { color: var(--lldc-brand); }
.lldc .lldc-hero-t { font-family: var(--lldc-serif); font-weight: 700; color: #fff; font-size: 30px; line-height: 1.1; margin: 0 0 8px; letter-spacing: .005em; }
.lldc .lldc-hero-s { margin: 0; color: var(--lldc-text-2); font-size: 15px; line-height: 1.5; max-width: 62ch; }
@media (max-width: 640px) {
  .lldc .lldc-hero { gap: 14px; padding: 16px 16px 16px; align-items: flex-start; }
  .lldc .lldc-hero-mark { width: 64px; }
  .lldc .lldc-hero-brand { font-size: 12px; letter-spacing: .18em; gap: 7px; }
  .lldc .lldc-hero-t { font-size: 24px; }
  .lldc .lldc-hero-s { font-size: 14px; }
}

/* ---------- intro, presets, hero picker ---------- */
.lldc .lldc-intro { color: var(--lldc-text-2); font-size: 16px; margin: 0 0 18px; max-width: 70ch; }
.lldc .lldc-intro a { color: var(--lldc-text); }
.lldc .lldc-picker { margin: 0 0 22px; }
.lldc .lldc-picker-t { font-family: var(--lldc-serif); font-weight: 700; color: #fff; font-size: 26px; margin: 0 0 14px; letter-spacing: .005em; }
.lldc .lldc-slots2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.lldc .lldc-vs { align-self: center; color: var(--lldc-muted); font-family: var(--lldc-serif); font-size: 20px; padding: 0 2px; }
.lldc .lldc-slot2 {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 12px 14px;
  background: var(--lldc-surface); border: 1px dashed var(--lldc-hair-2); border-radius: 14px;
}
.lldc .lldc-slot2.is-filled { border-style: solid; }
.lldc .lldc-slot2.is-filled.is-a { border-color: var(--lldc-a); box-shadow: inset 0 0 0 1px var(--lldc-a); }
.lldc .lldc-slot2.is-filled.is-b { border-color: var(--lldc-b); box-shadow: inset 0 0 0 1px var(--lldc-b); }
.lldc .lldc-slot2-empty { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #000; }
.lldc .is-a .lldc-slot2-empty { background: var(--lldc-a); } .lldc .is-b .lldc-slot2-empty { background: var(--lldc-b); }
.lldc .lldc-slot2-field { position: relative; flex: 1; min-width: 0; }
.lldc .lldc-slot-search { width: 100%; background: #000; border: 1px solid var(--lldc-hair-2); color: var(--lldc-text); border-radius: 10px; padding: 11px 14px; font-size: 16px; }
.lldc .lldc-slot-search::placeholder { color: var(--lldc-muted); }
.lldc .lldc-ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: none; background: #0f0f0f; border: 1px solid var(--lldc-hair-2); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.7); }
.lldc .lldc-ac.is-live { display: block; }
.lldc .lldc-ac-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--lldc-hair); }
.lldc .lldc-ac-item:last-child { border-bottom: 0; }
.lldc .lldc-ac-item:hover, .lldc .lldc-ac-item.is-active { background: var(--lldc-surface-2); outline: none; }
.lldc .lldc-ac-item.is-active { box-shadow: inset 3px 0 0 var(--lldc-a); }
.lldc .lldc-ac-item b { display: block; font-size: 14px; color: #fff; }
.lldc .lldc-ac-item small { display: block; font-size: 13px; color: var(--lldc-muted); }
.lldc .lldc-ac-none { padding: 10px 12px; color: var(--lldc-muted); font-size: 13px; }
.lldc .lldc-ac-none:empty { display: none; }
.lldc .lldc-slot2-img { width: 84px; height: 54px; flex: 0 0 84px; display: flex; align-items: center; justify-content: center; }
.lldc .lldc-slot2-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.lldc .lldc-slot2-name { flex: 1; min-width: 0; }
.lldc .lldc-slot2-name b { display: block; color: #fff; font-size: 16px; line-height: 1.2; }
.lldc .lldc-slot2-name span { display: block; color: var(--lldc-muted); font-size: 12px; margin-top: 2px; }
.lldc .lldc-slot2-x { color: var(--lldc-muted); font-size: 18px; padding: 4px 8px; border-radius: 8px; }
.lldc .lldc-slot2-x:hover { color: #fff; background: var(--lldc-surface-2); }
.lldc .lldc-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.lldc .lldc-presets-l { color: var(--lldc-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.lldc .lldc-preset { border: 1px solid var(--lldc-hair-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--lldc-text); background: var(--lldc-surface); transition: background-color 160ms, border-color 160ms; }
.lldc .lldc-preset:hover { background: var(--lldc-surface-2); border-color: var(--lldc-muted); }

/* ---------- header / method ---------- */
.lldc .lldc-loading, .lldc .lldc-noscript { color: var(--lldc-muted); padding: 24px 0; }
.lldc .lldc-error { color: #f3b1a4; border: 1px solid #5a2a22; border-radius: var(--lldc-radius); padding: 12px 16px; }
.lldc .lldc-foot .lldc-dot { border-bottom: 2px dotted var(--lldc-text-2); }

/* ---------- toolbar ---------- */
.lldc .lldc-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--lldc-bg) 85%, rgba(0,0,0,0));
  padding: 10px 0 14px; margin: 0 0 6px;
}
.lldc .lldc-tb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lldc .lldc-tb-row > .lldc-view { margin-left: auto; }
.lldc .lldc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lldc .lldc-chip {
  border: 1px solid var(--lldc-hair-2); border-radius: 999px; padding: 6px 13px;
  font-size: 13px; color: var(--lldc-text-2); background: var(--lldc-surface);
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.lldc .lldc-chip:hover { color: #fff; border-color: var(--lldc-muted); }
/* rarity key: one tile per tier, tinted like the cards, with the threshold in words */
.lldc .lldc-tierkey { margin: 0 0 18px; padding: 14px 16px 12px; border: 1px solid var(--lldc-hair); border-radius: 12px; background: linear-gradient(180deg, var(--lldc-surface-2), var(--lldc-surface)); }
.lldc .lldc-tierkey-h { margin: 0 0 10px; font-size: 13px; color: var(--lldc-text-2); line-height: 1.45; max-width: 80ch; }
.lldc .lldc-tierkey-h b { color: var(--lldc-text); font-weight: 600; }
.lldc .lldc-tierkey-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lldc .lldc-tierkey-i {
  --lldc-cat-a: .16; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 8px; border-radius: 9px; min-width: 0;
  background: linear-gradient(160deg, rgba(var(--lldc-cat), var(--lldc-cat-a)) 0%, rgba(var(--lldc-cat), 0) 70%), var(--lldc-bg);
  border: 1px solid rgba(var(--lldc-cat), .32);
}
.lldc .lldc-tierkey-i i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--lldc-cat)); box-shadow: 0 0 8px rgba(var(--lldc-cat), .8); margin-bottom: 2px; }
.lldc .lldc-tierkey-i b { font-size: 14px; font-weight: 700; color: rgb(var(--lldc-cat)); line-height: 1.1; }
.lldc .lldc-tierkey-i small { font-size: 12px; color: var(--lldc-text-2); line-height: 1.3; }
@media (max-width: 900px) { .lldc .lldc-tierkey-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .lldc .lldc-tierkey { padding: 12px 12px 10px; } .lldc .lldc-tierkey-row { grid-template-columns: repeat(2, 1fr); gap: 6px; } .lldc .lldc-tierkey-i b { font-size: 13px; } }
.lldc .is-tier-legendary { --lldc-cat: var(--lldc-tier-legendary); }
.lldc .is-tier-epic { --lldc-cat: var(--lldc-tier-epic); }
.lldc .is-tier-rare { --lldc-cat: var(--lldc-tier-rare); }
.lldc .is-tier-uncommon { --lldc-cat: var(--lldc-tier-uncommon); }
.lldc .is-tier-common { --lldc-cat: var(--lldc-tier-common); }
.lldc .is-tier-none { --lldc-cat: var(--lldc-tier-none); }
.lldc .lldc-tierdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: rgb(var(--lldc-cat)); box-shadow: 0 0 6px rgba(var(--lldc-cat), .7); }
.lldc .lldc-chip[aria-pressed="true"] { background: var(--lldc-text); color: #000; border-color: var(--lldc-text); font-weight: 600; }
.lldc .lldc-search {
  flex: 1 1 160px; min-width: 140px; max-width: 320px;
  background: var(--lldc-surface); border: 1px solid var(--lldc-hair-2); color: var(--lldc-text);
  border-radius: 999px; padding: 7px 14px; font-size: 14px;
}
.lldc .lldc-search::placeholder { color: var(--lldc-muted); }
.lldc .lldc-select {
  background: var(--lldc-surface); border: 1px solid var(--lldc-hair-2); color: var(--lldc-text-2);
  border-radius: 999px; padding: 7px 32px 7px 14px; font-size: 13px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lldc-muted) 50%), linear-gradient(135deg, var(--lldc-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.lldc .lldc-dir { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lldc-hair-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--lldc-text-2); background: var(--lldc-surface); white-space: nowrap; transition: background-color 160ms, color 160ms; }
.lldc .lldc-dir:hover { background: var(--lldc-surface-2); color: #fff; }
.lldc .lldc-dir-arrow { font-weight: 700; color: var(--lldc-text); }
.lldc .lldc-count { color: var(--lldc-text-2); font-size: 13px; margin-left: auto; white-space: nowrap; }
.lldc .lldc-count:empty { display: none; }
.lldc .lldc-view { display: inline-flex; border: 1px solid var(--lldc-hair-2); border-radius: 999px; overflow: hidden; }
.lldc .lldc-view button { padding: 6px 12px; font-size: 13px; color: var(--lldc-text-2); }
.lldc .lldc-view button[aria-pressed="true"] { background: var(--lldc-surface-2); color: #fff; }
.lldc .lldc-winrow { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.lldc .lldc-winrow-l { font-size: 13px; color: var(--lldc-muted); letter-spacing: .06em; text-transform: uppercase; }
.lldc .lldc-win { border-color: var(--lldc-muted); }
.lldc .lldc-win button { padding: 10px 22px; font-size: 15px; font-weight: 600; color: var(--lldc-text-2); }
.lldc .lldc-win button[aria-pressed="true"] { background: var(--lldc-text); color: #000; }
.lldc .lldc-win button:hover:not([aria-pressed="true"]) { background: var(--lldc-surface-2); color: #fff; }
.lldc .lldc-export { margin-left: auto; border: 1px solid var(--lldc-hair-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--lldc-text-2); background: var(--lldc-surface); transition: background-color 160ms, color 160ms; }
.lldc .lldc-export:hover { background: var(--lldc-surface-2); color: #fff; }

/* ---------- results view: back bar ---------- */
.lldc .lldc-backbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.lldc .lldc-backbar.is-bottom { margin: 4px 0 10px; }
.lldc .lldc-backbar-t { color: var(--lldc-muted); font-size: 13px; }
.lldc .lldc-back {
  border: 1px solid var(--lldc-hair-2); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600;
  color: var(--lldc-text); background: var(--lldc-surface); transition: background-color 160ms, border-color 160ms;
}
.lldc .lldc-back:hover { background: var(--lldc-surface-2); border-color: var(--lldc-muted); }
.lldc .lldc-back.is-primary { background: var(--lldc-text); color: #000; border-color: var(--lldc-text); }
.lldc .lldc-back.is-primary:hover { background: #fff; }
.lldc .lldc-backbar .lldc-swap { font-weight: 500; color: var(--lldc-text-2); }

/* ---------- compare panel ---------- */
.lldc .lldc-panel {
  border: 1px solid var(--lldc-hair); border-radius: 14px; background: var(--lldc-surface);
  padding: 18px 18px 8px; margin: 0 0 22px; position: relative; overflow: hidden;
  animation: lldc-rise var(--lldc-dur) var(--lldc-ease);
}
@keyframes lldc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lldc .lldc-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--lldc-a) 0 50%, var(--lldc-b) 50% 100%);
}
.lldc .lldc-slots { display: inline-flex; gap: 8px; }
.lldc .lldc-slot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid var(--lldc-hair-2); }
.lldc .lldc-slot.is-a { background: var(--lldc-a); border-color: var(--lldc-a); }
.lldc .lldc-slot.is-b { background: var(--lldc-b); border-color: var(--lldc-b); }

/* minmax(0, 1fr): a plain 1fr track grows to its content's min width, and a long button label would then push the
   right edge under the panel's overflow clip on phones */
.lldc .lldc-heads { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.lldc .lldc-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.lldc .lldc-head-img { width: 76px; height: 50px; display: flex; align-items: center; justify-content: center; }
.lldc .lldc-head-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.lldc .lldc-head-name { font-weight: 600; font-size: 15px; line-height: 1.25; color: #fff; }
.lldc .lldc-head-sub { color: var(--lldc-muted); font-size: 13px; margin-top: 3px; }
.lldc .lldc-head .lldc-key { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.lldc .is-a .lldc-key { background: var(--lldc-a); } .lldc .is-b .lldc-key { background: var(--lldc-b); }
.lldc .lldc-head-x { color: var(--lldc-muted); font-size: 12px; padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.lldc .lldc-head-x:hover { color: #fff; background: var(--lldc-surface-2); }

/* Werkz.com buttons under each light in the results */
.lldc .lldc-shop { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lldc .lldc-shop-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: background-color 160ms, border-color 160ms, transform 160ms;
}
/* Werkz buttons: eye-catching gradients, orange for the product page and LLD blue for holsters */
.lldc .lldc-shop-btn.is-buy {
  color: #fff; border: 1px solid rgba(255, 150, 110, .7); text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  background: linear-gradient(135deg, #ff8a5c 0%, #eb5a3e 55%, #c23c22 100%);
  box-shadow: 0 6px 18px rgba(235, 90, 62, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lldc .lldc-shop-btn.is-buy:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(235, 90, 62, .5), inset 0 1px 0 rgba(255, 255, 255, .3); filter: brightness(1.08); }
.lldc .lldc-shop-btn.is-holster {
  color: #fff; border: 1px solid rgba(90, 170, 240, .7); text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  background: linear-gradient(135deg, #3fa0ea 0%, #197ac4 55%, #0e568f 100%);
  box-shadow: 0 6px 18px rgba(25, 122, 196, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.lldc .lldc-shop-btn.is-holster:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(25, 122, 196, .5), inset 0 1px 0 rgba(255, 255, 255, .3); filter: brightness(1.08); }
.lldc .lldc-shop-arrow { font-weight: 400; }
.lldc .lldc-shop-ico { font-size: 11px; }
/* review tiles: the article's featured image or the video thumbnail, with the label beneath */
.lldc .lldc-revs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.lldc .lldc-rev {
  display: flex; flex-direction: column; width: 150px; border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--lldc-text);
  background: linear-gradient(180deg, #1c1c1c, #101010); border: 1px solid var(--lldc-hair-2);
  transition: transform 200ms var(--lldc-ease), box-shadow 200ms, border-color 200ms;
}
.lldc .lldc-rev:hover { transform: translateY(-3px); border-color: var(--lldc-a); box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(235, 90, 62, .35); }
.lldc .lldc-rev-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0b0b linear-gradient(135deg, #202020, #0b0b0b); }
.lldc .lldc-rev-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lldc .lldc-rev-play {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 3px; font-size: 13px; color: #fff;
  background: rgba(235, 90, 62, .92); box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .6);
  transition: transform 200ms var(--lldc-ease);
}
.lldc .lldc-rev:hover .lldc-rev-play { transform: scale(1.12); }
.lldc .lldc-rev-l { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 12px; font-weight: 700; color: #ffb8a6; letter-spacing: .02em; }
.lldc .lldc-rev.is-blog .lldc-rev-l { color: #ffcf8a; }
@media (max-width: 640px) { .lldc .lldc-rev { width: calc(50% - 5px); } }
@media (max-width: 640px) { .lldc .lldc-shop-btn { font-size: 12px; padding: 8px 12px; white-space: normal; line-height: 1.25; } }   /* the holster label wraps instead of clipping */

/* key row under the heads: three swatches instead of a sentence */
.lldc .lldc-keyrow { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--lldc-muted); font-size: 12px; margin: 0 0 8px; }
.lldc .lldc-keyrow span { display: inline-flex; align-items: center; gap: 7px; }
.lldc .lldc-sw { display: inline-block; width: 22px; height: 10px; border-radius: 3px; background: var(--lldc-text-2); }
.lldc .lldc-sw.is-tick { width: 4px; height: 16px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--lldc-text) 0 3px, transparent 3px 5px); box-shadow: 0 0 0 1.5px #000; margin: 0 9px; }
.lldc .lldc-sw.is-striped { background: repeating-linear-gradient(90deg, var(--lldc-text-2) 0 3px, transparent 3px 6px); }
/* details toggle: secondary figures hide unless the panel is detailed */
.lldc .lldc-panel:not(.is-detailed) .lldc-x { display: none; }
.lldc .lldc-backbar .lldc-details { margin-left: auto; font-weight: 500; }

/* metric rows (bars) */
.lldc .lldc-metric { padding: 12px 0 10px; border-top: 1px solid var(--lldc-hair); }
.lldc .lldc-metric-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.lldc .lldc-metric-t { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lldc-text-2); font-weight: 600; }
.lldc .lldc-metric-n { font-size: 12px; color: var(--lldc-muted); }
.lldc .lldc-metric-s { font-size: 12px; color: var(--lldc-muted); margin-left: 10px; letter-spacing: .04em; }
.lldc .lldc-delta { font-weight: 600; }
.lldc .lldc-delta.is-up { color: #5fd38d; }
.lldc .lldc-delta.is-down { color: #ff7a7a; }
.lldc .lldc-bars { display: grid; gap: 10px; }
.lldc .lldc-bar { display: grid; grid-template-columns: 170px minmax(84px, 112px) 1fr; gap: 10px; align-items: center; }
.lldc .lldc-bar-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lldc .lldc-who-img { width: 44px; height: 28px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; }
.lldc .lldc-who-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lldc .lldc-who-img .lldc-noimg { width: 32px; height: 14px; border: 1px dashed var(--lldc-hair-2); border-radius: 3px; }
.lldc .lldc-who-name { font-size: 13px; font-weight: 600; color: var(--lldc-text); line-height: 1.2; min-width: 0; }
.lldc .lldc-who-name .lldc-key, .lldc .lldc-specs th .lldc-key { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: 1px; }
.lldc .lldc-bar.is-a .lldc-key, .lldc .lldc-specs th.is-a .lldc-key { background: var(--lldc-a); }
.lldc .lldc-bar.is-b .lldc-key, .lldc .lldc-specs th.is-b .lldc-key { background: var(--lldc-b); }
.lldc .lldc-bar-val { font-size: 22px; font-weight: 600; color: #fff; line-height: 1; white-space: nowrap; }
.lldc .lldc-bar-val small { font-size: 12px; color: var(--lldc-muted); font-weight: 400; margin-left: 3px; }
.lldc .lldc-bar-val.is-missing { color: var(--lldc-muted); font-size: 14px; font-weight: 400; }
.lldc .lldc-track { position: relative; height: 22px; }
.lldc .lldc-fill {
  position: absolute; left: 0; top: 2px; height: 18px; border-radius: 0 4px 4px 0;
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--lldc-dur) var(--lldc-ease) var(--lldc-t-bars);
}
.lldc .lldc-bar.is-b .lldc-fill { transition-delay: calc(var(--lldc-t-bars) + 160ms); }   /* B follows A */
.lldc .is-a .lldc-fill { background: var(--lldc-a); } .lldc .is-b .lldc-fill { background: var(--lldc-b); }
.lldc .lldc-fill.is-modeled {
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);
  opacity: .85;
}
.lldc .is-a .lldc-fill.is-modeled { color: var(--lldc-a); } .lldc .is-b .lldc-fill.is-modeled { color: var(--lldc-b); }
.lldc .lldc-fill.is-live { transform: scaleX(1); }
.lldc .lldc-claim {
  /* dashed tick drawn as a gradient so the gaps are surface-dark, plus a surface halo: readable over the bar */
  position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1px; border-radius: 1px;
  --lldc-tick: var(--lldc-claim);
  background: repeating-linear-gradient(to bottom, var(--lldc-tick) 0 5px, var(--lldc-bg) 5px 9px);
  box-shadow: 0 0 0 2px var(--lldc-bg);
  opacity: 0; transform: translateY(-6px); transition: opacity 300ms calc(var(--lldc-t-bars) + 700ms), transform 400ms var(--lldc-over) calc(var(--lldc-t-bars) + 700ms);
}
.lldc .is-a .lldc-claim { --lldc-tick: #ffb09e; }
.lldc .is-b .lldc-claim { --lldc-tick: #a9d6f5; }
.lldc .lldc-bar.is-b .lldc-claim { transition-delay: calc(var(--lldc-t-bars) + 860ms); }
.lldc .lldc-claim.is-live { opacity: 1; transform: none; }   /* the claim tick drops in once the bar has reached it */
.lldc .lldc-bar-meta { grid-column: 1 / -1; font-size: 12px; color: var(--lldc-muted); margin-top: -3px; display: flex; gap: 4px 0; flex-wrap: wrap; align-items: center; }
.lldc .lldc-bar-meta + .lldc-bar-meta { margin-top: -6px; }
.lldc .lldc-bar-meta > * + *::before { content: "\00b7"; margin: 0 8px; color: var(--lldc-hair-2); }   /* middle-dot separators */
.lldc .lldc-bar-meta > .lldc-tag::before { content: none; }                                           /* a tag is its own box: spacing, no dot inside it */
.lldc .lldc-bar-meta > * + .lldc-tag { margin-left: 8px; }
/* source tags ("from our published review", "modeled from claim"): quiet grayscale gradient pills */
.lldc .lldc-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; color: var(--lldc-text-2); white-space: nowrap;
  background: linear-gradient(180deg, #2a2a2a, #141414); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .5);
}
.lldc .lldc-tag.is-modeled { border-style: dotted; border-color: rgba(255, 255, 255, .32); }

/* runtime chart */
.lldc .lldc-chart { position: relative; padding: 6px 0 2px; }
.lldc .lldc-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.lldc .lldc-chart .grid { stroke: var(--lldc-hair); stroke-width: 1; shape-rendering: crispEdges; }
.lldc .lldc-chart .axis { stroke: var(--lldc-hair-2); stroke-width: 1; shape-rendering: crispEdges; }
.lldc .lldc-chart .tick { fill: var(--lldc-muted); font-size: 12px; font-family: var(--lldc-sans); font-variant-numeric: tabular-nums; }
/* phone variant: 400-unit coordinate space, so 14 units is about 13 px on a 375 px screen */
.lldc .lldc-chart svg.is-narrow .tick { font-size: 14px; }
.lldc .lldc-chart svg.is-narrow .mean { stroke-width: 2.75; }
.lldc .lldc-chart svg.is-narrow .claim { stroke-width: 2; }
.lldc .lldc-chart .sample { fill: none; stroke-width: 1; opacity: .38; stroke-linejoin: round; stroke-linecap: round; }
.lldc .lldc-chart .mean { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.lldc .lldc-chart .is-a .sample, .lldc .lldc-chart .is-a .mean { stroke: var(--lldc-a); }
.lldc .lldc-chart .is-b .sample, .lldc .lldc-chart .is-b .mean { stroke: var(--lldc-b); }
.lldc .lldc-chart .is-modeled .mean, .lldc .lldc-chart .mean.tail { stroke-dasharray: 2 5; stroke-linecap: round; }
.lldc .lldc-chart .mean.tail { opacity: .8; }
.lldc .lldc-chart .is-modeled .band { fill: currentColor; opacity: .07; }
.lldc .lldc-chart .is-a .band { color: var(--lldc-a); } .lldc .lldc-chart .is-b .band { color: var(--lldc-b); }
.lldc .lldc-chart .claim { fill: none; stroke: var(--lldc-claim); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .8; }
.lldc .lldc-chart .is-a .claim { stroke: var(--lldc-a); }
.lldc .lldc-chart .is-b .claim { stroke: var(--lldc-b); }
.lldc .lldc-chart .reveal { transform-origin: 0 0; transform: scaleX(0); transition: transform 1800ms cubic-bezier(0.4, 0, 0.2, 1) var(--lldc-t-chart); }
.lldc .lldc-chart .reveal.is-live { transform: scaleX(1); }   /* the lines are drawn on from left to right */
.lldc .lldc-chart .endlbl { opacity: 0; transition: opacity 400ms calc(var(--lldc-t-chart) + 1700ms); }
.lldc .lldc-chart svg.is-live .endlbl { opacity: 1; }         /* names appear once the pen reaches the end */
/* name at the end of each line: haloed in the surface colour so it stays legible over grid lines */
.lldc .lldc-chart .endlbl { font-size: 12px; font-weight: 600; font-family: var(--lldc-sans); paint-order: stroke; stroke: var(--lldc-surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.lldc .lldc-chart .endlbl.is-a { fill: var(--lldc-a); } .lldc .lldc-chart .endlbl.is-b { fill: var(--lldc-b); }
.lldc .lldc-chart svg.is-narrow .endlbl { font-size: 14px; }
.lldc .lldc-chart .cross { stroke: var(--lldc-text-2); stroke-width: 1; pointer-events: none; }
.lldc .lldc-chart .dot { stroke: var(--lldc-bg); stroke-width: 2; pointer-events: none; }
.lldc .lldc-chart .is-a .dot { fill: var(--lldc-a); } .lldc .lldc-chart .is-b .dot { fill: var(--lldc-b); }
.lldc .lldc-tip {
  position: absolute; pointer-events: none; z-index: 3; min-width: 150px;
  background: #101010; border: 1px solid var(--lldc-hair-2); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--lldc-text-2); box-shadow: 0 8px 24px rgba(0,0,0,.6);
  opacity: 0; transition: opacity 120ms;
}
.lldc .lldc-tip.is-live { opacity: 1; }
.lldc .lldc-tip .t { color: var(--lldc-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.lldc .lldc-tip .row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.lldc .lldc-tip .row b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 56px; }
.lldc .lldc-tip .k { width: 14px; height: 0; border-top: 2px solid; }
.lldc .lldc-tip .k.is-a { border-color: var(--lldc-a); } .lldc .lldc-tip .k.is-b { border-color: var(--lldc-b); }
.lldc .lldc-tip .k.is-modeled { border-top-style: dotted; }
.lldc .lldc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--lldc-text-2); margin: 4px 0 0; }
.lldc .lldc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lldc .lldc-legend .k { width: 18px; border-top: 2px solid; display: inline-block; }
.lldc .lldc-legend .k.is-a { border-color: var(--lldc-a); } .lldc .lldc-legend .k.is-b { border-color: var(--lldc-b); }
.lldc .lldc-legend .k.is-claim { border-color: var(--lldc-text-2); border-top-style: dashed; }
.lldc .lldc-legend .k.is-modeled { border-top-style: dotted; border-color: var(--lldc-text-2); }

/* color quality: CRI ring + hero number per light, shared CCT strip (reels card spec) */
.lldc .lldc-ccards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 10px; }
.lldc .lldc-ccard {
  background: linear-gradient(180deg, #181d22, #0a0b0c); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px 16px 12px;
}
.lldc .lldc-cname { font-size: 13px; color: var(--lldc-text-2); margin-bottom: 6px; }
.lldc .lldc-cname .lldc-key { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.lldc .lldc-cbody { display: grid; grid-template-columns: 1fr 112px; gap: 12px; align-items: center; }
.lldc .lldc-chero { display: flex; align-items: baseline; gap: 10px; }
.lldc .lldc-chero b { font-size: 54px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; }
.lldc .lldc-chero b.is-missing { color: var(--lldc-muted); font-weight: 400; }
.lldc .lldc-chero small { font-size: 16px; color: rgba(255,255,255,.5); letter-spacing: .06em; }
.lldc .lldc-csub { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 13px; color: var(--lldc-text); font-variant-numeric: tabular-nums; }
.lldc .lldc-csub em { font-style: normal; color: var(--lldc-muted); }
.lldc .lldc-csub .lldc-tag { font-size: 12px; }
.lldc .lldc-ring { width: 112px; height: 112px; display: block; overflow: visible; transform: scale(.55) rotate(-40deg); opacity: 0; transition: transform 800ms var(--lldc-over) var(--lldc-t-color), opacity 300ms var(--lldc-t-color); }
.lldc .lldc-ring.is-live { transform: none; opacity: 1; }   /* the ring swoops in, then its arc fills from 12 o'clock */
.lldc .lldc-ring .track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 22; }
.lldc .lldc-ring .fill { fill: none; stroke-width: 22; stroke-linecap: round; transition: stroke-dashoffset 1400ms var(--lldc-ease) calc(var(--lldc-t-color) + 300ms); }
.lldc .lldc-ccard { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--lldc-t-color), transform 600ms var(--lldc-ease) var(--lldc-t-color); }
.lldc .lldc-ccard.is-b { transition-delay: calc(var(--lldc-t-color) + 120ms); }
.lldc .lldc-ccard.is-live { opacity: 1; transform: none; }
.lldc .lldc-ring.is-a .fill { stroke: var(--lldc-a); filter: drop-shadow(0 0 10px rgba(235,90,62,.6)); }
.lldc .lldc-ring.is-b .fill { stroke: var(--lldc-b); filter: drop-shadow(0 0 10px rgba(59,158,219,.6)); }
.lldc .lldc-ring .lbl { fill: rgba(255,255,255,.55); font-size: 28px; font-family: var(--lldc-sans); }
.lldc .lldc-cct { position: relative; padding: 38px 0 4px; }
.lldc .lldc-cct-band {
  height: 26px; border-radius: 13px; transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--lldc-ease) var(--lldc-t-cct);
  background: linear-gradient(90deg, #ff9b3d 0%, #ffd9a8 22%, #fff4e6 38%, #f2f5ff 62%, #c9d8ff 82%, #a9c2ff 100%);
}
.lldc .lldc-cct-band.is-live { transform: scaleX(1); }
.lldc .lldc-cct-mark {
  position: absolute; top: 38px; left: 0; height: 26px; width: 0; opacity: 0;
  /* each light sets off from the warm end once the band is drawn, travels to its colour temperature and lands with a bounce */
  transition: left 1500ms var(--lldc-over) calc(var(--lldc-t-cct) + 500ms), opacity 300ms calc(var(--lldc-t-cct) + 400ms);
}
.lldc .lldc-cct-mark.is-b { transition-delay: calc(var(--lldc-t-cct) + 700ms), calc(var(--lldc-t-cct) + 600ms); }
.lldc .lldc-cct-mark.is-live { opacity: 1; }
.lldc .lldc-cct-mark.is-live i { animation: lldc-land 700ms calc(var(--lldc-t-cct) + 1900ms) both; }
.lldc .lldc-cct-mark.is-b.is-live i { animation-delay: calc(var(--lldc-t-cct) + 2100ms); }
@keyframes lldc-land {
  0% { transform: scaleY(1); }
  30% { transform: scaleY(1.25); box-shadow: 0 0 0 3px #000, 0 0 34px rgba(255, 255, 255, .95); }
  100% { transform: scaleY(1); }
}
.lldc .lldc-cct-mark i {
  position: absolute; left: -3px; top: -10px; width: 6px; height: 46px; border-radius: 3px; background: #fff;
  box-shadow: 0 0 0 3px #000, 0 0 20px rgba(255,255,255,.6);
}
.lldc .lldc-cct-mark.is-a i { box-shadow: 0 0 0 3px #000, 0 0 18px var(--lldc-a); }
.lldc .lldc-cct-mark.is-b i { box-shadow: 0 0 0 3px #000, 0 0 18px var(--lldc-b); }
.lldc .lldc-cct-mark span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lldc-text-2); }
.lldc .lldc-cct-mark span em { font-style: normal; font-weight: 600; color: var(--lldc-text); }
.lldc .lldc-cct-mark span b { color: #fff; font-weight: 700; font-size: 14px; }
.lldc .lldc-cct-mark .lldc-who-img { width: 36px; height: 24px; flex-basis: 36px; }
.lldc .lldc-cct-mark.is-a span { top: -36px; } .lldc .lldc-cct-mark.is-b span { top: 42px; }
.lldc .lldc-cct-scale { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 44px; font-size: 13px; color: var(--lldc-muted); letter-spacing: .04em; }
.lldc .lldc-cct-scale .mid { display: flex; gap: 18px; color: var(--lldc-text-2); }
@media (max-width: 640px) {
  .lldc .lldc-ccards { grid-template-columns: 1fr; }
  .lldc .lldc-chero b { font-size: 44px; }
  .lldc .lldc-cbody { grid-template-columns: 1fr 96px; }
  .lldc .lldc-ring { width: 96px; height: 96px; }
  .lldc .lldc-cct-scale { flex-wrap: wrap; }
}

/* spec table inside panel */
.lldc .lldc-specs { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 13px; }
.lldc .lldc-specs th, .lldc .lldc-specs td { padding: 7px 8px; border-top: 1px solid var(--lldc-hair); text-align: left; vertical-align: top; }
.lldc .lldc-specs th { color: var(--lldc-muted); font-weight: 500; width: 30%; }
.lldc .lldc-specs thead th { color: var(--lldc-text); font-weight: 600; width: 35%; border-top: 0; padding-bottom: 10px; }
.lldc .lldc-specs thead th:first-child { width: 30%; color: var(--lldc-muted); font-weight: 500; }
.lldc .lldc-specs thead th .lldc-who-img { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.lldc .lldc-specs td { color: var(--lldc-text); width: 35%; font-variant-numeric: tabular-nums; }
.lldc .lldc-specs td.is-missing { color: var(--lldc-muted); }
.lldc .lldc-specs .lldc-specs-g th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lldc-muted); font-weight: 600; padding-top: 16px; padding-bottom: 4px; border-top: 0; width: auto; }
.lldc .lldc-specs .lldc-specs-g + tr th, .lldc .lldc-specs .lldc-specs-g + tr td { border-top-color: var(--lldc-hair-2); }
/* long strings: first clause shown, full text opens on tap */
.lldc .lldc-more summary { cursor: pointer; list-style: none; color: var(--lldc-text); }
.lldc .lldc-more summary::-webkit-details-marker { display: none; }
.lldc .lldc-more summary::after { content: " more"; color: var(--lldc-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.lldc .lldc-more[open] summary { display: none; }
.lldc .lldc-more > span { display: block; }

/* ---------- brand sections ---------- */
.lldc .lldc-section { margin: 0; }
.lldc .lldc-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: inherit; cursor: pointer; user-select: none; }
.lldc h3.lldc-brand { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; }
.lldc .lldc-section:not(.is-open) .lldc-brand { margin: 0; padding: 8px 0; }
.lldc .lldc-brand-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lldc-hair-2); color: var(--lldc-text-2); }
.lldc .lldc-brand-toggle:hover { background: var(--lldc-surface-2); color: #fff; }
.lldc .lldc-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); transition: transform 200ms; }
.lldc .lldc-section.is-open .lldc-chev { transform: rotate(45deg) translate(-2px, -2px); }
.lldc .lldc-sections { display: grid; gap: 12px; }
.lldc .lldc-section.is-open { margin-bottom: 14px; }
/* every logo file is the same 320x80 canvas (logo left-aligned, ink-normalised), so a fixed box keeps the headers even */
.lldc .lldc-brand-logo { width: 160px; height: 40px; object-fit: contain; object-position: left center; display: block; opacity: .92; flex: none; }
/* brands without a logo: same sans as the counts, lighter than the white logos so they do not out-shout them */
.lldc .lldc-brand-name { font-family: var(--lldc-sans); font-size: 15px; font-weight: 600; color: var(--lldc-text-2); letter-spacing: .06em; text-transform: uppercase; min-width: 160px; line-height: 40px; }
@media (min-width: 900px) { .lldc .lldc-brand-logo { width: 192px; height: 48px; } .lldc .lldc-brand-name { font-size: 16px; min-width: 192px; line-height: 48px; } }
.lldc .lldc-brand-n { color: var(--lldc-muted); font-size: 12px; white-space: nowrap; }
.lldc .lldc-brand-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--lldc-hair-2), transparent); }
.lldc .lldc-brandrow td { padding: 18px 10px 6px !important; border-bottom: 0 !important; background: var(--lldc-bg); }
.lldc .lldc-brandrow .lldc-brand { margin: 0; }
.lldc .lldc-table tbody tr.lldc-brandrow { cursor: default; }
.lldc .lldc-table tbody tr.lldc-brandrow:hover { background: transparent; }

/* ---------- cards grid ---------- */
.lldc .lldc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.lldc .lldc-card {
  /* --lldc-cat (the tier colour) comes from the card's is-tier-* class; no default here, it would outrank the tier rule */
  --lldc-cat-a: .22;
  position: relative; text-align: left; width: 100%; overflow: hidden;
  /* tier tint washes in from the top-left corner over a dark surface gradient; a tier-coloured bar runs along the top edge */
  background: linear-gradient(160deg, rgba(var(--lldc-cat), var(--lldc-cat-a)) 0%, rgba(var(--lldc-cat), 0) 65%), linear-gradient(180deg, var(--lldc-surface-2), var(--lldc-surface));
  border: 1px solid rgba(var(--lldc-cat), .45); border-radius: 12px;
  padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 180ms, transform 220ms var(--lldc-ease), box-shadow 220ms, --lldc-cat-a 220ms;
}
.lldc .lldc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgb(var(--lldc-cat)), rgba(var(--lldc-cat), .25)); }
.lldc .lldc-card.is-tier-none::before { opacity: .35; }
.lldc .lldc-card.is-tier-none { --lldc-cat-a: .1; }
/* top row: the light's category upper-left (neutral), the LLD pick badge upper-right; the A/B letter sits in the corner
   when the card is selected, so the row makes room for it then */
.lldc .lldc-card-top { display: flex; justify-content: space-between; align-items: center; min-height: 18px; gap: 6px; }
.lldc .lldc-card[aria-pressed="true"] .lldc-card-top { padding-right: 26px; }
.lldc .lldc-card-cat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lldc-text-2); font-weight: 600; line-height: 1; }   /* text-2, not muted: 4.5:1 over the tier tint */
.lldc .lldc-fav {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; line-height: 1; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd98a;
  background: linear-gradient(180deg, rgba(255, 190, 80, .24), rgba(255, 160, 0, .08)); border: 1px solid rgba(255, 190, 80, .6);
  box-shadow: 0 0 12px rgba(255, 170, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.lldc .lldc-fav-star { width: 11px; height: 11px; fill: #ffc24d; filter: drop-shadow(0 0 3px rgba(255, 190, 80, .9)); flex: none; }
.lldc .lldc-fav.is-inline { margin-left: 8px; padding: 2px 7px 2px 5px; vertical-align: 2px; }
.lldc .lldc-fav.is-inline .lldc-fav-star { width: 10px; height: 10px; }
/* bottom line: the loot tier in its colour, with the mean delta that earned it */
.lldc .lldc-card-tier { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: rgb(var(--lldc-cat)); font-weight: 700; line-height: 1.2; margin-top: 2px; }
.lldc .lldc-card-tier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--lldc-cat)); box-shadow: 0 0 8px rgba(var(--lldc-cat), .8); flex: none; }
.lldc .lldc-card-tier small { font-size: 12px; font-weight: 400; color: var(--lldc-text-2); font-variant-numeric: tabular-nums; }
.lldc .lldc-card.is-tier-none .lldc-card-tier { color: var(--lldc-muted); font-weight: 600; }
.lldc .lldc-card-img img { transition: transform 240ms var(--lldc-ease); }
@media (hover: hover) {
  .lldc .lldc-card:hover {
    --lldc-cat-a: .38; transform: translateY(-3px); border-color: rgba(var(--lldc-cat), .85);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--lldc-cat), .22);
  }
  .lldc .lldc-card:hover .lldc-card-img img { transform: scale(1.06); }
  .lldc .lldc-card:hover .lldc-card-name { color: #fff; }
}
.lldc .lldc-card:active { transform: scale(.985); transition-duration: 80ms; }   /* press feedback on touch, where hover does not exist */
.lldc .lldc-card[aria-pressed="true"].is-a { border-color: var(--lldc-a); box-shadow: inset 0 0 0 1px var(--lldc-a); }
.lldc .lldc-card[aria-pressed="true"].is-b { border-color: var(--lldc-b); box-shadow: inset 0 0 0 1px var(--lldc-b); }
.lldc .lldc-card-slot {
  position: absolute; top: 7px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #000; display: none; align-items: center; justify-content: center;
}
.lldc .lldc-card[aria-pressed="true"] .lldc-card-slot { display: flex; }
.lldc .is-a .lldc-card-slot { background: var(--lldc-a); } .lldc .is-b .lldc-card-slot { background: var(--lldc-b); }
.lldc .lldc-card { animation: lldc-rise 420ms var(--lldc-ease) backwards; }   /* "both" would pin transform: none after the rise and kill the hover lift and press */
.lldc .lldc-card-img { height: 84px; display: flex; align-items: center; justify-content: center; }
.lldc .lldc-card-img img { max-height: 84px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.lldc .lldc-card-img .lldc-noimg { width: 56px; height: 24px; border: 1px dashed var(--lldc-hair-2); border-radius: 4px; }
.lldc .lldc-card-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; min-height: 2.6em; }
.lldc .lldc-card-lm { display: flex; align-items: baseline; gap: 6px; }
.lldc .lldc-card-lm b { font-size: 20px; font-weight: 600; color: var(--lldc-text); font-variant-numeric: tabular-nums; }
.lldc .lldc-card-lm span { font-size: 12px; color: var(--lldc-muted); letter-spacing: .06em; text-transform: uppercase; }
.lldc .lldc-card-lm.is-modeled b { color: var(--lldc-text-2); border-bottom: 2px dotted var(--lldc-hair-2); }
.lldc .lldc-empty { color: var(--lldc-muted); padding: 24px 0; grid-column: 1 / -1; }

/* ---------- table view ---------- */
.lldc .lldc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lldc-hair); border-radius: var(--lldc-radius); }
.lldc .lldc-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.lldc .lldc-table th, .lldc .lldc-table td { padding: 8px 10px; border-bottom: 1px solid var(--lldc-hair); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lldc .lldc-table th:first-child, .lldc .lldc-table td:first-child { text-align: left; white-space: normal; min-width: 160px; }
.lldc .lldc-table .lldc-td-sub { display: none; font-size: 12px; color: var(--lldc-muted); font-weight: 400; }
/* laptop and narrower: Tested and n fold into the name cell so the table fits without a side scroll */
@media (max-width: 1100px) {
  .lldc .lldc-table .lldc-c-date, .lldc .lldc-table .lldc-c-n { display: none; }
  .lldc .lldc-table .lldc-td-sub { display: block; }
}
.lldc .lldc-table thead th { color: var(--lldc-muted); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(--lldc-bg); cursor: pointer; }
.lldc .lldc-table thead th[aria-sort] { color: #fff; }
.lldc .lldc-table tbody tr { cursor: pointer; }
.lldc .lldc-table tbody tr:hover { background: var(--lldc-surface); }
.lldc .lldc-table tbody tr.is-a td:first-child { box-shadow: inset 3px 0 0 var(--lldc-a); }
.lldc .lldc-table tbody tr.is-b td:first-child { box-shadow: inset 3px 0 0 var(--lldc-b); }
.lldc .lldc-table td.is-modeled { color: var(--lldc-text-2); text-decoration: underline dotted; text-decoration-color: var(--lldc-hair-2); text-underline-offset: 3px; }
.lldc .lldc-table td.is-missing { color: var(--lldc-muted); }
.lldc .lldc-table td a { color: var(--lldc-text-2); }

/* ---------- sticky tray (mobile) ---------- */
.lldc .lldc-tray {
  position: fixed; left: 50%; bottom: 12px; transform: translate(-50%, 0); z-index: 50;
  background: #0f0f0f; border: 1px solid var(--lldc-hair-2); border-radius: 999px; padding: 8px 10px 8px 14px;
  display: none; align-items: center; gap: 10px; font-size: 13px; color: var(--lldc-text-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.6); max-width: calc(100vw - 24px);
  animation: lldc-tray-rise 300ms var(--lldc-ease);
}
@keyframes lldc-tray-rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }   /* keeps the centring during the rise */
.lldc .lldc-tray.is-live { display: flex; }
.lldc .lldc-tray .lldc-tray-name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.lldc .lldc-tray-clear { color: var(--lldc-muted); padding: 4px 6px; }

/* ---------- footer ---------- */
.lldc .lldc-foot { color: var(--lldc-muted); font-size: 12px; margin-top: 26px; line-height: 1.55; border-top: 1px solid var(--lldc-hair); padding-top: 14px; }
.lldc .lldc-foot p { margin: 0 0 8px; max-width: 90ch; }
.lldc .lldc-foot b { color: var(--lldc-text-2); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .lldc { font-size: 14px; }
  .lldc .lldc-panel { padding: 14px 12px 6px; }
  .lldc .lldc-heads { grid-template-columns: 1fr; gap: 10px; }
  .lldc .lldc-head { grid-template-columns: 60px minmax(0, 1fr); }
  .lldc .lldc-head-img { width: 60px; height: 40px; }
  /* phone: name left, number right, the bar gets the full width underneath */
  .lldc .lldc-bar { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .lldc .lldc-bar-who { grid-column: 1; }
  .lldc .lldc-bar-val { grid-column: 2; justify-self: end; font-size: 20px; }
  .lldc .lldc-track { grid-column: 1 / -1; }
  .lldc .lldc-bar-meta { margin-top: 0; }
  .lldc .lldc-cct-mark span em { display: none; }
  .lldc .lldc-cct-mark .lldc-who-img { display: none; }
  .lldc .lldc-win button { padding: 8px 14px; font-size: 14px; }
  .lldc .lldc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lldc .lldc-card { padding: 9px 10px 8px; }
  .lldc .lldc-card-cat, .lldc .lldc-card-tier, .lldc .lldc-card-tier small { font-size: 11px; }
  .lldc .lldc-slots2 { grid-template-columns: 1fr; }
  .lldc .lldc-vs { text-align: center; }
  .lldc .lldc-picker-t { font-size: 22px; }
  /* presets: one swipeable row instead of five stacked rows */
  .lldc .lldc-presets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0; }
  .lldc .lldc-presets::-webkit-scrollbar { display: none; }
  .lldc .lldc-presets-l { flex: none; }
  .lldc .lldc-preset { flex: none; }
  .lldc .lldc-backbar .lldc-details { margin-left: 0; }
  .lldc .lldc-metric-s { display: block; margin: 2px 0 0; }
  .lldc .lldc-metric-n { display: none; }
  .lldc .lldc-toolbar { position: static; }
  .lldc .lldc-specs th { width: 34%; }
}
@media (min-width: 641px) {
  .lldc .lldc-tray.is-live { display: none; } /* tablet and up: the panel sits at the top and the cards show the A/B marks */
}
@media (min-width: 900px) {
  /* desktop type scale: about 12 % larger than the phone scale */
  .lldc { font-size: 16px; }
  .lldc .lldc-method { font-size: 14px; }
  .lldc .lldc-chip, .lldc .lldc-select, .lldc .lldc-count, .lldc .lldc-view button { font-size: 14px; }
  .lldc .lldc-search { font-size: 15px; }
  .lldc .lldc-head-name { font-size: 17px; }
  .lldc .lldc-head-sub { font-size: 13px; }
  .lldc .lldc-metric-t { font-size: 13px; }
  .lldc .lldc-metric-s, .lldc .lldc-metric-n { font-size: 12px; }
  .lldc .lldc-bar { grid-template-columns: 200px minmax(96px, 128px) 1fr; }
  .lldc .lldc-who-name { font-size: 14px; }
  .lldc .lldc-bar-val { font-size: 26px; }
  .lldc .lldc-bar-val small { font-size: 13px; }
  .lldc .lldc-track { height: 26px; }
  .lldc .lldc-fill { top: 3px; height: 20px; }
  .lldc .lldc-bar-meta { font-size: 13px; }
  .lldc .lldc-chart .tick { font-size: 13px; }
  .lldc .lldc-legend { font-size: 14px; }
  .lldc .lldc-specs { font-size: 14px; }
  .lldc .lldc-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .lldc .lldc-card-img { height: 72px; }
  .lldc .lldc-card-img img { max-height: 72px; }
  .lldc .lldc-card-name { font-size: 14px; }
  .lldc .lldc-table { font-size: 14px; }
}

/* ---------- WordPress chrome, forced colours, print ---------- */
/* logged-in visitors: the admin bar is fixed at the top (32 px; 46 px under 783 px), so the sticky toolbar and the
   scroll targets sit below it */
.admin-bar .lldc .lldc-toolbar { top: 32px; }
.lldc .lldc-panel { scroll-margin-top: 12px; }
.admin-bar .lldc, .admin-bar .lldc .lldc-panel { scroll-margin-top: 44px; }
@media (max-width: 782px) {
  .admin-bar .lldc .lldc-toolbar { top: 46px; }
  .admin-bar .lldc, .admin-bar .lldc .lldc-panel { scroll-margin-top: 58px; }
}
/* Windows High Contrast: keep the colours that carry data (bars, claim ticks, CCT band, swatches, tier dots) and
   mark pressed and selected states with real borders, since backgrounds and shadows are dropped there */
@media (forced-colors: active) {
  .lldc .lldc-fill, .lldc .lldc-claim, .lldc .lldc-cct-band, .lldc .lldc-sw, .lldc .lldc-tierdot, .lldc .lldc-card-tier::before { forced-color-adjust: none; }
  .lldc button[aria-pressed="true"] { outline: 2px solid; outline-offset: -2px; }
  .lldc .lldc-card[aria-pressed="true"] { outline: 3px solid; }
  .lldc .lldc-table tbody tr.is-a td:first-child, .lldc .lldc-table tbody tr.is-b td:first-child { border-left: 3px solid; }
}
/* print: the page is designed on black, so print it that way rather than as near-white text on white paper */
@media print {
  .lldc { background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lldc .lldc-tray, .lldc .lldc-toolbar { display: none !important; }
}