/* End of Year Top Albums — Zoho Labs LAB:2010:12:004 (HTML port) */
  /* Shared base for the Zoho Labs music wheels (palette from the 2010 ActionScript:
     panel 0x333333 @75%, blue 0x085082, hint 0xE9F5FF / 0x8FA9D2) */
  :root {
    --ground: #ffffff; --ink: #0b0b0b; --panel: #4a4a4a; --panel-2: #5a5a5a; --rule: #6d6d6d;
    --ghost: #f1f1f1; --text: #ffffff; --text-dim: #c9c9c9; --text-dark: #151515; --muted: #8a8a8a;
    --blue: #085082; --red: #cc0000; --magenta: #ff00ff;
    --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    --body: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--ground); color: var(--text-dark); font: 13px/1.3 var(--body); }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  button:disabled { cursor: default; }
  a { color: inherit; }

  .lab { min-height: 100%; display: flex; flex-direction: column; }
  .bar { background: var(--ink); color: #fff; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 3px solid #fff; box-shadow: 0 3px 0 var(--ink); }
  .logo { font: 600 30px/1 var(--display); letter-spacing: .06em; color: inherit; text-decoration: none; }
  .logo span { color: #9a9a92; }
  .bar h1 { margin: 0; font: 400 clamp(20px, 3.2vw, 34px)/1.05 var(--display); flex: 1 1 320px; text-wrap: balance; }
  .bar h1 .code { color: #9a9a92; }
  .ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 3px; background: #fff; color: var(--ink); font: 600 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
  .pill[aria-pressed="true"] { background: var(--blue); color: #fff; }
  .bar select { font: 600 13px var(--display); letter-spacing: .06em; padding: 4px 8px; border-radius: 3px; border: 0; }

  .stage { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 10px 16px 12px;
    grid-template-columns: var(--left-w, 190px) 26px var(--marks-w, 170px) minmax(0, 1fr) 290px 26px;
    grid-template-areas: "left lmini marks wheel right rmini"; }
  @media (min-width: 1181px) { .lab { height: 100%; min-height: 660px; } }

  .col { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
  .left { grid-area: left; } .right { grid-area: right; }
  .tab { background: var(--ghost); border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.25); padding: 6px 10px; font: 600 22px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #9c9c9c; display: flex; align-items: center; gap: 8px; }
  .tab > span { flex: 1; min-width: 0; }
  .tab > span + span { flex: none; }
  .right .tab { font-size: clamp(16px, 1.5vw, 22px); }
  .panel { background: var(--panel); border-radius: 6px; flex: 1; min-height: 0; display: flex; flex-direction: column; color: var(--text); }
  .panel-head { display: flex; justify-content: flex-end; gap: 8px; padding: 3px 8px; font-size: 11px; min-height: 20px; border-bottom: 1px solid #fff; }
  .list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 2px 6px 6px; }

  /* Left rows (years / charts) */
  .row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; padding: 5px 4px 6px; border-bottom: 1px solid var(--rule); border-radius: 2px; align-items: center; }
  .row:not(:disabled):hover { background: var(--panel-2); }
  .row[aria-pressed="true"] { background: var(--ink); }
  .row .t { font: 600 16px/1.05 var(--display); letter-spacing: .02em; }
  .row .t.big { font: 700 20px/1 var(--display); }
  .row .t.agg { color: var(--magenta); font-size: 19px; }
  .row .no1 { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-dim); line-height: 1.2; }
  .squares { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(28, 5px); margin-top: 3px; }
  .squares i { width: 5px; height: 5px; }
  .fav { width: 16px; height: 16px; border-radius: 3px; background: #777; display: grid; place-items: center; font: 700 10px var(--display); overflow: hidden; }
  .fav > * { grid-area: 1 / 1; }
  .fav img { width: 16px; height: 16px; display: block; }

  /* Mini strips: nav + bars on a grey track */
  .mini { display: flex; flex-direction: column; gap: 4px; padding: 4px 3px; background: var(--ghost); border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); min-height: 0; }
  .lmini { grid-area: lmini; } .rmini { grid-area: rmini; }
  .mininav { display: flex; justify-content: space-between; }
  .mininav button { width: 10px; height: 10px; background: var(--ink); color: #fff; font-size: 7px; line-height: 10px; text-align: center; }
  .bars { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
  .bars button { flex: 1; min-height: 3px; position: relative; background: #ccc; }
  .bars button i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .3s; }
  .bars button[aria-current="true"] i { background: var(--blue); }

  /* Appearance markers, aligned to the left mini bars */
  .marks { grid-area: marks; position: relative; min-height: 0; }
  .marks .mhead { position: absolute; left: 0; width: 137px; height: 18px; background: rgba(255,255,255,.9); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); font: 600 10px var(--body); display: flex; align-items: center; justify-content: space-between; padding: 0 3px 0 6px; }
  .marks .mhead button { width: 12px; height: 12px; background: var(--red); color: #fff; font-size: 9px; line-height: 12px; text-align: center; }
  .mark { position: absolute; left: 0; display: flex; gap: 2px; align-items: stretch; font: 600 var(--mark-fs, 9px)/1 var(--display); letter-spacing: .04em; }
  .mark .arr { width: 10px; background: var(--ink); color: #fff; font-size: 6px; display: grid; place-items: center; }
  .mark .lbl { width: 150px; background: var(--ink); color: #fff; padding: 0 5px; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mark .lbl b { font-weight: 700; }
  .mark .lbl span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .mark[aria-current="true"] .lbl { background: var(--blue); }
  .mark:hover .lbl { background: #333; }
  .mark[aria-current="true"]:hover .lbl { background: #0a6aad; }

  /* Right: album rows */
  .album { width: 100%; display: grid; grid-template-columns: 26px 64px 1fr 9px; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--rule); align-items: start; position: relative; }
  .album:hover { background: var(--panel-2); }
  .album[aria-pressed="true"] { background: var(--ink); }
  .album .x { position: absolute; right: 4px; top: 4px; width: 11px; height: 11px; background: var(--red); color: #fff; font-size: 8px; line-height: 11px; text-align: center; display: none; }
  .album[aria-pressed="true"] .x { display: block; }
  .rank { width: 24px; height: 24px; border-radius: 50%; background: #1d1d1d; display: grid; place-items: center; font: 700 14px var(--display); }
  .album[aria-pressed="true"] .rank { background: #fff; color: var(--ink); }
  .links { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; align-items: center; }
  .links a, .links span { width: 18px; height: 18px; border-radius: 50%; background: #ddd; color: #222; display: grid; place-items: center; font: 700 10px var(--body); text-decoration: none; opacity: .55; }
  .links a:hover { opacity: 1; background: #fff; }
  .links span { opacity: .2; }
  .art { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; font: 700 20px var(--display); color: rgba(255,255,255,.9); }
  .art > * { grid-area: 1 / 1; }
  .art img { width: 100%; height: 100%; object-fit: cover; display: block; background: #222; transition: opacity .2s; }
  .meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-right: 12px; }
  .meta .al { font-size: 12px; color: var(--text-dim); }
  .meta .ar { font: 600 14px/1.1 var(--display); letter-spacing: .02em; }
  .meta .ge { font-size: 11.5px; color: var(--text-dim); }
  .meta .score { font: 600 11px var(--display); color: var(--text-dim); letter-spacing: .04em; }
  .vsq { align-self: end; display: flex; flex-direction: column; gap: 1px; }
  .vsq i { width: 9px; height: 9px; }

  /* Wheel */
  .wheel { grid-area: wheel; position: relative; min-height: 0; min-width: 0; }
  .wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .glabel { font: 500 7.6px var(--body); cursor: pointer; }
  .glabel.off { fill: #b5b5b5; }
  .glabel.on { fill: #222; font-weight: 600; }
  .lab-g { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
  .gdot, .ghost-dot { cursor: pointer; }
  .gdot { transition: cx .45s ease, r .45s ease; }
  .ghost-dot { transition: fill-opacity .25s, stroke-opacity .25s; }
  .ghost-dot:hover { fill-opacity: .4; stroke-opacity: .4; }
  .sel .ghost-dot:hover { fill-opacity: 1; stroke-opacity: 1; }
  .ctrl { cursor: pointer; }
  .ctrl .hit { fill: transparent; }
  .ctrl.fade { opacity: .16; transition: opacity .2s; }
  .ctrl.fade:hover { opacity: .42; }
  .ctrl:not(.fade):hover rect { fill: #ffe9e9; }
  .fan-item { cursor: pointer; }
  .fan-item:hover .fan-frame { stroke: #ffd400; }
  .wordmark { font: 700 30px var(--display); letter-spacing: .08em; fill: #000; opacity: .12; pointer-events: none; }
  .key text { font: 600 11px var(--body); fill: #000; }
  .bigmark { position: absolute; left: 6px; bottom: 2px; pointer-events: none; color: var(--ink); max-width: 45%; }
  .bigmark b { display: block; font: 700 clamp(30px, 4.4vw, 64px)/.92 var(--display); }
  .bigmark span { font: 600 15px var(--display); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }

  .tip { position: fixed; pointer-events: none; z-index: 9; background: #e9f5ff; border: 1px solid #8fa9d2; color: #111; padding: 3px 7px; border-radius: 6px; font-size: 12px; white-space: pre; box-shadow: 1px 1px 3px rgba(0,0,0,.3); }

  .foot { background: var(--ink); color: #fff; font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 16px; border-top: 3px solid #fff; box-shadow: 0 -3px 0 var(--ink); }
  .foot .sp { flex: 1; }

  @media (max-width: 1180px) {
    .stage { grid-template-columns: 26px 1fr 1fr 26px; grid-template-areas: "wheel wheel wheel wheel" "lmini left right rmini" "marks marks marks marks"; }
    .wheel { aspect-ratio: 1; max-height: 92vh; width: 100%; }
    .left .panel, .right .panel { max-height: 560px; }
    .marks { display: none; }
  }
  @media (max-width: 620px) {
    .stage { grid-template-columns: 1fr; grid-template-areas: "wheel" "right" "left"; }
    .lmini, .rmini { display: none; }
    .bigmark b { font-size: 34px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---------- End of Year specifics ---------- */
  .cover { border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); padding: 0; overflow: hidden; aspect-ratio: 1; width: 100%; max-height: 190px; flex: none; }
  .cover .bigart { width: 100%; height: 100%; font-size: 64px; }
  @media (max-height: 760px) { .cover { display: none; } }
  .visit .fav { width: 26px; height: 26px; border-radius: 4px; font-size: 14px; color: #fff; }
  .visit .fav img { width: 24px; height: 24px; }
  .links a.yt, .links span { font-size: 8px; }

  /* Search (initSearchMenu) */
  .search[hidden] { display: none; }
  .search { position: fixed; inset: 0; z-index: 8; background: rgba(0,0,0,.55); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 16px; }
  .search .box { background: var(--ghost); border-radius: 8px; width: min(1120px, 100%); height: min(780px, 100%); max-height: 100%; min-height: 0; display: flex; flex-direction: column; box-shadow: 0 6px 30px rgba(0,0,0,.4); }
  .search header { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #ccc; }
  .search h2 { margin: 0; font: 700 26px var(--display); letter-spacing: .04em; text-transform: uppercase; }
  .search fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  .search fieldset .or { font: 700 14px var(--display); margin: 0 4px; }
  .search fieldset label { font: 600 14px var(--display); text-transform: uppercase; letter-spacing: .06em; background: #fff; border-radius: 3px; padding: 3px 8px; cursor: pointer; display: flex; gap: 5px; align-items: center; }
  .search input[type=search] { flex: 1 1 200px; font: 15px var(--body); padding: 6px 12px; border-radius: 16px; border: 1px solid #bbb; }
  .search .close { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; }
  .search .tablewrap { flex: 1; min-height: 0; overflow: auto; background: var(--panel); }
  .search table { width: 100%; border-collapse: collapse; color: #fff; font-size: 12px; }
  .search th { position: sticky; top: 0; background: var(--ink); text-align: left; padding: 6px 8px; font: 600 12px var(--display); letter-spacing: .06em; z-index: 1; }
  .search th button { color: #fff; font: inherit; }
  .search th button[aria-sort]::before { content: "▲ "; font-size: 9px; }
  .search th button[aria-sort="descending"]::before { content: "▼ "; }
  .search td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .search td.n { text-align: right; font: 700 14px var(--display); }
  .search .cv .art { width: 64px; height: 64px; }
  .search td ul { list-style: none; margin: 0; padding: 0; }
  .search td.charts ul { columns: 2 170px; column-gap: 14px; }
  .search td li { display: flex; gap: 4px; align-items: center; padding: 1px 2px; break-inside: avoid; }
  .search td li.agg { background: var(--magenta); color: #000; border-radius: 2px; }
  .search td li i { width: 8px; height: 8px; flex: none; }
  .search .sb { width: 13px; height: 13px; background: #111; color: #fff; font-size: 9px; line-height: 13px; text-align: center; flex: none; border-radius: 1px; }
  .search .sb:hover { background: var(--blue); }
  .search td .ar { font: 600 14px var(--display); }
  .search footer { padding: 6px 12px; font: 600 12px var(--display); color: var(--muted); text-align: right; }