/* ==============================================================
   YELLONIA - style.css

   CONTENTS (same order as index.html)
     1. SETTINGS ......... colors, font, sizes. Change these first.
     2. BASE ............. page-wide defaults
     3. TOPBAR ........... the bar itself + flag stripe
     4. LOGO ............. emblem + "Yellonia" text
     5. NAV LINKS ........ the top-level items
     6. DROPDOWNS ........ the menus that open under each item
     7. MOBILE MENU ...... what happens on small screens
     8. PAGE CONTENT ..... placeholder area under the topbar
   ============================================================== */


/* ---------- 1. SETTINGS ---------- */
:root {
  /* Colors (the last four are sampled from the coat of arms) */
  --bar-bg:        #111214;   /* topbar background */
  --menu-bg:       #0a0b0c;   /* dropdown background */
  --page-bg:       #1a1b1e;   /* page background */
  --text:          #dbdee1;   /* normal text */
  --text-dim:      #949ba4;   /* quieter text */
  --gold:          #bed215;   /* accent: hover, current page, Join button */
  --flag-lime:     #bed215;   /* flag yellow */
  --flag-blue:     #369cd3;   /* flag blue */
  --flag-green:    #5bbf49;   /* flag green */

  /* Type */
  --font:          "Roboto", "Arial Narrow", Arial, sans-serif;
  --nav-size:      1.0625rem; /* top-level link size */
  --menu-size:     0.75rem;      /* dropdown link size */

  /* Sizes */
  --bar-height:    64px;      /* topbar height */
  --logo-size:     44px;      /* emblem width/height */
  --site-width:    1200px;    /* max width of the bar's contents */
  --side-gap:      20px;      /* space at the left/right edges */
  --nav-gap:       4px;       /* space between top-level items */
  --menu-width:    220px;     /* dropdown width */
  --stripe:        2px;       /* thickness of EACH flag stripe (0 = none) */
}


/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ---------- 3. TOPBAR ---------- */
.topbar {
  position: sticky;           /* stays at the top while scrolling; use "static" to turn off */
  top: 0;
  z-index: 100;
  background: var(--bar-bg);
}

/* Flag stripe under the bar: lime / blue / green, like the emblem */
.topbar::after {
  content: "";
  display: block;
  height: calc(var(--stripe) * 3);
  background: linear-gradient(
    to bottom,
    var(--flag-lime)  0 33.33%,
    var(--flag-blue)  33.33% 66.66%,
    var(--flag-green) 66.66% 100%
  );
}

.topbar-inner {
  max-width: var(--site-width);
  min-height: var(--bar-height);
  margin: 0 auto;
  padding: 0 var(--side-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}


/* ---------- 4. LOGO ---------- */
.logo {
  display: flex;
  align-items: center;
  min-height: var(--bar-height);
  gap: 12px;
  text-decoration: none;
}

.logo img {
  width: var(--logo-size);
  height: var(--logo-size);
  display: block;
}

.logo-text {                  /* delete the <span> in the HTML to show the emblem alone */
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}


/* ---------- 5. NAV LINKS ---------- */
.nav-list,
.dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav-list > li { position: relative; }

.nav-list > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--bar-height);
  padding: 0 12px;
  font-size: var(--nav-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.nav-list > li > a:hover,
.nav-list > li:focus-within > a,
.nav-list > li > a.current {
  color: var(--gold);
}

/* Small arrow next to items that have a dropdown */
.has-dropdown > a::after {
  content: "";
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  opacity: 0.7;
}

/* Gold button style (used on "Join") */
.nav-list > li > a.nav-cta {
  height: 38px;
  margin-left: 8px;
  padding: 0 16px;
  background: var(--gold);
  color: #14202b;
  border-radius: 3px;
}

.nav-list > li > a.nav-cta:hover,
.nav-list > li:focus-within > a.nav-cta {
  color: #14202b;
  background: #ffe04a;
}


/* ---------- 6. DROPDOWNS ---------- */
.dropdown {
  display: none;              /* hidden until its parent is hovered or focused */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--menu-width);
  padding: 6px 0;
  background: var(--menu-bg);
  border-top: 2px solid var(--gold);
  box-shadow: 0 12px 24px rgba(3, 10, 18, 0.5);
}

/* Opens on mouse hover AND on keyboard Tab (no JavaScript needed) */
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  display: block;
}

/* The last menu opens leftwards so it doesn't run off the screen */
.nav-list > li:last-child > .dropdown {
  left: auto;
  right: 0;
}

.dropdown a {
  display: block;
  padding: 9px 18px;
  font-size: var(--menu-size);
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background: rgba(245, 207, 10, 0.12);
  color: var(--gold);
}

/* Small heading inside a dropdown (not a link) */
.dropdown-label {
  padding: 10px 18px 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* ---------- 7. MOBILE MENU ---------- */
/* The checkbox + "Menu" label are hidden on wide screens */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-button { display: none; }

@media (max-width: 1120px) {  /* <- screen width where the bar collapses into "Menu" */

  .nav-button {
    display: block;
    padding: 8px 14px;
    font-weight: 600;
    color: var(--text);
    border: 1px solid var(--text-dim);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
  }

  .nav-toggle:focus-visible + .nav-button {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .nav-toggle:checked + .nav-button {
    color: var(--gold);
    border-color: var(--gold);
  }

  /* Nav is hidden until "Menu" is tapped */
  .nav {
    display: none;
    width: 100%;
    padding-bottom: 12px;
    max-height: calc(100vh - var(--bar-height));
    overflow-y: auto;
  }

  .nav-toggle:checked ~ .nav { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list > li { border-top: 1px solid rgba(169, 188, 203, 0.2); }

  .nav-list > li > a {
    height: auto;
    padding: 12px 4px;
  }

  .has-dropdown > a::after { display: none; }

  /* On phones the sub-links are simply listed under each heading */
  .dropdown,
  .nav-list > li:last-child > .dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 8px 14px;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .dropdown a {
    padding: 8px 4px;
    color: var(--text-dim);
  }

  .nav-list > li > a.nav-cta {
    display: inline-flex;
    height: 38px;
    margin: 12px 0 8px;
    padding: 0 16px;
  }
}


/* ---------- 8. PAGE CONTENT (placeholder) ---------- */
.page {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 48px var(--side-gap);
}

.page h1 {
  margin: 0 0 8px;
  font-size: 2.25rem;
  line-height: 1.15;
}

.page p {
  margin: 0;
  color: var(--text-dim);
}

/* ---------- 9. HOMEPAGE: HERO (image with centered title + text) ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--bar-height) - var(--stripe) * 3);  /* full window height, minus the topbar and its stripe */
  display: flex;
  align-items: center;                    /* up/down position of the text: flex-start, center, flex-end */
  justify-content: center;
   padding: 96px var(--side-gap);
}

/* The image fills the whole hero, behind the text */
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* fills the box, cropping instead of stretching */
  object-position: center 60%;            /* which part stays visible when cropped */
}

/* Dark tint over the image so the text stays readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.45);       /* last number = darkness, 0 (none) to 1 (black) */
}

.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero-text h1 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 4.5rem); /* smallest, scales with screen width, largest */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.hero-text p {
  max-width: 44ch;
  margin: 16px auto 0;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  color: #ffffff;
}
/* ---------- 10. TOPBAR HIDE ON SCROLL ---------- */
.topbar {
  transition: transform 0.3s ease;        /* speed of the slide */
}

.topbar-hidden {
  transform: translateY(-100%);           /* slides the bar up out of view */
}

html {
  scroll-behavior: smooth;                /* makes the Explore button glide instead of jump */
}

@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
  html { scroll-behavior: auto; }
}


/* ---------- 11. EXPLORE BUTTON ---------- */
.hero-explore {
  position: absolute;
  left: 50%;
  bottom: 28px;                           /* distance from the bottom of the image */
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* The down arrow */
.hero-explore::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.hero-explore:hover { color: var(--gold); }

.hero-explore:hover::after {
  transform: translateY(4px) rotate(45deg);   /* arrow nudges down on hover */
}

/* ---------- 12. SCROLLBAR (hidden) ---------- */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

/* ---------- 13. STATS STRIP ---------- */
.stats {
  background: var(--bar-bg);
}

.stats-list {
  list-style: none;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 32px var(--side-gap);
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* number of stats per row */
  gap: 24px;
  text-align: center;
}

.stats-list strong {                      /* the number */
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;     /* equal-width digits so the row doesn't wobble while counting */
}

.stats-list span {                        /* the label under it */
  color: var(--text-dim);
}

@media (max-width: 700px) {
  .stats-list { grid-template-columns: repeat(3, 1fr); }
}


/* ---------- 14. PILLARS (the two big buttons) ---------- */
.pillars h2 {
  margin: 0 0 24px;
  font-size: 2rem;
  line-height: 1.15;
}

/* Section 3 fills the whole window; the two rows of buttons share the spare height */
.pillars {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 16px;
}

.pillar-grid {
  flex: 2;                                /* big buttons take two thirds of the spare height */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.pillar {
  display: flex;
  flex-direction: column;
  min-height: 280px;                      /* height of each button */
  padding: 32px;
  background: var(--bar-bg);
  border-top: 4px solid var(--pillar-color);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease;
}

.pillar-government { --pillar-color: var(--flag-blue); }   /* each button's accent color */
.pillar-military   { --pillar-color: var(--flag-green); }

.pillar h3 {
  margin: 0 0 12px;
  font-size: 2.25rem;
  line-height: 1.1;
}

.pillar p {
  max-width: 40ch;
  margin: 0 0 24px;
  color: var(--text-dim);
}

.pillar-go {                              /* the line at the bottom of each button */
  margin-top: auto;
  font-weight: 600;
  color: var(--pillar-color);
}

.pillar:hover {
  background: #0a0b0c;
}

.pillar:hover .pillar-go {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { min-height: 220px; }
}


/* Smaller row of links under the two big buttons */
.minor-grid {
  flex: 1;                                /* small buttons take one third of the spare height */
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* number of small buttons per row */
  gap: 24px;
  margin-top: 24px;                       /* space between the big row and the small row */
}

.minor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;                      /* height of each small button */
  padding: 20px 24px;
  background: var(--bar-bg);
  border-left: 4px solid var(--gold);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease;
}

.minor h3 {
  margin: 0 0 4px;
  font-size: 1.375rem;
  line-height: 1.2;
}

.minor p {
  margin: 0;
  color: var(--text-dim);
}

.minor:hover { background: #0a0b0c; }

.minor:hover h3 { color: var(--gold); }

@media (max-width: 700px) {
  .minor-grid { grid-template-columns: 1fr; }
}


/* ---------- 15. FOOTER ---------- */
/* Keeps the footer at the bottom of the window on short pages */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

.footer {
  background: var(--bar-bg);
  color: var(--text-dim);
  font-size: 1rem;
}

/* Flag stripe on top of the footer, mirroring the topbar */
.footer::before {
  content: "";
  display: block;
  height: calc(var(--stripe) * 3);
  background: linear-gradient(
    to bottom,
    var(--flag-lime)  0 33.33%,
    var(--flag-blue)  33.33% 66.66%,
    var(--flag-green) 66.66% 100%
  );
}

.footer-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 36px var(--side-gap) 28px;   /* top, sides, bottom */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 48px;
}

.footer-brand { max-width: 320px; }

.footer-brand p { margin: 10px 0 0; }

/* Community column: a small logo before each link. Each logo file is used as a shape and
   filled with the link's color, so it's grey normally and gold on hover. */
.footer-links .footer-social a { display: inline-flex; align-items: center; gap: 8px; }

.social-icon {
  width: 18px;                          /* logo size */
  height: 18px;
  display: inline-block;
  flex: none;
  background: currentColor;
  opacity: 0.7;                         /* how faded the logo is; 1 = same as the text */
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

.footer-links .footer-social a:hover .social-icon { opacity: 1; }

.social-discord { --icon: url("images/Discordthingy.png"); }   /* same file as the login button */
.social-roblox  { --icon: url("images/Robloxthingy.png"); }
.social-youtube { --icon: url("images/YouTubethingy.png"); }
.social-tiktok  { --icon: url("images/Tiktokthingy.png"); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;                       /* second number = space between columns */
}

.footer-links h2 {                      /* column headings */
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  display: block;
  padding: 4px 0;
  text-decoration: none;
  color: var(--text-dim);
}

.footer-links a:hover { color: var(--gold); }

.footer-bottom {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 16px var(--side-gap) 24px;
  border-top: 1px solid rgba(148, 155, 164, 0.2);
  font-size: 0.875rem;
}

.footer-bottom p { margin: 0; }


/* ---------- 16. ABOUT + CAROUSEL (the second screen, under the stats strip) ---------- */
.about {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 135px);        /* fills the window; 135px = the height of the stats strip */
  padding-bottom: 16px;
}

.about h2 {
  margin: 0 0 12px;
  font-size: 2rem;
  line-height: 1.15;
}

.about .about-text {
  max-width: 75ch;                        /* keeps lines a comfortable reading length */
  margin: 0 0 28px;
  font-size: 1.125rem;
  color: var(--text);
}

/* The carousel takes all the height left under the text */
.carousel {
  position: relative;
  flex: 1;
  min-height: 280px;                      /* smallest the carousel can get */
  display: flex;
}

/* The row of slides: scrolls sideways and snaps to one slide at a time */
.carousel-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;                         /* one slide fills the whole carousel */
  margin: 0;
  scroll-snap-align: start;
}

.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* fills the slide, cropping instead of stretching */
}

.carousel-slide figcaption {              /* the caption bar at the bottom of each slide */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 24px 16px;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.85), rgba(8, 9, 11, 0));
  color: #ffffff;
}

/* Previous / next arrows */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 9, 11, 0.6);
  cursor: pointer;
}

.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }

.carousel-button::before {                /* the arrow shape */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.carousel-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.carousel-next::before { transform: translate(-70%, -50%) rotate(45deg); }

.carousel-button:hover { background: var(--gold); }

.carousel-button:hover::before { border-color: #111214; }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* "Continue" link with a down arrow, at the bottom of the second screen */
.next-section {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;                       /* space between the carousel and the link */
  padding: 8px 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text);
}

.next-section::after {                    /* the down arrow */
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.next-section:hover { color: var(--gold); }

.next-section:hover::after {
  transform: translateY(4px) rotate(45deg);
}


/* ---------- 17. SAFETY (centered text + scrolling logo strip) ---------- */
.safety {
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* space between the text, the logo strip and Continue */
  min-height: 100vh;                      /* fills the whole window */
  padding: 48px 0 16px;
  background: var(--bar-bg);
}

/* The two "auto" margins (here and on Continue below) split the spare height evenly,
   which keeps the emblem, text and logos centered with Continue at the bottom */
.safety-text {
  max-width: 720px;
  margin: auto auto 0;
  padding: 0 var(--side-gap);
  text-align: center;
}

.safety .next-section {
  margin-top: auto;
}

/* The coat of arms above the title */
.safety-emblem {
  display: block;
  width: 112px;                           /* size of the emblem */
  height: 112px;
  margin: 0 auto 24px;                    /* last number = space between the emblem and the title */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.safety-text h2 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 3rem);      /* smallest, scales with screen width, largest */
  line-height: 1.1;
}

.safety-text p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-dim);
}

/* The window the logos scroll through; the mask fades them out at both edges */
.logo-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.logo-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;                        /* without the script, the logos sit in a centered grid */
  justify-content: center;
  gap: 24px 0;
}

.logo-track li {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;                           /* width of each logo's slot */
  height: 96px;                           /* height of each logo's slot */
  margin-right: 48px;                     /* space between logos */
  color: var(--text-dim);
}

.logo-track img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;                    /* logos keep their shape */
}

/* Added by the script once the row has been repeated */
.logo-track-moving {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: logo-scroll 50s linear infinite;   /* 50s = time for one full loop; bigger = slower */
}

.logo-strip:hover .logo-track-moving {
  animation-play-state: paused;           /* pauses while the mouse is over it */
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Visitors who ask for less motion get a still, centered grid instead */
@media (prefers-reduced-motion: reduce) {
  .logo-strip { -webkit-mask-image: none; mask-image: none; }
  .logo-track-moving {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }
  .logo-track-moving li[aria-hidden="true"] { display: none; }
}


/* ---------- 18. JOIN (section 5: background image, centered text, big button) ---------- */
.join {
  position: relative;
  min-height: 100vh;                      /* fills the whole window */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px var(--side-gap);
}

/* The image fills the whole section, behind the text */
.join > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Dark tint over the image so the text stays readable */
.join::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.7);        /* last number = darkness, 0 (none) to 1 (black) */
}

.join-text {
  position: relative;
  z-index: 1;
  max-width: 680px;
  text-align: center;
}

.join-text h2 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 3.5rem);    /* smallest, scales with screen width, largest */
  line-height: 1.1;
  text-wrap: balance;                     /* splits the title into even lines when it wraps */
  color: #ffffff;
}

.join-text p {
  margin: 0 0 36px;
  font-size: 1.1875rem;
  color: #ffffff;
}

/* The big Join button */
.join-button {
  display: inline-block;
  padding: 18px 44px;                     /* size of the button: up/down, then left/right */
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #111214;
  background: var(--gold);
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.join-button:hover,
.join-button:focus-visible {
  transform: scale(1.08);                 /* how much bigger it gets on hover: 1.08 = 8% */
  box-shadow: 0 10px 30px rgba(190, 210, 21, 0.35);
}

/* The smaller Roblox link under the button */
.join-secondary {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  color: #ffffff;
  opacity: 0.85;
}

.join-secondary:hover { opacity: 1; color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .join-button { transition: none; }
}


/* ---------- 19. FADE-IN (section 3's heading and buttons appear one after another) ---------- */
/* Hidden until the section scrolls into view (the script adds these classes) */
.fade-waiting .fade-item {
  opacity: 0;
  transform: translateY(16px);            /* starts slightly lower, then rises into place */
}

.fade-waiting.fade-go .fade-item {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease, background 0.2s ease;   /* 0.6s = length of each fade */
  transition-delay: calc(var(--fade-order) * 150ms), calc(var(--fade-order) * 150ms), 0s;   /* 150ms = gap between items */
}


/* ---------- 20. INNER PAGES: BANNER + SECTION LINKS ---------- */
/* Used at the top of pages like armed-forces.html */

/* Banner: a shorter version of the homepage hero */
.page-banner {
  position: relative;
  min-height: 42vh;                       /* height of the banner */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px var(--side-gap);
}

.page-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;            /* which part of the image stays visible */
}

.page-banner::after {                     /* dark tint so the title stays readable */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.6);        /* last number = darkness */
}

.page-banner-text {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.page-banner-text h1 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.1;
}

.page-banner-text p {
  margin: 12px 0 0;
  font-size: 1.1875rem;
}

/* Row of links that jump to each section; pinned under the topbar */
.subnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--menu-bg);
  border-bottom: 1px solid rgba(148, 155, 164, 0.2);
  transition: top 0.3s ease;
}

/* While the topbar is showing, the row sits just under it */
.topbar:not(.topbar-hidden) ~ main .subnav {
  top: calc(var(--bar-height) + var(--stripe) * 3);
}

.subnav ul {
  list-style: none;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--side-gap);
  display: flex;
  gap: 4px;
  overflow-x: auto;                       /* on phones the row scrolls sideways */
  scrollbar-width: none;
}

.subnav a {
  display: block;
  padding: 14px 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
}

.subnav a:hover { color: var(--gold); }

.page-intro {
  padding-bottom: 0;
}

.page-intro p {
  max-width: 75ch;
  font-size: 1.125rem;
  color: var(--text);
}


/* ---------- 21. GROUPS + UNIT CARDS ---------- */
/* A "group" is one branch (Army, Navy...); a "unit" is one card inside it */

.group {
  scroll-margin-top: 70px;                /* where a jump link stops, leaving room for the pinned bars */
}

.group-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 56px var(--side-gap) 8px;      /* top, sides, bottom */
}

/* Space between the last branch and the Join section */
.group + .join {
  margin-top: 72px;
}

/* Each branch's accent color */
.group-army    { --group-color: var(--flag-green); }
.group-special { --group-color: var(--flag-lime); }
.group-navy    { --group-color: var(--flag-blue); }
.group-air     { --group-color: #8fd0f0; }
.group-police  { --group-color: #dbdee1; }

.group h2 {
  margin: 0 0 8px;
  padding-left: 16px;
  border-left: 5px solid var(--group-color);   /* the colored bar beside the branch name */
  font-size: 2.25rem;
  line-height: 1.1;
}

.group-text {
  max-width: 70ch;
  margin: 0 0 24px;
  font-size: 1.125rem;
  color: var(--text-dim);
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));   /* 280px = smallest card width */
  gap: 20px;
}

.unit {
  padding: 24px;
  background: var(--bar-bg);
  border-top: 3px solid var(--group-color);
}

.unit h3 {
  margin: 0 0 8px;
  font-size: 1.375rem;
  line-height: 1.2;
}

.unit p {
  margin: 0;
  color: var(--text-dim);
}

.unit .unit-motto {
  margin-bottom: 8px;
  font-style: italic;
  color: var(--group-color);
}

.unit-parts {                             /* the list of sub-units on a card */
  margin: 14px 0 0;
  padding: 12px 0 0 18px;
  border-top: 1px solid rgba(148, 155, 164, 0.2);
  color: var(--text);
}

.unit-parts li { padding: 2px 0; }

/* Shorter version of the Join section, for the bottom of inner pages */
.join-short {
  min-height: 56vh;
}


/* ---------- 22. GOVERNMENT PAGE: COLORS, SUB-HEADINGS, PEOPLE CARDS ---------- */

/* Each part's accent color */
.group-emperor    { --group-color: var(--flag-lime); }
.group-cabinet    { --group-color: var(--flag-blue); }
.group-parliament { --group-color: var(--flag-green); }
.group-court      { --group-color: #dbdee1; }
.group-ministries { --group-color: #8fd0f0; }

.group-sub {                              /* smaller heading inside a part, e.g. "The Viceroys" */
  margin: 36px 0 8px;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* A row of people cards; filled in by government.js */
.people {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 104px;                      /* holds the space while the names load */
}

.person {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 260px;
  padding: 16px 24px 16px 16px;
  background: var(--bar-bg);
  border-left: 4px solid var(--group-color);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease;
}

.person:hover { background: #0a0b0c; }

.person img {
  width: 72px;                            /* size of the avatar picture */
  height: 72px;
  border-radius: 50%;
  background: var(--page-bg);
  object-fit: cover;
}

.person-text {
  display: flex;
  flex-direction: column;
}

.person-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.person-title {
  color: var(--group-color);
}

.people-note {                            /* shown when a list is empty or can't be loaded */
  margin: 0;
  align-self: center;
  color: var(--text-dim);
}

.people-note a { color: var(--gold); }


/* ---------- 23. PARLIAMENT SEAT CHART ---------- */
.chamber {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 64px;
  padding: 32px;
  background: var(--bar-bg);
}

/* The chart itself: left side, aisle, right side */
.chamber-seats {
  --seat-size: 28px;                      /* size of each seat */
  --seat-space: 7px;                      /* space between seats */
  display: flex;
  min-height: calc(10 * var(--seat-size) + 9 * var(--seat-space));   /* holds the space while it loads */
}

.chamber-side {
  display: grid;
  grid-template-columns: repeat(4, var(--seat-size));
  grid-template-rows: repeat(10, var(--seat-size));
  gap: var(--seat-space);
}

.chamber-aisle {
  width: 56px;                            /* width of the central aisle */
}

/* One seat. Plain = not in use (grayed out) */
.seat {
  display: block;
  width: var(--seat-size, 18px);
  height: var(--seat-size, 18px);
  border-radius: 3px;
  background: rgba(148, 155, 164, 0.16);
}

.seat-open {                              /* open but not held: an outline */
  background: none;
  box-shadow: inset 0 0 0 2px rgba(148, 155, 164, 0.7);
}

/* .seat-held gets its party color from the script */

/* Fade-in: seats appear one after another, nearest the aisle first */
.chamber-waiting .seat {
  opacity: 0;
  transform: scale(0.6);
}

.chamber-waiting.chamber-go .seat {
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;              /* length of each seat's fade */
  transition-delay: calc(var(--seat-order) * var(--seat-gap, 12ms)); /* gap between seats is FADE_GAP in government.js */
}

/* The key beside the chart */
.chamber-key {
  flex: 1;
  min-width: 240px;
}

.chamber-key h3 {
  margin: 0 0 12px;
  font-size: 1.375rem;
}

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

.chamber-parties li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 155, 164, 0.2);
}

.chamber-party-name { flex: 1; }

.chamber-party-seats {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chamber-note {
  margin: 14px 0 0;
  color: var(--text-dim);
}

@media (max-width: 480px) {
  .chamber { padding: 20px; }
  .chamber-seats { --seat-size: 18px; --seat-space: 5px; }
  .chamber-aisle { width: 28px; }
}


/* ---------- 24. NEWS DIRECTORY (news.html) ---------- */
.news-loading {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 48px var(--side-gap);
  color: var(--text-dim);
}

.news-preview {                           /* banner shown while preview articles are on screen */
  max-width: calc(var(--site-width) - 2 * var(--side-gap));
  margin: 24px auto 0;
  padding: 12px 16px;
  box-sizing: border-box;
  border-left: 4px solid var(--gold);
  background: var(--bar-bg);
  color: var(--text-dim);
}

.news-section-title {
  margin: 0 0 20px;
  font-size: 2rem;
  line-height: 1.15;
}

.news-empty { color: var(--text-dim); }

/* Story cards in the directory */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));   /* 260px = smallest card width */
  gap: 24px;
}

.news-section .story-card {
  display: flex;
  flex-direction: column;
  background: var(--bar-bg);
}

.news-section .story-card .story-text { padding: 16px 18px 18px; }

.news-badge {                             /* outlet name + icon above a headline */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}

.news-badge-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}

/* Outlet cards */
.outlet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.outlet-card {
  display: flex;
  flex-direction: column;
  background: var(--bar-bg);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease;
}

.outlet-card:hover { background: #0a0b0c; }

.outlet-card-cover {                      /* the outlet's cover image, or its accent color */
  height: 110px;
  background: var(--accent);
  overflow: hidden;
}

.outlet-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outlet-card-body {
  position: relative;
  padding: 44px 20px 20px;
}

.outlet-card-icon {                       /* the square icon, overlapping the cover */
  position: absolute;
  top: -32px;
  left: 20px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 3px solid var(--bar-bg);
  background: var(--bar-bg);
  object-fit: cover;
}

.outlet-card h3 {
  margin: 0 0 4px;
  font-size: 1.375rem;
}

.outlet-card-tagline {
  margin: 0 0 10px;
  color: var(--text-dim);
}

.outlet-card-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--accent);
}

/* "Run your own news outlet" */
.news-start {
  scroll-margin-top: 130px;
  padding-bottom: 72px;
}

.news-start h2 {
  margin: 0 0 12px;
  font-size: 2rem;
}

.news-start p {
  max-width: 70ch;
  margin: 0 0 12px;
  font-size: 1.125rem;
}

.news-start-soon { color: var(--gold); font-weight: 600; }

.news-section { scroll-margin-top: 130px; }

/* Not found / could not load */
.news-notice {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px var(--side-gap);
  text-align: center;
}

.news-notice h1 { margin: 0 0 12px; font-size: 2.25rem; }
.news-notice p { color: var(--text-dim); }
.news-notice-link { color: var(--gold); font-weight: 600; }


/* ---------- 25. NEWS OUTLET PAGES (outlet.html, article.html): the newspaper look ---------- */
/* Light "paper" colors, used only inside these pages */
.paper {
  --paper:      #fbfbf9;                  /* page background */
  --ink:        #15171a;                  /* headlines and body text */
  --ink-soft:   #5b6068;                  /* summaries, dates, captions */
  --rule:       #dcdad4;                  /* thin dividing lines */
  --serif:      "Source Serif 4", Georgia, "Times New Roman", serif;
  background: var(--paper);
  color: var(--ink);
  padding-bottom: 72px;
}

.paper a { color: inherit; }

.paper .news-preview {                    /* preview banner, on the light background */
  background: #efeee9;
  color: var(--ink-soft);
  border-left-color: var(--accent);
}

/* Masthead: the outlet's name across the top */
.masthead {
  position: relative;
  border-bottom: 3px double var(--ink);
}

.masthead-inner {
  position: relative;
  z-index: 1;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 18px var(--side-gap) 26px;
  text-align: center;
}

.masthead-top {                           /* date on the left, link back to Yellonia News on the right */
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.masthead-title {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);  /* size of the outlet's name */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.masthead-icon {
  width: 0.9em;
  height: 0.9em;
  border-radius: 8px;
  object-fit: cover;
}

.masthead-tagline {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

/* With a cover image, the masthead sits on the image with a dark tint */
.masthead-cover { color: #ffffff; border-bottom-color: var(--accent); }

.masthead-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.masthead-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 9, 11, 0.6);        /* darkness of the tint */
}

.masthead-cover .masthead-inner { z-index: 2; padding-top: 18px; padding-bottom: 40px; }
.masthead-cover .masthead-top { color: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(255, 255, 255, 0.25); }
.masthead-cover .masthead-tagline { color: rgba(255, 255, 255, 0.85); }
.masthead-cover .masthead-title { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }

/* Row of section links under the masthead */
.paper-sections {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 26px;
  padding: 12px var(--side-gap);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-weight: 600;
  color: var(--ink);
}

.paper-sections a { text-decoration: none; }
.paper-sections a:hover { color: var(--accent); }

.paper-body,
.paper-more {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--side-gap);
}

.paper-empty {
  padding: 64px 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink-soft);
}

/* Top of the front page: lead story on the left, a column of stories on the right */
.paper-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}

.paper-side {
  display: flex;
  flex-direction: column;
  padding-left: 32px;
  border-left: 1px solid var(--rule);
}

/* Story pieces, used everywhere on the paper pages */
.paper .story a { text-decoration: none; }
.paper .story-headline a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.story-image {
  display: block;
  overflow: hidden;
  background: #e8e6e0;
}

.story-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.story-section {                          /* section name above a headline */
  display: block;
  margin: 0 0 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
}

.paper .story-headline {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
}

.story-lead .story-headline { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; }
.story-lead .story-text { padding-top: 16px; }
.story-lead .story-summary { font-size: 1.1875rem; }

.story-side { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.story-side:last-child { border-bottom: 0; margin-bottom: 0; }
.story-side .story-image { display: none; }      /* side stories are text only */
.story-side .story-headline { font-size: 1.25rem; }

.paper .story-card .story-headline { font-size: 1.3125rem; }
.paper .story-card .story-text { padding-top: 12px; }

.story-summary {
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.paper .story-summary { font-family: var(--serif); font-size: 1.0625rem; }

.story-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.news-section .story-meta { color: var(--text-dim); }
.news-section .story-headline { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; }
.news-section .story-headline a { text-decoration: none; }
.news-section .story-headline a:hover { color: var(--gold); }
.news-section .story-summary { color: var(--text-dim); }

/* A block of stories under a section name */
.paper-block {
  padding: 28px 0 8px;
  scroll-margin-top: 80px;
}

.paper-block-title {
  margin: 0 0 18px;
  padding-top: 10px;
  border-top: 3px solid var(--accent);      /* the colored bar above each section */
  font-family: var(--serif);
  font-size: 1.625rem;
}

.paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}

/* ----- The article page ----- */
.paper-article {
  max-width: 760px;                       /* width of the article column */
  margin: 0 auto;
  padding: 40px var(--side-gap) 24px;
}

.article-head { margin-bottom: 24px; }

.article-headline {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.article-dek {                            /* the summary under the headline */
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.article-author { font-weight: 700; color: var(--ink); }

.article-cover,
.article-body figure {
  margin: 0 0 28px;
}

.article-cover img,
.article-body figure img {
  display: block;
  width: 100%;
  height: auto;
}

.article-cover figcaption,
.article-body figcaption {
  padding-top: 8px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.article-body {
  font-family: var(--serif);
  font-size: 1.1875rem;                   /* size of the article's text */
  line-height: 1.7;
}

.article-body p { margin: 0 0 1.2em; }

.article-body h2 {
  margin: 1.6em 0 0.6em;
  font-size: 1.5rem;
  line-height: 1.25;
}

.article-body blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 22px;
  border-left: 4px solid var(--accent);
}

.article-body blockquote p {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.45;
}

.article-body cite {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-style: normal;
  color: var(--ink-soft);
}

.paper-more {
  padding: 32px var(--side-gap) 8px;
  border-top: 1px solid var(--rule);
}

.paper-side-title {                       /* "Latest" above the column beside the lead story */
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
}

@media (max-width: 800px) {
  .paper-top { grid-template-columns: 1fr; }
  .paper-side { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
  .masthead-title { flex-direction: column; gap: 10px; }   /* icon sits above the name on phones */
  .masthead-icon { width: 56px; height: 56px; }
}

.paper-block .story-section { display: none; }   /* stories under a section heading don't repeat its name */


/* ---------- 26. NEWSROOM (news-register.html, newsroom.html): login, forms, your outlets ---------- */
.newsroom-page {
  max-width: 760px;                       /* width of the newsroom column */
  padding-bottom: 72px;
}

.newsroom-page h1 { margin: 0 0 8px; font-size: 2.5rem; line-height: 1.1; }
.newsroom-page .newsroom-intro { margin: 0 0 28px; font-size: 1.125rem; color: var(--text-dim); }

/* Buttons */
.button-primary,
.button-secondary,
.button-discord {
  display: inline-block;
  padding: 12px 22px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button-primary { background: var(--gold); color: #111214; }
.button-primary:hover { background: #d3e63a; }
.button-primary:disabled { opacity: 0.6; cursor: wait; }
.button-secondary { background: none; color: var(--text); box-shadow: inset 0 0 0 2px var(--text-dim); }
.button-secondary:hover { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.button-discord { background: #5865f2; color: #ffffff; }   /* Discord's own button color */
.button-discord:hover { background: #4752c4; }

/* Discord logo inside the button (images/Discordthingy.png) */
.button-discord { display: inline-flex; align-items: center; gap: 10px; }
.button-discord::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background: url("images/Discordthingy.png") center / contain no-repeat;
}

.button-small {
  padding: 6px 12px;
  border: 0;
  border-radius: 3px;
  background: rgba(148, 155, 164, 0.18);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.button-small:hover { background: rgba(148, 155, 164, 0.3); }
.button-armed { background: #b23b3b; color: #ffffff; }   /* "Click again to..." */
.button-armed:hover { background: #c94545; }

.news-start-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.text-link { color: var(--gold); font-weight: 600; }

/* Logged-in bar and login card */
.account-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--text-dim);
}

.account-avatar { width: 32px; height: 32px; border-radius: 50%; }
.account-logout { margin-left: auto; color: var(--text-dim); }

.login-card {
  padding: 28px;
  background: var(--bar-bg);
  border-top: 3px solid var(--gold);
}

.login-card h2 { margin: 0 0 8px; }
.login-card p { margin: 0 0 18px; }
.login-small { margin: 16px 0 0 !important; font-size: 0.875rem; color: var(--text-dim); }

/* Forms */
.news-form { display: flex; flex-direction: column; gap: 22px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; }
.field-hint { font-size: 0.875rem; color: var(--text-dim); }

.news-form input[type="text"],
.news-form textarea,
.add-writer input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(148, 155, 164, 0.35);
  border-radius: 4px;
  background: var(--menu-bg);
  color: var(--text);
  font: inherit;
}

.news-form textarea { resize: vertical; }

.news-form input:focus,
.news-form textarea:focus,
.add-writer input:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.swatch {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--page-bg), 0 0 0 5px var(--text); }

.swatch-custom {
  width: 44px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Masthead preview on the register form */
.masthead-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 18px;
  background: #fbfbf9;
  border-bottom: 4px solid var(--accent);
  color: #15171a;
  text-align: center;
}

.masthead-preview-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.masthead-preview-tagline {
  margin-top: 6px;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  color: #5b6068;
}

.form-note { color: var(--text-dim); }
.form-message { min-height: 1.5em; margin: 0; }
.form-message-error { color: #ff8a80; }
.form-message-ok { color: var(--flag-green); }

/* Your outlets */
.newsroom-list { display: flex; flex-direction: column; gap: 20px; }

.newsroom-card {
  padding: 24px;
  background: var(--bar-bg);
  border-left: 4px solid var(--text-dim);
}

.newsroom-card.status-approved { border-left-color: var(--flag-green); }
.newsroom-card.status-pending { border-left-color: var(--gold); }
.newsroom-card.status-denied,
.newsroom-card.status-suspended { border-left-color: #d9534f; }

.newsroom-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.newsroom-card h2 { margin: 0; font-size: 1.625rem; }
.newsroom-tagline { margin: 4px 0 0; color: var(--text-dim); }

.status-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 155, 164, 0.18);
  font-size: 0.875rem;
  font-weight: 600;
}

.newsroom-role { margin: 14px 0 8px; color: var(--text-dim); }

.writers {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 155, 164, 0.2);
}

.writers h3 { margin: 0 0 10px; }

.writer-list { list-style: none; margin: 0 0 14px; padding: 0; }

.writer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 155, 164, 0.12);
}

.writer-name { flex: 1; font-weight: 600; }
.writer-status { font-size: 0.875rem; color: var(--text-dim); }
.writer-empty { color: var(--text-dim); }

.add-writer { display: flex; gap: 10px; margin-bottom: 6px; }
.add-writer input { flex: 1; }
.add-writer .button-primary { flex: none; padding: 10px 18px; }

.leave-wrap { margin-top: 16px; }

@media (max-width: 520px) {
  .newsroom-card-head { flex-direction: column; }
  .add-writer { flex-direction: column; }
}


/* ---------- 27. ARTICLE EDITOR AND OUTLET SETTINGS (editor.html, outlet-settings.html) ---------- */

/* Article list in "Your newsroom" */
.newsroom-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 0; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-head h3 { margin: 0; }
.button-compact { padding: 8px 14px; font-size: 0.9375rem; }

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

.article-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid rgba(148, 155, 164, 0.12);
  border-left: 3px solid var(--text-dim);   /* color shows the status (below) */
}

.article-list li.article-status-published { border-left-color: var(--flag-green); }
.article-list li.article-status-submitted { border-left-color: var(--gold); }
.article-list li.article-status-rejected { border-left-color: #d9534f; }
.article-list li.writer-empty,
.article-list li.form-message { border-left: 0; padding-left: 0; }

.article-row-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.article-row-title { font-weight: 700; text-decoration: none; }
.article-row-title:hover { color: var(--gold); text-decoration: underline; }
.article-row-meta { font-size: 0.875rem; color: var(--text-dim); }
.article-row-note { font-size: 0.875rem; color: #ff8a80; }

/* Editor pages */
.editor-page { max-width: 820px; }        /* width of the editor column */

.editor-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.editor-outlet { color: var(--text-dim); font-weight: 600; }

.editor-status {                         /* the line saying draft / waiting / published */
  margin: 0 0 24px !important;
  padding: 10px 14px;
  background: var(--bar-bg);
  border-left: 3px solid var(--text-dim);
}

.editor-status.status-submitted { border-left-color: var(--gold); }
.editor-status.status-published { border-left-color: var(--flag-green); }
.editor-status.status-rejected { border-left-color: #d9534f; color: #ffb3ad !important; }

.news-form textarea.editor-headline {     /* the big headline box */
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  resize: none;
}

.news-form select,
.news-form input[type="text"] {
  min-height: 44px;
}

.news-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(148, 155, 164, 0.35);
  border-radius: 4px;
  background: var(--menu-bg);
  color: var(--text);
  font: inherit;
}

.news-form select:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.news-form :disabled { opacity: 0.6; cursor: not-allowed; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); }

/* Picture slots (cover, icon) */
.image-slot { display: flex; flex-direction: column; gap: 8px; }

.image-slot-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;                  /* cover pictures are shown wide */
  overflow: hidden;
  background: var(--menu-bg);
  border: 1px dashed rgba(148, 155, 164, 0.4);
  border-radius: 4px;
}

.image-slot-preview { max-width: 520px; }  /* keeps big cover pictures from filling the screen */
.image-slot-square .image-slot-preview { width: 140px; aspect-ratio: 1; }
.image-slot .form-message:empty { display: none; }
.news-form > .button-primary { align-self: flex-start; }
.image-slot-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-slot-empty { color: var(--text-dim); font-size: 0.9375rem; }
.image-slot-actions { display: flex; gap: 8px; }

/* Article parts (paragraphs, sub-headings, quotes, pictures) */
.blocks { display: flex; flex-direction: column; gap: 12px; }

.block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bar-bg);
  border-left: 3px solid rgba(148, 155, 164, 0.4);
  border-radius: 0 4px 4px 0;
}

.block-h2 { border-left-color: var(--flag-blue); }
.block-quote { border-left-color: var(--gold); }
.block-img { border-left-color: var(--flag-green); }

.block-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.block-name { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.block-tools { display: flex; gap: 6px; }
.block-tools .button-small { padding: 4px 10px; }

.block-p textarea { font-family: "Source Serif 4", Georgia, serif; font-size: 1.0625rem; line-height: 1.6; }
.block-h2 input { font-weight: 700; font-size: 1.25rem; }
.block-quote textarea { font-family: "Source Serif 4", Georgia, serif; font-style: italic; }
.block-image { max-width: 100%; max-height: 360px; object-fit: contain; align-self: flex-start; border-radius: 3px; }

.block-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Bar with Save / Preview / Send buttons, stays at the bottom of the screen */
.editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px -16px 0;
  padding: 14px 16px;
  background: var(--page-bg);
  border-top: 1px solid rgba(148, 155, 164, 0.25);
}

.editor-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.editor-buttons .button-primary,
.editor-buttons .button-secondary { padding: 10px 18px; }
.button-delete { margin-right: auto; }

/* Outlet settings: masthead preview */
.settings-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 26px 16px 20px;
  overflow: hidden;
  background: #fbfbf9;
  border-bottom: 4px solid var(--accent);
  color: #15171a;
  text-align: center;
}

.settings-preview-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-preview.has-cover::before {    /* darkens the cover so the name stays readable */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
}

.settings-preview.has-cover { color: #ffffff; }

.settings-preview-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.settings-preview-icon { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }

.settings-preview-tagline {
  position: relative;
  z-index: 2;
  margin: 6px 0 0 !important;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  color: inherit !important;
  opacity: 0.8;
}

[hidden] { display: none !important; }

@media (max-width: 520px) {
  .panel-head { flex-direction: column; align-items: flex-start; }
  .block-head { flex-direction: column; align-items: flex-start; }
  .editor-buttons .button-primary,
  .editor-buttons .button-secondary { flex: 1; padding: 10px 6px; font-size: 0.9375rem; white-space: nowrap; }
  .settings-preview-title { font-size: 1.5rem; }
}


/* ---------- 28. STRUCTURE PAGE (structure.html): the chart you can drag around ---------- */
.structure-intro { padding-bottom: 20px; }
.structure-intro p { max-width: 640px; }

.chart-wrap {
  max-width: var(--site-width);
  margin: 0 auto 64px;
  padding: 0 var(--side-gap);
}

.chart {
  position: relative;
  height: min(72vh, 720px);              /* height of the chart window */
  overflow: hidden;
  background: var(--bar-bg);
  border: 1px solid rgba(148, 155, 164, 0.2);
  border-radius: 6px;
  cursor: grab;
  touch-action: none;                    /* lets fingers drag the chart instead of the page */
  user-select: none;
}

.chart.is-dragging { cursor: grabbing; }

/* Full screen: the browser's own, or the chart stretched over the whole window */
.chart:fullscreen { height: 100%; border: 0; border-radius: 0; }
.chart.is-full {
  position: fixed;
  inset: 0;
  z-index: 1000;                         /* above the topbar */
  height: auto;
  border: 0;
  border-radius: 0;
}
.chart-full-open, .chart-full-open body { overflow: hidden; }   /* stops the page scrolling behind it */
.chart:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.chart-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.chart-lines { position: absolute; inset: 0; overflow: visible; }

.chart-flow {                            /* the drifting background lines */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chart-lines path {
  fill: none;
  stroke: rgba(169, 188, 203, 0.45);     /* line color */
  stroke-width: 2;
}

/* Dashed lines between branches (CROSS_LINKS in structure.js) and their labels */
.chart-lines path.cross-link {
  stroke: #e8a33d;
  stroke-dasharray: 7 6;
  opacity: 0.75;
}

.cross-label {
  fill: #f3c98a;
  font: 600 13px var(--font);
  paint-order: stroke;                   /* dark outline so the label reads over other lines */
  stroke: var(--bar-bg);
  stroke-width: 5px;
}

/* The boxes: a colored band with the name, and a line under it */
.chart-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--menu-bg);
  border: 1px solid rgba(148, 155, 164, 0.3);
  border-radius: 4px;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.chart-box strong {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px 10px;
  background: var(--box-color);
  color: #111214;                        /* dark text on the colored band */
  font-size: 1rem;
}

.chart-box span {
  padding: 5px 10px 6px;
  font-size: 0.875rem;
  color: var(--text-dim);
}

.chart-box span:empty { display: none; }
a.chart-box:hover { border-color: var(--box-color); box-shadow: 0 0 0 2px var(--box-color); }

/* Box colors, matching the government and armed forces pages */
.chart-emperor    { --box-color: var(--flag-lime); }
.chart-viceroy    { --box-color: #dce77a; }   /* paler lime than the Emperor */
.chart-management { --box-color: #e8603c; }   /* orange-red */
.chart-management-team { --box-color: #f29a7e; }
.chart-cabinet    { --box-color: var(--flag-blue); }
.chart-parliament { --box-color: var(--flag-green); }
.chart-court      { --box-color: #dbdee1; }
.chart-ministry   { --box-color: #8fd0f0; }
.chart-military   { --box-color: var(--flag-green); }
.chart-service    { --box-color: #e8a33d; }
.chart-security   { --box-color: #d9534f; }
.chart-staff      { --box-color: #c3c9d1; }
.chart-division   { --box-color: #a8d99c; }
.chart-unit       { --box-color: #f3c98a; }
.chart-sub-unit   { --box-color: #f8e2c0; }   /* battalions, squadrons: paler than their unit */
.chart-staff-unit { --box-color: #e2e6eb; }
.chart-parliament-unit { --box-color: #a8d99c; }

/* Redacted boxes: a black bar where the name would be */
.chart-redacted { --box-color: #2a2c30; cursor: inherit; }
.chart-redacted strong {
  color: #d9534f;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.2em;
}
.chart-box.chart-redacted span {
  display: block;
  height: 10px;
  margin: 8px 14px;
  padding: 0;
  background: #000000;
}

.chart-emperor strong { font-size: 1.125rem; }

/* Zoom buttons and the hint */
.chart-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;                  /* the gaps between buttons still drag the chart */
  cursor: default;
}

.chart-controls button {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(148, 155, 164, 0.3);
  border-radius: 4px;
  background: var(--page-bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chart-controls button { pointer-events: auto; }
.chart-controls button:hover { border-color: var(--gold); color: var(--gold); }

.chart-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-dim);
  pointer-events: none;
}


/* ---------- 29. BILLS AND LAWS (legislation.html) ---------- */
.bills { max-width: 900px; }             /* width of the list */
.bills .bills-intro { margin: 0 0 28px; max-width: 640px; }

/* Search box and filter buttons */
.bill-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.bill-search {
  flex: 1 1 240px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 155, 164, 0.35);
  border-radius: 4px;
  background: var(--menu-bg);
  color: var(--text);
  font: inherit;
}

.bill-search:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }

.bill-filters { display: flex; flex-wrap: wrap; gap: 6px; }

.bill-filter {
  padding: 8px 14px;
  border: 1px solid rgba(148, 155, 164, 0.3);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.bill-filter:hover { color: var(--text); border-color: var(--text-dim); }
.bill-filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #111214; }

.bills .bill-count { margin: 14px 0 18px; font-size: 0.9375rem; min-height: 1.5em; }
.bill-list { display: flex; flex-direction: column; gap: 16px; }
.bills .bill-empty { padding: 28px; background: var(--bar-bg); text-align: center; }

/* One bill. The colored bar on the left shows its status. */
.bill {
  --status: var(--text-dim);
  padding: 22px 24px;
  background: var(--bar-bg);
  border-left: 4px solid var(--status);
  scroll-margin-top: 90px;               /* leaves room for the topbar when linked to */
}

.bill-signed    { --status: var(--flag-green); }
.bill-pending   { --status: var(--flag-blue); }
.bill-passed    { --status: var(--gold); }
.bill-vetoed,
.bill-failed    { --status: #d9534f; }
.bill-withdrawn { --status: #6b7280; }

.bill-linked { box-shadow: 0 0 0 2px var(--status); }

.bill-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bill-number { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); text-decoration: none; }
.bill-number:hover { color: var(--gold); }

.bill-status {
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status) 18%, transparent);
  color: var(--status);
  font-size: 0.8125rem;
  font-weight: 700;
}

.bill-title { margin: 8px 0 0; font-size: 1.5rem; line-height: 1.2; }
.bills .bill-summary { margin: 8px 0 0; }

.bill-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 16px 0 0;
}

.bill-facts dt { font-size: 0.8125rem; color: var(--text-dim); }
.bill-facts dd { margin: 0; font-weight: 600; }
.bill-party::before {                    /* small dot in the party's seat-chart color */
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--party);
}

/* The vote bar */
.bill-vote { margin-top: 16px; max-width: 420px; }

.vote-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(148, 155, 164, 0.2);
}

.vote-for     { background: var(--flag-green); }
.vote-against { background: #d9534f; }
.vote-abstain { background: #6b7280; }

.bills .vote-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 0.875rem; }
.vote-key strong { color: var(--text); }

/* Full text */
.bill-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; margin-top: 16px; }
.bill-text { flex: 1 1 100%; }
.bill-text summary { color: var(--gold); font-weight: 600; cursor: pointer; }

.bill-text[open] summary { margin-bottom: 10px; }
.bills .bill-text p {
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 2px solid rgba(148, 155, 164, 0.25);
  color: var(--text);
  white-space: pre-line;
}

@media (max-width: 520px) {
  .bill { padding: 18px; }
  .bill-title { font-size: 1.25rem; }
}


/* ---------- 30. STRUCTURE PAGE: the links under the chart ----------
   Same cards as the homepage's "Explore the Empire", but compact. */
.structure-pages { display: block; min-height: 0; padding-top: 8px; }
.structure-pages .pillar-grid,
.structure-pages .minor-grid { flex: none; }
.structure-pages .pillar { min-height: 0; padding: 24px 28px; }
.structure-pages .pillar p { margin-bottom: 16px; }
.structure-pages .pillar-go { margin-top: auto; }
.structure-pages .pillar-grid { grid-template-columns: repeat(3, 1fr); }   /* three cards in one row */
.pillar-bills { --pillar-color: var(--gold); }

@media (max-width: 900px) {
  .structure-pages .pillar-grid { grid-template-columns: 1fr; }   /* stacked on smaller screens */
}


/* ---------- 31. EMERGENCY SERVICES HOME (emergency-services.html, board-of-commissioners.html) ---------- */
.des-login-button {                      /* the Service Login button on the banner */
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--gold);
  color: #111214;
  font-weight: 700;
  text-decoration: none;
}
.des-login-button:hover { background: #d3e63a; }

.des-menu-section { padding-bottom: 0; }

.des-menu {                              /* the four big choices */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.des-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 170px;
  padding: 24px;
  background: var(--bar-bg);
  border-top: 3px solid var(--gold);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s ease;
}
.des-tile:hover { background: #17191c; }
.des-tile h2 { margin: 0; font-size: 1.375rem; line-height: 1.2; }
.des-tile p { margin: 0; color: var(--text-dim); }

.des-tile-tag {                          /* "Members" / "Public" label */
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148, 155, 164, 0.18);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.des-tile-public { background: rgba(93, 181, 74, 0.18); color: var(--flag-green); }

.group-police-dept { --group-color: var(--flag-blue); }
.group-fire-dept   { --group-color: #e8a33d; }
.group-parks-dept  { --group-color: var(--flag-green); }
.group-des-news    { --group-color: var(--gold); }
.group-commissioners { --group-color: var(--gold); }

.des-news .unit-grid { margin-bottom: 16px; }
.des-news-card { color: var(--text); text-decoration: none; }
.des-news-card:hover h3 { color: var(--gold); }

@media (max-width: 900px) {
  .des-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .des-menu { grid-template-columns: 1fr; }
  .des-tile { min-height: 0; }
}


/* ---------- 32. MOST WANTED (wanted.html, and the section on emergency-services.html) ---------- */
.group-wanted { --group-color: #d9534f; }
.wanted-page { max-width: 1000px; }
.wanted-page .wanted-intro { margin: 0 0 24px; max-width: 640px; }
.wanted-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }

.wanted-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--bar-bg);
  border-top: 3px solid var(--danger, #e8a33d);
}
.wanted-high   { --danger: #d9534f; }
.wanted-medium { --danger: #e8a33d; }
.wanted-low    { --danger: var(--flag-blue); }

.wanted-photo {
  flex: none;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #1b1f25;
  color: var(--text-dim);
  font-size: 1.75rem;
  font-weight: 700;
}
.wanted-photo img { width: 100%; height: 100%; object-fit: cover; }

.wanted-text { min-width: 0; }
.wanted-danger { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger, #e8a33d); }
.wanted-text h3 { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.2; }
.wanted-text p { margin: 4px 0 0; color: var(--text-dim); }
.wanted-charges { margin: 8px 0 0; padding-left: 18px; color: var(--text); }
.wanted-text .wanted-number { font-size: 0.8125rem; }
.wanted-page .wanted-empty, .wanted-list .wanted-empty { padding: 24px; background: var(--bar-bg); text-align: center; }
.wanted-page .wanted-rp { margin: 0 0 16px; font-size: 0.875rem; }

@media (max-width: 420px) {
  .wanted-card { flex-direction: column; }
}
.group .wanted-list { margin-top: 18px; }


/* ---------- 33. COMPLAINTS AND REPORTS (report.html, and the section on emergency-services.html) ---------- */
.report-page .report-notice {           /* "this is for in-game things only" */
  margin: 0 0 28px;
  padding: 12px 16px;
  border-left: 4px solid var(--flag-blue);
  background: var(--bar-bg);
  color: var(--text-dim);
}
.report-page .report-notice strong { color: var(--text); }

.report-section { margin-bottom: 44px; }
.report-section > h2 { margin: 0 0 14px; font-size: 1.5rem; }

.report-choices {                        /* the three "what are you reporting?" buttons */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.report-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 0;
  border-top: 3px solid var(--text-dim);
  background: var(--bar-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.report-choice span { color: var(--text-dim); font-size: 0.9375rem; }
.report-choice:hover { background: #17191c; }
.report-choice-officer, .report-choice-department { border-top-color: var(--flag-blue); }
.report-choice-fire { border-top-color: #e8a33d; }
.report-choice[aria-checked="true"] { background: #1c2410; box-shadow: inset 0 0 0 2px var(--gold); }

.report-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(148, 155, 164, 0.35);
  border-radius: 4px;
  background: var(--menu-bg);
  color: var(--text);
  font: inherit;
}
.report-form select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.report-form .button-primary { align-self: flex-start; }
.report-done .button-secondary { margin-top: 4px; }
.report-number { font-family: ui-monospace, monospace; font-weight: 700; }

/* Your reports */
.report-list { display: flex; flex-direction: column; gap: 12px; }
.report-card { padding: 18px 20px; background: var(--bar-bg); border-left: 4px solid var(--gold); }
.report-card.report-open { border-left-color: var(--flag-blue); }
.report-card.report-closed { border-left-color: var(--flag-green); }
.report-card.report-dismissed { border-left-color: var(--text-dim); }
.report-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--text-dim); }
.report-status { font-weight: 700; color: var(--text); }
.report-card h3 { margin: 6px 0 2px; font-size: 1.125rem; }
.report-meta { margin: 0; color: var(--text-dim); font-size: 0.9375rem; }
.report-outcome { margin: 10px 0 0; }
.report-note { margin: 6px 0 0; white-space: pre-line; }

/* The section on emergency-services.html */
.group-report { --group-color: var(--flag-blue); }
.report-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

@media (max-width: 700px) {
  .report-choices { grid-template-columns: 1fr; }
}

.report-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.report-choice:disabled:hover { background: var(--bar-bg); }


/* ---------- 34. ECONOMY (economy.html, company.html): market, corporations, portfolio, trading ---------- */
.group-market    { --group-color: var(--gold); }
.group-corps     { --group-color: var(--flag-blue); }
.group-portfolio { --group-color: var(--flag-green); }
.group-housing   { --group-color: var(--text-dim); }
.group-housing .group-inner { padding-bottom: 72px; }

/* colors for price moves; flat (no change) stays plain */
.econ-up   { color: #6fd66f; }
.econ-down { color: #ff7a72; }
.econ-flat { color: var(--text-dim); }

.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-variant-numeric: tabular-nums; }
.group code { padding: 1px 6px; border-radius: 3px; background: var(--bar-bg); font-size: 0.95em; }

.econ-subhead { margin: 36px 0 14px; font-size: 1.375rem; }

/* summary tiles above the market and in the portfolio */
.market-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.market-stat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 150px; padding: 14px 18px;
  background: var(--bar-bg);
}
.market-stat-label { font-size: 0.8125rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.market-stat strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.market-stat-gold { border-left: 3px solid var(--gold); }

/* the ticker square standing in for a logo */
.econ-mono {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 6px;
  background: rgba(190, 210, 21, 0.12); color: var(--gold);
  font-family: ui-monospace, Menlo, monospace; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
}
.econ-mono-large { width: 72px; height: 72px; border-radius: 10px; font-size: 1rem; }

/* status chips */
.econ-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: rgba(148, 155, 164, 0.18); color: var(--text-dim);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.econ-chip-listed    { background: rgba(93, 181, 74, 0.18); color: var(--flag-green); }
.econ-chip-raising   { background: rgba(54, 156, 211, 0.18); color: #7cc4ec; }
.econ-chip-suspended { background: rgba(255, 122, 114, 0.18); color: #ff7a72; }

/* tables (market, your shares) */
.econ-table-scroll { overflow-x: auto; }
.econ-table { width: 100%; border-collapse: collapse; background: var(--bar-bg); }
.econ-table th {
  padding: 10px 16px; text-align: left;
  font-size: 0.8125rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(148, 155, 164, 0.2);
}
.econ-table td { padding: 10px 16px; border-bottom: 1px solid rgba(148, 155, 164, 0.1); }
.econ-table tr:last-child td { border-bottom: 0; }
.econ-table tbody tr:hover { background: #17191c; }
.econ-table .num { text-align: right; white-space: nowrap; }
.econ-row-link { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.econ-row-link:hover strong { color: var(--gold); }
.econ-row-names { display: flex; flex-direction: column; min-width: 0; }
.econ-ticker { font-size: 0.875rem; color: var(--text-dim); }

/* corporation cards */
.corp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.corp-card {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: var(--bar-bg); border-top: 3px solid var(--group-color);
  color: var(--text); text-decoration: none; transition: background 0.2s ease;
}
.corp-card:hover { background: #17191c; }
.corp-card:hover h3 { color: var(--gold); }
.corp-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.corp-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.page .corp-card p, .corp-card p { margin: 0; color: var(--text-dim); }
.corp-card-type { font-size: 0.9375rem; }
.corp-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.corp-card-meta { margin-top: auto !important; padding-top: 6px; font-size: 0.875rem; }

/* register form and notices */
.econ-register { max-width: 640px; }
.group .report-notice, .company-page .report-notice, .trade-box .report-notice {
  margin: 0 0 16px; padding: 12px 16px; max-width: 75ch;
  border-left: 4px solid var(--flag-blue); background: var(--bar-bg); color: var(--text-dim);
}
.econ-register textarea, .econ-register input, .econ-register select { max-width: 100%; }
.group .login-card { max-width: 640px; }

.econ-pending { margin: 0 0 16px; padding: 14px 18px; max-width: 640px; background: var(--bar-bg); border-left: 4px solid var(--gold); }
.econ-pending p { margin: 4px 0 10px; color: var(--text-dim); }

/* history list */
.econ-history { list-style: none; margin: 0; padding: 0; max-width: 760px; background: var(--bar-bg); }
.econ-history li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  padding: 10px 16px; border-bottom: 1px solid rgba(148, 155, 164, 0.1);
}
.econ-history li:last-child { border-bottom: 0; }
.econ-history-money { text-align: right; }
.econ-history-when { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--text-dim); }

/* ----- company.html ----- */
.company-page { padding-bottom: 72px; }
.company-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; margin: 20px 0 24px; }
.company-names { flex: 1 1 280px; min-width: 0; }
.company-names h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; }
.page .company-sub { margin: 6px 0 0; color: var(--text-dim); }
.company-quote { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.company-price { font-size: 2.25rem; line-height: 1.1; color: var(--text); }
.company-change { font-size: 1.0625rem; font-weight: 700; }
.company-note { font-size: 0.8125rem; color: var(--text-dim); }

.company-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side" "details side"; gap: 24px; align-items: start; }
.company-main { grid-area: main; min-width: 0; }
.company-side { grid-area: side; }
.company-layout > .company-details { grid-area: details; margin-top: 0; min-width: 0; }
.company-chart { padding: 16px; background: var(--bar-bg); }
.company-details { margin-top: 24px; }
.page .company-desc { max-width: 70ch; color: var(--text); white-space: pre-line; }

.econ-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.econ-range {
  padding: 6px 12px; border: 0; border-radius: 999px;
  background: #363435; color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.econ-range:hover { background: #44494f; }
.econ-range[aria-pressed="true"] { background: #55ff7f; color: #111214; }   /* same colors as the in-game range buttons */

.econ-chart-wrap { position: relative; }
.econ-chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.econ-chart-grid { stroke: rgba(148, 155, 164, 0.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.econ-chart-axis { fill: var(--text-dim); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.econ-chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.econ-chart-up   .econ-chart-line, .econ-chart-up   .econ-chart-dot { stroke: #6fd66f; }
.econ-chart-down .econ-chart-line, .econ-chart-down .econ-chart-dot { stroke: #ff7a72; }
.econ-chart-flat .econ-chart-line, .econ-chart-flat .econ-chart-dot { stroke: #949ba4; }
.econ-chart-dot { fill: var(--bar-bg); stroke-width: 2; }
.econ-chart-up   .econ-chart-fill-top { stop-color: #6fd66f; stop-opacity: 0.25; }
.econ-chart-down .econ-chart-fill-top { stop-color: #ff7a72; stop-opacity: 0.25; }
.econ-chart-flat .econ-chart-fill-top { stop-color: #949ba4; stop-opacity: 0.18; }
.econ-chart-fill-bottom { stop-color: #111214; stop-opacity: 0; }
.econ-chart-cross { stroke: rgba(219, 222, 225, 0.4); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.econ-chart-spot { fill: var(--text); }
.econ-chart-tip {
  position: absolute; top: 4px; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 4px; background: var(--menu-bg);
  font-size: 0.8125rem; white-space: nowrap; pointer-events: none;
}
.page .econ-chart-empty { padding: 60px 12px; text-align: center; }

.company-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin: 0; background: var(--bar-bg); }
.company-facts div { padding: 12px 16px; box-shadow: inset 0 0 0 0.5px rgba(148, 155, 164, 0.15); }
.company-facts dt { font-size: 0.8125rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.company-facts dd { margin: 2px 0 0; font-size: 1.0625rem; }

.listing-missing { margin: 0 0 10px; padding-left: 20px; }
.listing-missing li { margin: 4px 0; }
.company-announcements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.company-announcements li { padding: 12px 16px; background: var(--bar-bg); border-left: 3px solid var(--gold); }
.page .company-announcements p { color: var(--text); }

/* the trade box */
.trade-box { position: sticky; top: calc(var(--bar-height) + 24px); padding: 20px; background: var(--bar-bg); border-top: 3px solid var(--gold); }
.trade-box h2 { margin: 0 0 14px; font-size: 1.25rem; }
.trade-box .button-discord { margin-top: 12px; }
.trade-balance { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 16px; }
.trade-balance dt { color: var(--text-dim); }
.trade-balance dd { margin: 0; text-align: right; }
.trade-form { display: flex; flex-direction: column; gap: 12px; }
.trade-form input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid rgba(148, 155, 164, 0.35); border-radius: 4px;
  background: var(--menu-bg); color: var(--text); font: inherit; font-size: 1.125rem;
}
.trade-form input:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.page .trade-estimate { min-height: 1.5em; font-size: 0.9375rem; }
.trade-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trade-buttons .button-primary, .trade-buttons .button-secondary { flex: 1 1 90px; min-height: 44px; }
.trade-buttons .button-small { flex-basis: 100%; min-height: 36px; }
.page .trade-help { margin-top: 14px; font-size: 0.875rem; }

@media (max-width: 900px) {
  .company-layout { grid-template-columns: 1fr; grid-template-areas: "main" "side" "details"; }
  .trade-box { position: static; }
}
@media (max-width: 600px) {
  .hide-small { display: none; }
  .econ-table th, .econ-table td { padding: 10px 10px; }
  .company-quote { align-items: flex-start; text-align: left; }
  .market-stat { min-width: 0; flex: 1 1 40%; }
}