/* ===================================================================
   SITE CHROME - values taken from Jagex's oldschool-128.css.
   Image paths point at ../resources/ so nothing is hotlinked from
   runescape.com. Drop these files in there, keeping the names:
       bg2.jpg                  (vine and stone column edges)
       backdrop_745.gif         (parchment body)
       backdrop_765_top.gif     (scroll top cap)
       backdrop_765_bottom.gif  (scroll bottom cap)
   This copy lives one level deeper than the published page, so paths use
   ../resources/ (repo root). The published copy at osrs-pvp-portfolio/
   uses ../resources/; at the repo root it would be resources/.
   =================================================================== */
html, body { height: 100%; }

body {
    background: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: left;
}

p { line-height: 150%; }

/* Outer column. The vine strips are part of this background image. */
.contents {
    padding: 60px 0;   /* black gap above and below the scroll */
}

.page-wrap {
    background: url('../resources/bg2.jpg') repeat-y center top;
    margin: 0 auto;
    overflow-y: hidden;
    padding: 0 50px;
    width: 815px;
}

/* The scroll: repeating parchment with a cap pinned at each end. */
.content {
    background: url('../resources/backdrop_745.gif') repeat-y top center;
    padding: 50px 75px;
    position: relative;
}
.content:before, .content:after {
    background: url('../resources/backdrop_765_top.gif') no-repeat center top;
    content: '';
    height: 50px;
    left: 0;
    position: absolute;
    top: -11px;
    width: 100%;
}
.content:after {
    background: url('../resources/backdrop_765_bottom.gif') no-repeat center bottom;
    bottom: -11px;
    top: auto;
}

/* Article header */
.news-article-header {
    margin: 20px 0;
    overflow: hidden;
    position: relative;
    text-align: left;
}
.news-article-header__title {
    color: black;
    font-size: 23px;
    margin-bottom: 16px;
}
.news-article-header__date {
    color: black;
    display: block;
    font-size: 13px;
}

/* Article body */
.news-article-content {
    color: black;
    font-size: 13px;
    line-height: 15px;
}
.news-article-content ul { list-style: disc; margin: 13px 0 26px 13px; }
.news-article-content a {
    color: #7B4F17;
    font-weight: bold;
    text-decoration: none;
}
.news-article-content a:hover { text-decoration: underline; }

/* Small screens. Not from Jagex's source: the real site is fixed width. */
@media (max-width: 940px) {
    .page-wrap { width: auto; max-width: 100%; padding: 0 12px; background: none; }
    .content { padding: 30px 16px; }
}

/*TEXT*/
    p, ul, ol { font-size: 14px; }
    .news-article-content > p::after { content: ""; display: block; height: 0.8em; }

/*LINE BREAK*/
    #divider {
      background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='9' viewBox='0 0 420 9'><defs><linearGradient id='l' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%234a3a22' stop-opacity='0'/><stop offset='.5' stop-color='%234a3a22' stop-opacity='.6'/><stop offset='1' stop-color='%234a3a22' stop-opacity='0'/></linearGradient></defs><rect x='0' y='4' width='420' height='1' fill='url(%23l)'/><path d='M210 1 L214.5 4.5 L210 8 L205.5 4.5 Z' fill='%234a3a22' opacity='.75'/></svg>") no-repeat center;
      height: 9px;
      margin: 30px auto;
    }

/*HEADING*/
    h1 {
        font-size: 24px;
        color: #FFFFFF;
        text-shadow: 1px 1px #121212;
        text-align: center;
        padding: 20px;
    }

/*TITLE*/
    h3 {
        font-size: 20px;
        color: #000000;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 20px;
        text-shadow: 1px 1px 1px #9e9595;
    }

/*SUBTITLE*/
    h4 {
        font-size: 16px;
        color: #000000;
        padding-top: 30px;
        padding-bottom: 20px;
    }

/* The one h1 in this post reads as black, not the white section style. */
    .news-article-content h1 {
        color: #000000;
        text-shadow: 1px 1px 1px #9e9595;
    }

  :root {
    /* Self-contained SVG traces of Jagex's PNGs, matched to the screenshot.
       The originals live on their CDN and are dropped in here instead, since
       external requests fail in sandboxed previews and offline copies:
         Up-Arrow.png / Down-Arrow.png  .../2025-09-23/
         Border-3.png                   .../2025-00-00/                    */
    --up-arrow:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23e2b878'/><stop offset='.28' stop-color='%23c9a069'/><stop offset='.72' stop-color='%23b1894f'/><stop offset='1' stop-color='%23a37c41'/></linearGradient><clipPath id='c'><path d='M13 1L25 13v6h-7v8H8v-8H1v-6z'/></clipPath></defs><path d='M13 1L25 13v6h-7v8H8v-8H1v-6z' fill='url(%23g)' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/><g clip-path='url(%23c)'><path d='M13 1L25 13v6h-7v8H8v-8H1v-6z' fill='none' stroke='%23e9cd9a' stroke-width='2.2' opacity='.5'/></g></svg>");
    --down-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><g transform='rotate(180 13 14)'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23e2b878'/><stop offset='.28' stop-color='%23c9a069'/><stop offset='.72' stop-color='%23b1894f'/><stop offset='1' stop-color='%23a37c41'/></linearGradient><clipPath id='c'><path d='M13 1L25 13v6h-7v8H8v-8H1v-6z'/></clipPath></defs><path d='M13 1L25 13v6h-7v8H8v-8H1v-6z' fill='url(%23g)' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/><g clip-path='url(%23c)'><path d='M13 1L25 13v6h-7v8H8v-8H1v-6z' fill='none' stroke='%23e9cd9a' stroke-width='2.2' opacity='.5'/></g></g></svg>");
    --poll-border: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='0.5' y='0.5' width='17' height='17' fill='none' stroke='%230e0e0c'/><rect x='1.5' y='1.5' width='15' height='15' fill='none' stroke='%231c1c19'/><rect x='2.5' y='2.5' width='13' height='13' fill='none' stroke='%23232320'/><rect x='3.5' y='3.5' width='11' height='11' fill='none' stroke='%232e2e2b'/><rect x='4.5' y='4.5' width='9' height='9' fill='none' stroke='%233c3c39'/><rect x='5.5' y='5.5' width='7' height='7' fill='none' stroke='%2352534f'/></svg>");
  }

  .rankContainer {
    background: #494034;
    width: 650px;
    border-image: var(--poll-border) 6 / 6px 6px 6px 6px / 6px 6px 6px 6px
    round;
    padding: 8px;
    margin: 24px auto;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: small;
    vertical-align: middle;
    color: #ffffff;
    text-shadow: 1px 1px #121212;
  }

  .rankContainer p { margin: 0 0 .6em; }  /* the news page's own paragraph rhythm */

  /* Bulleted notes under the question. Not from Jagex's source. */
  .pollNotes {
    margin: 0 0 1em;
    padding-left: 2.4em;
    list-style: disc;
    line-height: 1.45;
  }
  .pollNotes li { margin-bottom: 2px; }

  /* Matches the grey Jagex uses for the Skip option in their single-choice box. */
  .voteTag { color: #acabab; }

  /* Dev time estimate, on its own line under the title. Not from Jagex's source. */
  .estTime { display: block; color: #acabab; }

  /* Proposal links. Not from Jagex's source. */
  .rankContent .sep { color: #9c8f7c; padding: 0 4px; }
  /* Scoped to .rankItem so it outranks the article's own link rule
     (.news-article-content a), which the poll box otherwise inherits. */
  .rankItem .proposalLink {
    color: #e0c8b1;
    font-weight: normal;
    text-decoration: none;
    text-underline-offset: 2px;
  }
  .rankItem .proposalLink:hover,
  .rankItem .proposalLink:focus-visible {
    color: #ffffff;
    text-decoration: underline;
  }
  .rankItem .proposalLink:focus-visible { outline: 2px solid #ff9424; outline-offset: 2px; }

  /* Drag handle and rank marker. Only the top row carries a number.
     Not from Jagex's source. */
  .rowLead {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .grip { display: flex; color: #7d7263; transition: color 120ms ease; }
  .grip svg { display: block; }
  .rankItem:hover .grip,
  .rankItem.dragging .grip { color: #b8aa94; }
  .rankNum {
    width: 18px;
    text-align: center;
    font-weight: bold;
    color: #FF981F;
  }
  /* The bottom three slots are marked regardless of which rows sit there. */
  .rankNum.slotMark { color: #acabab; font-weight: normal; }

  /* Example result box. Not part of the in-game poll. */
  .resultBox .resultLine {
    font-size: 14px;
    padding: 6px;
    background-color: #4e4334;
    line-height: 1.4;
  }
  .resultName { color: #FF981F; font-weight: bold; }
  .resultNote { display: block; margin-top: 1.4em; color: #ffffff; }

  .rankList {
    list-style: none; padding: 0; margin: 0;
    text-shadow: 1px 1px #121212;
  }

  /* The live page indents the list by roughly 1em. That comes from the news
     article's list styling rather than the poll CSS, so it is set explicitly
     here to match the screenshot. Set to 0 for the widget in isolation. */
  .rankList { padding-left: 13px; }

  .rankItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px;
    color: #ff9424;
    text-shadow: 1px 1px #121212;
    will-change: transform; /* helps during FLIP */
  }

  /* Alternate by current visual position */
  .rankItem:nth-child(odd)  { background-color: #4e4334; }
  .rankItem:nth-child(even) { background-color: #554a3c; }

  .rankContent { flex: 1 1 auto; line-height: 1.3; }

  /* Click and drag to reorder. Not from Jagex's source. */
  .rankItem {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: transform 120ms ease;
  }
  .rankItem.dragging {
    cursor: grabbing;
    position: relative;
    z-index: 2;
    transition: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  }
  .rankItem a, .rankItem button { cursor: pointer; }

  /* Divider between the draggable part of the row and the arrow controls.
     Nothing right of this line starts a drag. Not from Jagex's source. */
  .rankControls {
    align-self: stretch;
    align-items: center;
    margin: -6px -6px -6px 0;      /* cancel the row padding on three sides */
    padding: 0 6px 0 10px;         /* and put the right inset back visually */
    border-left: 1px solid #6d6151;
    cursor: default;
  }
  .rankControls { display: inline-flex; gap: 6px; }

  /* Arrow buttons (image-only) */
  .moveBtn {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 140ms ease, opacity 140ms ease, filter 140ms ease;
  }

  .moveBtn:hover  { transform: scale(1.06); filter: brightness(1.1); }
  .moveBtn:active { transform: scale(0.97); filter: brightness(0.95); }
  .moveBtn:disabled { opacity: 0.45; cursor: not-allowed; }
  .moveBtn:focus-visible { outline: 2px solid #ff9424; outline-offset: 2px; }

  .upBtn   { background-image: var(--up-arrow); }
  .downBtn { background-image: var(--down-arrow); }

  @media (prefers-reduced-motion: reduce) {
    .moveBtn { transition: none; }
    .rankItem { transition: none !important; }
  }

/* Additions, not in Jagex's source. Delete this block for a byte-exact copy. */
@media (max-width: 720px) {
  .rankContainer { width: auto; max-width: calc(100% - 48px); }
}