/* Gears of War: E-Day guide (CGN). Campaign completion pages: collectibles, Hard Cases, side missions, Supply Caches, 100% route. */

/* Sub-navigation between the completion pages */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; padding: 0 0 1.2rem; border-bottom: 1px solid var(--line); }
.subnav a { padding: .45rem .8rem; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font: 600 1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.subnav a:hover { color: #fff; border-color: var(--red-2); }
.subnav a[aria-current="page"] { background: var(--red); border-color: var(--red); color: #fff; }

/* Progress panel */
.ck-panel { background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 1.3rem 1.4rem; margin: 0 0 1.2rem; }
.ck-panel[hidden] { display: none; }
.ck-total { margin: 0 0 .6rem; font: 700 1.3rem var(--display); color: var(--bone); letter-spacing: .02em; }
.ck-total b { font-size: 2.4rem; color: var(--red-2); font-variant-numeric: tabular-nums; margin-right: .2rem; }
.ck-bar { height: 14px; background: var(--ink-3); border: 1px solid var(--line-2); margin: 0 0 1rem; }
.ck-bar span { display: block; height: 100%; width: 0; background: var(--red); transition: width .25s ease; }
.ck-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; }
.ck-tools2 { margin: .9rem 0 0; }
.ck-search { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 240px; }
.ck-search span, .ck-sel span { font: 600 .8rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ck-search input, .ck-sel select { min-height: 46px; padding: .5rem .8rem; background: var(--ink); border: 1px solid var(--line-2); color: var(--bone); font: 400 1rem var(--body); border-radius: 0; }
.ck-search input::placeholder { color: #8a8175; }
.ck-sel { display: flex; flex-direction: column; gap: .3rem; flex: 0 1 190px; min-width: 150px; }
.ck-sel select { width: 100%; }
.ck-reset { min-height: 46px; padding: 0 1.1rem; background: none; border: 1px solid var(--line-2); color: var(--text); font: 700 1rem var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ck-reset:hover { border-color: var(--red-2); color: #fff; }
.ck-reset[data-armed] { background: var(--red); border-color: var(--red); color: #fff; }
.ck-status { min-height: 1.6em; margin: .8rem 0 0; color: var(--muted); font-size: .95rem; }
.ck-none { padding: 1rem 1.2rem; border: 1px dashed var(--line-2); color: var(--muted); margin: 0 0 1.4rem; }
.ck-none[hidden] { display: none; }

/* Dashboard meters */
.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 0 0 1.2rem; }
.meter { background: var(--ink); border: 1px solid var(--line); padding: .9rem 1rem .8rem; }
.meter-name { margin: 0; font: 600 .95rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.meter-name a { color: var(--muted); text-decoration: none; }
.meter-name a:hover { color: #fff; }
.meter-num { margin: .1rem 0 .5rem; font: 700 1.2rem var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.meter-num b { font-size: 2.1rem; color: var(--red-2); margin-right: .15rem; }
.meter .ck-bar { margin: 0 0 .6rem; }
.meter-ach { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.35; }
.dash-table td b { color: var(--bone); font-variant-numeric: tabular-nums; }

/* Lists and entries */
.article .chap { margin: 0 0 1.8rem; }
.article .chap h3 { margin: 1.6rem 0 .7rem; }
.article .part-h { margin: 1.3rem 0 .6rem; font: 700 1.2rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--red-2); }
.article h2 small, .article h3 small, .article h4 small, .spoiler summary small { margin-left: .5rem; font: 600 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chap-note { color: var(--muted); }
.article .clist { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--line); background: var(--ink-2); }
.article .ci { margin: 0; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.article .ci:last-child { border-bottom: 0; }
.ci[hidden], .chap[hidden] { display: none; }
.ci:target { outline: 2px solid var(--red-2); outline-offset: -2px; }
.ci-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .9rem; }
.ci-main { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; flex: 1 1 260px; min-width: 0; }
.ci-main input { flex: none; width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.ci-name { font: 700 1.25rem/1.25 var(--display); letter-spacing: .02em; color: var(--bone); }
.ci-num { display: inline-block; margin-right: .5rem; padding: .1rem .5rem; border: 1px solid var(--line-2); font: 600 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: .12em; }
.ci-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ci-tag { display: inline-block; padding: .15rem .5rem; border: 1px solid #3e7042; color: var(--green); font: 600 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ci-tag.warn { border-color: #7a5a2a; color: #e0b068; }
.ci-tag.info { border-color: #3d5a7a; color: #8db4dd; }
.ci-tag.note { border-color: var(--line-2); color: var(--muted); }
.ci-type { font: 600 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ci-copy { min-height: 36px; padding: 0 .7rem; background: none; border: 1px solid var(--line-2); color: var(--muted); font: 600 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ci-copy:hover { color: #fff; border-color: var(--red-2); }
.ci-detail { margin: .6rem 0 0 calc(26px + .75rem); }
.ci-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .2rem 1rem; padding: .35rem 0; border-top: 1px solid #231e1c; }
.ci-row:first-child { border-top: 0; }
.ci-row dt { font: 600 .8rem/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ci-row dd { margin: 0; color: var(--text); }
.ci-row dd p { margin: 0; }
.ci-steps { margin: 0; padding-left: 1.3em; }
.ci-steps li { margin: 0 0 .25rem; }
.ci-auto { margin: .6rem 0 0 calc(26px + .75rem); padding: .6rem .8rem; border: 1px solid #3e7042; background: #0d140d; color: var(--text); }
.ci-auto b { color: var(--green); }
.ci-note { margin: .45rem 0 0 calc(26px + .75rem); color: var(--muted); font-size: .95rem; }
.ci-where { margin: .5rem 0 0 calc(26px + .75rem); color: var(--text); }
.ci-src { margin: .5rem 0 0 calc(26px + .75rem); color: var(--muted); font-size: .9rem; }
.ci-src a { color: var(--muted); }
.ci-conf { font-weight: 600; }
.ci-conf.c-h { color: var(--green); }
.ci-conf.c-m { color: #e0b068; }
.ci-conf.c-l { color: #e0705f; }
.ci.found { background: #0c0a09; }
.ci.found .ci-name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--line-2); }
.ci.found .ci-detail, .ci.found .ci-auto, .ci.found .ci-where { opacity: .6; }
.ci-empty { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px dashed var(--line-2); color: var(--muted); }

/* Before you leave this chapter */
.leave { margin: 1rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--line-2); border-left: 3px solid var(--red); background: #140c0a; }
.leave h4 { margin: 0 0 .5rem; font: 700 1.2rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.leave-counts { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0 0 .4rem; padding: 0; list-style: none; }
.article .leave-counts li { margin: 0; color: var(--muted); }
.leave-counts b { color: var(--bone); font-variant-numeric: tabular-nums; }
.route-counts { margin: 0 0 1rem; }
.leave-h { margin: .5rem 0 .2rem; font: 600 .8rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #e0b068; }
.leave-warn { margin: 0; padding-left: 1.2em; }
.leave-warn li { margin: 0 0 .25rem; }

/* 100% route */
.route { counter-reset: stop; }
.article .route .ci { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: start; padding: .7rem 1.1rem; counter-increment: stop; }
.route .ci-main { grid-column: 1; }
.route .ci-name { font-size: 1.12rem; font-weight: 600; font-family: var(--body); letter-spacing: 0; }
.rt-kind { display: inline-block; margin-right: .5rem; padding: .08rem .45rem; border: 1px solid var(--line-2); color: var(--muted); font: 600 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: .1em; }
.route .ci-name .rt-kind { font-family: var(--mono); }
.rt-line { grid-column: 1; margin: 0 0 0 calc(26px + .75rem); color: var(--muted); font-size: .95rem; }
.rt-warn { grid-column: 1; margin: 0 0 0 calc(26px + .75rem); color: #e0b068; font-size: .95rem; }
.rt-warn::before { content: "Watch out: "; font-weight: 700; }
.rt-more { grid-column: 2; grid-row: 1; align-self: center; font: 600 .85rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* Spoiler fold (Act 5, Chapter 5) */
.spoiler { border: 1px solid var(--line-2); border-left: 3px solid var(--red); background: #140c0a; margin: 1rem 0 0; }
.spoiler summary { cursor: pointer; padding: .9rem 1.1rem; min-height: 48px; font: 700 1.45rem var(--display); color: var(--bone); }
.article .spoiler .clist { border-width: 1px 0 0; margin-bottom: 0; }
.spoiler > .leave { margin: 1rem; }
.spoiler > .chap-note, .spoiler > .part-h { margin-left: 1.1rem; }

@media (max-width: 960px) {
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ci-detail, .ci-auto, .ci-note, .ci-where, .ci-src { margin-left: 0; }
  .ci-row { grid-template-columns: 1fr; }
  .ci-row dt { line-height: 1.4; }
  .rt-line, .rt-warn { margin-left: calc(26px + .75rem); }
}
@media (max-width: 640px) {
  .ck-panel { padding: 1.1rem 1rem; }
  .ck-total b { font-size: 2rem; }
  .meters { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .meter { padding: .7rem .8rem; }
  .meter-num b { font-size: 1.8rem; }
  .ck-reset, .ck-search { flex: 1 1 100%; }
  .ck-sel { flex: 1 1 140px; }
  .ci-name { font-size: 1.2rem; }
  .article .ci { padding: .9rem .9rem; }
  .spoiler summary { font-size: 1.25rem; }
  .article .route .ci { grid-template-columns: 1fr; }
  .rt-more { grid-column: 1; grid-row: auto; margin-left: calc(26px + .75rem); }
  .subnav a { padding: .45rem .65rem; font-size: .95rem; }
  .ci-head { gap: .3rem .6rem; }
}

/* Clean checklist when printed */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .topbar, .footer, .page-hero, .toc, .subnav, .ck-panel, .ci-copy, .ck-tools, .rt-more, noscript { display: none !important; }
  .guide-body { display: block; padding: 0; width: auto; }
  .article .clist { background: #fff; border-color: #888; }
  .article .ci { border-color: #bbb; break-inside: avoid; }
  .ci-name, h1, h2, h3, h4 { color: #000; }
  .ci-row dt, .ci-note, .ci-src, .rt-line, .ci-type { color: #333; }
  .ci-main input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid #000; background: #fff; }
  .ci-main input:checked { background: #000; }
  .spoiler { border-color: #888; background: #fff; }
  .spoiler:not([open]) > :not(summary) { display: none; }
  .leave { background: #fff; border-color: #888; }
  a { color: #000; text-decoration: none; }
}

/* Pictures (only when an entry has one) and the lightbox */
.ci-figs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .7rem 0 0 calc(26px + .75rem); padding: 0; list-style: none; }
.ci-figs li { margin: 0; }
.ci-figs a { display: block; border: 1px solid var(--line-2); line-height: 0; }
.ci-figs a:hover { border-color: var(--red-2); }
.ci-figs img { width: min(240px, 42vw); height: auto; }
.lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: #000000ea; padding: 1rem; }
.lb[hidden] { display: none; }
.lb-in { max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.lb-in img { max-width: 100%; max-height: 74vh; width: auto; height: auto; object-fit: contain; }
.lb-cap { margin: 0; max-width: 60ch; color: var(--text); text-align: center; }
.lb-bar { display: flex; gap: .6rem; }
.lb-bar button { min-height: 44px; min-width: 80px; padding: 0 1rem; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--bone); font: 700 1rem var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.lb-bar button:hover { border-color: var(--red-2); }
@media (max-width: 760px) { .ci-figs { margin-left: 0; } }
@media print { .ci-figs { display: none; } .lb { display: none !important; } }