/* Mums & More Shannonigans: the one stylesheet for every page (#0358).
   Served through ManifestStaticFilesStorage, so its URL carries a content
   hash and a deploy can never leave Cloudflare serving a stale copy.

   Two layouts share it:
     public pages   templates/base.html         <body>
     /manage/       templates/manage/base.html  <body class="m-app">
   Each side's element rules (reset, body, a, img, headings) are scoped to its
   own body with :where(), which adds no specificity, so the cascade inside
   each side is exactly what it was as two files. Class rules need no scoping:
   /manage/ classes are all .m-*, the helpdesk widget's #hd-* / .hd-*. */

:root {
  --burgundy:   #4a1d6e;   /* primary royal purple (deep-purple heading tone) */
  --purple-mid: #5e2b82;   /* ribbon-banner purple — hover/accent */
  --amethyst:   #7a2fa8;   /* gemstone accent */
  --gold:       #c8922a;
  --gold-light: #e6c34d;
  --cream:      #faf7fd;    /* near-white with a faint lavender tint */
  --lavender:   #efe6f9;    /* soft lavender wash */
  --white:      #ffffff;
  --dark:       #241033;    /* deep plum */
  --gray:       #6a6270;
  --gray-light: #efe6f9;    /* lavender-tinted alt band */
  --ribbon-1:   #5e2b82;
  --ribbon-2:   #3d1560;
  /* /manage/ only */
  --overdue:    #b3261e;
  --overdue-bg: #fdecea;
  --soon-bg:    #fff4d6;
  --radius:     8px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ════════════════════════════ Public site ════════════════════════════ */
/* ── Mums & More Shannonigans ── */

/* Brand palette sampled from Shannon's 2026 price-list artwork:
   royal purple + metallic gold + lavender, jewel/tiara aesthetic.
   NOTE: --burgundy is the historical name for the primary brand
   color; it is now royal purple. Kept as-is so every consumer
   (CSS + .btn-burgundy + inline template styles) re-themes from
   this single source of truth. */

/* ── Reset / Base ── */
:where(body:not(.m-app)), :where(body:not(.m-app)) *, :where(body:not(.m-app)) *::before, :where(body:not(.m-app)) *::after { margin: 0; padding: 0; }

body:where(:not(.m-app)) {
  font-family: 'Georgia', serif;
  background: var(--cream);
  color: var(--dark);
  line-height: 1.65;
}

:where(body:not(.m-app)) a { color: var(--burgundy); text-decoration: none; }
:where(body:not(.m-app)) a:hover { color: var(--gold); text-decoration: underline; }
/* Inline links inside body text must be visually distinct beyond color alone */
:where(body:not(.m-app)) p a { text-decoration: underline; }
:where(body:not(.m-app)) p a:hover { text-decoration: underline; }

/* ── Skip navigation ── */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  background: var(--burgundy);
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  text-decoration: none;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--gold);
  outline-offset: 0;
}

/* ── Global focus rings ── */
:where(body:not(.m-app)) :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.btn:focus-visible,
.nav-toggle:focus-visible,
.filter-btn:focus-visible,
.faq-question:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 2px;
}

.nav-links a:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 0;
  background: rgba(255,255,255,0.15);
}

/* ── Required field marker ── */
.required-mark {
  color: #c0392b;
  margin-left: 2px;
  font-weight: bold;
}

:where(body:not(.m-app)) img { max-width: 100%; height: auto; display: block; }

/* ── Typography ── */
:where(body:not(.m-app)) h1, :where(body:not(.m-app)) h2, :where(body:not(.m-app)) h3, :where(body:not(.m-app)) h4 {
  font-family: 'Georgia', serif;
  line-height: 1.2;
}

.section-title {
  font-size: 2rem;
  color: var(--burgundy);
  text-align: center;
  margin-bottom: 0.4rem;
}

.section-subtitle {
  text-align: center;
  color: var(--gray);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.gold-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  margin: 0.75rem auto 1.5rem;
  border-radius: 2px;
}

/* ── Navbar ── */
.navbar {
  background: var(--burgundy);
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-brand-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--gold-light);
  font-family: 'Georgia', serif;
}

.nav-brand-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  align-items: center;
}

.nav-links a {
  color: rgba(255,255,255,0.88);
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  font-size: 0.92rem;
  transition: all 0.2s;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}

.nav-cta {
  background: var(--gold) !important;
  color: var(--dark) !important;
  font-weight: bold;
  border-radius: 4px;
}

.nav-cta:hover {
  background: var(--gold-light) !important;
  color: var(--dark) !important;
}

/* Language switcher */
.lang-form {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.5rem;
}

.lang-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.75);
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  line-height: 1;
}

.lang-btn:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.6);
}

.lang-btn.active {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: 0.3s;
}

/* ── Hero ── */
.hero {
  /* Layered jewels (from Shannon's price-list artwork) over the purple gradient.
     Assets carry a baked glow + feathered inner edges; positioned so their
     crisp outer edges bleed off-canvas and only the soft edges show. */
  background:
    url("../brand/jewels/swag-tl.5a8e9bb69cc4.png") -30px -22px / 230px auto no-repeat,
    url("../brand/jewels/swag-tr.04ed52860eab.png") calc(100% + 30px) -22px / 230px auto no-repeat,
    url("../brand/jewels/gem-bl.8d08e6743749.png")  -22px calc(100% + 22px) / 180px auto no-repeat,
    url("../brand/jewels/gem-br.b5d52284571e.png")  calc(100% + 22px) calc(100% + 22px) / 180px auto no-repeat,
    linear-gradient(135deg, var(--burgundy) 0%, #341052 60%, var(--dark) 100%);
  color: white;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8922a' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
}

.hero-content {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-block;
  background: rgba(200, 146, 42, 0.25);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: white;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero h1 span {
  color: var(--gold-light);
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid transparent;
  font-size: 0.95rem;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--dark);
}

.btn-outline {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.6);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
  color: white;
}

.btn-burgundy {
  background: var(--burgundy);
  color: white;
  border-color: var(--burgundy);
}

.btn-burgundy:hover {
  background: #7a2fa8;
  border-color: #7a2fa8;
  color: white;
}

/* ── Sections ── */
.section {
  padding: 4rem 1.5rem;
}

.section-light {
  background: var(--cream);
}

.section-alt {
  background: var(--gray-light);
}

.section-dark {
  background: var(--dark);
  color: white;
}

.section-dark .section-title { color: var(--gold-light); }

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── How It Works ── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.step-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-top: 4px solid var(--gold);
}

.step-number {
  width: 52px;
  height: 52px;
  background: var(--burgundy);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 auto 1rem;
}

.step-card h3 {
  color: var(--burgundy);
  margin-bottom: 0.5rem;
}

/* ── Mum Cards ── */
.mum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
}

.mum-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mum-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.mum-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--gray-light);
}

.mum-card-img-placeholder {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, var(--burgundy), #341052);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

.mum-card-body {
  padding: 1.25rem;
}

.mum-card-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a5e00;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.mum-card-body h2,
.mum-card-body h3 {
  color: var(--burgundy);
  margin-bottom: 0.4rem;
  font-size: 1.15rem;
}

.mum-card-body p {
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 0.75rem;
}

.mum-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--dark);
}

/* ── Price List ── */
.price-list {
  max-width: 560px;
  margin: 0 auto;
}

.price-list img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 28px rgba(74, 29, 110, 0.25);
}

/* ── Category Filter ── */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  justify-content: center;
}

.filter-btn {
  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 2px solid var(--burgundy);
  background: transparent;
  color: var(--burgundy);
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--burgundy);
  color: white;
}

/* ── Testimonials ── */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.testimonial-card {
  background: white;
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border-left: 4px solid var(--gold);
}

.testimonial-card p {
  font-style: italic;
  color: var(--gray);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.testimonial-stars {
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.testimonial-name {
  font-weight: bold;
  color: var(--burgundy);
  font-size: 0.9rem;
}

/* ── Order Form ── */
.order-section {
  max-width: 800px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.35rem;
  color: var(--dark);
  font-size: 0.92rem;
}

.form-control {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
  background: white;
}

.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,146,42,0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-section-title {
  font-size: 1.1rem;
  color: var(--burgundy);
  font-weight: bold;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.4rem;
  margin: 1.75rem 0 1rem;
}

.form-card {
  background: white;
  border-radius: 8px;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.errorlist {
  list-style: none;
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* ── About Page ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-img {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.about-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--burgundy) 0%, #341052 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border-radius: 8px;
}

/* ── FAQ ── */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
}

.faq-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: var(--burgundy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
}

.faq-question:hover { background: var(--gray-light); }

.faq-answer {
  padding: 0 1.5rem 1.1rem;
  color: var(--gray);
  display: none;
  line-height: 1.7;
}

.faq-item.open .faq-answer { display: block; }
.faq-chevron { transition: transform 0.2s; font-style: normal; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ── Contact ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info h2,
.contact-info h3 {
  color: var(--burgundy);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.contact-icon {
  font-size: 1.3rem;
  margin-top: 0.1rem;
}

.contact-item strong { display: block; color: var(--dark); margin-bottom: 0.1rem; }
.contact-item span, .contact-item a { color: var(--gray); font-size: 0.95rem; }

.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--burgundy);
  color: white !important;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: bold;
  transition: background 0.2s;
  text-decoration: none;
}

.social-link:hover { background: #7a2fa8; color: white !important; }

/* ── Messages ── */
.messages {
  max-width: 1200px;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
}

.alert {
  padding: 0.9rem 1.25rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ── Confirm Page ── */
.confirm-card {
  max-width: 600px;
  margin: 3rem auto;
  text-align: center;
  background: white;
  padding: 3rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.confirm-icon { font-size: 4rem; margin-bottom: 1rem; }
.confirm-card h1 { color: var(--burgundy); margin-bottom: 1rem; }
.confirm-card p { color: var(--gray); margin-bottom: 1rem; line-height: 1.7; }

/* ── Page Hero (inner pages) ── */
.page-hero {
  background:
    url("../brand/jewels/swag-tl.5a8e9bb69cc4.png") -22px -18px / 165px auto no-repeat,
    url("../brand/jewels/swag-tr.04ed52860eab.png") calc(100% + 22px) -18px / 165px auto no-repeat,
    linear-gradient(135deg, var(--burgundy), #341052);
  color: white;
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero h1 { color: white; font-size: clamp(1.6rem, 4vw, 2.5rem); }
.page-hero p { color: rgba(255,255,255,0.8); margin-top: 0.5rem; }

/* ── Footer ── */
:where(body:not(.m-app)) footer {
  background: var(--dark);
  color: rgba(255,255,255,0.75);
  padding: 2.5rem 1.5rem 1.5rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-brand-name {
  color: var(--gold-light);
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}

.footer-col-title {
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-admin-link {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  text-decoration: none;
}
.footer-admin-link:hover {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.4rem; }
.footer-col ul a { color: rgba(255,255,255,0.65); font-size: 0.88rem; }
.footer-col ul a:hover { color: var(--gold-light); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.72);
}
.footer-bottom a {
  color: rgba(255,255,255,0.82);
  text-decoration: underline;
}
.footer-bottom a:hover {
  color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--burgundy);
    flex-direction: column;
    padding: 1rem;
    gap: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .navbar { position: relative; }

  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }

  .form-row { grid-template-columns: 1fr; }

  .form-card { padding: 1.5rem; }
}

@media (max-width: 600px) {
  /* Shrink corner jewels and drop the bottom gems so hero text stays clear */
  .hero {
    background-size: 120px auto, 120px auto, 0 0, 0 0, auto;
  }
  .page-hero { background-size: 95px auto, 95px auto, auto; }
}

@media (max-width: 480px) {
  .hero { padding: 3rem 1rem 2.5rem; }
  .section { padding: 2.5rem 1rem; }
}

/* ── Skip link and language switch (were inline in base.html) ── */
.skip-link{position:fixed;top:0;left:0;transform:translateY(-100%);background:#4a1d6e;color:#fff;padding:.75rem 1.5rem;font-size:1rem;font-weight:bold;z-index:9999;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
.lang-form{display:flex;align-items:center;gap:2px;margin-left:.5rem}
.lang-btn{background:none;border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.75);padding:.2rem .45rem;border-radius:3px;font-size:.72rem;font-weight:bold;letter-spacing:.05em;cursor:pointer;font-family:inherit;transition:all .15s;line-height:1}
.lang-btn:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.6)}
.lang-btn.active{background:#c8922a;color:#241033;border-color:#c8922a}

/* ── Previous work gallery (was inline in core/gallery.html) ── */
  .work-title { margin-top: 3.5rem; }
  .work-intro { text-align: center; color: var(--gray); margin: 0 auto 1.5rem; max-width: 600px; }
  .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
  .work-tile { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
  .work-tile img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .25s; }
  .work-tile:hover img, .work-tile:focus-visible img { transform: scale(1.04); }
  .work-item { display: flex; flex-direction: column; gap: .6rem; }
  .work-want { text-align: center; padding: .5rem .9rem; font-size: .9rem; }
  .mum-card-zoom { display: block; overflow: hidden; cursor: zoom-in; }
  .mum-card-zoom .mum-card-img { display: block; transition: transform .25s; }
  .mum-card-zoom:hover .mum-card-img, .mum-card-zoom:focus-visible .mum-card-img { transform: scale(1.04); }

/* ═══════════════════════ /manage/ back-office ═══════════════════════ */
/* /manage/ order back-office. Mobile-first: Shannon works from her phone.
   Brand tokens are the shared :root at the top of this file. */


body.m-app {
  margin: 0;
  background: var(--cream);
  color: var(--dark);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:where(.m-app) a { color: var(--burgundy); }

.m-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header */
.m-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem;
  padding: .75rem 16px;
  background: var(--burgundy);
  color: var(--white);
}
.m-brand {
  color: var(--white); text-decoration: none;
  font-family: Georgia, serif; font-size: 1.15rem; font-weight: bold;
}
.m-brand span { color: var(--gold-light); font-weight: normal; }
.m-nav { display: flex; align-items: center; gap: 1rem; font-size: .95rem; }
.m-nav a { color: var(--white); text-decoration: none; }
.m-nav a:hover, .m-nav a:focus-visible { text-decoration: underline; }
.m-nav form { margin: 0; }
.m-link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--white); font: inherit;
}
.m-link-button:hover, .m-link-button:focus-visible { text-decoration: underline; }

.m-main { max-width: 960px; margin: 0 auto; padding: 0 0 2rem; }

/* Status tabs — scroll sideways on a phone rather than wrapping */
.m-tabs {
  display: flex; gap: .25rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .75rem 16px 0;
  border-bottom: 2px solid var(--lavender);
  scrollbar-width: thin;
}
.m-tab {
  flex: 0 0 auto;
  padding: .55rem .8rem;
  border-radius: var(--radius) var(--radius) 0 0;
  text-decoration: none; white-space: nowrap;
  color: var(--gray);
}
.m-tab:hover, .m-tab:focus-visible { background: var(--lavender); color: var(--dark); }
.m-tab.is-active {
  background: var(--burgundy); color: var(--white); font-weight: bold;
}
.m-count { font-weight: normal; opacity: .85; }

/* Order list */
.m-panel { padding: 1rem 16px; }
.m-hint { margin: 0 0 .75rem; color: var(--gray); font-size: .9rem; }
.m-empty { color: var(--gray); text-align: center; padding: 2.5rem 0; }

.m-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.m-order a {
  display: grid; gap: .15rem;
  padding: .8rem 1rem;
  background: var(--white);
  border: 1px solid var(--lavender); border-left: 4px solid var(--lavender);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
.m-order a:hover, .m-order a:focus-visible { border-color: var(--purple-mid); }
.m-order.is-overdue a { border-left-color: var(--overdue); background: var(--overdue-bg); }
.m-order.is-soon a { border-left-color: var(--gold); background: var(--soon-bg); }
.m-order-title { font-weight: bold; }
.m-order-meta, .m-order-money { color: var(--gray); font-size: .9rem; }
.m-order-due { font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.m-badge {
  display: inline-block; padding: .05rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: bold; letter-spacing: .02em;
}
.m-badge-overdue { background: var(--overdue); color: var(--white); }
.m-badge-soon { background: var(--gold); color: var(--dark); }

/* Login */
.m-login { max-width: 360px; margin: 2.5rem auto; padding: 0 16px; }
.m-login h1 { font-family: Georgia, serif; color: var(--burgundy); }
.m-login form { display: grid; gap: .5rem; }
.m-login input[type=text], .m-login input[type=password] {
  width: 100%; padding: .65rem .75rem; font-size: 1rem;
  border: 1px solid #cbbfd8; border-radius: var(--radius);
}
.m-button {
  margin-top: .75rem; padding: .7rem 1rem;
  background: var(--burgundy); color: var(--white);
  border: 0; border-radius: var(--radius); font-size: 1rem; font-weight: bold; cursor: pointer;
}
.m-button:hover, .m-button:focus-visible { background: var(--purple-mid); }
.m-error { color: var(--overdue); background: var(--overdue-bg); padding: .6rem .75rem; border-radius: var(--radius); }

@media (min-width: 720px) {
  .m-order a { grid-template-columns: 1fr auto; column-gap: 1.5rem; }
  .m-order-due, .m-order-money { justify-self: end; }
}

/* "+ New order" in the header */
.m-nav .m-nav-new {
  background: var(--gold); color: var(--dark); font-weight: bold;
  padding: .3rem .7rem; border-radius: 999px;
}
.m-nav .m-nav-new:hover, .m-nav .m-nav-new:focus-visible { background: var(--gold-light); text-decoration: none; }

/* Modal (native <dialog>: focus trap, Escape and backdrop come free) */
.m-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 12px;
  box-shadow: 0 20px 50px rgba(36, 16, 51, .35);
  color: var(--dark);
}
.m-modal::backdrop { background: rgba(36, 16, 51, .55); }
.m-modal-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 16px; background: var(--burgundy); color: var(--white);
}
.m-modal-header h2 { margin: 0; font-family: Georgia, serif; font-size: 1.2rem; }
.m-modal-close {
  background: none; border: 0; color: var(--white); cursor: pointer;
  font-size: 1.6rem; line-height: 1; padding: 0 .25rem;
}
.m-page-title { font-family: Georgia, serif; color: var(--burgundy); margin-top: 0; }

/* Forms */
.m-form { padding: 1rem 16px 1.25rem; display: grid; gap: 1rem; }
.m-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.m-form legend {
  padding: 0 0 .35rem; margin-bottom: .1rem; width: 100%;
  font-weight: bold; color: var(--burgundy); border-bottom: 1px solid var(--lavender);
}
.m-field { display: grid; gap: .25rem; min-width: 0; }
.m-field label { font-size: .9rem; font-weight: 600; }
.m-required { color: var(--overdue); }
.m-field input, .m-field select, .m-field textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; font-size: 1rem;
  border: 1px solid #cbbfd8; border-radius: var(--radius); background: var(--white);
}
.m-field input:focus, .m-field select:focus, .m-field textarea:focus {
  outline: 2px solid var(--amethyst, #7a2fa8); outline-offset: 1px; border-color: transparent;
}
.m-field.has-error input, .m-field.has-error select { border-color: var(--overdue); }
.m-help { color: var(--gray); font-size: .82rem; }
.m-field-error { color: var(--overdue); font-size: .85rem; font-weight: 600; }
.m-field-row { display: grid; gap: .6rem; }
.m-match {
  margin: 0; padding: .55rem .75rem; border-radius: var(--radius);
  background: var(--lavender); font-size: .9rem;
}
.m-match.is-warning { background: var(--soon-bg); }
#customer-match:empty { display: none; }
.m-form-actions {
  display: flex; justify-content: flex-end; gap: .6rem;
  position: sticky; bottom: 0; padding-top: .75rem; background: var(--white);
}
.m-form-actions .m-button { margin-top: 0; }
.m-button-secondary {
  padding: .7rem 1rem; background: var(--white); color: var(--burgundy);
  border: 1px solid var(--burgundy); border-radius: var(--radius); font-size: 1rem; cursor: pointer;
}

@media (min-width: 560px) {
  .m-field-row { grid-template-columns: 1fr 1fr; }
}

/* ── Order page ─────────────────────────────────────────────────────────── */
.m-order-page { padding: 1rem 16px 2rem; display: grid; gap: 1rem; }

.m-order-head { display: grid; gap: .2rem; position: relative; padding-right: 7rem; }
.m-order-head h1 {
  margin: .15rem 0 0; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.2; color: var(--burgundy);
}
.m-back { font-size: .9rem; text-decoration: none; color: var(--gray); }
.m-back:hover, .m-back:focus-visible { color: var(--burgundy); text-decoration: underline; }
.m-order-sub { margin: 0; color: var(--gray); }
.m-order-head .m-pill { position: absolute; top: 1.4rem; right: 0; }

.m-pill {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: bold; letter-spacing: .02em; white-space: nowrap;
  background: var(--lavender); color: var(--burgundy);
}
.m-pill-production, .m-pill-full_payment, .m-pill-delivery { background: var(--burgundy); color: var(--white); }
.m-pill-done { background: #1f7a4d; color: var(--white); }
.m-pill-cancelled { background: #e4e0e8; color: var(--gray); }

/* Progress: seven small steps; labels only for the current one on a phone */
.m-progress {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.m-progress li { position: relative; padding-top: 10px; font-size: .72rem; color: var(--gray); text-align: center; }
.m-progress li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px;
  background: var(--lavender);
}
.m-progress li.is-done::before { background: var(--gold); }
.m-progress li.is-current::before { background: var(--burgundy); }
.m-progress li span { display: none; }
.m-progress li.is-current span { display: block; color: var(--burgundy); font-weight: bold; white-space: nowrap; }
.m-progress.is-cancelled li::before { background: #e4e0e8; }

/* Cards */
.m-card {
  background: var(--white); border-radius: 12px; padding: 1rem;
  box-shadow: 0 1px 2px rgba(36, 16, 51, .06), 0 4px 14px rgba(74, 29, 110, .07);
  border: 1px solid #eee6f6;
}
.m-card-title { margin: 0 0 .6rem; font-family: Georgia, serif; font-size: 1.1rem; color: var(--burgundy); }
.m-card-action { border-top: 4px solid var(--gold); display: grid; gap: .75rem; }
.m-card-action p { margin: 0; }
.m-muted { color: var(--gray); margin: 0; }

.m-button-big { width: 100%; margin-top: 0; padding: .9rem 1rem; font-size: 1.05rem; }
.m-warnings {
  list-style: none; margin: 0; padding: .6rem .8rem; border-radius: var(--radius);
  background: var(--soon-bg); border-left: 4px solid var(--gold); font-size: .92rem;
}
.m-warnings li::before { content: "⚠ "; }

.m-secondary-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1rem; }
.m-secondary-actions form { margin: 0; }
.m-secondary-actions .m-button-secondary { padding: .5rem .8rem; font-size: .92rem; }
.m-cancel summary { cursor: pointer; color: var(--overdue); font-size: .92rem; padding: .5rem 0; }
.m-cancel form { display: grid; gap: .4rem; margin-top: .4rem; min-width: min(320px, 80vw); }
.m-cancel label { font-size: .85rem; font-weight: 600; }
.m-cancel input {
  padding: .55rem .7rem; font: inherit; border: 1px solid #cbbfd8; border-radius: var(--radius);
}
.m-button-danger {
  padding: .6rem 1rem; background: var(--overdue); color: var(--white);
  border: 0; border-radius: var(--radius); font-weight: bold; cursor: pointer; font-size: .95rem;
}

/* Money */
.m-money { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 0 0 .5rem; }
.m-money div { background: var(--cream); border-radius: var(--radius); padding: .55rem .7rem; }
.m-money dt { font-size: .78rem; color: var(--gray); text-transform: uppercase; letter-spacing: .04em; }
.m-money dd { margin: .1rem 0 0; font-size: 1.15rem; font-weight: bold; }
.m-money dd small { font-size: .8rem; font-weight: normal; color: var(--gray); }
.m-money-balance.is-owing { background: var(--overdue-bg); }
.m-money-balance.is-owing dd { color: var(--overdue); }

.m-inline-edit summary {
  cursor: pointer; color: var(--burgundy); font-weight: 600; font-size: .92rem; padding: .35rem 0;
}
.m-form-compact { padding: .5rem 0 0; }
.m-form-compact .m-form-actions { position: static; padding-top: 0; }

/* Payments */
.m-payments { list-style: none; margin: 0 0 .4rem; padding: 0; }
.m-payments li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--lavender);
}
.m-payments li:last-child { border-bottom: 0; }
.m-payments form { margin: 0; }
.m-payment-amount { font-weight: bold; }
.m-payment-meta { color: var(--gray); font-size: .9rem; }
.m-icon-button {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid transparent;
  background: none; color: var(--gray); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.m-icon-button:hover, .m-icon-button:focus-visible { border-color: var(--overdue); color: var(--overdue); }

/* Photos */
.m-photos {
  list-style: none; margin: 0 0 .4rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem;
}
.m-photos li { position: relative; display: grid; gap: .3rem; }
.m-photos img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius); background: var(--cream);
}
.m-photos form { margin: 0; }
.m-photos .m-icon-button {
  position: absolute; top: .3rem; right: .3rem; background: rgba(255, 255, 255, .9);
}
.m-photo-toggles { display: grid; gap: .1rem; font-size: .88rem; }
.m-photo-toggles label, .m-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.m-form-compact input[type=file] { margin-bottom: .5rem; max-width: 100%; }
.m-check { margin: .25rem 0; }

/* Details */
.m-details { margin: 0 0 .6rem; display: grid; gap: .55rem; }
.m-details div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; }
.m-details dt { color: var(--gray); font-size: .88rem; }
.m-details dd { margin: 0; }
.m-flag dd { background: var(--soon-bg); padding: .3rem .5rem; border-radius: 6px; font-size: .92rem; }
.m-small-link { font-size: .88rem; }

/* History */
.m-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--lavender); display: grid; gap: .75rem; }
.m-timeline li { position: relative; display: grid; gap: .1rem; }
.m-timeline li::before {
  content: ""; position: absolute; left: calc(-1rem - 6px); top: .35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--white);
}
.m-timeline time { font-size: .78rem; color: var(--gray); }
.m-timeline small { color: var(--gray); }
.m-timeline-note { display: block; white-space: normal; }

@media (min-width: 720px) {
  .m-money { grid-template-columns: repeat(4, 1fr); }
  .m-progress li span { display: block; }
  .m-button-big { width: auto; }
}

/* ── Customers ──────────────────────────────────────────────────────────── */
.m-nav { flex-wrap: wrap; row-gap: .4rem; }
.m-search { margin: 0 0 1rem; }
.m-search input {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: 1.05rem;
  border: 1px solid #cbbfd8; border-radius: 999px; background: var(--white);
}
.m-search input:focus { outline: 2px solid #7a2fa8; outline-offset: 1px; border-color: transparent; }
.m-customers { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.m-customers a {
  display: grid; gap: .1rem; padding: .75rem 1rem;
  background: var(--white); border: 1px solid #eee6f6; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(36, 16, 51, .05);
  color: inherit; text-decoration: none;
}
.m-customers a:hover, .m-customers a:focus-visible { border-color: var(--purple-mid); }
.m-customer-name { font-weight: bold; }
.m-customer-contact, .m-customer-orders { color: var(--gray); font-size: .9rem; }
.m-customer-notes { margin: 0 0 .5rem; }
.m-stats { margin: 0; }
.m-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.m-card-head .m-card-title { margin: 0; }
.m-button-small { margin-top: 0; padding: .45rem .8rem; font-size: .9rem; text-decoration: none; display: inline-block; }
.m-order-meta .m-pill { font-size: .72rem; padding: .1rem .5rem; margin-right: .2rem; vertical-align: 1px; }
.m-order-sub a { color: inherit; }
.m-stats div { background: var(--white); border: 1px solid #eee6f6; box-shadow: 0 1px 2px rgba(36, 16, 51, .05); }
.m-stats .m-money-balance.is-owing { background: var(--overdue-bg); }

/* ── New order modal, polished (2026-09-23) ─────────────────────────────── */
.m-modal {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  background: var(--cream);
  border-radius: 16px;
  overflow: hidden;              /* header/footer corners follow the radius */
  display: none;
}
.m-modal[open] { display: flex; flex-direction: column; }
.m-modal::backdrop { background: rgba(36, 16, 51, .6); backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .m-modal[open] { animation: m-modal-in .18s ease-out; }
  @keyframes m-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}

.m-modal-header {
  position: static; flex: 0 0 auto;
  align-items: flex-start;
  padding: 1rem 18px .9rem;
  background: linear-gradient(135deg, var(--burgundy), var(--purple-mid));
  border-bottom: 3px solid var(--gold);
}
.m-modal-header h2 { font-size: 1.35rem; }
.m-modal-sub { margin: .15rem 0 0; font-size: .88rem; color: var(--gold-light); }
.m-modal-close { border-radius: 50%; width: 2.2rem; height: 2.2rem; }
.m-modal-close:hover, .m-modal-close:focus-visible { background: rgba(255, 255, 255, .15); }

/* The form fills the dialog: scrolling body, footer pinned below it */
.m-order-form { padding: 0; gap: 0; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.m-order-form-body { overflow-y: auto; padding: 14px 12px; display: grid; gap: 12px; }
.m-section {
  background: var(--white); border: 1px solid #eee6f6 !important; border-radius: 12px;
  padding: .9rem 14px 1rem !important;
  box-shadow: 0 1px 2px rgba(36, 16, 51, .05);
}
.m-order-form .m-section legend {
  float: left; width: 100%; margin: 0 0 .5rem; padding: 0; border: 0;
  font-family: Georgia, serif; font-size: 1.05rem; font-weight: bold; color: var(--burgundy);
}
.m-order-form .m-section legend + * { clear: both; }
.m-order-form .m-field input, .m-order-form .m-field select, .m-order-form .m-field textarea {
  border-radius: 10px; border-color: #d9cfe6; background: #fdfcff;
}
.m-order-form .m-field input::placeholder, .m-order-form .m-field textarea::placeholder { color: #a89fb2; }
.m-order-form .m-field label { font-weight: 600; color: var(--dark); }

/* Status pills */
.m-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.m-pill-choice { position: relative; cursor: pointer; }
.m-pill-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.m-pill-choice span {
  display: inline-block; padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid #d9cfe6; background: var(--white); color: var(--dark);
  font-size: .92rem; transition: background .12s, color .12s, border-color .12s;
}
.m-pill-choice:hover span { border-color: var(--purple-mid); }
.m-pill-choice input:focus-visible + span { outline: 2px solid #7a2fa8; outline-offset: 2px; }
.m-pill-choice input:checked + span { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); font-weight: bold; }
.m-pill-choice-cancelled input:checked + span { background: var(--gray); border-color: var(--gray); }
.m-status-picker .m-help { display: block; margin-top: .5rem; }

/* "$" prefix on the quote */
/* The "$" shares the input's grid cell, so it stays centred however the label wraps. */
.m-money-input .m-field label { grid-row: 1; }
.m-money-input .m-field input { grid-row: 2; grid-column: 1; padding-left: 1.6rem !important; }
.m-money-input .m-field::before {
  content: "$"; grid-row: 2; grid-column: 1; align-self: center; justify-self: start;
  margin-left: .75rem; z-index: 1; color: var(--gray); pointer-events: none;
}

/* Cancel reason only when Cancelled is picked */
.m-cancel-reason { display: none; }
.m-order-form:has(input[name="status"][value="cancelled"]:checked) .m-cancel-reason { display: block; }

/* Footer pinned under the scrolling body */
.m-modal-footer {
  position: static; flex: 0 0 auto;
  padding: .75rem 14px calc(.75rem + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid #eee6f6;
  box-shadow: 0 -4px 12px rgba(36, 16, 51, .05);
}
.m-modal-footer .m-button { padding-left: 1.4rem; padding-right: 1.4rem; }

/* The same form as a full page (no dialog) */
.m-panel > .m-order-form .m-order-form-body { padding: 0; overflow: visible; }
.m-panel > .m-order-form .m-modal-footer { background: transparent; border: 0; box-shadow: none; padding: .75rem 0 0; }
/* The dialog takes focus itself on open (autofocus); it isn't a control, so no ring. */
.m-modal:focus, .m-modal:focus-visible { outline: none; }

/* My requests (helpdesk change requests, #0365) */
.m-pill-in_progress { background: var(--burgundy); color: var(--white); }
.m-pill-wont_do { background: #e4e0e8; color: var(--gray); }
.m-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.m-requests li {
  padding: .75rem 1rem; background: var(--white); border: 1px solid #eee6f6; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(36, 16, 51, .05);
}
.m-request-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.m-request-meta { color: var(--gray); font-size: .85rem; margin: 0; }
.m-request-comment { margin: .5rem 0; white-space: normal; overflow-wrap: anywhere; }
.m-request-page { font-size: .85rem; color: var(--gray); overflow-wrap: anywhere; }

/* Discounts and donations (#0364): they lower the balance but are not money received */
.m-adjustments .m-payment-amount, .m-money-adjusted dd, .m-timeline-adjusted { color: var(--gray); }
.m-adjustments { margin-top: .5rem; }
.m-pill-donated { background: #fdf3df; color: #7a5410; }

/* Money report /manage/reports/ (#0364) */
.m-report-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 0 0 .25rem; }
.m-report-filters label { display: grid; gap: .2rem; font-size: .85rem; color: var(--gray); }
.m-report-filters select, .m-report-filters input { font: inherit; padding: .4rem .5rem; border: 1px solid #d8cce6; border-radius: 8px; background: var(--white); }
.m-report-tiles { margin: .5rem 0 1rem; }
.m-report-tiles small { display: block; font-size: .75rem; color: var(--gray); font-weight: normal; }
.m-report-downloads { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.m-table-wrap { overflow-x: auto; background: var(--white); border: 1px solid #eee6f6; border-radius: 12px; }
.m-report-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.m-report-table th, .m-report-table td { padding: .5rem .6rem; border-bottom: 1px solid #f1eaf7; text-align: left; white-space: nowrap; }
.m-report-table th { font-size: .78rem; color: var(--gray); font-weight: bold; }
.m-report-table .m-num { text-align: right; font-variant-numeric: tabular-nums; }
.m-report-table tbody tr:last-child td { border-bottom: none; }

/* ═══════════ Staff "Request a change" widget, both layouts (#0365) ═══════════ */
#hd-root{--hd-purple:#4a1d6e;--hd-gold:#c8922a;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#hd-button{position:fixed;right:16px;bottom:16px;z-index:9000;background:var(--hd-purple);color:#fff;border:2px solid var(--hd-gold);border-radius:999px;padding:.6rem 1rem;font-family:inherit;font-weight:600;font-size:.9rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#hd-button:hover,#hd-button:focus-visible{background:#5e2a8a}
/* Room to scroll the page's last line clear of the fixed button (MUMS-1: it covered the footer's π on a phone).
   The padding goes inside the dark footer, not on body, so no cream strip shows below it. */
body:has(#hd-root) footer,body:has(#hd-root) .m-main{padding-bottom:calc(16px + 2.6rem + 16px)}
#hd-dialog{margin:auto;border:none;border-radius:12px;padding:0;width:min(440px,calc(100vw - 32px));box-shadow:0 12px 40px rgba(0,0,0,.35);color:#241033}
#hd-dialog::backdrop{background:rgba(36,16,51,.45)}
#hd-dialog form{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem}
#hd-dialog h2{margin:0;font-size:1.15rem;color:var(--hd-purple)}
#hd-dialog label{font-weight:600;font-size:.9rem;display:flex;flex-direction:column;gap:.3rem}
#hd-dialog textarea,#hd-dialog select{font:inherit;font-weight:400;padding:.5rem;border:1px solid #b9a6c9;border-radius:6px;width:100%;box-sizing:border-box}
#hd-dialog textarea{min-height:7rem;resize:vertical}
.hd-picked{font-size:.85rem;background:#f4eefa;border-radius:6px;padding:.5rem;margin:0;overflow-wrap:anywhere}
.hd-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.hd-btn{font-family:inherit;font-weight:600;font-size:.9rem;line-height:1;padding:.6rem .9rem;border-radius:6px;cursor:pointer;border:1px solid var(--hd-purple);background:#fff;color:var(--hd-purple)}
.hd-btn-primary{background:var(--hd-purple);color:#fff}
.hd-status{margin:0;font-size:.9rem;min-height:1.2em}
.hd-status.hd-error{color:#a3122c}
#hd-box{position:fixed;z-index:9001;pointer-events:none;border:3px solid var(--hd-gold);background:rgba(200,146,42,.15);border-radius:4px;display:none}
#hd-banner{position:fixed;top:0;left:0;right:0;z-index:9002;background:var(--hd-purple);color:#fff;padding:.7rem 1rem;display:none;justify-content:space-between;align-items:center;gap:1rem;font-size:.95rem}
#hd-banner .hd-btn{border-color:#fff}
body.hd-picking,body.hd-picking *{cursor:crosshair!important}
@media (max-width:600px){
  #hd-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  #hd-dialog form{height:100%;box-sizing:border-box}
}