/* ghillie.wiki — the Outside page (Outside.html) only.
   Shared rules (body colors, fade-in, footer) live in base.css. Laid out
   like the dossier (same file box, same headings), except the skills,
   which are drawn like the in-game skills tab: a window into Outside.

   Three more of the game's own fonts live here (not in base.css — they're
   only ever used on this page): the chat font its dialogue and drop
   messages are set in, and the taller "NPC chat" face important messages
   use. Between them and "RuneScape Large" (base.css), most of the page's
   own words are set in a font the game itself would use, while anything
   that needs to stay easy to read at a glance — fine print, axis labels,
   tooltips, raw numbers — keeps the site's plain Verdana. Each is a .woff2
   (small) with the .ttf original as a fallback, like base.css. */
@font-face {
  font-family: "RuneScape Chat '07";
  src: url("../media/fonts/runescape-chat.woff2?v=7d2d5719") format("woff2"),
    url("../media/fonts/runescape-chat.ttf?v=b3523bff") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "RuneScape Chat '07";
  src: url("../media/fonts/runescape-chat-bold.woff2?v=d08e0875") format("woff2"),
    url("../media/fonts/runescape-chat-bold.ttf?v=08649659") format("truetype");
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "RuneScape NPC Chat";
  src: url("../media/fonts/runescape-npc-chat.woff2?v=2298ee89") format("woff2"),
    url("../media/fonts/runescape-npc-chat.ttf?v=e5fb9065") format("truetype");
  font-display: swap;
}

a {
  color: hotpink;
}

/* the page's lists use display: flex, which would otherwise override
   the "hidden" attribute that "show all" relies on */
.outside [hidden] {
  display: none !important;
}

.outside {
  width: 92%;
  max-width: 620px;
  margin: 28px auto 0;
  font-size: 12px;
  line-height: 1.6;
}

.outside-org {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #999;
}

.outside-org .camo {
  font-size: 16px;
}

/* 32px: this font is drawn on a 32-per-em pixel grid, so it's sharpest here.
   (an h2 now that the site banner is the page's h1, so it undoes the
   section-heading look below) */
.outside h2.outside-title {
  margin: 8px 0 4px;
  padding-bottom: 0;
  border-bottom: 0;
  letter-spacing: normal;
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 32px;
  font-weight: normal;
  line-height: 1;
  color: #b9ff00;
}

.outside-ref {
  margin: 0 0 22px;
  font-size: 10px;
  color: #999;
}

/* the file itself */
.outside-file {
  text-align: left;
  border: 1px solid white;
  padding: 20px 22px 8px;
  /* the game's own chat font for most of the file's running text; fine
     print (below) is set back to Verdana so it stays crisp at small sizes.
     16px exactly: the chat font is drawn on a 16-pixel grid, so any other
     size smears its pixels (12px, the page's size before, drew each one
     three-quarters of a screen pixel wide) */
  font-family: "RuneScape Chat '07", Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

/* the NPC dialogue font is drawn on a 32-pixel grid, so it's used at 32px */
.outside-status {
  margin: 0 0 12px;
  color: #999;
  font-family: "RuneScape NPC Chat", "RuneScape Chat '07", Verdana, sans-serif;
  font-size: 32px;
  line-height: 1;
}

/* fine print stays in the site's plain font: axis labels, tooltips, dates
   and raw counts read better as Verdana at these sizes than as a pixel font */
.outside-note,
.line-axis,
.bars-labels,
.grid-label,
.line-label,
.chart-tip,
.kill-rank,
.deed-detail,
.movement-date,
.select-info {
  font-family: Verdana, Geneva, sans-serif;
}

/* label / value pairs at the top */
.outside-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  align-items: center;
  margin: 0 0 6px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.6;
}

.outside-fields dt {
  color: #999;
}

.outside-fields dd {
  margin: 0;
}

/* the account name, in the game's own font */
.outside-name {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 0;
  white-space: nowrap;
}

/* the account-type badge (an ironman helm) sits in front of the name, the
   way the game shows it in chat, centered on the name's letters */
.outside-namecell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.outside-namecell .outside-name {
  line-height: 1;
}

.outside-badge {
  display: inline-flex;
  flex: 0 0 auto;
}

.outside-badge .icon {
  display: block;
  max-width: none;
  image-rendering: pixelated;
}

/* "last contact": the dot sits in the gap before the column instead of
   pushing the text over, so its value lines up with every field above it */
.outside-last {
  position: relative;
}

.outside-last .outside-live {
  position: absolute;
  left: -13px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

/* section headings: the same as the dossier's */
.outside h2 {
  margin: 24px 0 10px;
  padding-bottom: 3px;
  border-bottom: 1px dashed #444;
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 1px;
  color: #b9ff00;
}

.outside-file p {
  margin: 0 0 10px;
}

.outside-note {
  color: #999;
  font-size: 11px;
}

/* blinking teal light, the same as the dossier's "status: active" */
.outside-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #0494aa;
  box-shadow: 0 0 5px #0494aa;
  vertical-align: middle;
  animation: outside-blink 1.8s ease-in-out infinite;
}

@keyframes outside-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .outside-live {
    animation: none;
  }
}

/* ===== power readings: the tab strip shared by skills / quests / diaries /
   combat / log ===== */
.readings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.reading-tab {
  padding: 2px 12px;
  border: 1px solid #444;
  background: black;
  color: #999;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.reading-tab:hover {
  color: white;
  border-color: #777;
}

.reading-tab[aria-selected="true"] {
  border-color: #b9ff00;
  color: #b9ff00;
}

.reading-tab:focus-visible {
  outline: 1px dotted #b9ff00;
  outline-offset: 2px;
}

/* ===== the skills tab =====
   Drawn like the game's own skills tab: a stone panel, a rounded stone
   slab per skill with its icon on the left and the level over the
   (virtual) level on the right, split by a slash, and the black
   "Total level" bar underneath. The same width-to-height shape as the
   game's panel, and the quests and diaries windows follow it. */
.skills-tab {
  box-sizing: border-box;
  max-width: 310px;
  margin: 0 auto 8px;
  padding: 5px;
  background: #3e3529;
  border: 2px solid #1c1812;
  box-shadow: inset 0 0 0 1px #5b5140;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.skill {
  --cut: 6px;
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0;
  background: #17130e;
  border: 0;
  /* the game's slab: a rectangle with its corners cut off, in a dark
     outline; the stone itself is the ::before, 1px inside */
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  color: #ffff00;
  font: inherit;
  cursor: pointer;
}

.skill::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: polygon(calc(var(--cut) - 0.5px) 0, calc(100% - var(--cut) + 0.5px) 0, 100% calc(var(--cut) - 0.5px), 100% calc(100% - var(--cut) + 0.5px), calc(100% - var(--cut) + 0.5px) 100%, calc(var(--cut) - 0.5px) 100%, 0 calc(100% - var(--cut) + 0.5px), 0 calc(var(--cut) - 0.5px));
  /* grey-brown stone, a shade cooler and lighter than the panel's brown */
  background: linear-gradient(160deg, #6e685c 0%, #645e53 45%, #5b564c 100%);
  box-shadow: inset 1px 1px 0 #8a8474, inset -1px -1px 0 #45413a;
}

.skill:hover::before,
.skill:focus-visible::before {
  background: linear-gradient(160deg, #7b7568 0%, #716b5f 45%, #676257 100%);
}

.skill:focus-visible {
  outline: none;
}

/* the icon, centered in the left part of the slab, enlarged with square
   pixels (its size is set in outside.js) */
.skill-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44%;
  height: 100%;
}

.skill .icon {
  image-rendering: pixelated;
}

/* the levels: current top-left, (virtual) bottom-right, and the slash
   between them — the game's yellow digits with a black shadow, drawn as
   hard pixels (see pixelText in outside.js; plain text until then) */
.skill-levels {
  position: absolute;
  top: 3px;
  right: 6px;
  bottom: 3px;
  left: 44%;
  font-family: "RuneScape Chat '07", Verdana, sans-serif;
  font-size: 16px;
  line-height: 16px;
  color: #ffff00;
  text-shadow: 1px 1px 0 #000;
}

.pixel-text canvas {
  display: block;
  image-rendering: pixelated;
}

.lv-now {
  position: absolute;
  top: 0;
  left: 1px;
}

.lv-max {
  position: absolute;
  right: 0;
  bottom: 0;
}

.lv-slash {
  position: absolute;
  inset: 3px 4px 3px 4px;
  background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), #0d0b08 calc(50% - 1.2px), #0d0b08 calc(50% + 0.8px), transparent calc(50% + 0.8px));
}

/* the bar under the grid: the total, or whichever skill is pointed at,
   on black like the game's "Total level" bar — two lines, so it doesn't
   jump in height between the total and a skill */
.skills-readout {
  margin: 5px 0 0 !important;
  padding: 3px 6px 4px;
  background: #000;
  border: 2px solid #2a241b;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #5b5140;
  color: #ffff00;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  font-family: "RuneScape Chat '07", Verdana, sans-serif;
  font-size: 16px;
  line-height: 18px;
}

.readout-main,
.readout-sub {
  display: block;
  min-height: 18px;
}

.readout-sub {
  color: #ff981f;
}

/* ===== the four RuneProfile views =====
   Dark stone like RuneProfile's own panels: a black frame with a bevelled
   grey edge, recessed boxes for lists and controls, and the game's colors —
   orange for headings and labels, yellow for numbers, and red / yellow /
   green for not started / started / done. Everything in them is the chat
   font at 16px, the size it's drawn at, with the game's 1px black shadow. */
.rp-window {
  --rp-orange: #ff981f;
  --rp-yellow: #ffff00;
  --rp-green: #27d627;
  --rp-red: #ff3a2f;
  --rp-dim: #9f9f9f;
  /* the stone: the skills panel's brown, like the game's own interfaces.
     (the grey RuneProfile set, to go back: bg #2a2a2a, frame #0e0e0e,
     edge #474747, line var(--rp-line), shade var(--rp-shade), edge2 var(--rp-edge2), box
     #1f1f1f, row #2b2b2b, row-alt #303030, hover #3b3b3b, sel var(--rp-sel),
     cur var(--rp-cur), thumb var(--rp-thumb), thumb-hi var(--rp-thumb-hi) — and the arrow
     buttons' colors in their svgs) */
  --rp-bg: #3e3529;
  --rp-frame: #1c1812;
  --rp-edge: #5b5140;
  --rp-line: #231d16;
  --rp-shade: #1c1812;
  --rp-edge2: #5b5140;
  --rp-box: #2b251c;
  --rp-row: #342c22;
  --rp-row-alt: #382f25;
  --rp-hover: #4a4032;
  --rp-sel: #463c2e;
  --rp-cur: #574b3a;
  --rp-thumb: #4a4032;
  --rp-thumb-hi: #6b5d49;
  padding: 8px;
  background: var(--rp-bg);
  border: 2px solid var(--rp-frame);
  box-shadow: inset 0 0 0 1px var(--rp-edge), inset 0 0 0 2px var(--rp-line);
  color: var(--rp-orange);
  font-size: 16px;
  line-height: 1.25;
  text-shadow: 1px 1px 0 #000;
}

.rp-window button,
.rp-window select {
  font: inherit;
  text-shadow: inherit;
}

/* a recessed box: darker, with the top-left edge in shadow */
.rp-recess,
.rp-scroll,
.ca-points,
.log-head {
  background: var(--rp-box);
  border: 1px solid;
  border-color: var(--rp-shade) var(--rp-edge2) var(--rp-edge2) var(--rp-shade);
}

.rp-scroll {
  overflow-y: auto;
}

/* the game's scrollbar: a dark track, a long bevelled stone thumb and a
   stone arrow button at each end (Chrome, Edge, Safari). Firefox can't
   draw those, so it gets a thin bar in the same colors instead. */
.rp-scroll::-webkit-scrollbar {
  width: 16px;
}

.rp-scroll::-webkit-scrollbar-track {
  background: #1f1a14;
  border-left: 1px solid #0e0c09;
  box-shadow: inset 1px 0 0 #2e271e;
}

.rp-scroll::-webkit-scrollbar-thumb {
  background: #6b5f4b;
  border: 1px solid;
  border-color: #948464 #2a2319 #2a2319 #948464;
  border-radius: 1px;
}

.rp-scroll::-webkit-scrollbar-thumb:hover {
  background: #776a54;
}

.rp-scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
  display: block;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='%236b5f4b' stroke='%231c1812'/%3E%3Cpath d='M1.5 14.5V1.5h13' fill='none' stroke='%23948464'/%3E%3Cpath d='M8 4 12.5 8.5H10v4H6v-4H3.5z' fill='%23a3927a'/%3E%3Cpath d='M8 3.5 12 7.5H9.5V12h-3V7.5H4z' fill='%231a1510'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.rp-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
  display: block;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='%236b5f4b' stroke='%231c1812'/%3E%3Cpath d='M1.5 14.5V1.5h13' fill='none' stroke='%23948464'/%3E%3Cpath d='M8 13 12.5 8.5H10V4.5H6v4H3.5z' fill='%23a3927a'/%3E%3Cpath d='M8 12.5 12 8.5H9.5V4h-3v4.5H4z' fill='%231a1510'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.rp-scroll::-webkit-scrollbar-button:vertical:start:increment,
.rp-scroll::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .rp-scroll {
    scrollbar-width: thin;
    scrollbar-color: #6b5f4b #1f1a14;
  }
}

.rp-message {
  margin: 4px 2px !important;
  color: var(--rp-dim);
}

.rp-label {
  color: var(--rp-orange);
}

.rp-value {
  color: #e8e8e8;
}

.rp-num {
  color: var(--rp-yellow);
}

.rp-num.complete {
  color: var(--rp-green);
}

/* the header bar: icon + big count on the left, a link on the right */
.rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}

.rp-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.rp-count .icon {
  image-rendering: pixelated;
}

.rp-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rp-orange);
  cursor: pointer;
}

.rp-link::after {
  content: " ›";
}

.rp-link:hover,
.rp-link:focus-visible {
  color: #ffc36e;
  outline: none;
}

/* the game's panel title, and the footer lines under a list */
.rp-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  color: var(--rp-orange);
}

.rp-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 2px 0;
  color: var(--rp-orange);
}

.rp-foot .rp-toggle {
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.rp-sub {
  margin: -2px 0 8px;
}

/* a small switch inside a panel (quests: all / unfinished) */
.rp-toggle {
  display: flex;
  gap: 4px;
  margin: 0 0 6px;
}

.rp-toggle button {
  padding: 0 10px;
  border: 1px solid;
  border-color: var(--rp-shade) var(--rp-edge2) var(--rp-edge2) var(--rp-shade);
  background: var(--rp-box);
  color: var(--rp-dim);
  cursor: pointer;
}

.rp-toggle button[aria-pressed="true"] {
  color: var(--rp-orange);
  background: var(--rp-hover);
}

/* dropdowns: RuneProfile's recessed box with an arrow button on the right */
.rp-field {
  display: block;
  margin: 0 0 6px;
}

.rp-field-label {
  display: block;
  color: var(--rp-orange);
}

/* the dropdown's box: the chosen option centered, and the game's arrow
   button on the right */
.rp-dd {
  position: relative;
}

.rp-dd-btn {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: var(--rp-box);
  border: 1px solid;
  border-color: var(--rp-shade) var(--rp-edge2) var(--rp-edge2) var(--rp-shade);
  color: var(--rp-orange);
  cursor: pointer;
  text-align: center;
}

.rp-dd-value {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-dd-arrow {
  flex: 0 0 24px;
  background: var(--rp-thumb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='%234a4032' stroke='%231c1812'/%3E%3Cpath d='M1.5 14.5V1.5h13' fill='none' stroke='%236b5d49'/%3E%3Cpath d='M8 13 12.5 8.5H10V4H6v4.5H3.5z' fill='%231c1812'/%3E%3Cpath d='M8 12.5 12 8H9.5V3.5h-3V8H4z' fill='%23d9c7a0'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  border-left: 1px solid var(--rp-shade);
}

.rp-dd-btn:hover .rp-dd-value,
.rp-dd-btn:focus-visible .rp-dd-value {
  color: #ffc36e;
}

.rp-dd-btn:focus-visible {
  outline: 1px dotted var(--rp-orange);
}

.rp-dd.open .rp-dd-btn {
  border-color: var(--rp-edge2) var(--rp-shade) var(--rp-shade) var(--rp-edge2);
}

/* the open list: over whatever is below it, scrolling with the game's
   scrollbar, the chosen option lit */
.rp-dd-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rp-box);
  border: 1px solid var(--rp-edge2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7);
  outline: none;
}

.rp-dd-option {
  padding: 3px 8px;
  color: var(--rp-orange);
  cursor: pointer;
}

.rp-dd-option[aria-selected="true"] {
  background: var(--rp-sel);
}

.rp-dd-option.active {
  background: var(--rp-hover);
  color: #ffc36e;
}

/* every RuneProfile window: the same width and height as the skills panel
   (its height is measured into --skills-h), so switching tabs never moves
   the page below; the list inside each one scrolls */
#o-quests,
#o-diaries,
#o-combat-tab,
#o-log {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 310px;
  height: var(--skills-h, auto);
  margin: 0 auto 8px;
}

#o-quests > *,
#o-diaries > *,
#o-combat-tab > *,
#o-log > * {
  flex: none;
}

#o-quests > .rp-scroll,
#o-diaries > .rp-scroll,
#o-combat-tab > .ca-body,
#o-log > .log-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* the quest and diary lists sit in the game's heavy dark frame */
#o-quests > .rp-scroll,
#o-diaries > .rp-scroll {
  background: #2b251c;
  border: 3px solid #110e0a;
  box-shadow: inset 0 0 0 1px #4a4133;
}

/* on a wider screen, CA's and clog take the full width (only their height
   is matched), with RuneProfile's side-by-side layouts */
@media (min-width: 560px) {
  #o-combat-tab,
  #o-log {
    max-width: none;
  }
}

/* combat achievements: the points bar a little slimmer, and the task list
   taking whatever height is left */
#o-combat-tab .ca-points {
  height: 22px;
  margin-bottom: 6px;
}

#o-combat-tab .ca-points-text {
  line-height: 20px;
}

#o-combat-tab .rp-filters-title {
  display: none;
}

#o-combat-tab .ca-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

#o-combat-tab .ca-row {
  gap: 6px;
  padding: 3px 6px;
}

#o-combat-tab .rp-field {
  margin: 0 0 4px;
}

/* the open lists can be wider than their boxes, so names stay on one line */
#o-combat-tab .rp-dd-list {
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: 230px;
}

#o-combat-tab .rp-dd-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the "N tasks" count sits in the header, beside the link */
.rp-head .ca-shown {
  margin-left: auto;
  color: var(--rp-dim);
}

/* collection log: the page's name, kills and count in two short lines,
   and the items taking the rest */
#o-log .log-main {
  flex: 1 1 auto;
  min-height: 0;
  gap: 4px;
}

#o-log .log-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  padding: 2px 8px 3px;
}

#o-log .log-title {
  flex: 1 0 100%;
  margin: 0;
}

#o-log .log-items {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 4px;
}

#o-log .log-pages {
  max-height: none;
}

/* on a phone (the 310px window): the four filters in a 2 × 2 grid with
   their labels inline, and the clog's page list over the page */
@media (max-width: 559px) {
  #o-combat-tab .ca-body {
    flex-direction: column;
    gap: 6px;
  }

  /* two even columns, each label over its box */
  #o-combat-tab .ca-filters {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
  }

  #o-combat-tab .rp-field {
    margin: 0;
    min-width: 0;
  }

  /* the right-hand column's lists open leftward, inside the window */
  #o-combat-tab .ca-filters > .rp-field:nth-child(odd) .rp-dd-list {
    left: auto;
    right: 0;
  }

  #o-combat-tab .ca-detail {
    padding-left: 30px;
  }

  #o-log .log-body {
    flex-direction: column;
    padding: 4px;
    gap: 4px;
  }

  #o-log .log-pages {
    flex: 0 0 auto;
    max-height: 84px;
  }

  #o-log .log-page {
    padding: 1px 8px;
  }

  #o-log .log-tab {
    flex: 1 1 auto;
    padding: 3px 4px 2px;
  }
}

/* ===== quest list ===== */
.quest-list {
  max-height: 300px;
  padding: 2px 6px;
}

.rp-group {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 2px;
  font-size: 16px;
  font-weight: bold;
  color: var(--rp-orange);
}

.quest-row {
  padding: 0 4px;
}

.quest-row.state-finished {
  color: var(--rp-green);
}

.quest-row.state-in_progress {
  color: var(--rp-yellow);
}

.quest-row.state-not_started {
  color: var(--rp-red);
}

/* ===== achievement diaries: the game's diary journal =====
   the skills panel's stone brown, a framed box per region (name and task
   count in the region's color), and a four-tier bar under each: green for
   a finished tier, orange as far as a started one has got */
.diary-list {
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #2b251c;
  border: 1px solid;
  border-color: #1c1812 #5b5140 #5b5140 #1c1812;
}

.diary-box {
  margin: 0 0 3px;
  padding: 2px 5px 5px;
  background: #3a3126;
  border: 1px solid #8a5d2a;
  box-shadow: inset 0 0 0 1px #1c1812;
}

.diary-box:last-child {
  margin-bottom: 0;
}

.diary-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  line-height: 20px;
}

.diary-area {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-total {
  flex: none;
}

.diary-top.state-done { color: var(--rp-green); }
.diary-top.state-started { color: var(--rp-yellow); }
.diary-top.state-none { color: var(--rp-red); }

/* the bar: four black-framed tiers side by side */
.diary-bar {
  display: flex;
  gap: 0;
  height: 12px;
  background: #000;
  border: 2px solid #000;
}

.diary-seg {
  position: relative;
  flex: 1;
  background: #231d16;
  overflow: hidden;
  cursor: default;
}

.diary-seg + .diary-seg {
  margin-left: 2px;
}

.diary-fill {
  position: absolute;
  inset: 0 auto 0 0;
}

.diary-seg.state-done .diary-fill { background: #3cb51c; box-shadow: inset 0 1px 0 #5ad33a; }
.diary-seg.state-started .diary-fill { background: #d98a0e; box-shadow: inset 0 1px 0 #f0a52a; }

.diary-seg:hover {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: -1px;
}

/* ===== combat achievements ===== */
/* the points bar: green fill, a notch at every reward tier */
.ca-points {
  position: relative;
  height: 26px;
  margin: 0 0 8px;
  overflow: hidden;
}

.ca-points-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(to bottom, #4ed04e, #1f8f1f);
}

.ca-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.55);
}

.ca-tick.reached {
  background: rgba(0, 0, 0, 0.3);
}

.ca-points-text {
  position: relative;
  display: block;
  text-align: center;
  line-height: 24px;
  color: white;
}

.ca-body {
  display: flex;
  gap: 8px;
}

.ca-filters {
  flex: 0 0 150px;
}

.rp-filters-title {
  margin: 0 0 4px;
  font-weight: bold;
  text-align: center;
  color: var(--rp-orange);
}

.ca-shown {
  color: var(--rp-dim);
}

.ca-list {
  flex: 1;
  min-width: 0;
  max-height: 380px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-task {
  background: var(--rp-row);
  border-bottom: 1px solid var(--rp-line);
}

.ca-task:nth-child(even) {
  background: var(--rp-row-alt);
}

.ca-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ca-row:hover,
.ca-row:focus-visible {
  background: var(--rp-hover);
  outline: none;
}

.ca-plus {
  flex: 0 0 12px;
  font-weight: bold;
  color: #d8b35a;
  text-align: center;
}

.ca-icon {
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.ca-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ca-name {
  color: var(--rp-dim);
}

.ca-task.done .ca-name {
  color: var(--rp-green);
}

.ca-monster {
  color: #e8e8e8;
}

.ca-detail {
  padding: 0 10px 8px 62px;
  color: #d0d0d0;
}

.ca-detail p {
  margin: 0 0 2px !important;
}

.ca-meta {
  color: var(--rp-dim);
}

@media (max-width: 520px) {
  .ca-body {
    flex-direction: column;
  }

  .ca-filters {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
  }

  .rp-filters-title,
  .ca-shown {
    grid-column: 1 / -1;
  }

  .ca-detail {
    padding-left: 30px;
  }
}

/* ===== collection log ===== */
.log-tabs {
  display: flex;
  gap: 3px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.log-tab {
  flex: 1 0 auto;
  padding: 3px 10px 2px;
  border: 1px solid var(--rp-edge2);
  border-bottom: 0;
  background: var(--rp-box);
  color: var(--rp-orange);
  cursor: pointer;
}

.log-tab:hover {
  background: var(--rp-row);
}

.log-tab[aria-selected="true"] {
  background: var(--rp-sel);
  color: #ffb54d;
}

.log-body {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--rp-sel);
  border: 1px solid var(--rp-edge2);
}

.log-pages {
  flex: 0 0 38%;
  min-width: 0;
  max-height: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.log-page {
  display: block;
  width: 100%;
  padding: 3px 8px;
  border: 0;
  background: none;
  color: var(--rp-orange);
  text-align: left;
  cursor: pointer;
}

.log-pages li:nth-child(even) .log-page {
  background: rgba(255, 255, 255, 0.025);
}

.log-page:hover {
  background: var(--rp-hover) !important;
}

.log-page[aria-current="true"] {
  background: var(--rp-cur) !important;
  color: #ffb54d;
}

.log-page.done {
  color: var(--rp-green);
}

.log-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.log-head {
  padding: 4px 10px 6px;
}

.log-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: bold;
  color: var(--rp-orange);
}

.log-line {
  color: var(--rp-orange);
}

/* the items: the game's 36x32 icons at their own size, 6 to a row on a
   wide screen, dimmed until obtained, with a yellow count top-left */
.log-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  align-content: start;
  max-height: 272px;
  padding: 6px;
}

.log-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}

.log-item:hover,
.log-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.log-item .icon {
  image-rendering: pixelated;
}

.log-item.missing .icon {
  opacity: 0.22;
}

.log-item .qty {
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--rp-yellow);
  line-height: 1;
}

@media (max-width: 520px) {
  .log-body {
    flex-direction: column;
  }

  .log-pages {
    flex: none;
    max-height: 150px;
  }

  .log-tab {
    flex: 1 1 auto;
    padding: 3px 4px 2px;
  }
}

/* ===== deeds ===== */
.deeds,
.movements {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
}

.deed > .icon {
  flex: 0 0 29px;
  object-fit: none;
  image-rendering: pixelated;
}

.deed-body {
  flex: 1;
  min-width: 0;
}

.deed-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: bold;
}

.deed-count {
  color: #999;
  white-space: nowrap;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: normal;
}

.deed-bar {
  height: 4px;
  margin: 3px 0 2px;
  background: #222;
}

.deed-bar span {
  display: block;
  height: 100%;
  background: #b9ff00;
}

.deed-detail {
  font-size: 10px;
  color: #777;
}

/* ===== megarares ===== */
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted #222;
}

.mega-item:last-child {
  border-bottom: 0;
}

.mega-item .icon-box {
  width: 34px;
  height: 34px;
}

.mega-item.missing .icon {
  opacity: 0.3;
  filter: grayscale(1);
}

.mega-name {
  flex: 1;
  min-width: 0;
  font-weight: bold;
}

/* an obtained megarare: the game's rare-drop orange, glowing softly, with
   two sparkles twinkling off the corners of its name */
.mega-item.obtained .mega-name {
  color: #ff9d2e;
}

.mega-text {
  position: relative;
  display: inline-block;
}

.mega-item.obtained .mega-text {
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(255, 150, 30, 0.75), 0 0 14px rgba(255, 110, 0, 0.45);
  animation: mega-glow 2.8s ease-in-out infinite;
}

.mega-item.obtained .mega-text::before,
.mega-item.obtained .mega-text::after {
  content: "✦";
  position: absolute;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  line-height: 1;
  color: #fff3b0;
  text-shadow: 0 0 4px #ffb347, 0 0 8px #ff8c00;
  pointer-events: none;
  animation: mega-twinkle 2.4s ease-in-out infinite;
}

.mega-item.obtained .mega-text::before {
  top: -7px;
  right: -11px;
  font-size: 10px;
}

.mega-item.obtained .mega-text::after {
  bottom: -4px;
  left: -9px;
  font-size: 7px;
  animation-delay: 1.2s;
}

.mega-item.obtained .icon-box .icon {
  filter: drop-shadow(0 0 3px rgba(255, 150, 30, 0.7));
}

@keyframes mega-glow {
  0%, 100% { text-shadow: 1px 1px 0 #000, 0 0 5px rgba(255, 150, 30, 0.55), 0 0 10px rgba(255, 110, 0, 0.3); }
  50% { text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 170, 60, 0.95), 0 0 18px rgba(255, 120, 0, 0.6); }
}

@keyframes mega-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mega-item.obtained .mega-text,
  .mega-item.obtained .mega-text::before,
  .mega-item.obtained .mega-text::after {
    animation: none;
  }

  .mega-item.obtained .mega-text::before,
  .mega-item.obtained .mega-text::after {
    opacity: 0.8;
  }
}

.mega-item.missing .mega-name {
  color: #888;
}

.mega-status {
  font-size: 10px;
  color: #777;
  white-space: nowrap;
  font-family: Verdana, Geneva, sans-serif;
}

/* the date on an obtained megarare gets the site's teal, so the page's
   two accent colors both show up somewhere outside the skills tab */
.mega-item.obtained .mega-status {
  color: #2ee0f5;
}

/* ===== drop rates so far ===== */
.rate-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rate-row {
  padding: 6px 0 8px;
  border-bottom: 1px dotted #222;
}

.rate-row:last-child {
  border-bottom: 0;
}

.rate-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rate-name {
  flex: 1;
  min-width: 0;
  font-weight: bold;
}

.rate-kills {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #999;
  white-space: nowrap;
}

/* the items, as little collection-log slots with their rate beside them,
   indented to line up under the boss's name */
.rate-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0 0 34px;
}

.rate-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 6px 1px 2px;
  background: #1c1812;
  border: 1px solid #5b5140;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #ccc;
  white-space: nowrap;
}

.rate-item.shared {
  border-style: dashed;
}

.rate-item .icon {
  max-width: 26px;
  max-height: 22px;
  image-rendering: pixelated;
}

.rate-value {
  color: #2ee0f5;
  font-weight: bold;
}

@media (max-width: 480px) {
  .rate-items {
    margin-left: 0;
  }
}

/* ===== recent movements ===== */
.movement {
  display: flex;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dotted #2a2a2a;
}

.movement:last-child {
  border-bottom: 0;
}

.movement-date {
  flex: 0 0 auto;
  color: #999;
  font-size: 12px;
  line-height: 32px;
}

.movement-what {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* every small picture sits centered in a fixed box, so rows line up
   whatever size each picture happens to be */
.icon-box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.movement-what .icon-box {
  width: 36px;
  height: 32px;
}

.icon-box .icon {
  max-width: none;
  image-rendering: pixelated;
}

/* a few game icons are drawn in black (agility, thieving, hunter). The
   skills tab's brown shows them; on the page's black they need a faint
   outline to be seen at all */
.icon-box img[src$="/agility.png"],
.icon-box img[src$="/thieving.png"],
.icon-box img[src$="/hunter.png"] {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

.icon-star {
  display: inline-block;
  color: #b9ff00;
  text-align: center;
  line-height: 32px;
}

.movement-none {
  color: #999;
}

.outside-full {
  margin-top: 16px !important;
  font-size: 11px;
  font-family: Verdana, Geneva, sans-serif;
  /* phones draw an arrow like ↗ as a colored emoji picture unless told to
     use the plain text one (the arrows carry U+FE0E too, for browsers that
     don't know this property) */
  font-variant-emoji: text;
}

.outside-return {
  margin: 24px 0 0;
}

/* smaller headings inside a section */
.outside h3 {
  margin: 18px 0 8px;
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  color: #ccc;
}

/* "show all" buttons: look like the page's links */
.more {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: hotpink;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

/* ===== power gained ===== */
.period-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.period-switch button,
.sort-switch button,
.heat-switch button,
.outside-lookup button,
.outside-retry {
  padding: 3px 12px;
  border: 1px solid #444;
  background: black;
  color: #999;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.period-switch button:hover,
.sort-switch button:hover,
.heat-switch button:hover,
.outside-lookup button:hover,
.outside-retry:hover {
  color: white;
  border-color: #777;
}

.period-switch button[aria-pressed="true"],
.sort-switch button[aria-pressed="true"] {
  border-color: #b9ff00;
  color: #b9ff00;
}

/* the heatmap's switch lights up in teal once it's showing logged events,
   matching the teal squares */
.heat-switch button[aria-pressed="true"] {
  border-color: #b9ff00;
  color: #b9ff00;
}

.heat-switch button[data-heat="log"][aria-pressed="true"],
.heat-switch button[data-heat="both"][aria-pressed="true"] {
  border-color: #2ee0f5;
  color: #2ee0f5;
}

/* the "sort by" row above entities slain and the heatmap's switch share
   the period-switch look; sort-by has a small label in front of it */
.sort-switch,
.heat-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 14px;
}

.heat-switch {
  margin: 0 0 10px;
}

.sort-label {
  font-size: 10px;
  color: #999;
  font-family: Verdana, Geneva, sans-serif;
}

.gain-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 16px;
  min-height: 46px;
}

.gain-stat {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border: 1px solid #2a2a2a;
}

.gain-stat-label {
  font-size: 10px;
  color: #999;
  font-family: Verdana, Geneva, sans-serif;
}

.gain-stat-value {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.2;
}

/* efficient hours is two numbers: plain text fits it better */
.gain-stat:last-child .gain-stat-value {
  font-family: "RuneScape Chat '07", Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rank-change {
  font-size: 10px;
  white-space: nowrap;
  font-family: Verdana, Geneva, sans-serif;
}

.rank-change.up {
  color: #b9ff00;
}

.rank-change.down {
  color: #888;
}

/* in "power gained", a rank slipping is worth calling out in red rather
   than the quieter gray used elsewhere */
#sec-gains .rank-change.down {
  color: #ff5555;
}

.chart {
  margin: 0 0 18px;
}

.chart figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 10px;
  color: #999;
  font-family: Verdana, Geneva, sans-serif;
}

/* shown once a reading below has been clicked, to step back out to the
   overall total */
.chart-clear {
  padding: 1px 8px;
  border: 1px solid #0494aa;
  background: none;
  color: #2ee0f5;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  cursor: pointer;
  white-space: nowrap;
}

.chart-clear:hover {
  background: rgba(34, 211, 238, 0.12);
}

/* the result of dragging a stretch of the line chart */
.select-info {
  margin: 6px 0 0;
  font-size: 11px;
  color: #2ee0f5;
}

/* the one tooltip every chart shares */
.chart-tip {
  position: absolute;
  z-index: 10000;
  padding: 5px 9px;
  background: #1b1b1d;
  border: 1px solid #3a3a3e;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
  /* one line unless the text itself has line breaks (the heatmap's
     "what was logged that day" lists), and never wider than a phone */
  white-space: pre-line;
  width: max-content;
  max-width: 300px;
  text-align: left;
  pointer-events: none;
}

/* total xp line */
.line-plot {
  position: relative;
  height: 120px;
  border-bottom: 1px solid #444;
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
}

.line-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-path {
  fill: none;
  stroke: #b9ff00;
  stroke-width: 2px;
  stroke-linejoin: round;
}

.line-area {
  fill: #b9ff00;
  opacity: 0.08;
}

/* when a specific reading (rather than overall xp) is being traced, the
   line switches to the site's other accent color so it's obvious the
   chart isn't showing the total any more */
.chart-line.metric-focused .line-path {
  stroke: #2ee0f5;
}

.chart-line.metric-focused .line-area {
  fill: #2ee0f5;
}

.line-label {
  position: absolute;
  left: 0;
  font-size: 9px;
  color: #777;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  pointer-events: none;
}

.line-top {
  top: 0;
}

.line-bottom {
  bottom: 3px;
}

.line-cross {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #555;
  pointer-events: none;
}

.line-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -6px 0 0 -6px;
  border: 2px solid black;
  border-radius: 50%;
  background: #b9ff00;
  pointer-events: none;
}

.chart-line.metric-focused .line-dot {
  background: #2ee0f5;
}

/* the highlighted stretch while dragging (and briefly after releasing) */
.line-select {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(34, 211, 238, 0.16);
  border-left: 1px solid #2ee0f5;
  border-right: 1px solid #2ee0f5;
  pointer-events: none;
}

.line-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  color: #777;
}

/* xp per day / month bars */
.bars-plot {
  position: relative;
  height: 120px;
  margin-top: 14px; /* room for the top gridline's label */
  border-bottom: 1px solid #444;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #262626;
}

.grid-label {
  position: absolute;
  top: -12px;
  left: 0;
  font-size: 9px;
  color: #777;
}

.bars-row {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
}

.bar-col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* each bar is a level meter: lit segments 3px tall with 2px gaps (the
   mask), colored by how high they sit on the whole chart rather than on
   the bar (the gradient is the plot's height, pinned to the bottom), so a
   short day only ever lights the dim segments and only a big one reaches
   the bright lime at the top */
.bar {
  display: block;
  width: 100%;
  min-height: 0;
  background: linear-gradient(to top, #4a7300, #8fcc00 40%, #b9ff00 75%, #e2ff8a 100%) bottom / 100% 120px no-repeat;
  -webkit-mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px);
  mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px);
  transition: filter 0.15s;
}

.chart-bars.metric-focused .bar {
  background-image: linear-gradient(to top, #0a5560, #19a9bd 40%, #2ee0f5 75%, #a6f5ff 100%);
}

/* the "peak hold" cap: a thin line floating just above each bar's top,
   in the page's other accent so it reads as a separate mark */
.bar-cap {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  margin-bottom: 3px;
  background: #2ee0f5;
  box-shadow: 0 0 4px rgba(46, 224, 245, 0.6);
  pointer-events: none;
}

.chart-bars.metric-focused .bar-cap {
  background: #b9ff00;
  box-shadow: 0 0 4px rgba(185, 255, 0, 0.5);
}

.bar-col:hover .bar,
.bar-col:focus-visible .bar,
.bar-col.on .bar {
  filter: brightness(1.45);
}

.bar-col:hover .bar-cap,
.bar-col.on .bar-cap {
  background: white;
}

.bar-col:focus-visible {
  outline: 1px dotted #999;
}

/* the average across the bars */
.avg-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.avg-label {
  position: absolute;
  right: 0;
  bottom: 1px;
  padding: 0 3px;
  background: rgba(0, 0, 0, 0.75);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  line-height: 1.3;
  color: #ccc;
}

.bars-labels {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  font-size: 9px;
  color: #777;
}

.bars-labels span {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

/* gained this week / month / year / all-time, and boss kill counts */
.gain-list,
.kills,
.next {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dotted #222;
}

.kill-name {
  flex: 1;
  min-width: 0;
  font-weight: bold;
}

.kill-count {
  white-space: nowrap;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

.kill-count.gain {
  color: #b9ff00;
}

.kill-rank {
  min-width: 64px;
  text-align: right;
  font-size: 10px;
  color: #777;
  white-space: nowrap;
}

/* a reading in the gained list can be clicked to trace it on the charts */
.gain-list .kill {
  padding: 4px 4px;
  border: 0;
  border-bottom: 1px dotted #222;
  border-left: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.gain-list .kill:hover {
  background: #111;
}

.gain-list .kill.focused {
  background: #0c1f22;
  border-left-color: #2ee0f5;
}

.gain-list .kill:focus-visible {
  outline: 1px dotted #2ee0f5;
}

/* ===== a year of activity ===== */
.heat-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.heat {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 8px);
  grid-auto-columns: 8px;
  gap: 2px;
  width: max-content;
  margin: 0 auto;
}

.heat .cell {
  position: relative;
  border-radius: 1px;
}

/* one hue, dark to bright: the brighter, the more xp that day */
.h0 { background: #1b1b1b; }
.h1 { background: #2f4309; }
.h2 { background: #527a05; }
.h3 { background: #86bd00; }
.h4 { background: #b9ff00; }

/* the same, in the site's teal: the more RuneProfile logged that day */
.l0 { background: #1b1b1b; }
.l1 { background: #0b3a40; }
.l2 { background: #0e6772; }
.l3 { background: #14a3b5; }
.l4 { background: #2ee0f5; }

/* "both": a day something was logged gets a small teal dot in the middle
   of its xp square — small, since most days have something logged and
   the green underneath still has to read */
.heat .cell.logged::after,
.heat-legend .legend-dot {
  content: "";
  width: 2px;
  height: 2px;
  background: #2ee0f5;
}

.heat .cell.logged::after {
  position: absolute;
  top: 3px;
  left: 3px;
}

/* on the two brightest greens, teal is too close in lightness to stand
   out, so the dot goes dark there instead */
.heat .cell.h3.logged::after,
.heat .cell.h4.logged::after {
  background: #06343a;
}

.heat-legend .legend-dot {
  width: 3px;
  height: 3px;
  margin-left: 10px;
  background: #2ee0f5;
}

.heat-loading {
  color: #2ee0f5 !important;
}

.heat-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 6px;
  font-size: 9px;
  color: #777;
  font-family: Verdana, Geneva, sans-serif;
}

.heat-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
}

/* ===== thresholds approaching ===== */
.next-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
}

/* phones: the file hugs the screen edges a bit more */
@media (max-width: 480px) {
  .outside-file {
    padding: 16px 12px 6px;
  }

  .outside-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .outside-fields dd {
    margin-bottom: 6px;
  }

  .outside-last .outside-live {
    position: static;
    transform: none;
    margin: 0 7px 1px 0;
  }

  .movement {
    flex-direction: column;
    gap: 0;
  }

  .movement-date {
    line-height: 1.6;
    font-size: 10px;
  }

  .gain-stats {
    grid-template-columns: 1fr 1fr;
  }

  .gain-stat:last-child {
    grid-column: 1 / -1;
  }

  .kill-rank {
    min-width: 0;
  }
}

/* touchscreens can't click-and-drag the line (a drag scrolls the page),
   so the hint about it only shows where there's a mouse */
@media (hover: none) {
  .drag-note {
    display: none;
  }
}

/* ===== added: tooltips with a title, like RuneProfile's ===== */
.chart-tip.multi {
  padding: 7px 11px 8px;
}

.tip-title {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.tip-body {
  display: block;
  color: #a8a8ae;
}

/* ===== added: an opened bar ===== */
.bars-row.has-pick .bar-col:not(.picked) .bar {
  opacity: 0.45;
}

.bar-col.picked::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  bottom: 0;
  border: 1px dashed rgba(46, 224, 245, 0.7);
  pointer-events: none;
}

/* ===== added: busy days, and the list of one day's events ===== */
.heat .cell.logged.busy::after {
  width: 4px;
  height: 4px;
  top: 2px;
  left: 2px;
  background: hotpink;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.heat .cell.l1.busy,
.heat .cell.l2.busy,
.heat .cell.l3.busy,
.heat .cell.l4.busy {
  box-shadow: inset 0 0 0 1px hotpink;
}

.heat .cell.open {
  outline: 1px solid white;
  outline-offset: 1px;
  z-index: 1;
}

.heat-legend .legend-dot.busy {
  width: 4px;
  height: 4px;
  margin-left: 8px;
  background: hotpink;
}

.heat-legend .legend-busy {
  width: 8px;
  height: 8px;
  margin-left: 10px;
  background: #0e6772;
  box-shadow: inset 0 0 0 1px hotpink;
}

.heat-day {
  margin: 10px 0 0;
  padding: 8px 10px 4px;
  border: 1px solid #2a2a2a;
}

.heat-day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 4px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #999;
}

.heat-day-head strong {
  color: white;
}

.heat-day-head .chart-clear {
  margin-left: auto;
}

.heat-day-list {
  max-height: 320px;
  overflow-y: auto;
}

/* ===== added: entities slain — each boss's log page and pet ===== */
.kill-log {
  display: inline-block;
  margin-left: 8px;
  padding: 0 4px;
  border: 1px solid #333;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 14px;
  color: #999;
  vertical-align: 2px;
}

.kill-log.complete {
  border-color: #3d6b00;
  color: #b9ff00;
}

.kill-pet {
  width: auto;
  height: 18px;
  margin-left: 6px;
  vertical-align: -4px;
  image-rendering: pixelated;
}

/* ===== added: doom's "expected" chips, and milestone timing ===== */
/* lucky / dry: the colour itself is set per chip (green → amber → red,
   by how many have come against how many the odds would give) */
.rate-value.under {
  color: #ffb02e;
}

/* no wiki odds to compare with (raids, chests, …): plain */
.rate-value.no-odds {
  color: #d8d8d8;
}

.next-eta {
  color: #2ee0f5;
}

/* ===== added: horizontal progression headings open their tab ===== */
.deed-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.deed-link::after {
  content: " ›";
  color: #777;
}

.deed-link:hover,
.deed-link:focus-visible {
  color: hotpink;
  outline: none;
}

.deed-link:hover::after,
.deed-link:focus-visible::after {
  color: hotpink;
}

/* ===== added: the bars' xp / rank switch ===== */
.bars-mode {
  display: inline-flex;
  gap: 0;
  margin-left: auto;
}

.bars-mode button {
  padding: 1px 8px;
  border: 1px solid #333;
  background: black;
  color: #888;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  cursor: pointer;
}

.bars-mode button + button {
  border-left: 0;
}

.bars-mode button[aria-pressed="true"] {
  border-color: #b9ff00;
  color: #b9ff00;
}

.bars-mode button + button[aria-pressed="true"] {
  border-left: 1px solid #b9ff00;
}

/* rank change bars, from a middle line: climbs up, slips down in red */
.rank-plot .zero-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  border-top: 1px solid #555;
  pointer-events: none;
}

.rank-plot .grid-label-low {
  top: auto;
  bottom: 2px;
}

.bar-col.rank-col {
  display: block;
}

.rank-col .bar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 3px;
}

.rank-col .bar.up {
  bottom: 50%;
  background: linear-gradient(to top, #4a7300, #b9ff00) bottom / 100% 60px no-repeat;
}

.rank-col .bar.down {
  top: 50%;
  background: linear-gradient(to bottom, #6b1d1d, #ff5555) top / 100% 60px no-repeat;
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 5px);
  mask: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 5px);
}

.chart-bars.metric-focused .rank-col .bar.up {
  background-image: linear-gradient(to top, #0a5560, #2ee0f5);
}

.net-label {
  top: 2px;
  bottom: auto;
}

/* ===== added: pet odds ===== */
.pet-line {
  margin: 0 0 6px !important;
  color: #999;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

.pet-big {
  color: white;
  font-weight: bold;
}

.pet-owned {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.pet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px 1px 2px;
  border: 1px solid #3d6b00;
  color: #b9ff00;
  font-weight: bold;
}

.pet-chip .icon {
  max-height: 26px;
  image-rendering: pixelated;
}

.pet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pet-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted #222;
}

.pet-icon {
  width: 36px;
  height: 32px;
}

.pet-icon .icon {
  opacity: 0.35;
  filter: grayscale(0.6);
}

.pet-body {
  flex: 1;
  min-width: 0;
}

.pet-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pet-name {
  font-weight: bold;
}

.pet-boss {
  flex: 1;
  min-width: 0;
  color: #777;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-verdict {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  white-space: nowrap;
}

.pet-verdict.v0 { color: #999; }
.pet-verdict.v1 { color: #ffb02e; }
.pet-verdict.v2 { color: #ff7a3d; }
.pet-verdict.v3 { color: #ff5555; }

/* the chance so far: fills toward the right the drier it gets, with a
   mark at 50% (the point where it's more likely than not to have come) */
.pet-meter {
  position: relative;
  height: 4px;
  margin: 4px 0 3px;
  background: linear-gradient(to right, #b9ff00, #ffb02e 55%, #ff5555);
}

.pet-meter .pet-rest {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: #222;
}

.pet-meter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: #666;
}

/* ===== added: easiest combat achievements left ===== */
.easy-ca-goal {
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px solid #1d3a3f;
  background: #0a1719;
  color: #cfefff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

.easy-ca {
  list-style: none;
  margin: 0;
  padding: 0;
}

.easy-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 6px 6px 2px;
  border-bottom: 1px dotted #222;
}

/* the marked run: each task numbered the way the game prints an item's
   stack count (yellow pixel digits with a hard black shadow), and a faint
   tint behind the row */
.easy-step {
  flex: 0 0 22px;
  margin-top: 1px;
  font-family: "RuneScape Chat '07", Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 18px;
  text-align: right;
  color: #ffff00;
  text-shadow: 1px 1px 0 #000;
}

.easy-row.in-run {
  background: rgba(46, 224, 245, 0.04);
}

/* where the run ends: "the 17 above are enough for Elite" */
.easy-cut {
  margin: 4px 0;
  padding: 4px 0;
  border-bottom: 1px dashed #2ee0f5;
  color: #2ee0f5;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  text-align: right;
}

.easy-row .ca-icon {
  margin-top: 2px;
  image-rendering: pixelated;
}

.easy-body {
  flex: 1;
  min-width: 0;
}

.easy-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.easy-name {
  font-weight: bold;
}

.easy-pct {
  color: #2ee0f5;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

.easy-desc {
  color: #ccc;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
}

/* ===== added: the live signal ===== */
.outside-signal {
  display: inline-flex;
  align-items: center;
  margin: 2px 0 10px;
  padding: 2px 10px;
  border: 1px solid rgba(46, 224, 245, 0.5);
  border-radius: 10px;
  color: #2ee0f5;
  font-size: 10px;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(46, 224, 245, 0.15);
}

.outside-signal .outside-live,
.outside-last.live .outside-live {
  background: #2ee0f5;
  box-shadow: 0 0 4px #2ee0f5, 0 0 10px #2ee0f5;
  animation-duration: 0.9s;
}

.outside-last.live #o-last {
  color: #2ee0f5;
}

/* ===== added: the total xp forecast ===== */
.proj-zone {
  fill: rgba(46, 224, 245, 0.05);
}

.proj-path {
  fill: none;
  stroke: #2ee0f5;
  stroke-width: 2px;
  stroke-dasharray: 5 4;
}

.proj-now {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #444;
  pointer-events: none;
}

.proj-now span {
  position: absolute;
  top: 1px;
  left: 3px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  color: #666;
}

.proj-mark {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.proj-mark::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid #2ee0f5;
  background: black;
  transform: rotate(45deg);
}

/* the label sits up and to the left of its mark, inside the chart */
.proj-mark-label {
  position: absolute;
  right: 8px;
  bottom: 5px;
  white-space: nowrap;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  color: #2ee0f5;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}

.proj-axis {
  color: #2ee0f5;
}

.proj-info {
  margin: 6px 0 0 !important;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #8fd8e2;
}

/* ===== added: the case file ===== */
.case-year {
  margin: 0 0 6px;
  border: 1px solid #222;
}

.case-year > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 10px;
  cursor: pointer;
  list-style: none;
}

.case-year > summary::-webkit-details-marker {
  display: none;
}

.case-year > summary::before {
  content: "+";
  width: 10px;
  color: #777;
  font-family: Verdana, Geneva, sans-serif;
}

.case-year[open] > summary::before {
  content: "−";
}

.case-year > summary:hover .case-y,
.case-year > summary:focus-visible .case-y {
  color: #b9ff00;
}

.case-y {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
  color: #ddd;
}

.case-count {
  color: #777;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
}

/* a line down the left with a dot per entry */
.case-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2px 10px 8px 26px;
}

.case-list::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 12px;
  left: 14px;
  border-left: 1px solid #333;
}

.case-entry {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 2px 0;
}

.case-entry::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #555;
}

.case-date {
  flex: 0 0 82px;
  color: #777;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
}

.case-what {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.case-what .icon-box {
  width: 28px;
  height: 26px;
}

.case-mega .case-text {
  color: #ff9d2e;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(255, 150, 30, 0.6);
}

.case-mega::before {
  background: #ff9d2e;
  border-color: #ffcf8a;
  box-shadow: 0 0 6px #ff9d2e;
}

.case-pet .case-text,
.case-max .case-text {
  color: #b9ff00;
  font-weight: bold;
}

.case-pet::before,
.case-max::before {
  background: #b9ff00;
  border-color: #dcff80;
}

.case-origin .case-text {
  color: #2ee0f5;
}

.case-origin::before {
  background: #2ee0f5;
  border-color: #8ef0fa;
}

.case-item .case-text {
  color: #ffd24d;
}

.case-undated .case-date {
  font-style: italic;
  color: #555;
}

@media (max-width: 480px) {
  .case-entry {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .case-date {
    flex: none;
  }
}

/* ===== added: the projection's pace switch ===== */
.proj-pace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 8px 0 0;
}

.proj-pace[hidden] {
  display: none;
}

.proj-pace-label {
  margin-right: 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #8fd8e2;
}

.proj-pace button {
  padding: 1px 8px;
  border: 1px solid #1d4d54;
  background: black;
  color: #888;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  cursor: pointer;
}

.proj-pace button + button {
  border-left: 0;
}

.proj-pace button:hover {
  color: white;
}

.proj-pace button[aria-pressed="true"] {
  border-color: #2ee0f5;
  color: #2ee0f5;
}

.proj-pace button + button[aria-pressed="true"] {
  border-left: 1px solid #2ee0f5;
}

/* ===== added: the three dots above the footer, as on every other page ===== */
.page-dots {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: normal;
  text-align: center;
}

/* the drop-rate colour key: the same green → amber → red as pet odds */
.rate-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 12px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #999;
}

.rate-key-bar {
  flex: 0 1 160px;
  height: 4px;
  background: linear-gradient(to right, #b9ff00, #ffb02e 62%, #ff5555);
}

/* ===== added: the drawn scrollbar (browsers without ::-webkit-scrollbar,
   i.e. Firefox — see gameScroll() in outside.js). The list's own bar is
   hidden and this one is laid over its right edge, in the same stone. */
.gs-box {
  scrollbar-width: none;
}

.gs-box::-webkit-scrollbar {
  display: none;
  width: 0;
}

.gs-bar {
  position: absolute;
  z-index: 21;
  display: flex;
  flex-direction: column;
  width: 16px;
  user-select: none;
  touch-action: none;
}

.gs-bar[hidden] {
  display: none;
}

.gs-btn {
  flex: 0 0 16px;
  height: 16px;
  cursor: pointer;
}

.gs-up {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='%236b5f4b' stroke='%231c1812'/%3E%3Cpath d='M1.5 14.5V1.5h13' fill='none' stroke='%23948464'/%3E%3Cpath d='M8 4 12.5 8.5H10v4H6v-4H3.5z' fill='%23a3927a'/%3E%3Cpath d='M8 3.5 12 7.5H9.5V12h-3V7.5H4z' fill='%231a1510'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.gs-down {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' fill='%236b5f4b' stroke='%231c1812'/%3E%3Cpath d='M1.5 14.5V1.5h13' fill='none' stroke='%23948464'/%3E%3Cpath d='M8 13 12.5 8.5H10V4.5H6v4H3.5z' fill='%23a3927a'/%3E%3Cpath d='M8 12.5 12 8.5H9.5V4h-3v4.5H4z' fill='%231a1510'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.gs-track {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #1f1a14;
  border-left: 1px solid #0e0c09;
  box-shadow: inset 1px 0 0 #2e271e;
}

.gs-thumb {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background: #6b5f4b;
  border: 1px solid;
  border-color: #948464 #2a2319 #2a2319 #948464;
  border-radius: 1px;
}

.gs-thumb:hover,
.gs-thumb.dragging {
  background: #776a54;
}

/* on a phone, the five reading tabs share one row */
@media (max-width: 480px) {
  .readings-tabs {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .reading-tab {
    flex: 1 1 auto;
    padding: 2px 4px;
  }
}

@media (max-width: 340px) {
  .readings-tabs {
    gap: 2px;
  }

  .reading-tab {
    padding: 2px 1px;
  }
}

/* notes above the file: whose file it is when it isn't the subject's, and
   which source is missing (and why) when one doesn't answer */
.outside-notices:empty {
  display: none;
}

.outside-file p.outside-notice {
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px dashed #666;
  color: #ccc;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.outside-notice strong {
  color: #b9ff00;
  font-weight: normal;
}

/* when each source last heard from the account */
.outside-file p.outside-sources {
  margin: 0 0 6px;
  line-height: 1.5;
}

/* the times: always one line (outside.js picks the size and wording that
   fit); the last resort on a very narrow screen is a "…" at the end */
.outside-sources .sources-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.outside-sources .sources-why {
  display: block;
}

/* "try again" under the big message when nothing answered */
.outside-file p.outside-retry-row {
  margin: 0 0 16px;
}

/* read another player: label above, then the box and its button */
.outside-lookup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px dashed #444;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

.outside-lookup label {
  flex: 1 0 100%;
  color: #b9ff00;
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
}

.outside-lookup input {
  width: 13em;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #444;
  background: black;
  color: white;
  font: inherit;
}

.outside-lookup input:focus {
  border-color: #b9ff00;
  outline: none;
}

.outside-lookup input::placeholder {
  color: #777;
}

.outside-file .outside-lookup p {
  flex: 1 0 100%;
  margin: 2px 0 0;
}

/* ----- the "reading…" bar over the charts while a reading is fetched -----
   Laid over the line chart (the charts underneath dim), so nothing below
   jumps. A row of pixel blocks with a lit wave running along it: a request
   can't report how far along it is, so it sweeps rather than fills. */
.chart-stage {
  position: relative;
}

.charts-loading .chart-stage {
  min-height: 140px;
}

.charts-loading .chart-line,
.charts-loading .chart-bars {
  opacity: 0.25;
  transition: opacity 0.2s;
}

.chart-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.chart-loading[hidden] {
  display: none;
}

.chart-loading-text {
  font-family: "RuneScape Chat '07", Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #2ee0f5;
  text-shadow: 1px 1px 0 black;
}

.chart-loading-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #444;
  background: black;
}

.chart-loading-bar i {
  display: block;
  width: 8px;
  height: 10px;
  background: #0a3a42;
  animation: chart-loading-wave 1.1s linear infinite;
}

.chart-loading-note {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #777;
}

/* each block lights a beat after the one before it, so the lit part
   travels left to right: lime at its head, teal behind */
@keyframes chart-loading-wave {
  0%   { background: #b9ff00; box-shadow: 0 0 6px rgba(185, 255, 0, 0.6); }
  15%  { background: #2ee0f5; box-shadow: 0 0 4px rgba(46, 224, 245, 0.5); }
  45%  { background: #0a5560; box-shadow: none; }
  100% { background: #0a3a42; box-shadow: none; }
}
.chart-loading-bar i:nth-child(1) { animation-delay: -1.100s; }
.chart-loading-bar i:nth-child(2) { animation-delay: -1.031s; }
.chart-loading-bar i:nth-child(3) { animation-delay: -0.963s; }
.chart-loading-bar i:nth-child(4) { animation-delay: -0.894s; }
.chart-loading-bar i:nth-child(5) { animation-delay: -0.825s; }
.chart-loading-bar i:nth-child(6) { animation-delay: -0.756s; }
.chart-loading-bar i:nth-child(7) { animation-delay: -0.688s; }
.chart-loading-bar i:nth-child(8) { animation-delay: -0.619s; }
.chart-loading-bar i:nth-child(9) { animation-delay: -0.550s; }
.chart-loading-bar i:nth-child(10) { animation-delay: -0.481s; }
.chart-loading-bar i:nth-child(11) { animation-delay: -0.413s; }
.chart-loading-bar i:nth-child(12) { animation-delay: -0.344s; }
.chart-loading-bar i:nth-child(13) { animation-delay: -0.275s; }
.chart-loading-bar i:nth-child(14) { animation-delay: -0.206s; }
.chart-loading-bar i:nth-child(15) { animation-delay: -0.137s; }
.chart-loading-bar i:nth-child(16) { animation-delay: -0.069s; }

/* less motion: the blocks just glow together, slowly */
@media (prefers-reduced-motion: reduce) {
  .chart-loading-bar i {
    animation: chart-loading-glow 2s ease-in-out infinite;
    animation-delay: 0s !important;
  }
}

@keyframes chart-loading-glow {
  0%, 100% { background: #0a3a42; }
  50%      { background: #19a9bd; }
}

/* ----- fold a section away: a small +/- on the heading's dotted line -----
   The bars are drawn (not a font character) so it's the same sharp pixels
   everywhere. Open shows a minus; folded shows a plus. */
#outside-reading h2 {
  position: relative;
  padding-right: 26px;   /* headings that wrap never run under the button */
}

.sec-toggle {
  position: absolute;
  right: 0;
  bottom: -7px;          /* centered on the dotted line */
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid #444;
  background: black;
  color: #999;
  cursor: pointer;
}

.sec-toggle::before,
.sec-toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.sec-toggle::before {  /* the horizontal bar */
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
}

.sec-toggle::after {   /* the vertical bar */
  left: 6px;
  top: 3px;
  width: 2px;
  height: 8px;
}

.sec-toggle[aria-expanded="true"]::after {
  display: none;
}

.sec-toggle:hover {
  border-color: #777;
  color: white;
}

.sec-toggle:focus-visible {
  border-color: #b9ff00;
  color: #b9ff00;
  outline: none;
}

/* a finger needs more to land on */
@media (pointer: coarse) {
  .sec-toggle {
    width: 24px;
    height: 24px;
    bottom: -11px;
  }

  .sec-toggle::before {
    left: 7px;
    top: 10px;
  }

  .sec-toggle::after {
    left: 10px;
    top: 7px;
  }

  #outside-reading h2 {
    padding-right: 34px;
  }
}

/* folded: just the heading is left */
.sec-collapsed > :not(h2) {
  display: none !important;
}

.sec-collapsed > h2 {
  margin-bottom: 0;
}

/* ----- the floating table of contents ----- */
.toc {
  position: fixed;
  z-index: 500;
  width: 178px;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 8px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px dotted #888;
  background: rgba(0, 0, 0, 0.93);
  font-family: Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
}

.toc[hidden] {
  display: none;
}

.toc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px 5px 8px;
  border-bottom: 1px dotted #888;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  color: #b9ff00;
}

.toc-dragging .toc-bar {
  cursor: grabbing;
}

.toc-bar:focus-visible {
  outline: 1px solid #b9ff00;
  outline-offset: -2px;
}

.toc-shrunk {
  width: auto;
  min-width: 96px;
}

.toc-shrunk .toc-bar {
  border-bottom: 0;
}

.toc-shrunk .toc-list {
  display: none;
}

.toc-min {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid #444;
  background: black;
  color: #999;
  cursor: pointer;
}

.toc-min::before,
.toc-min::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.toc-min::before {
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
}

.toc-min::after {
  left: 6px;
  top: 3px;
  width: 2px;
  height: 8px;
}

.toc-min[aria-expanded="true"]::after {
  display: none;
}

.toc-min:hover {
  border-color: #777;
  color: white;
}

.toc-min:focus-visible {
  border-color: #b9ff00;
  color: #b9ff00;
  outline: none;
}

.toc-list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.toc-list li[hidden] {
  display: none;
}

.toc-list a {
  display: block;
  padding: 3px 8px 3px 10px;
  border-left: 2px solid transparent;
  color: #ddd;
  text-decoration: none;
}

.toc-list a:hover,
.toc-list a:focus-visible {
  color: white;
  background: #1c1c1c;
  outline: none;
}

.toc-list a.toc-here {
  border-left-color: #b9ff00;
  color: #b9ff00;
}

.toc-top a {
  margin-top: 3px;
  border-top: 1px dotted #444;
  color: #888;
}

@media (pointer: coarse) {
  .toc-min { width: 24px; height: 24px; }
  .toc-min::before { left: 7px; top: 10px; }
  .toc-min::after { left: 10px; top: 7px; }
  .toc-list a { padding-top: 7px; padding-bottom: 7px; }
}

@media print {
  .toc { display: none !important; }
}

/* the "observe another subject" entry: set apart at the bottom and made to glow */
.toc-list .toc-cta {
  margin: 6px 6px 4px;
}

.toc-list .toc-cta a {
  position: relative;
  padding: 7px 8px 7px 9px;
  border: 1px solid #b9ff00;
  border-left-width: 1px;
  color: #b9ff00;
  background: rgba(185, 255, 0, 0.07);
  animation: toc-glow 2.2s ease-in-out infinite;
}

.toc-list .toc-cta a::after {
  content: "\00a0>";
  animation: toc-nudge 1.1s steps(2, end) infinite;
}

.toc-list .toc-cta a:hover,
.toc-list .toc-cta a:focus-visible {
  color: black;
  background: #b9ff00;
}

.toc-list .toc-cta a.toc-here {
  border-left-color: #b9ff00;
  color: #b9ff00;
}

@keyframes toc-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(185, 255, 0, 0); background-color: rgba(185, 255, 0, 0.05); }
  50% { box-shadow: 0 0 9px rgba(185, 255, 0, 0.75); background-color: rgba(185, 255, 0, 0.2); }
}

@keyframes toc-nudge {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .toc-list .toc-cta a { animation: none; background: rgba(185, 255, 0, 0.14); }
  .toc-list .toc-cta a::after { animation: none; }
}

/* the hover colour has to beat the glow animation, which would otherwise hold the background */
.toc-list .toc-cta a:hover,
.toc-list .toc-cta a:focus-visible {
  animation: none;
  box-shadow: 0 0 9px rgba(185, 255, 0, 0.75);
  background: #b9ff00;
  color: black;
}

/* phones and other small screens: no floating box at all */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .toc { display: none !important; }
}

/* the quiet link under the title that leads down to "observe another subject" */
.outside-ref {
  margin-bottom: 8px;
}

.outside-jump {
  margin: 0 0 22px;
  font-size: 11px;
  text-align: center;
}

.outside-jump a {
  display: inline-block;
  color: #b9ff00;
  text-decoration: none;
  border-bottom: 1px dotted #b9ff00;
  /* room around the words, so the green fill on hover reaches past them like the navbar's */
  padding: 3px 7px;
}

.outside-jump a:hover,
.outside-jump a:focus-visible {
  color: black;
  background: #b9ff00;
  outline: none;
}

/* a section not in yet: the name pulses while it is fetched; one with nothing on record is dimmed */
.toc-list a.toc-busy {
  animation: toc-busy 0.9s ease-in-out infinite;
}

.toc-list a.toc-empty {
  color: #666;
}

@keyframes toc-busy {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .toc-list a.toc-busy { animation: none; opacity: 0.6; }
}

/* ----- the contents box, dressed up in the game's own fonts ----- */
.toc {
  width: 214px;
  border-color: #6a6a6a;
  box-shadow: 0 0 0 1px #000, 0 0 14px rgba(185, 255, 0, 0.12);
}

.toc-bar {
  padding: 6px 6px 5px 9px;
  border-bottom: 0;
}

.toc-title {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1;
  color: #b9ff00;
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(185, 255, 0, 0.45);
  white-space: nowrap;
}

/* reading progress: a dotted line that fills in green as you go down */
.toc-meter {
  position: relative;
  height: 0;
  margin: 0 8px;
  border-top: 1px dashed #444;
}

.toc-meter i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  background: #b9ff00;
  box-shadow: 0 0 5px #b9ff00;
}

.toc-shrunk .toc-meter {
  display: none;
}

.toc-list {
  padding: 6px 0 5px;
}

.toc-list a {
  font-family: "RuneScape Chat '07", Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.15;
  padding: 2px 8px 2px 12px;
  border-left-width: 3px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.toc-list a:hover,
.toc-list a:focus-visible {
  color: #2ee0f5;
  background: rgba(46, 224, 245, 0.1);
}

.toc-list a.toc-here {
  color: #b9ff00;
  background: rgba(185, 255, 0, 0.1);
}

.toc-list a.toc-empty {
  color: #777;
}

.toc-top a {
  margin-top: 4px;
  padding-top: 5px;
  color: #999;
}

.toc-list .toc-cta a {
  padding: 6px 8px 6px 9px;
  border-width: 1px;
  text-shadow: none;
}

.toc-list .toc-cta a:hover,
.toc-list .toc-cta a:focus-visible {
  text-shadow: none;
}

/* a section found to have nothing: dimmed, no hover fill, and no longer clickable (the tooltip still explains) */
.toc-list a.toc-empty,
.toc-list a.toc-empty:hover,
.toc-list a.toc-empty:focus-visible {
  color: #666;
  background: none;
  cursor: default;
}

/* it drifts in when it first appears, rather than popping in mid-fade of the page's black cover */
.toc {
  animation: toc-in 1.4s ease-out both;
}

@keyframes toc-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .toc { animation: none; }
}