/* This week's scams: a dashboard per country, then one card per scam (red or orange alert, a phone
   picture of what it looks like, who it hits), then the report form. Mobile first. */
.scams-hero { padding-bottom: 22px; }
.scams-hero h1 { font-size: clamp(38px, 8vw, 84px); }
.scams-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; }

/* the country switch */
.country-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 16px; margin: 0 auto 20px; max-width: 760px; }
.country-tab {
  border: 2px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px;
  padding: 11px 18px; font: 700 16px/1 var(--body); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.country-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
@media (hover: hover) { .country-tab:not(.is-on):hover { border-color: var(--ink); } }
.scams-country[hidden] { display: none; }

/* what people are reporting here this week (only once there's enough of it) */
.scams-live { max-width: 1128px; margin: 0 auto 18px; padding: 18px 22px; border-radius: 20px; background: var(--paper); }
.scams-live[hidden] { display: none; }
.live-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.live-title b { font-family: var(--display); font-weight: 400; font-size: 30px; }
.live-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.live-bars li { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.live-bars i { display: block; height: 12px; border-radius: 6px; background: var(--ink); }
.live-bars b { text-align: right; }

/* ---------- the dashboard ---------- */
.dash { max-width: 1160px; margin: 0 auto 26px; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.dash-tiles, .dash-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile, .chart { background: var(--paper); border-radius: 22px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tile-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile-row { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tile-num { font-family: var(--display); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-num.is-red { color: #D93A3A; }
.tile-num.is-orange { color: #E07B00; }
.tile-word { font-size: 15px; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; margin-right: 8px; }
.tile-big { margin: 0; font-family: var(--display); font-size: clamp(40px, 8.5vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.tile-sub { margin: 0; font-size: 15px; font-weight: 700; }
.dash-src { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-top: auto; }
.chart h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: .01em; }
.chart-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* horizontal bars: how scams reach people (one series, so one hue; the biggest is ink) */
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hbars li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bar-label { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; }
.bar-track { height: 16px; border-radius: 8px; background: rgba(21, 24, 29, .08); overflow: hidden; }
.bar-track i { display: block; height: 100%; width: 0; border-radius: 8px; background: #8A9099; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.hbars li:first-child .bar-track i { background: var(--ink); }
.dash.is-shown .bar-track i { width: var(--w); }
.bar-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* columns: who loses the most */
.vbars { list-style: none; margin: 4px 0 0; padding: 0; display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.vbars li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.col-value { font-size: 11px; font-weight: 800; white-space: nowrap; }
.col-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.col-track i { display: block; width: 100%; height: 0; border-radius: 6px 6px 3px 3px; background: #8A9099; transition: height 1.1s cubic-bezier(.2, .8, .2, 1); }
.vbars li.is-top .col-track i { background: var(--ink); }
.dash.is-shown .col-track i { height: var(--h); }
.col-label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bar-track i, .col-track i { transition: none; } }

/* ---------- the scams ---------- */
.scams-list { max-width: 1160px; margin: 0 auto 40px; padding: 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.scams-empty { text-align: center; color: var(--muted); font-size: 18px; padding: 30px 0; }
.scam { position: relative; background: var(--white); border: 2px solid var(--line); border-radius: 22px; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.scam.is-red { border-color: #E9A4A4; }
.scam.is-orange { border-color: #F2C27E; }
.scam-alert { margin: 0 -20px 4px; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; font-weight: 600; }
.scam.is-red .scam-alert { background: #FBE3E3; color: #8E1F1F; }
.scam.is-orange .scam-alert { background: #FFF0D9; color: #7A4300; }
.alert-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.alert-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.scam.is-red .alert-badge { background: #D93A3A; }
.scam.is-orange .alert-badge { background: #E07B00; }
.alert-why { flex: 1 1 200px; }
.scam-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.scam-channel { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--white); border-radius: 999px; padding: 6px 12px 6px 9px; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.ch-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.scam-ages { display: inline-flex; align-items: center; gap: 5px; border: 2px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--ink); }
.scam-name { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 7vw, 38px); line-height: 1.05; letter-spacing: .01em; margin: 0; }
.scam-pretends { margin: -4px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.scam-why { margin: 0; font-size: 16px; line-height: 1.45; color: #3A3F47; }
.scam-facts { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.scam-facts div { display: flex; flex-direction: column; gap: 3px; }
.scam-facts dt { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scam-facts dd { margin: 0; font-size: 16px; line-height: 1.45; }
.scam-agenote { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.scam-agenote a { color: inherit; }
.scam-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.scam-play { min-height: 50px; padding: 0 22px; font-size: 16px; }
.scam-source { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .scam-source:hover { color: var(--ink); } }

/* the phone picture of each scam */
.scam-shot { margin: 4px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scam-shot figcaption { font-size: 12px; color: var(--muted); }
.ph-frame { width: min(100%, 290px); border: 7px solid var(--ink); border-radius: 30px; background: var(--white); padding: 22px 12px 16px; position: relative; box-shadow: 0 10px 0 -4px rgba(21, 24, 29, .08); }
.ph-frame::before { content: ""; position: absolute; top: 7px; left: 50%; width: 64px; height: 7px; margin-left: -32px; border-radius: 4px; background: var(--ink); }
.ph-screen { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.4; color: #15181D; display: flex; flex-direction: column; gap: 8px; }
.ph-screen p { margin: 0; }
.pm-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #C9CDD3; color: var(--white); font-size: 13px; font-weight: 700; }
.pt-who { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid #ECECEE; }
.pt-bubble { align-self: flex-start; max-width: 92%; background: #ECECEE; border-radius: 16px 16px 16px 5px; padding: 9px 12px; }
.pt-call { align-self: center; font-size: 12px; font-weight: 600; color: #D93A3A; }
.ph-screen.is-call { background: #1D2128; color: var(--white); border-radius: 18px; padding: 18px 12px 16px; text-align: center; align-items: center; margin: -8px -4px -6px; }
.pc-label { font-size: 12px; color: #A3AAB5; }
.pc-who { font-size: 20px; font-weight: 600; }
.pc-sub { font-size: 12px; color: #A3AAB5; }
.pc-says { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 9px 11px; font-size: 13px; text-align: left; }
.pc-btns { display: flex; gap: 46px; margin-top: 6px; }
.pc-btns span { width: 42px; height: 42px; border-radius: 50%; }
.pc-no { background: #E5484D; }
.pc-yes { background: #34C759; }
.pm-subject { font-size: 16px; font-weight: 700; line-height: 1.25; }
.pm-from { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pm-body { font-size: 13px; color: #3A3F47; }
.pw-bar { background: #ECECEE; border-radius: 10px; padding: 6px 10px; font-size: 12px; text-align: center; }
.pw-banner { background: #15181D; color: var(--white); font-weight: 800; text-align: center; padding: 10px; border-radius: 8px; font-size: 15px; }
.pw-body { font-size: 13px; }
.pw-btn { align-self: center; background: #E5484D; color: var(--white); font-weight: 700; border-radius: 8px; padding: 7px 18px; font-size: 13px; }
.ps-who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ps-who span:last-child { margin-left: auto; font-size: 11px; color: #8A9099; }
.ps-body { font-size: 13px; }
.ps-pic { height: 80px; border-radius: 10px; background: linear-gradient(135deg, #E9EBEE, #C9CDD3); }
.ph { display: inline-block; background: #D7DCE4; color: #1F63D6; border-radius: 6px; padding: 0 6px; font-size: .92em; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* the report form */
.report-form { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.report-form[hidden], .report-done[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-weight: 700; font-size: 17px; padding: 0; margin-bottom: 2px; }
.field em { font-style: normal; font-weight: 500; color: var(--muted); }
.field small { font-size: 14px; color: var(--muted); line-height: 1.4; }
.field select, .field input[type=text], .field textarea {
  width: 100%; border: 2px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink);
  font: 500 17px/1.4 var(--body); padding: 14px 16px;
}
.field select { min-height: 56px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input[type=file] { font: 500 15px/1.4 var(--body); }
.field select:focus, .field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-block; border: 2px solid var(--line); background: var(--white); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 16px; }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pill input:focus-visible + span { outline: 3px solid var(--blue, #2F7BF5); outline-offset: 2px; }
.report-send { align-self: flex-start; min-height: 60px; padding: 0 30px; font-size: 18px; }
.report-done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.report-done h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 6vw, 36px); line-height: 1.1; margin: 0; }
.report-done p { margin: 0; font-size: 18px; line-height: 1.5; max-width: 640px; }
.report-done a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .scams-list { grid-template-columns: minmax(0, 1fr); }
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dash-tiles { grid-template-columns: minmax(0, 1fr); }
  .tile-num { font-size: 54px; }
  .scam { padding: 0 16px 18px; border-radius: 20px; }
  .scam-alert { margin: 0 -16px 4px; padding: 10px 16px; }
  .report-send, .scam-play { width: 100%; }
  .live-bars li { grid-template-columns: 96px 1fr 34px; }
  .hbars li { grid-template-columns: 92px minmax(0, 1fr) auto; }
}

/* This week's hacks reuses the scam cards; just the filter row and the big "what to do" */
.hack-filter { max-width: 1160px; margin: 0 auto 16px; padding: 0 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.hack-filter::-webkit-scrollbar { display: none; }
.hack-filter .chip { flex: none; border: 2px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 9px 14px; font: 700 15px/1 var(--body); cursor: pointer; white-space: nowrap; }
.hack-filter .chip b { font-weight: 800; color: var(--muted); margin-left: 3px; }
.hack-filter .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hack-filter .chip.is-on b { color: #A3AAB5; }
.hack[hidden] { display: none; }
.hack-todo dd { font-weight: 700; }
.hack-win { font-size: clamp(30px, 6vw, 40px); }

/* "Seen a scam?" now links to its own page, /report/ */
.report-cta { text-align: center; }
.report-cta .muted { margin-left: auto; margin-right: auto; }
.report-cta .btn { min-height: 60px; padding: 0 30px; font-size: 18px; }

/* Real or scam? cards (playcards.js): the phone and two big buttons, like the games. The answer and the
   lesson show once you pick. Without JavaScript the answer just shows. Green and red only mean right and wrong. */
.pc-ask { display: none; }
.play-card.is-open .pc-ask { display: flex; flex-direction: column; gap: 10px; }
.play-card.is-open:not(.is-answered) .pc-reveal { display: none; }
.play-card.is-answered .pc-q { display: none; }
.pc-q { margin: 2px 0 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: .01em; }
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-btn { min-height: 64px; border: 0; border-radius: 16px; background: #EFEFE6; color: var(--ink); font-family: var(--display); font-size: 28px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
@media (hover: hover) { .pc-btn:hover:not(:disabled) { background: #E4E4D9; } }
.pc-btn:active:not(:disabled) { transform: scale(.98); }
.pc-btn:disabled { cursor: default; }
.pc-btn.is-answer { background: var(--right); }
.pc-btn.is-picked:not(.is-answer) { background: var(--wrong); }
.pc-btn:disabled:not(.is-answer):not(.is-picked) { opacity: .45; }
.pc-reveal { display: flex; flex-direction: column; gap: 12px; }
.pc-verdict { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.pc-verdict:empty { display: none; }
.play-card.is-right .pc-verdict { color: var(--right-dark); }
.play-card.is-wrong .pc-verdict { color: var(--wrong-dark); }
.play-card.is-answered .pc-reveal { animation: pcrise .3s ease; }
@keyframes pcrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .play-card.is-answered .pc-reveal { animation: none; } }
.pc-score { position: sticky; top: 10px; z-index: 5; width: max-content; max-width: 100%; margin: 0 0 14px auto; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 15px; font-weight: 800; box-shadow: 0 4px 14px rgba(21, 24, 29, .18); }
.pc-score:empty { display: none; }
.pc-score.is-done { background: var(--right-dark); }
.play-card { padding-top: 18px; }
.scams-country .pc-intro { max-width: 1160px; margin: 0 auto 10px; padding: 0 20px; font-size: 17px; font-weight: 700; }
.scams-country .pc-score { margin-right: 20px; }
@media (max-width: 640px) { .scams-country .pc-intro { padding: 0 16px; } .scams-country .pc-score { margin-right: 16px; } }
.play-card .pc-reveal .scam-alert { margin-top: 2px; }
/* This week's hacks: one quick Yes or No on each card. "Do you use it?" has no right answer, so the pick
   just turns dark; "Would you do it?" turns green or red. */
.hk-q { font-size: 23px; text-wrap: balance; }
.play-hack .pc-btn.is-picked { background: var(--ink); color: var(--white); }
.play-hack.is-right .pc-btn.is-picked { background: var(--right); color: var(--ink); }
.play-hack.is-wrong .pc-btn.is-picked { background: var(--wrong); color: var(--ink); }
.play-hack .pc-verdict { color: var(--ink); }
.play-hack.said-yes:not(.is-right):not(.is-wrong) .hack-todo { background: #FFF6D6; border-radius: 12px; padding: 10px 12px; margin: 0 -12px; }
.play-hack.is-open .pc-ask { display: flex; flex-direction: column; gap: 10px; }
.play-hack.is-open:not(.is-answered) .pc-reveal { display: none; }
.play-hack.is-answered .hk-q { display: none; }