/* Shared visual identity across myscape's site -- same palette and body
   font as Maintrius (the original single-user desktop tool this product
   grew out of), so the website feels like the same app family. Just the
   one pixel font everywhere (no display/heading font) -- the logo image
   carries the wordmark instead. Font file is served from here (not
   inlined as base64 like Maintrius's local HTML file) so browsers cache
   it across pages instead of re-downloading on every request. */

@font-face {
  font-family: 'RuneScapePlain11';
  src: url('/static/fonts/RuneScapePlain11.otf') format('opentype');
  font-display: swap;
}

:root {
  --bg: #0f0f10;
  --panel: #1d1d1f;
  --panel-translucent: rgba(29, 29, 31, 0.82);
  --panel-2: #262628;
  --border: #3a3a3d;
  --gold: #ff981f;
  --gold-dim: #cf7a17;
  --text: #ece6d8;
  /* --text-dim and --text-muted are both "soft gray" tiers sitting
     halfway between --text (white) and the original, noticeably
     grayer values these used to be (#a8a5a0 and #77746e) -- muted
     enough to still read as secondary text, not flat white, without
     going back to how gray they were before. --text-faint keeps its
     original, darker value: it's only used for input placeholders
     now, which need to stay visually distinct from real (white)
     typed text, not just "a bit softer" than it. */
  --text-dim: #cac6bc;
  --text-muted: #b2ada3;
  --text-faint: #77746e;
  --red: #c05a4c;
  /* Added for Purchase Goals' gear-slot affordability states (green =
     already owned, amber = not owned but affordable right now, red =
     not owned and not affordable / not purchasable at all) -- same
     values Maintrius itself used for the same purpose. */
  --amber: #d9a53c;
  --green: #6fae5a;
  --radius: 0px;
}

* { box-sizing: border-box; }

/* min-height + flex column is what actually pins <footer> (see below) to
   the true bottom of the viewport on a short page (e.g. the dashboard
   with just its two "coming soon" cards) instead of it sitting right
   after the content, wherever that happens to end. .page is the one
   child that grows (flex: 1 0 auto, below) to absorb any leftover
   space above the footer; header/link-banner/footer all keep their
   natural height. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'RuneScapePlain11', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

button, input { font-family: inherit; }

a { color: var(--gold-dim); text-decoration: none; }
a:hover { color: var(--gold); text-decoration: underline; }

/* Generic "looks like a link, is actually a button" treatment -- used all
   over the Purchase Goals page (mode toggles, "+ Add component", "Clear
   slot"/"Cancel", "Clear icon", etc.) for tertiary actions that shouldn't
   compete visually with a real button. Without this, a bare <button
   class="link"> falls back to the browser's native button chrome (a
   white, rounded box), which is what was happening before this rule
   existed -- .nav-side/.footer-linked-note below still win on specificity
   for their own two-class selectors, so this only fills the gap
   everywhere else. */
button.link {
  background: none;
  border: none;
  color: var(--gold-dim);
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

button.link:hover { color: var(--gold); text-decoration: underline; }
button.link:disabled { opacity: 0.5; cursor: default; }

/* Padding lives here rather than on body so the link banner (a sibling
   before .page, see _shell) can sit flush against the very top and
   sides of the viewport and push this content down in normal document
   flow, instead of overlapping or covering it. Bottom padding is
   smaller than it used to be now that a real <footer> (see below)
   follows .page and supplies its own breathing room above the fold. */
.page { padding: 32px 20px 40px; flex: 1 0 auto; }

.wrap { max-width: 880px; margin: 0 auto; }

/* header is a full-width sibling of .page (see _shell), the same
   pattern .link-banner uses, so the darkening gradient behind the
   logo/nav spans the whole viewport rather than being boxed in by
   .page's padding. .header-inner (which doubles as .wrap, for the same
   880px centered column as the rest of the page) holds the actual
   content. */
header {
  padding: 24px 20px 20px;
  margin-bottom: 28px;
  background: linear-gradient(to bottom, rgba(15, 15, 16, 0.82) 0%, rgba(15, 15, 16, 0.35) 65%, rgba(15, 15, 16, 0) 100%);
}

/* Two equal-width rails (1fr each) flank a fixed-width center column,
   which is what actually guarantees the wordmark sits at the exact
   horizontal center of the header regardless of how long "Log in" vs
   "Sign up" (or "Dashboard" vs "Log out") happen to be -- centering
   the flex group as a whole wouldn't do that if the two side labels
   are different widths. The nav links are then pulled in toward the
   middle (see .nav-left/.nav-right below) so they still read as one
   cluster with the logo instead of sitting out at the header's edges. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
}

.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

/* Text wordmark (replaces the old logo image) -- same pixel font as
   the rest of the site, in the site's signature gold/orange. */
.logo {
  margin: 0;
  line-height: 1;
  text-align: center;
}

.logo a {
  color: var(--gold);
  font-size: 28px;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.logo a:hover { color: var(--gold); text-decoration: none; }

.subtitle { color: var(--text-muted); font-size: 15px; margin-top: 6px; }

.nav-side { display: flex; align-items: center; font-size: 15px; }

/* White nav text (distinct from the rest of the site's gold/dim-text
   link styling) so it reads clearly flanking the centered logo over
   the video background. */
.nav-side a, .nav-side button.link {
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}

.nav-side a:hover, .nav-side button.link:hover { color: var(--gold); }

.auth-shell {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel-translucent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 32px 30px;
}

.auth-card h2 {
  font-weight: normal;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 0 24px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 13.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

input[type="email"], input[type="password"], input[type="text"], input[type="number"] {
  background: #100e0b;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 16px;
  width: 100%;
}

/* Kept at its original, more-gray value on purpose (darker than the
   soft --text-dim/--text-muted tiers used elsewhere) -- it's a hint,
   not real content, and needs to read as visually distinct from what
   the player actually types (--text, full white). */
input::placeholder { color: var(--text-faint); }
input:focus { outline: none; border-color: var(--gold-dim); }

/* Number inputs (the combo-builder's component quantity field) would
   otherwise keep the browser's native white up/down spinner glued onto
   the themed box above -- drop it entirely for a plain dark field
   consistent with the rest of the site, rather than a mismatched widget. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* A fully custom flat checkbox (the combo builder's "Always count as
   owned" toggle) -- accent-color alone still leaves the unchecked box
   in the browser's native white/gray, so this replaces it outright with
   the same small dark-square-plus-gold-fill treatment used everywhere
   else on the site (tracker-icon-btn, gear-slot, etc.) instead of an
   unstyled system control. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  background: #100e0b;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #221c10;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus { outline: none; border-color: var(--gold-dim); }

button.primary {
  background: var(--gold);
  color: #221c10;
  border: none;
  border-radius: var(--radius);
  padding: 13px 18px;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}

button.primary:hover { background: #ffab42; }
button.primary:disabled { opacity: 0.5; cursor: default; }

.auth-error {
  display: none;
  background: rgba(192, 90, 76, 0.12);
  border: 1px solid var(--red);
  color: #e8a89e;
  font-size: 14.5px;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.auth-error.show { display: block; }

.auth-switch {
  text-align: center;
  font-size: 14.5px;
  color: var(--text-muted);
  margin-top: 22px;
}

.auth-switch a { color: var(--gold-dim); text-decoration: none; }
.auth-switch a:hover { color: var(--gold); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 14px;
}

.dash-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--panel-translucent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
}

/* Medium-sized icon chip anchoring the left side of each card -- a flat
   square (matching the site's sharp-corner identity) rather than a circle,
   so it reads as a slot in the panel instead of a floating badge. */
.dash-card-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

/* These are the game's actual (tiny, hand-pixelled) item icons, so scale
   them up crisp rather than letting the browser blur them smooth, and
   preserve their aspect ratio instead of stretching them to fill the
   square chip. */
.dash-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.dash-card-body { flex: 1 1 auto; min-width: 0; }

.dash-card h3 {
  font-weight: normal;
  font-size: 17px;
  margin: 0 0 8px;
}

.dash-card .subtitle { margin-top: 0; margin-bottom: 14px; }

/* Site-wide footer (see _footer() in app/pages.py) -- the visual mirror
   of header above: same full-bleed darkening gradient technique, but
   flipped (fading upward, `to top`) and pushed noticeably darker at its
   base than the header ever gets, so it unmistakably reads as a floor
   under the page rather than a second, weaker header. A generous top
   padding keeps that strong color from crowding the linked-note/
   trademark text right at the gradient's darkest point. */
footer {
  flex: 0 0 auto;
  margin-top: 40px;
  padding: 56px 20px 28px;
  background: linear-gradient(to top, rgba(15, 15, 16, 0.94) 0%, rgba(15, 15, 16, 0.5) 55%, rgba(15, 15, 16, 0) 100%);
}

.footer-inner {
  text-align: center;
}

.footer-linked-note {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0 0 10px;
}

/* The "Unlink" button next to the linked note -- a plain inline text
   link, styled to match the site's signature gold link color exactly
   (same color/hover pair as .footer-trademark a below), rather than a
   boxed button, since it's a minor, occasional action sitting inside a
   sentence right next to another inline link. */
.footer-linked-note button.link {
  background: none;
  border: none;
  color: var(--gold-dim);
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

.footer-linked-note button.link:hover { color: var(--gold); text-decoration: underline; }
.footer-linked-note button.link:disabled { opacity: 0.5; cursor: default; }

.footer-unlink-error { max-width: 420px; margin: 0 auto 14px; }

.footer-trademark {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

/* Required attribution, but its two links use the same signature gold
   as the Unlink link above (and every other link sitewide) -- the
   surrounding "is a trademark of" text stays a soft gray so the two
   clickable names stand out in gold. */
.footer-trademark a { color: var(--gold-dim); text-decoration: none; }
.footer-trademark a:hover { color: var(--gold); text-decoration: underline; }

/* Site-wide "link your RuneLite account" banner -- rendered by _shell()
   as a full-bleed block ahead of .page, so it shows on every page (not
   just the dashboard) whenever a logged-in player hasn't linked yet,
   and pushes the rest of the page down rather than covering it. */

.link-banner {
  background: var(--gold);
  color: #221c10;
  padding: 14px 20px;
}

.link-banner-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.link-banner-message {
  font-size: 15px;
  flex: 1 1 320px;
}

.link-banner-btn {
  background: #221c10;
  color: var(--gold);
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  max-width: 100%;
  word-break: break-all;
}

.link-banner-btn:hover { background: #362c1a; }
.link-banner-btn:disabled { opacity: 0.5; cursor: default; }

/* Once clicked, the button's own label becomes the code -- no separate
   reveal area extends the banner. */
.link-banner-btn--code {
  letter-spacing: 0.06em;
}

.link-banner-error {
  max-width: 880px;
  margin: 10px auto 0;
}