/* code.fixesarmy.com on top of the repair site's v2.css + db.css: the search box, the model box,
   code tiles and the series groups. Same tokens (--cyan, --lime, --glass, --line, --ink-*). */
.code-mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.02em; }
.code-hero .lead { max-width: 38em; text-wrap: balance; }

.code-find, .code-model { margin: 22px 0 6px; max-width: 640px; }
.code-find label, .code-model label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.code-find-row { display: flex; gap: 8px; }
.code-find input, .code-model input { flex: 1; min-width: 0; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(125, 235, 255, 0.35); background: rgba(10, 18, 34, 0.85); color: var(--ink); font: inherit; font-size: 17px; }
.code-find input:focus, .code-model input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.code-find .cta { min-height: 52px; padding: 0 22px; flex: none; }
.code-find-hint { margin-top: 8px; font-size: 14px; color: var(--ink-3); }


.code-warn { margin-top: 18px; max-width: 640px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 184, 77, 0.45); background: linear-gradient(135deg, rgba(255, 184, 77, 0.1), var(--glass) 60%); }
.code-warn b { display: block; font-size: 16.5px; color: var(--amber); }
.code-model-msg { margin-top: 8px; min-height: 1.4em; font-size: 15px; color: var(--amber); }

.code-how { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: how; }
.code-how li { --g: 95, 230, 255; padding: 18px; border-radius: 20px; border: 1px solid rgba(var(--g), 0.28); background: linear-gradient(135deg, rgba(var(--g), 0.07), var(--glass) 60%); }
.code-how li:nth-child(2) { --g: 200, 255, 90; }
.code-how li:nth-child(3) { --g: 165, 133, 255; }
.code-how b { display: block; font-size: 18px; }
.code-how span { display: block; margin-top: 4px; font-size: 15.5px; color: var(--ink-2); }

.code-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.code-grid a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.code-grid a:hover { border-color: rgba(125, 235, 255, 0.55); }
.code-grid code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 22px; font-weight: 700; color: var(--cyan); }
.code-grid small { font-size: 13px; color: var(--ink-3); }

.code-case { max-width: 46em; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.code-case p { font-size: 16.5px; color: var(--ink-2); }
.code-case p + p { margin-top: 10px; }

.code-groups { display: grid; gap: 10px; }
.code-group { border-radius: 18px; border: 1px solid var(--line); background: var(--glass); scroll-margin-top: 90px; }
.code-group summary { list-style: none; position: relative; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 16px 48px 16px 18px; cursor: pointer; }
.code-group summary::-webkit-details-marker { display: none; }
.code-group summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--lime); transition: transform 0.3s; }
.code-group[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.code-group summary b { font-size: 17px; }
.code-group summary small { font-size: 13.5px; color: var(--ink-3); }
.code-group-note { padding: 0 18px; font-size: 14.5px; color: var(--ink-3); }
.code-models { list-style: none; margin: 0; padding: 12px 18px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.code-models li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); scroll-margin-top: 120px; }
.code-models a { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14.5px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.code-models li.hit { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200, 255, 90, 0.18); }
.code-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.code-tag.own { color: #0b1a10; background: var(--lime); }
.code-tag.ser { color: var(--ink-2); border: 1px solid var(--line); }
@media (min-width: 900px) {
  .code-how { grid-template-columns: repeat(3, 1fr); }
}
.code-nw { white-space: nowrap; }

/* Research facts (故障碼研究資料庫 rows): confidence, meaning, ranked causes and parts. */
.code-facts { max-width: 46em; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.code-facts.compact { margin: 0 18px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.02); }
.code-facts p { font-size: 16px; color: var(--ink-2); }
.code-facts p + p, .code-facts p + ol, .code-facts p + ul, .code-facts ol + p, .code-facts ul + p { margin-top: 8px; }
.code-facts b { color: var(--ink); }
.code-mean { font-size: 17px !important; color: var(--ink) !important; font-weight: 700; }
.code-conf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px !important; }
.code-conf b { padding: 2px 10px; border-radius: 99px; font-size: 12.5px; }
.code-conf.high b { color: #0b1a10; background: var(--lime); }
.code-conf.medium b { color: #06202a; background: var(--cyan); }
.code-conf.low b { color: var(--amber); border: 1px solid rgba(255, 184, 77, 0.6); }
.code-conf span { color: var(--ink-3); }
.code-list-h { margin-top: 12px !important; font-size: 13.5px !important; font-weight: 700; color: var(--ink-3) !important; }
.code-rank { margin: 6px 0 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: 15.5px; color: var(--ink-2); }
.code-rank li:first-child { color: var(--ink); font-weight: 700; }
.code-parts, .code-checks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.code-parts li { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.code-checks { display: grid; }
.code-checks li { font-size: 15px; color: var(--ink-2); }
.code-checks li::before { content: "› "; color: var(--lime); }
.code-no { color: var(--amber) !important; font-size: 14.5px !important; }
.code-model-info { margin-top: 12px; }
.code-model-info .code-list-h { margin: 0 18px 6px !important; }

/* The code on the machine's screen (facts.html.j2 lcd, code_lcd.py): lit segments in Fixes lime,
   unlit ones faint like the screen's base plate, a slight flicker like a live display. */
.code-hero-in { display: grid; gap: 18px; align-items: center; margin-top: 14px; }
.lcd { margin: 0; justify-self: start; width: fit-content; max-width: 100%; }
.code-hero-in > .lcd.lcd-7 .lcd-seg { height: 96px; }
.lcd-glass { position: relative; padding: 18px 20px; border-radius: 18px; background: radial-gradient(120% 140% at 30% 0%, #0f1c12 0%, #050a07 70%); border: 1px solid rgba(200, 255, 90, 0.22); box-shadow: inset 0 0 0 6px #0b0f0c, inset 0 2px 18px rgba(0, 0, 0, 0.9), 0 0 40px rgba(200, 255, 90, 0.08); overflow: hidden; }
.lcd-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px), linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 40%); }
.lcd-seg { display: block; height: 140px; width: auto; max-width: 100%; }
.lcd-seg .off { fill: rgba(200, 255, 90, 0.07); }
.lcd-seg .on { fill: #c8ff5a; filter: drop-shadow(0 0 4px rgba(200, 255, 90, 0.85)) drop-shadow(0 0 14px rgba(200, 255, 90, 0.45)); }
.lcd-on { animation: lcd-flicker 6s infinite steps(1); }
.lcd-text .lcd-on { font: 700 clamp(34px, 9vw, 64px)/1.1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.12em; color: #c8ff5a; text-shadow: 0 0 6px rgba(200, 255, 90, 0.85), 0 0 22px rgba(200, 255, 90, 0.4); overflow-wrap: anywhere; }
.lcd figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
@keyframes lcd-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 0.82; } 42% { opacity: 1; } 43% { opacity: 0.6; } 44% { opacity: 1; } 77% { opacity: 0.9; } 78% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lcd-on { animation: none; } }
@media (min-width: 900px) {
  .code-hero-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .code-hero-in > .lcd { order: 2; justify-self: end; align-self: start; margin-top: 40px; }
  .code-hero-in > .lcd.lcd-7 .lcd-seg { height: 150px; }
  .lcd { justify-self: end; }
}
.code-warn { font-size: 15px; color: var(--ink-2); }
.lcd-mini { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; color: #c8ff5a; text-shadow: 0 0 8px rgba(200, 255, 90, 0.6); letter-spacing: 0.06em; }

/* Bars: causes, models that show a code, codes a model shows. */
.code-bars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; max-width: 46em; }
.code-bars li { display: grid; gap: 6px; }
.code-bars li > a, .code-bars li > div, .cf-row { display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--ink); text-decoration: none; }
.code-bars li > a:hover { border-color: rgba(200, 255, 90, 0.5); }
.code-bar-l { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 15.5px; }
.code-bar-l b { font-weight: 700; overflow-wrap: anywhere; }
.code-bar-l em { font-style: normal; font: 700 15px/1 "JetBrains Mono", ui-monospace, monospace; color: #c8ff5a; }
.code-bar { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.code-bar::before { content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #5fe6ff, #c8ff5a); box-shadow: 0 0 10px rgba(200, 255, 90, 0.5); }
.code-bars li:first-child .code-bar-l b { color: #fff; }
.code-more summary { font-weight: 700; }

/* Home search results. */
.code-results { display: grid; gap: 12px; margin-top: 14px; }
.cf-card { padding: 16px; border-radius: 18px; border: 1px solid rgba(200, 255, 90, 0.28); background: linear-gradient(135deg, rgba(200, 255, 90, 0.06), var(--glass) 60%); }
.cf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; color: var(--ink); text-decoration: none; }
.cf-head .lcd-mini { font-size: 28px; }
.cf-head b { font-size: 17px; }
.cf-head small { margin-left: auto; color: var(--cyan); font-size: 14px; font-weight: 700; }
.cf-h { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.cf-bars li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cf-bars .pk-tog.sm { margin: 0; justify-self: end; }
.cf-bars .lcd-mini { font-size: 18px; }
.cf-own { margin-top: 12px; }
.cf-own label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.cf-own input { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(125, 235, 255, 0.35); background: rgba(10, 18, 34, 0.85); color: var(--ink); font: inherit; font-size: 16px; }
.cf-sug { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cf-sug li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; border: 1px solid var(--line); }
.cf-sug a { color: var(--ink); font-family: "JetBrains Mono", ui-monospace, monospace; text-decoration: none; }
.cf-new span { font-size: 14.5px; color: var(--ink-2); }
.cf-models li { padding: 0; }
.cf-pick { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 0; background: none; color: var(--ink); font: 700 15.5px/1.3 "JetBrains Mono", ui-monospace, monospace; text-align: left; cursor: pointer; }
.cf-pick small { font: 400 13px/1.3 var(--sans); color: var(--ink-3); }
.cf-none { padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--line); color: var(--ink-2); font-size: 15px; }