/* ccs-front-html: one stylesheet, no JavaScript, no fonts or images from other sites. */

/* Fonts and colours from the new getmonero.org (beta.getmonero.org), so going from there to
   the CCS looks like the same site. DM Sans is self-hosted (SIL Open Font License). "optional": a
   page drawn before the font is there keeps the fallback rather than swapping fonts once shown, so
   nothing on it moves (the font is preloaded, and cached, so normally it is there). */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin.9fea608a947e67020c33cad9a6fe3d60c54119dfb8cff87768a8117a15ed7543.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin-ext.a5d38fe99f930275684999b462c7123faa063d9e44e73b4b241723d884aa0f49.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* light or dark follows the OS setting: no JavaScript, no toggle */
:root {
  color-scheme: light dark;
  --orange: #e2611f;
  --orange-dark: #c8551b;
  --text: light-dark(#2e3038, #c6c6d0);
  --heading: light-dark(#191b23, #f0f0f0);
  --muted: light-dark(#5c5e67, #9a9ba3);
  --bg: light-dark(#ffffff, #171717);
  --card: light-dark(#f9f7fc, #211f26);
  --line: light-dark(#e4e1e9, #36343b);
  --footer: light-dark(#f0ecf4, #211f26);
  --secondary: light-dark(#f0ecf4, #36343b);
  --idea: #e2bd3f;
  --fr: #f28080;        /* as today's ccs.getmonero.org: the card strip */
  --fr-bar: #d54949;    /* and its funding bar */
  --wip: #3a72ad;
  --cp: #5fa863;
  --radius: 12px;
  --shadow: 0 2px 4px #00000026;
}

* { box-sizing: border-box; }

/* room for the scrollbar on every page: a short page without one would sit 15px wider */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--orange); }
a:hover { color: var(--orange-dark); }
main { flex: 1; }

/* Icons: PNG masks (tools/icons-png.sh), filled with the text's colour; 1x, 2x or 3x, whichever
   the screen needs. No SVG anywhere: Tor Browser at "Safest" doesn't draw it. */
.icon { display: inline-block; position: relative; width: 1.1em; height: 1.1em; vertical-align: -0.17em; flex: none; }
.icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: no-repeat center / contain;
}
@media (forced-colors: active) { .icon::before { forced-color-adjust: none; background: CanvasText; } }
.icon-back::before {
  mask-image: url(icons/back-1x.cd0e234cc56bf9635c46f9179331ef5f055a08d17ea3882800dc66d12a2454e2.png);
  mask-image: image-set(url(icons/back-1x.cd0e234cc56bf9635c46f9179331ef5f055a08d17ea3882800dc66d12a2454e2.png) 1x, url(icons/back-2x.123b7075b569b6a134cd835a4b0bd321852b9707797c12a564221b8756918e2b.png) 2x, url(icons/back-3x.52822aca1e502251bdac776416adac6be26c96d711ae571f750dbfe3edb6fe77.png) 3x);
}
.icon-box::before {
  mask-image: url(icons/box-1x.9645a78721798dd9da7ef514b96d255254bd473b80d4f73734b814f75d819e7b.png);
  mask-image: image-set(url(icons/box-1x.9645a78721798dd9da7ef514b96d255254bd473b80d4f73734b814f75d819e7b.png) 1x, url(icons/box-2x.2e625fc1d7dfd97826d61c8068580855f1dde73665c2810b618731f7953c8a70.png) 2x, url(icons/box-3x.6960e060fb8f6e61b1e7a08c91b7e92c5927f9e4ce4e92312cea2ee45cd4c502.png) 3x);
}
.icon-bulb::before {
  mask-image: url(icons/bulb-1x.9e05433daed6b3fc73439deb3b7e3caa869a45479eaaaf1fc46ce4d66da9804b.png);
  mask-image: image-set(url(icons/bulb-1x.9e05433daed6b3fc73439deb3b7e3caa869a45479eaaaf1fc46ce4d66da9804b.png) 1x, url(icons/bulb-2x.0d609ccfc77501f9bd339e6dfd57ee55213c842f32cd59886c273be83cb91859.png) 2x, url(icons/bulb-3x.ec7e61b18e789332897319c40c274cccec304cd6c0a892793bdecc0a0ce74ac4.png) 3x);
}
.icon-calendar::before {
  mask-image: url(icons/calendar-1x.c3d40677c8a0815e59fdb619a6d4a83e3a8466bc653a2a0d69ae8a1965ef61d2.png);
  mask-image: image-set(url(icons/calendar-1x.c3d40677c8a0815e59fdb619a6d4a83e3a8466bc653a2a0d69ae8a1965ef61d2.png) 1x, url(icons/calendar-2x.00fccba292895d010e031a5d6cbef85294280dd3703ae80077f71525073c3b7a.png) 2x, url(icons/calendar-3x.cd8545e17f2ebe70ab21817f3dad62a151da70a872966ce797089582d618f1d3.png) 3x);
}
.icon-coins::before {
  mask-image: url(icons/coins-1x.dd95144348e5e3236e35608038ac444dfd19c943bf9480a0a01b6b9a5de02b64.png);
  mask-image: image-set(url(icons/coins-1x.dd95144348e5e3236e35608038ac444dfd19c943bf9480a0a01b6b9a5de02b64.png) 1x, url(icons/coins-2x.c273c07bbe2a21283e048558dcbb9f693020f5c4d289ccaeee7e5afab199e2aa.png) 2x, url(icons/coins-3x.4682f7ee638bb96edc20217df93a9bb407d38710281ade9cfb5c1f23b55635d3.png) 3x);
}
.icon-contrast::before {
  mask-image: url(icons/contrast-1x.c2755fe94f510a78175b8a59cff632398cc50b499ff381e69c214fe8ad7898aa.png);
  mask-image: image-set(url(icons/contrast-1x.c2755fe94f510a78175b8a59cff632398cc50b499ff381e69c214fe8ad7898aa.png) 1x, url(icons/contrast-2x.bf17dc9a4dee700de6ecf8ee5bbdcd98633dd06a7acc5db8cdfebd44aa923c5a.png) 2x, url(icons/contrast-3x.78755e769ef01706ff4e0191257944dddef610ac1f93854a2132abd93866a300.png) 3x);
}
.icon-external::before {
  mask-image: url(icons/external-1x.73b6feeabe88b094333f001039500b1a2f877da910b5a6dd5fab779a7ca1f739.png);
  mask-image: image-set(url(icons/external-1x.73b6feeabe88b094333f001039500b1a2f877da910b5a6dd5fab779a7ca1f739.png) 1x, url(icons/external-2x.b7001649cb090394c55e59a4ee049e44584b7cd476a367321556061e73772f22.png) 2x, url(icons/external-3x.2838bb84ac435a347573721d677d6685a093d85925bd35fd56012685092a1cca.png) 3x);
}
.icon-gear::before {
  mask-image: url(icons/gear-1x.154c95eef398b7b0d48c3f467ca324c387a71cdff6ded273d436d1e9f5bb02a9.png);
  mask-image: image-set(url(icons/gear-1x.154c95eef398b7b0d48c3f467ca324c387a71cdff6ded273d436d1e9f5bb02a9.png) 1x, url(icons/gear-2x.86484db7187f0ef03be0f8ab6619a7577be0461f60a48bb73e679c317ae708ff.png) 2x, url(icons/gear-3x.136e3d0d8bcf0683452c227cae313a9009f1359f2e581b6bafcfcb35a8d508f4.png) 3x);
}
.icon-hand-coins::before {
  mask-image: url(icons/hand-coins-1x.2d4ecf611d26231c356f7a65592973fefce0b9384a1b76cd49e4d5da6f78363c.png);
  mask-image: image-set(url(icons/hand-coins-1x.2d4ecf611d26231c356f7a65592973fefce0b9384a1b76cd49e4d5da6f78363c.png) 1x, url(icons/hand-coins-2x.14540539ae4ffce8d11aa2bd407a6d3b522fc1bf733688c742abc09ccf2868db.png) 2x, url(icons/hand-coins-3x.f457d0bcb5f9bbeb860e32d70366c420ee9dd67ba2280c90d13c4f706cc16374.png) 3x);
}
.icon-moon::before {
  mask-image: url(icons/moon-1x.6ec7a739a40fb986acd6ae32e961d3dd89a00dede58fc43530922b7629a72f52.png);
  mask-image: image-set(url(icons/moon-1x.6ec7a739a40fb986acd6ae32e961d3dd89a00dede58fc43530922b7629a72f52.png) 1x, url(icons/moon-2x.0d0d152cc902b286c5a576f594c4808889d1952c5d0fbb1b7c0fd44dc7c8274d.png) 2x, url(icons/moon-3x.489c37c450dc978ec56709c512d62b81a4494299e93d769f7ea130365e5245ac.png) 3x);
}
.icon-sun::before {
  mask-image: url(icons/sun-1x.fde92ae91dff9675d66db1f9798002e64cef804d5abd4aa0aad388b6451ed857.png);
  mask-image: image-set(url(icons/sun-1x.fde92ae91dff9675d66db1f9798002e64cef804d5abd4aa0aad388b6451ed857.png) 1x, url(icons/sun-2x.cb0fb7ce7eb09d01c6321151b921848e5f15f151c6c22254de0f79d4248b3d54.png) 2x, url(icons/sun-3x.82cb7e2b4a4f1664932e8f1e18830b555c9271147aac9290a51724297a61a9f1.png) 3x);
}
.icon-thumbs-down::before {
  mask-image: url(icons/thumbs-down-1x.f6a039410182929e109b31684ab2676aaa3dd602caf4672f1e93e43c11871529.png);
  mask-image: image-set(url(icons/thumbs-down-1x.f6a039410182929e109b31684ab2676aaa3dd602caf4672f1e93e43c11871529.png) 1x, url(icons/thumbs-down-2x.3078c53b9830b4db1df4cba851269b13d1723812432cec1bd66f295cafc251c4.png) 2x, url(icons/thumbs-down-3x.201d17101b3ffb7d878bca4e42716caad47a83d9823310a0149181aa93472537.png) 3x);
}
.icon-thumbs-up::before {
  mask-image: url(icons/thumbs-up-1x.f39665aa9e784b9b77e871ba292a00b01be6ff8569085969e894f4fea1ae5489.png);
  mask-image: image-set(url(icons/thumbs-up-1x.f39665aa9e784b9b77e871ba292a00b01be6ff8569085969e894f4fea1ae5489.png) 1x, url(icons/thumbs-up-2x.b400780d6a493ac1831dbe0d30d55252dad34aa4de601fb517c34375385f4eb9.png) 2x, url(icons/thumbs-up-3x.1a47d648ed48008bf548d59d3f1dc5db23fdf30b6f4e0fd8d447836a2f87f838.png) 3x);
}
.icon-user::before {
  mask-image: url(icons/user-1x.000151b755f518465f4ff3ba7d71049be3579f77df781fc08dd20f7e3da202e7.png);
  mask-image: image-set(url(icons/user-1x.000151b755f518465f4ff3ba7d71049be3579f77df781fc08dd20f7e3da202e7.png) 1x, url(icons/user-2x.97374e0b0d856fddd384ab93babf213c896cbf97fd08b8fed531aa2143a6158c.png) 2x, url(icons/user-3x.190186df8f4bc4ad02d6849bbb0d7904aa3ca5ce53e04512ddff0dc96c5a0379.png) 3x);
}
.icon-users::before {
  mask-image: url(icons/users-1x.cc0c5f898ddbbbf91b7f8d782e066a8ea774cc8592ddf839eebad7b213f8eff3.png);
  mask-image: image-set(url(icons/users-1x.cc0c5f898ddbbbf91b7f8d782e066a8ea774cc8592ddf839eebad7b213f8eff3.png) 1x, url(icons/users-2x.ff8d0b6f76cf209e542cb85533ad4ecc217e5d898267577cee9d64c6ae1ec6a7.png) 2x, url(icons/users-3x.3f9bbd21c695c4e1c3a615eaca2610ad2a9cb15daf6422e58f64179bdf5c8424.png) 3x);
}

/* the menu button's burger, between burger (0) and X (1): registered, so it can be animated */
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }

/* phones: no blue flash on what you tap (as getmonero.org); the keyboard's focus ring stays */
a, button, label, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* header: above the drawer and its backdrop, so the menu button stays there to close them */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 4.5rem;              /* as getmonero.org's header */
  padding: 0 clamp(1rem, 5vw, 5rem);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.brand img { width: 28px; height: 28px; }
.brand-short { display: none; }
.header-end { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.site-nav { display: flex; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }
.nav-toggle:focus-visible ~ .site-header .nav-button { outline: 2px solid var(--orange); }
.site-nav a { color: var(--heading); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--orange); }
/* the theme button: only the link for the next theme shows (theme.css); System's by default */
.theme-toggle a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--heading); }
.theme-toggle a:hover { color: var(--orange); background: var(--secondary); }
.theme-toggle .icon { width: 22px; height: 22px; }
.theme-toggle .to-dark, .theme-toggle .to-system { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* buttons */
.button {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: var(--secondary);
  color: var(--heading);
}
.button.primary { background: var(--orange); color: #fff; }
.button.primary:hover { background: var(--orange-dark); color: #fff; }
.button.block { display: block; text-align: center; }

/* home */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 max(16px, 4vw);
}
.hero h1 { color: var(--orange); font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.15; margin: 0 0 20px; }
.hero p { color: var(--muted); max-width: 34em; font-size: 1.05rem; }
.hero .actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero .art { width: 100%; height: auto; max-width: 380px; justify-self: center; }

.stages { max-width: 720px; margin: 64px auto 72px; padding: 0 16px; text-align: center; }
.stages h2 { font-size: 1.4rem; margin: 0 0 22px; }
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stage-card {
  display: block;
  padding: 18px 22px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.stage-card:hover { border-color: var(--orange); color: var(--text); }
.stage-card h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.stage-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.badge-round {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
}
.badge-round .icon { width: 30px; height: 30px; }

/* stage colours */
.idea { --stage: var(--idea); }
.fr { --stage: var(--fr); --bar: var(--fr-bar); }
.wip { --stage: var(--wip); }
.cp { --stage: var(--cp); }
.badge-round { background: var(--stage); }

/* the stage and tag pages: the sidebar (stages, tags) and the list */
.layout.with-side {
  display: grid;
  /* the full width (up to max-width) whatever the cards hold: in the body's flex column, auto
     margins would shrink it to its content, and the page would change width from stage to stage */
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 24px auto 56px;
  padding: 0 max(16px, 4vw);
  align-items: start;
}
.layout { flex: 1; }
/* wide screens: the sidebar only beside a stage's list; its site links are the header's */
@media (min-width: 861px) {
  .layout:not(.with-side) > .drawer { display: none; }
  .drawer .drawer-links, .backdrop { display: none; }
}
.side a.back { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; margin: 8px 0 14px; }
.side a.back .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--card); }
.side a.back .icon::before { inset: 6px; }
.side a.back:hover { color: var(--orange); }
.side .stage-menu { display: grid; gap: 8px; }
.side .stage-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--card);
  border: 1.5px solid transparent;
  color: var(--text);
  text-decoration: none;
}
.side .stage-menu a .icon { color: var(--stage); }
.side .stage-menu a:hover { border-color: var(--line); }
.side hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* the selected stage: each page's body says which one it is */
/* the stage you're on (as specific as the stage menu's own rule, so it wins) */
.page-ideas .stage-menu .tab-ideas,
.page-fr .stage-menu .tab-fr,
.page-wip .stage-menu .tab-wip,
.page-cp .stage-menu .tab-cp { border-color: var(--orange); color: var(--orange); }

.list { display: grid; gap: 20px; }
.list-title { margin: 6px 0 0; font-size: 1.3rem; }
.empty { color: var(--muted); }

/* a proposal card */
.card {
  position: relative;
  display: block;
  padding: 22px 22px 20px;
  background: var(--card);
  border-top: 5px solid var(--stage);
  border-radius: 4px 4px var(--radius) var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}
/* as ccs.getmonero.org's proposal cards: a soft glow on hover (theirs 0 0 40px rgba(50,50,93,.4)) */
/* only a card that is a link (the lists' proposals) glows: a proposal page's own head is a card too */
a.card:hover, a.card:focus-visible { color: var(--text); box-shadow: 0 0 20px light-dark(rgb(50 50 93 / 0.35), rgb(255 255 255 / 0.14)); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card h3 { color: var(--heading); margin: 0 110px 10px 0; font-size: 1.12rem; }
.tag {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--stage);
  border-radius: 0 0 0 6px;
}
.meta { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--muted); font-size: 0.92rem; margin: 0; padding: 0; list-style: none; }
.meta li { display: inline-flex; align-items: center; gap: 7px; }
.meta .icon { color: var(--orange); }
.progress-label { text-align: right; font-size: 0.9rem; margin: 14px 0 6px; }

/* A funding bar: an outlined pill with the bar inside it, a little glossy, as the original
   ccs.getmonero.org's; taller on a proposal page than on the lists' cards */
progress {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 14px;
  padding: 2px;
  border: 1.5px solid light-dark(#d0d4dd, #45434a);
  border-radius: 20px;
  background: transparent;
  appearance: none;
  overflow: hidden;
}
progress::-webkit-progress-bar { background: transparent; border-radius: 20px; }
/* separate rules: a browser drops a whole rule with a pseudo-element it doesn't know */
progress::-webkit-progress-value {
  background: var(--bar, var(--stage, var(--orange)));
  border-radius: 20px;
  box-shadow: inset 0 2px 9px rgb(255 255 255 / 0.3), inset 0 -2px 6px rgb(0 0 0 / 0.07);
}
progress::-moz-progress-bar {
  background: var(--bar, var(--stage, var(--orange)));
  border-radius: 20px;
  box-shadow: inset 0 2px 9px rgb(255 255 255 / 0.3), inset 0 -2px 6px rgb(0 0 0 / 0.07);
}
.head progress { height: 24px; padding: 4px; }

.segments { display: flex; gap: 4px; }
.segments span { flex: 1; height: 7px; border-radius: 4px; background: var(--line); }
.segments span.done { background: var(--stage); }

/* proposal page */
.proposal { max-width: 1000px; margin: 24px auto 56px; padding: 0 max(16px, 4vw); }
.proposal .head { position: relative; padding: 26px 26px 22px; }
.proposal .head h1 { margin: 4px 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.columns { display: grid; grid-template-columns: 1fr 330px; gap: 32px; margin-top: 28px; align-items: start; }
.body { min-width: 0; overflow-wrap: anywhere; }
.body img { max-width: 100%; }
.body pre { overflow-x: auto; background: var(--card); padding: 12px; border-radius: 8px; }
.body table { border-collapse: collapse; }
.body th, .body td { border: 1px solid var(--line); padding: 4px 8px; }

.box { background: var(--card); border-radius: var(--radius); padding: 20px 22px; }
.box h2 { margin: 0 0 12px; font-size: 1.1rem; }
.donate .raised { font-size: 1.05rem; margin: 0 0 8px; }
.donate .raised strong { font-size: 1.3rem; }
.donate ol { padding-left: 1.2em; margin: 16px 0 0; }
.donate li { margin: 0 0 10px; }
/* Donate: the page is only this, so it takes the width, as the original ccs.getmonero.org's:
   the title centred, then one wide box with the QR code and a large address */
.donate-page { max-width: 900px; margin-inline: auto; }
.donate-page h1 { text-align: center; }
.donate-page .box { margin-top: 24px; padding: 28px 32px; }
.donate-page .qr { margin: 16px 0; }
.donate-page .address { margin-top: 8px; }
@media (max-width: 520px) {
  .donate-page .box { padding: 20px 14px; }
  .donate-page .address { font-size: 0.85rem; padding: 12px; }
}
/* A QR code: a white card (it must stay white to scan) with a soft ring of shadow, so it stands out
   on a light card too; an address: a shaded panel, bold, as the original ccs.getmonero.org's */
.qr {
  display: block; width: 15rem; max-width: 100%; margin: 16px auto; padding: 8px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 0 6px light-dark(rgb(50 50 93 / 0.4), rgb(255 255 255 / 0.25));
}
.qr svg, .qr img { display: block; width: 100%; height: auto; border-radius: 6px; }
.address {
  user-select: all; cursor: text; overflow-wrap: anywhere;
  font-weight: 700; font-size: 0.95rem; line-height: 1.6; color: var(--heading);
  background: light-dark(#edeff2, #2b2930); border-radius: 8px; padding: 1.2rem 1.4rem;
  box-shadow: 0 1px 3px light-dark(rgb(50 50 93 / 0.18), rgb(0 0 0 / 0.4));
}
@media (max-width: 520px) { .address { font-size: 0.85rem; padding: 1rem; } }
.pending { color: var(--muted); font-size: 0.9rem; }

.milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.milestones li { display: flex; gap: 10px; align-items: baseline; }
.milestones .mark { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--wip); flex: none; transform: translateY(1px); }
.milestones .done .mark { background: var(--wip); }

/* footer */
.site-footer { background: var(--footer); padding: 40px 16px 30px; text-align: center; }
.general-fund { max-width: 640px; margin: 0 auto 28px; }
.site-footer > .footer-links:first-child { border-top: 0; padding-top: 0; }   /* Donate: no General Fund above */
.general-fund h2 { margin: 0 0 10px; font-size: 1.25rem; color: var(--heading); }
.general-fund p { color: var(--muted); }
.general-fund .qr { width: 150px; margin: 16px auto; }
.general-fund .address { user-select: all; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; color: var(--text); }
.footer-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.site-footer a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.site-footer a:hover { color: var(--orange); }

/* small screens */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; margin-top: 16px; }
  .hero .art { max-width: 240px; grid-row: 1; }
  .columns { grid-template-columns: 1fr; }
  .layout.with-side { display: block; margin-top: 16px; }
  .site-header { padding-block: 10px; }
  .nav-button {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 8px; cursor: pointer; color: var(--heading);
  }
  .nav-button:hover { background: var(--secondary); }
  /* the burger, getmonero.org's size (monero-site css/custom.css .burger), in the theme's colour:
     three lines 7 px apart as theirs (the middle one two, on top of each other), that, opening,
     fold into Monero's M (four lines), hold it a moment, then into an X; closing, back
     the same way. --t goes from 0 (burger) to 1 (X); --a moves each line from the burger to the M
     (t 0 to 0.4), --c from the M to the X (t 0.6 to 1). Where @property isn't known, no
     animation: the burger or the X at once. Each line: its centre (x, y, px, from the button's
     centre), angle (deg) and length (of 24 px) in the burger (0), the M (1) and the X (2). */
  .burger { --t: 0; position: relative; display: block; width: 24px; height: 24px; transition: --t 0.7s linear; }
  .nav-toggle:checked ~ .site-header .burger { --t: 1; }
  .burger span {
    --a: clamp(0, var(--t) * 2.5, 1);
    --c: clamp(0, var(--t) * 2.5 - 1.5, 1);
    --x0: 0; --r0: 0; --s0: 1; --x2: 0; --y2: 0; --s2: 0.9;
    position: absolute; top: 11px; left: 0; width: 24px; height: 2px; border-radius: 1px; background: currentColor;
    transform:
      translate(calc((var(--x0) + (var(--x1) - var(--x0)) * var(--a) + (var(--x2) - var(--x1)) * var(--c)) * 1px),
                calc((var(--y0) + (var(--y1) - var(--y0)) * var(--a) + (var(--y2) - var(--y1)) * var(--c)) * 1px))
      rotate(calc((var(--r0) + (var(--r1) - var(--r0)) * var(--a) + (var(--r2) - var(--r1)) * var(--c)) * 1deg))
      scaleX(calc(var(--s0) + (var(--s1) - var(--s0)) * var(--a) + (var(--s2) - var(--s1)) * var(--c)));
  }
  /* the burger's top, middle (twice) and bottom lines; the M's left stroke, down to the middle, up
     again, its right stroke */
  .burger span:nth-child(1) { --y0: -7; --x1: -8; --y1: 0; --r1: 90; --s1: 0.667; --r2: 45; }
  .burger span:nth-child(2) { --y0: 0; --x1: -4; --y1: -3; --r1: 51.34; --s1: 0.534; --r2: 45; }
  .burger span:nth-child(3) { --y0: 0; --x1: 4; --y1: -3; --r1: -51.34; --s1: 0.534; --r2: -45; }
  .burger span:nth-child(4) { --y0: 7; --x1: 8; --y1: 0; --r1: -90; --s1: 0.667; --r2: -45; }
  .site-header { justify-content: flex-start; gap: 12px; }
  .header-end { margin-left: auto; }
  /* the menu button opens the sidebar as a drawer from the left, on every page */
  .site-nav { display: none; }
  /* the drawer and the backdrop start below the header (4.5rem high), which stays on top */
  .drawer {
    position: fixed; top: 4.5rem; bottom: 0; left: 0; z-index: 30;
    width: min(320px, 86vw); overflow-y: auto; padding: 20px 16px 32px;
    background: var(--bg); box-shadow: var(--shadow);
    transform: translateX(-105%); transition: transform 0.5s;   /* as getmonero.org's menu slides in */
  }
  .nav-toggle:checked ~ .layout > .drawer { transform: none; }
  .backdrop {
    display: block; position: fixed; inset: 4.5rem 0 0; z-index: 20; background: rgb(0 0 0 / 0.45); cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s;
  }
  .nav-toggle:checked ~ .backdrop { opacity: 1; visibility: visible; }
  .drawer-links { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
  .drawer-links a { padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--heading); text-decoration: none; font-weight: 500; }
}
@media (max-width: 520px) {
  .site-header { gap: 8px; padding-inline: 12px; }
  .brand { font-size: 0.9rem; gap: 8px; }
  /* a narrow phone: the menu button and the logo with "CCS" fit on one line */
  .brand-long { display: none; }
  .brand-short { display: inline; }
  .brand img { width: 24px; height: 24px; }
  .stage-grid { grid-template-columns: 1fr; }
  .card h3, .proposal .head h1 { margin-right: 0; margin-top: 18px; }
}

.box + .box { margin-top: 16px; }

/* proposal page: the Contribute dropdown (a <details>, no JavaScript) */
/* a proposal page: the amount at the right end of the bar, bold, as on the current CCS */
.head .progress-label { text-align: right; font-size: 1.05rem; font-weight: 700; color: var(--heading); margin-top: 18px; }
.contribute { margin-top: 22px; text-align: center; }
.contribute summary { list-style: none; cursor: pointer; display: inline-block; }
.contribute summary::-webkit-details-marker { display: none; }
.contribute summary::after { content: " ▾"; }
.contribute[open] summary::after { content: " ▴"; }
.contribute ol {
  margin: 22px auto 4px;
  padding: 0;
  max-width: 44rem;
  list-style-position: inside;
}
.contribute li { margin: 0 0 16px; }
.contribute .address { margin-top: 12px; text-align: center; }

/* tabs: radio buttons, the checked one's panel is shown (no JavaScript) */
.tabs { display: flex; flex-wrap: wrap; margin-top: 28px; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label {
  padding: 10px 20px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid var(--line);
  cursor: pointer;
}
.tabs > label:hover { color: var(--orange); border-bottom-color: color-mix(in srgb, var(--orange) 45%, var(--line)); }
.tabs > input:checked + label { color: var(--orange); border-bottom-color: var(--orange); }
.tabs > input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }
.tabs .panel { display: none; order: 1; width: 100%; padding-top: 24px; }
#tab-proposal:checked ~ .panel-proposal,
#tab-milestones:checked ~ .panel-milestones,
#tab-payouts:checked ~ .panel-payouts { display: block; }

.milestone, .payout {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 20px 14px 52px;
  margin-bottom: 12px;
}
.payout { padding-left: 20px; }
.milestone h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--heading); }
.milestone p, .payout p { margin: 2px 0; color: var(--muted); }
.milestone .label, .payout .label { font-weight: 600; color: var(--text); }
.milestone .mark {
  position: absolute; left: 20px; top: 19px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--wip);
}
.milestone.done .mark { background: var(--wip); }
.tabs::after { content: ""; flex: 1; align-self: flex-end; border-bottom: 3px solid var(--line); }
.site-footer .general-fund p a { display: inline; color: var(--orange); text-decoration: underline; }

/* the stage label on a card only where stages are mixed (a tag page); on a stage's own page it repeats the page */
body:not(.page-explore) .list .card .tag { display: none; }
body:not(.page-explore) .list .card h3 { margin-right: 0; }

/* tags: coloured pills (as on bounties.monero.social), labels on cards, links on a proposal
   page, filters in the sidebar. 8 colours, picked from the tag's name (classes, not
   style=: the CSP allows no inline styles); each passes contrast with its text. */
.tag-0 { --tag-bg: #ff8c00; --tag-fg: #1d1200; }
.tag-1 { --tag-bg: #c9215c; --tag-fg: #fff; }
.tag-2 { --tag-bg: #96dcfa; --tag-fg: #06202c; }
.tag-3 { --tag-bg: #e3d333; --tag-fg: #222000; }
.tag-4 { --tag-bg: #1f7a45; --tag-fg: #fff; }
.tag-5 { --tag-bg: #6a4be8; --tag-fg: #fff; }
.tag-6 { --tag-bg: #fdabcb; --tag-fg: #3a0c1e; }
.tag-7 { --tag-bg: #2f6fb5; --tag-fg: #fff; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.labels:empty { display: none; }
.label, .filter {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; font-weight: 700; text-decoration: none; line-height: 1.5;
  background: var(--tag-bg); color: var(--tag-fg);
}
.label { font-size: 0.75rem; padding: 1px 8px; }
a.label:hover, .filter:hover { color: var(--tag-fg); outline: 2px solid var(--tag-bg); outline-offset: 2px; }
.side .tags-title { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { font-size: 0.82rem; padding: 4px 10px; }
.filter .count { font-weight: 600; opacity: 0.8; }
.filter .count:empty { display: none; }
.filter.active { outline: 2px solid var(--orange); outline-offset: 2px; }

/* an idea's 👍/👎 on its merge request */
.votes { display: flex; gap: 18px; margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }
.votes span { display: inline-flex; align-items: center; gap: 6px; }
.votes .icon { color: var(--orange); }

/* how many proposals a stage has: in the sidebar's stage menu and on the home page's stage cards */
.side .stage-menu a .count, .stage-card .count {
  margin-left: auto; min-width: 1.6em; padding: 0 7px; border-radius: 999px; text-align: center;
  font-size: 0.78rem; font-weight: 700; line-height: 1.6; background: var(--line); color: var(--muted);
}
.stage-card .count { margin-left: 8px; vertical-align: 2px; }

.not-found .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.not-found .clam { display: block; margin: 8px 0 12px; }

/* a Coolify preview's commit line (layouts/_partials/preview.html) */
.preview-banner {
  position: fixed; bottom: 8px; left: 0; right: 0; z-index: 40; width: fit-content; margin: 0 auto;
  padding: 4px 14px; border-radius: 8px; background: #000; color: #fff; font-size: 0.85rem;
}
.preview-banner a { color: #fff; }
body:has(.preview-banner) { padding-bottom: 44px; }   /* so it covers no footer link */