/* ---------- page ---------- */
#page[data-full] { display: block; padding: 0; position: relative; }
#main { position: absolute; left: 0; top: 0; }
#panel { position: absolute; top: 0; }

#byline { position: absolute; top: 22px; white-space: nowrap; color: var(--muted); }

/* ---------- main ---------- */
#view { position: absolute; left: 0; top: var(--under); }
#content { position: relative; padding: 0 24px calc(var(--bottom) + 40px) 16px; }
#intro { padding: 6px 0; }
/* tools + daily pick */
#columns { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 24px; margin-top: 8px; }
#tools, #today { display: flex; flex-direction: column; gap: 8px; }
#tools { flex: 1; min-width: 0; }
#today { align-items: center; width: 184px; }
.double #today { width: 216px; }
#columns h2 { height: 24px; padding-top: 1px; white-space: nowrap; }
/* disclaimer */
#footer { position: absolute; left: 0; right: 0; bottom: var(--bottom); text-align: center; color: var(--muted); }

/* ---------- tool cards ---------- */
#cards { display: flex; flex-wrap: wrap; gap: 16px 8px; }
#cards:has(> :nth-child(3)) { gap: 8px; }
.tool { position: relative; display: block; flex: none; width: 336px; height: 80px; color: var(--ink); text-decoration: none; }
.tool > .textbox { position: absolute; inset: 0; }
.tool > .textbox + .textbox, .tool:active > .textbox:first-child { visibility: hidden; }
.tool:active > .textbox + .textbox { visibility: visible; }
.tool:active > :not(.textbox) { translate: 0 1px; }
/* 2x icons */
.tool > img, #discord > img { position: absolute; width: 24px; height: 24px; object-fit: none; scale: 2; transform-origin: 0 0; }
.tool > img { left: 16px; top: 16px; }
.tool > h2 { position: absolute; left: 72px; top: 23px; white-space: nowrap; }
.tool > p { position: absolute; left: 72px; right: 24px; top: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.tool:hover > p { text-decoration: underline; text-underline-offset: 2px; }
.compact #cards { gap: 8px; }
.compact #cards > .tool { height: 48px; }
.compact #cards > .tool > img { left: 12px; top: 12px; scale: 1; }
.compact #cards > .tool > h2 { left: 48px; top: 5px; }
.compact #cards > .tool > p { left: 48px; top: 26px; }
/* tall cards next to 2x pick */
.double #cards:not(:has(> :nth-child(3))) > .tool { height: 128px; }
.double #cards:not(:has(> :nth-child(3))) > .tool > img { left: 24px; top: 24px; }
.double #cards:not(:has(> :nth-child(3))) > .tool > h2 { left: 24px; top: 75px; }
.double #cards:not(:has(> :nth-child(3))) > .tool > p { left: 24px; top: 94px; }

/* ---------- daily pick ---------- */
.pick { position: relative; display: block; flex: none; width: 184px; height: 176px; color: var(--ink); text-decoration: none; }
.pick > .textbox { position: absolute; inset: 0; }
.pick > .sprite { position: absolute; left: 44px; top: 24px; width: 96px; height: 96px; }
.pick > .sprite > canvas { display: block; width: 100%; height: 100%; }
.pick > .count, .pick > .credit, .pick > .status { position: absolute; left: 8px; right: 8px; text-align: center; }
.pick > .count { top: 128px; white-space: nowrap; }
.pick > .credit { top: 144px; color: var(--muted); }
.pick > .status { top: 66px; color: var(--muted); }
.pick > .status.loading { top: 54px; }
.pick > .status.loading::before { display: block; margin: 0 auto 8px; }
.loading::before { content: ''; display: inline-block; width: 16px; height: 16px; margin: -2px 8px -2px 0; vertical-align: top;
  background: url('assets/icons/loader.png') 0 0 no-repeat; animation: loader 0.5s steps(4) infinite; }
@keyframes loader { to { background-position: -64px 0; } }
.double .pick { width: 216px; height: 272px; }
.double .pick > .sprite { left: 12px; width: 192px; height: 192px; }
.double .pick > .count { top: 224px; }
.double .pick > .credit { top: 240px; }
.double .pick > .status { top: 114px; }
.double .pick > .status.loading { top: 102px; }
:is(.tool, .pick):focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* band */
.strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  display: flex;
  justify-content: center;
  padding: 2px 8px 0;
  white-space: nowrap;
  background: var(--edge);
  clip-path: polygon(5px 1px, calc(100% - 6px) 1px, calc(100% - 6px) 2px, calc(100% - 5px) 2px, calc(100% - 5px) 3px,
    calc(100% - 4px) 3px, calc(100% - 4px) 5px, calc(100% - 3px) 5px, calc(100% - 3px) 16px, 1px 16px, 1px 5px, 2px 5px,
    2px 3px, 3px 3px, 3px 2px, 5px 2px);
}
.strip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* band shadow */
.shade { position: absolute; top: 0; right: 0; width: 7px; height: 16px;
  clip-path: polygon(1px 1px, 2px 1px, 2px 2px, 4px 2px, 4px 3px, 5px 3px, 5px 5px, 6px 5px, 6px 16px, 4px 16px, 4px 5px,
    3px 5px, 3px 3px, 2px 3px, 2px 2px, 1px 2px); }
.strip.dark { color: #121b26; }
.strip.light { color: #f6f2ee; }
.divider { position: absolute; top: 16px; left: 1px; right: 1px; height: 1px; background: #121b26; }
:root[data-theme="dark"] .divider { background: #3a3450; }

/* ---------- what's new ---------- */
#panel > .textbox { position: absolute; inset: -8px -8px -8px 0; }
#panel > .check { position: absolute; inset: 0 0 0 1px; background-position: -1px 0; background-size: 8px 8px; pointer-events: none; }
#pview { position: absolute; left: calc(var(--inset, 20px) - 8px); top: 0; width: 220px; }
#pcontent { display: flex; flex-direction: column; padding: 16px 4px 16px 8px; }
#panel > .bar { position: absolute; left: calc(var(--inset, 20px) + 212px); top: 16px; }
.phead { position: relative; height: 40px; flex: none; }
.phead h2 { position: absolute; left: 0; top: 2px; white-space: nowrap; }
#updates { margin-top: 14px; list-style: none; }
#updates time { display: block; height: 16px; color: var(--muted); }
#updates p { overflow-wrap: anywhere; }
/* timeline */
#updates li { position: relative; padding: 0 0 15px 20px; }
#updates li + li { padding-top: 16px; }
#updates li + li::before { content: ''; position: absolute; left: 20px; right: 0; top: 0; height: 1px; background: var(--edge); }
#updates li:not(:last-child)::after { content: ''; position: absolute; left: 3px; top: 6px; bottom: -22px; width: 1px; background: var(--edge); }
#updates li + li:not(:last-child)::after { top: 22px; }
#updates .node { position: absolute; z-index: 1; left: 0; top: 3px; width: 7px; height: 7px; background: var(--muted);
  clip-path: polygon(3px 0, 4px 0, 4px 1px, 5px 1px, 5px 2px, 6px 2px, 6px 3px, 7px 3px, 7px 4px, 6px 4px, 6px 5px, 5px 5px,
    5px 6px, 4px 6px, 4px 7px, 3px 7px, 3px 6px, 2px 6px, 2px 5px, 1px 5px, 1px 4px, 0 4px, 0 3px, 1px 3px, 1px 2px, 2px 2px,
    2px 1px, 3px 1px); }
#updates li + li .node { top: 19px; }
#updates li:first-child .node { background: var(--select); }

/* ---------- contact ---------- */
#contact { position: absolute; left: var(--inset, 20px); bottom: var(--bottom); width: 208px; height: 110px; }
#contact > .bubble { left: 0; top: 0; width: 129px; --tail: 36px; }
#discord { position: absolute; left: 0; bottom: 0; width: 208px; height: 72px; color: var(--ink); text-decoration: none; }
#discord > .textbox { position: absolute; inset: 0; }
#discord > .textbox + .textbox, #discord:active > .textbox:first-child { visibility: hidden; }
#discord:active > .textbox + .textbox { visibility: visible; }
#discord:active > :not(.textbox) { translate: 0 1px; }
#discord > img { left: 12px; top: 12px; }
#discord > .name { position: absolute; left: 68px; top: 18px; font-family: 'jersey', monospace; font-size: 20px; line-height: 20px; white-space: nowrap; }
#discord > .action { position: absolute; left: 68px; top: 39px; color: var(--muted); white-space: nowrap; text-underline-offset: 2px; }
#discord:hover > .action { text-decoration: underline; }
#discord:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
#discord .out { position: relative; display: inline-block; width: 7px; height: 7px; margin-left: 6px; color: var(--muted); }
#discord .out::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  box-shadow: 2px 0 currentColor, 3px 0 currentColor, 4px 0 currentColor, 5px 0 currentColor, 6px 0 currentColor,
    5px 1px currentColor, 6px 1px currentColor, 4px 2px currentColor, 6px 2px currentColor, 3px 3px currentColor,
    6px 3px currentColor, 2px 4px currentColor, 6px 4px currentColor, 1px 5px currentColor, 0 6px currentColor; }

/* ---------- scrollbars ---------- */
.scroll { overflow-y: scroll; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.bar { position: relative; width: 8px; flex: none; }
#main > .bar { position: absolute; }
.bar[hidden] { display: none; }
.thumb { position: absolute; left: 2px; width: 4px; background: var(--thumb); cursor: pointer; }
.thumb:hover, .thumb.drag { background: var(--thumb-on); }
/* thumb grip */
.thumb::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 5px; margin-top: -2px;
  background: repeating-linear-gradient(to bottom, var(--bg) 0 1px, transparent 1px 2px); }

/* ---------- bottom band ---------- */
#band { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
#band[hidden] { display: none; }
#sofar { display: flex; flex-direction: column; gap: 4px; }
#sofar > .line { display: flex; justify-content: space-between; height: 12px; white-space: nowrap; }
#sofar .lab { color: var(--muted); }
#sofar > canvas { display: block; }
#leastrow { display: flex; gap: 8px; height: 24px; }
#leastrow > .lab { flex: none; padding-top: 6px; color: var(--muted); white-space: nowrap; }
.chip { position: relative; display: block; flex: none; height: 24px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.chip > .textbox { position: absolute; inset: 0; }
.chip > .textbox + .textbox, .chip:active > .textbox:first-child { visibility: hidden; }
.chip:active > .textbox + .textbox { visibility: visible; }
.chip > span { position: relative; display: block; padding: 6px 8px 0; }
.chip:active > span { top: 1px; }
.chip:hover > span { text-decoration: underline; text-underline-offset: 2px; }
.chip > span > i { font-style: normal; color: var(--muted); }
.chip:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }