/* ============================================================
   MMOL DATABASE: visual identity. Site-specific.

   WHO THIS IS FOR
   People being pitched a coaching program, a done-for-you store,
   an MLM or a trading course, often money-stretched and hopeful,
   sometimes already paid in, plus the family members checking
   on their behalf. They need clear, non-judgmental facts fast.

   WHAT THE DESIGN HAS TO SAY
   Official, careful and on your side. This is the case file, not
   a gossip site: every claim is attributed, every stage is
   stamped in words, nothing sensational.

   SIGNATURES
   Case cards as manila file folders with an agency tab and a
   worded stage stamp (Complaint filed, Settlement announced,
   Final order, Refunds sent), a folder brand mark, numbered
   seven-check steps, and a red flag checker that answers in the
   regulators' own words.

   COLOR
   Warm paper, aubergine ink, deep teal links and buttons, manila
   tabs, and stamp colors for stages (red, amber, blue, green) on
   matching tints. Every pair is checked by the build script, and
   no stage relies on color alone.

   TYPE
   Roboto Slab for headings: steady and official. Source Sans 3
   for reading: clear at every size. Courier Prime for stamps,
   dates and file labels, the typewriter of a case file.
   ============================================================ */

:root {
  --paper:  #f8f6f1;
  --manila: #f3e3b5;
  --t-red: #fbe7e8; --t-amber: #fbeed8; --t-green: #e2f1e7; --t-blue: #e3ecf8;
  --ink:    #1f1b24;
  --soft:   #554e5c;
  --link:   #0b5c7a;
  --red:    #a61b29;
  --amber:  #8a4b00;
  --green:  #1d6b3f;
  --blue:   #1f4f8f;
  --line:   #dcd6cb;
  --dark:   #2a2233;
  --f-text: #e6dff0;
  --f-head: #f3e3b5;

  --accent:     var(--link);
  --accent-ink: #ffffff;
  --focus:      var(--link);
  --measure:    66ch;

  --display: 'Roboto Slab', Georgia, serif;
  --body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type:    'Courier Prime', 'Courier New', ui-monospace, monospace;
}

[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--paper); }
.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; color: var(--ink); }
h1 { font-weight: 800; font-size: clamp(2.2rem, 5.5vw, 3.7rem); }
h2 { font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin-bottom: 0.55rem; }
h3 { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.3rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
a:hover { color: var(--ink); text-decoration-thickness: 2.5px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.kicker { font-family: var(--type); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--soft); max-width: 58ch; }
.fine { font-size: 0.9rem; color: var(--soft); margin-top: 0.8rem; }
.source { font-size: 0.8125rem; color: var(--soft); margin-top: auto; padding-top: 0.5rem; overflow-wrap: anywhere; }
.lab { font-family: var(--type); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); margin: 0.8rem 0 0.1rem; }
.lab:first-child { margin-top: 0; }
.lab--red { color: var(--red); }
.lab--amber { color: var(--amber); }
.meta { font-family: var(--type); font-size: 0.875rem; color: var(--soft); margin: 0 0 0.2rem; }
.note { font-size: 0.95rem; color: var(--soft); margin-top: 0.8rem; max-width: 60ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.55rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.folder { position: relative; width: 30px; height: 22px; background: var(--manila); border: 2px solid var(--ink); border-radius: 2px 4px 4px 4px; margin-top: 4px; }
.folder::before { content: ""; position: absolute; left: -2px; top: -7px; width: 13px; height: 6px; background: var(--manila); border: 2px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 0.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.55rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { background: var(--manila); border-radius: 4px; }

main { padding-block: 2.5rem 4rem; }
.hero { padding-bottom: 0.75rem; }
.hero h1 { max-width: 18ch; margin-bottom: 0.9rem; }
.section { margin-top: 3rem; }

.tiles { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.tile { max-width: none; background: #ffffff; border: 1px solid var(--line); border-top: 6px solid var(--manila); border-radius: 6px; padding: 1rem 1.1rem; position: relative; }
.tile h3 a { color: var(--ink); text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile h3 a:hover { text-decoration: underline; }
.tile:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.tile h3 a:focus-visible { outline: none; }

.cases { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.case { max-width: 56rem; }
.case .tab { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; background: var(--manila); border: 1px solid #d9c386; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0.35rem 1rem 0.3rem; font-family: var(--type); font-weight: 700; }
.case .when { font-weight: 400; }
.case .file { background: #ffffff; border: 1px solid var(--line); border-top: 6px solid var(--manila); border-radius: 0 8px 8px 8px; padding: 1rem 1.25rem 1rem; }
.case h3 { font-family: var(--body); font-weight: 700; font-size: 1.05rem; line-height: 1.45; }
.stamps { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-bottom: 0.4rem; }
.stamp { display: inline-block; font-family: var(--type); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.6rem; border: 2px solid currentColor; border-radius: 4px; box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px currentColor; }
.stamp--complaint { color: var(--red); background: var(--t-red); }
.stamp--settlement { color: var(--amber); background: var(--t-amber); }
.stamp--final { color: var(--blue); background: var(--t-blue); }
.stamp--refunds { color: var(--green); background: var(--t-green); }
.kind { font-size: 0.95rem; color: var(--soft); font-weight: 600; }
.more { margin-top: 1rem; font-weight: 600; }
.empty { margin-top: 1rem; font-weight: 600; }

.cards { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.card { max-width: none; background: #ffffff; border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.2rem 0.9rem; display: flex; flex-direction: column; scroll-margin-top: 1rem; }
.card.lookup { border-left: 5px solid var(--link); }
.cost { font-size: 0.95rem; margin-top: 0.5rem; }
.go { margin-top: auto; padding-top: 0.5rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

.panel { background: #ffffff; border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.1rem, 3vw, 1.8rem); max-width: 56rem; }
.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 0.5rem; }
.panel--red { background: var(--t-red); border-color: #efc4c8; }
.panel--amber { background: var(--t-amber); border-color: #ecd3a9; }
.after-panel { margin-top: 2rem; }
.timeline { list-style: none; padding: 0; margin: 1rem 0 0; border-left: 3px solid var(--amber); }
.timeline li { position: relative; padding: 0 0 1.1rem 1.3rem; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 0.35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--t-amber); border: 3px solid var(--amber); }
.timeline h3 { font-size: 1.05rem; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.1rem 0 0; max-width: 50rem; }
.steps li { counter-increment: s; position: relative; padding: 0 0 1.3rem 3.2rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -0.1rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; background: var(--manila); border: 2px solid var(--ink); border-radius: 4px; font-family: var(--type); font-weight: 700; font-size: 1.1rem; }
.steps .source { display: inline; padding: 0; }

.checker fieldset { border: 0; margin: 1rem 0 0; padding: 0; }
.checker legend { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.4rem; }
.flag-list { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0.2rem; }
.flag-list li { margin: 0 !important; }
.flag-list label { display: flex; gap: 0.7rem; align-items: flex-start; min-height: 44px; padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; }
.flag-list label:hover { background: var(--paper); }
.flag-list input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--red); }
.flag-out:not(:empty) { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.flag-out h3 + ul { margin-top: 0.5rem; }
.flag-results { list-style: none; padding: 0 !important; }
.flag-results li { border-left: 4px solid var(--red); padding: 0.1rem 0 0.2rem 0.9rem; margin-bottom: 1rem !important; }
.flag-title { font-weight: 700; }
.next-steps { margin-top: 0.5rem; }

.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.5rem; margin-top: 2rem; padding: 1rem 1.2rem; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; max-width: 56rem; }
.filter label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.filter select, .filter input { min-height: 44px; padding: 0 0.6rem; border: 2px solid var(--soft); border-radius: 6px; background: #ffffff; font: inherit; color: var(--ink); }
.shown { width: 100%; margin: 0; font-size: 0.95rem; color: var(--soft); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.3rem; background: var(--link); color: #ffffff; border: 2px solid var(--link); border-radius: 6px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.btn--quiet { background: #ffffff; color: var(--ink); border-color: var(--ink); }
.btn--quiet:hover { background: var(--manila); color: var(--ink); }
.filters .btn { min-height: 44px; }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; }
.prose h2 { margin-top: 2.2rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.site-footer { background: var(--dark); color: #ffffff; margin-top: 3rem; padding-block: 2.25rem 3rem; }
.site-footer .notice { color: #ffffff; border-bottom: 1px solid #4a3f56; padding-bottom: 1.2rem; margin-bottom: 1.6rem; max-width: 62rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--type); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f-head); margin-bottom: 0.5rem; }
.site-footer p { color: var(--f-text); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--f-head); }
.site-footer .fine { color: var(--f-text); margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--f-head); }

@media (forced-colors: active) {
  .stamp { box-shadow: none; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
}