/* Detective Conan Watch Order: styles.
   Colors, fonts and sizes are defined as variables at the top of the next block. */

/* Base reset */:root{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Page styles */:root{
  /* Layout: title block, slim sticky progress bar, a summary line, filters, then 184 ordered case-file rows. */
  --bg:#f2f4f8; --surface:#ffffff; --ink:#121a31; --muted:#586279; --line:#d8deea;
  --accent:#c4262e; --accent-ink:#ffffff; --check-ink:#ffffff;
  --c-ep:#2c5db5; --c-movie:#c4262e; --c-ova:#9a5f08; --c-kaito:#6a47b8; --c-drama:#16806f; --c-other:#5f6b82;
  --f-display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1323; --surface:#151d33; --ink:#e7ecf6; --muted:#9ba6bd; --line:#26304a;
    --accent:#ff5d66; --accent-ink:#1a0709; --check-ink:#0d1323;
    --c-ep:#7ba5ff; --c-movie:#ff7d84; --c-ova:#e7b04f; --c-kaito:#b79cff; --c-drama:#4fd1bb; --c-other:#9aa6bf;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1323; --surface:#151d33; --ink:#e7ecf6; --muted:#9ba6bd; --line:#26304a;
  --accent:#ff5d66; --accent-ink:#1a0709; --check-ink:#0d1323;
  --c-ep:#7ba5ff; --c-movie:#ff7d84; --c-ova:#e7b04f; --c-kaito:#b79cff; --c-drama:#4fd1bb; --c-other:#9aa6bf;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--bg);color:var(--ink);font:15px/1.45 var(--f-body);
  padding-block:0 96px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
button,input{font:inherit;color:inherit}
.wrap{max-width:720px;margin:0 auto}
.top{padding-top:28px}
.eyebrow{font:500 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
h1{font:800 clamp(30px,8.5vw,46px)/1.02 var(--f-display);letter-spacing:-.02em;margin:10px 0 10px;text-wrap:balance}
.lede{margin:0;color:var(--muted);max-width:54ch}
.brand{display:flex;align-items:center;gap:16px}
.logo{
  flex:none;width:72px;height:72px;border-radius:18px;display:block;
  background:#ffffff;border:1px solid var(--line);padding:6px;object-fit:contain;
}
.brand-text{min-width:0}
.brand h1{font-size:clamp(26px,7.4vw,42px);margin:8px 0 0}
.top .lede{margin-top:14px}


.bar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:5;
  background:var(--bg);margin-top:20px;padding:12px 0 12px;border-bottom:1px solid var(--line);
}
.bar-row{display:flex;align-items:center;gap:12px}
.pct{font:800 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
.frac{font:500 13px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;flex:1;min-width:0}
.nextbtn{
  flex:none;border:0;border-radius:8px;padding:9px 13px;background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:14px;cursor:pointer;
}
.track{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px}
.fill{height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .35s ease}

.summary{margin:14px 0 0;display:grid;gap:4px}
.summary .eps{font:500 13px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.nextline{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nextline b{font-weight:600}

.controls{display:grid;gap:12px;margin:16px 0}
.search{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.search::placeholder{color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.chip{
  flex:none;display:flex;gap:8px;align-items:baseline;padding:8px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
}
.chip b{font:500 12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] b{color:inherit;opacity:.75}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;width:fit-content}
.toggle input{width:18px;height:18px;margin:0;accent-color:var(--accent)}

.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.row{
  --tc:var(--c-other);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;scroll-margin-top:96px;
}
.t-ep{--tc:var(--c-ep)} .t-movie{--tc:var(--c-movie)} .t-ova{--tc:var(--c-ova)}
.t-kaito{--tc:var(--c-kaito)} .t-drama{--tc:var(--c-drama)} .t-other{--tc:var(--c-other)}
.line{display:flex;align-items:center;gap:10px;padding:12px 6px 12px 12px}
.main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;cursor:pointer}
.main input{
  appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;border-radius:7px;
  border:2px solid var(--tc);background:transparent;display:grid;place-content:center;cursor:pointer;
}
.main input::after{
  content:"";width:12px;height:6px;border-left:3px solid var(--check-ink);border-bottom:3px solid var(--check-ink);
  transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .12s ease;
}
.main input:checked{background:var(--tc)}
.main input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.main input:focus-visible,.more:focus-visible,.chip:focus-visible,.nextbtn:focus-visible,.actions button:focus-visible,
.search:focus-visible,.toggle input:focus-visible,.foot button:focus-visible,.toast button:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
.txt{min-width:0;display:flex;flex-direction:column;gap:4px}
.title{font-weight:600;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font:12px/1.3 var(--f-mono);color:var(--muted)}
.tag{
  padding:2px 7px;border-radius:5px;background:color-mix(in srgb,var(--tc) 16%,var(--surface));
  color:var(--tc);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
}
.nb{display:none;padding:2px 7px;border-radius:5px;background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.row.next .nb{display:inline-block}
.row.next{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.row.done{background:transparent}
.row.done .txt{opacity:.62}
.row.done .title{text-decoration:line-through;text-decoration-thickness:1px}
.idx{flex:none;font:500 12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.more{flex:none;width:38px;height:38px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.more:hover{background:var(--bg)}
.actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 12px 50px}
.actions button{
  padding:8px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:13px;cursor:pointer;
}
.empty{padding:28px 0;text-align:center;color:var(--muted)}
.empty button{margin-top:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer}

.foot{margin-top:28px;display:grid;gap:10px;font-size:13px;color:var(--muted)}
.foot p{margin:0;max-width:60ch}
.foot button{
  width:fit-content;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
}
.foot button.armed{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(calc(100% - 32px),460px);z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast button{border:0;background:transparent;color:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:4px 6px}
@media (prefers-reduced-motion:reduce){
  .fill,.main input::after{transition:none}
}

/* Pagination */
.listhead{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  margin:0 0 10px;scroll-margin-top:104px;
}
.perpage{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.perpage select{
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;
}
.range{font:500 13px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:16px}
.pager button{
  min-width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;
}
.pager button:disabled{opacity:.4;cursor:default}
.pageof{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pageof input{
  width:56px;height:44px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);-moz-appearance:textfield;appearance:textfield;
}
.pageof input::-webkit-outer-spin-button,.pageof input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pageof b{color:var(--ink);font-weight:600}
.pager button:focus-visible,.pageof input:focus-visible,.perpage select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Responsive Detective Conan background
   Keep the artwork subtle behind the app UI and switch crops by viewport. */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 88%, transparent),
      color-mix(in srgb, var(--bg) 94%, transparent)
    ),
    url("assets/background-mobile.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/*Background size for tablet*/
@media (min-width: 600px) {
  body {
    background-image:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 88%, transparent),
        color-mix(in srgb, var(--bg) 94%, transparent)
      ),
      url("assets/background-tablet.jpg");
  }
}

/*Background size for desktop*/
@media (min-width: 1024px) {
  body {
    background-image:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 88%, transparent),
        color-mix(in srgb, var(--bg) 94%, transparent)
      ),
      url("assets/background-desktop.jpg");
    background-position: center center;
  }
}

/* Keep sticky controls readable over the background image. */
.bar {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}