[hidden] { display: none !important; }
:root {
  --dk: #1E1612; --brown: #4A3B32; --orange: #E0701B; --gold: #C9962B; --deep: #8B2E16;
  --tint: #FFF8F0; --line: #E8D8C6; --green: #2E7D32; --muted: #6b5a4c; --bg: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Calibri, Arial, sans-serif; color: var(--dk); background: var(--bg); line-height: 1.45; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
header { background: var(--brown); color: #fff; padding: 18px 0; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 28px; font-family: Cambria, Georgia, serif; }
header h1 span { color: #F2C27A; font-weight: normal; margin-left: 6px; }
header p { margin: 2px 0 0; color: #F2C27A; font-size: 15px; }
.lang { font-size: 14px; color: #F2C27A; display: flex; flex-direction: column; gap: 4px; }
.lang select { font: inherit; padding: 6px 8px; border: 0; color: var(--dk); }

.grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.card { background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } .wrap { padding: 0 16px; } }
h2 { margin: 0 0 10px; font-size: 18px; color: var(--brown); }
h3 { margin: 14px 0 6px; font-size: 15px; color: var(--brown); }

button, .btnlink { font: inherit; font-size: 15px; cursor: pointer; border: 1px solid var(--brown); background: #fff; color: var(--dk); padding: 8px 14px; border-radius: 6px; text-decoration: none; display: inline-block; }
button.primary { background: var(--brown); color: #fff; }
button.primary.live { background: var(--deep); border-color: var(--deep); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.btns.center { justify-content: center; }
select, input { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--dk); max-width: 100%; }
.state { font-size: 14px; color: var(--muted); }
.state.on { color: var(--deep); font-weight: 600; }
.state.on::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--deep); margin-right: 6px; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.note { font-size: 13.5px; color: var(--muted); margin: 4px 0 10px; }
.check { font-size: 14px; display: flex; gap: 6px; align-items: center; }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); }
.tab.on { border-bottom-color: var(--orange); color: var(--dk); font-weight: 600; }

.interim { min-height: 22px; font-style: italic; color: var(--muted); font-size: 15px; }
#transcript { min-height: 240px; max-height: 360px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin-top: 8px; }
#transcript .empty { color: var(--muted); font-size: 14px; margin: 4px; }
.line { padding: 6px 8px; margin-bottom: 6px; border-left: 3px solid var(--line); font-size: 16px; display: flex; gap: 10px; justify-content: space-between; }
.line .r { font-size: 12px; color: var(--muted); white-space: nowrap; align-self: center; }
.line.genuine { border-left-color: var(--green); }
.line.hot { border-left-color: var(--deep); }
mark { padding: 0 2px; color: var(--dk); border-radius: 3px; }
.s1 { background: #F6D9B8; } .s2 { background: #F4C0B0; } .s3 { background: #F0B3C4; } .s4 { background: #E5C3F0; } .s5 { background: #F5A6A0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.legend span { padding: 2px 8px; border-radius: 3px; }

.meter { display: flex; align-items: center; gap: 14px; }
#risk { font-size: 68px; font-weight: bold; font-family: Cambria, Georgia, serif; line-height: 1; min-width: 2.2ch; color: var(--green); }
#level { font-size: 22px; font-weight: bold; color: var(--green); }
.sub { font-size: 13px; color: var(--muted); }
#bar { position: relative; height: 14px; background: #fff; border: 1px solid var(--line); border-radius: 7px; margin: 12px 0 8px; overflow: hidden; }
#fill { height: 100%; width: 0; background: var(--green); transition: width .4s, background .4s; }
.tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--deep); }
#spark { width: 100%; height: 70px; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 10px; border: 1px solid var(--line); background: #fff; color: #8a7a6c; font-size: 14px; border-radius: 16px; }
.chip.on { background: var(--brown); color: #fff; border-color: var(--brown); }
.chip.on.last { background: var(--deep); border-color: var(--deep); }
#why { font-size: 15px; margin: 0; padding-left: 18px; }
.family { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 15px; white-space: pre-line; margin-bottom: 10px; }
.family.idle { color: var(--muted); font-size: 14px; }
.family.sent { border-color: var(--deep); }
.family b { color: var(--deep); }

details summary { cursor: pointer; font-weight: 600; color: var(--brown); font-size: 16px; }
.setup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 10px; }
.setup .note, .setup .btns { grid-column: 1 / -1; }
.setup label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
@media (max-width: 700px) { .setup { grid-template-columns: 1fr; } }
code { background: #fff; padding: 1px 4px; border-radius: 3px; word-break: break-all; }

.benchhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.stat b { display: block; font-size: 28px; font-family: Cambria, Georgia, serif; color: var(--brown); }
.stat span { font-size: 13px; color: var(--muted); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #F6EADC; color: var(--brown); }
td.hist { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok { color: var(--green); font-weight: 600; } .bad { color: var(--deep); font-weight: 600; } .mid { color: #9A6B0F; font-weight: 600; }

footer { font-size: 13.5px; color: var(--muted); padding-bottom: 30px; }

#overlay { display: none; position: fixed; inset: 0; background: var(--deep); color: #fff; z-index: 10; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#overlay.show { display: flex; animation: flash .5s 3; }
@keyframes flash { 50% { background: #B23A1B; } }
#overlay h2 { color: #fff; font-size: 44px; margin: 0 0 12px; font-family: Cambria, Georgia, serif; }
#overlay p { font-size: 24px; margin: 0 0 10px; }
#overlay p.small { font-size: 16px; opacity: .9; margin-bottom: 26px; }
.ovrisk { font-size: 20px; letter-spacing: .05em; opacity: .85; margin-bottom: 6px; }
#overlay button.white { font-size: 20px; padding: 12px 26px; background: #fff; color: var(--deep); border-color: #fff; }
#overlay button.ghost { font-size: 16px; padding: 12px 20px; background: transparent; color: #fff; border-color: #fff; }
@media (max-width: 600px) { #overlay h2 { font-size: 32px; } #overlay p { font-size: 19px; } }

.privacy{font-size:.85rem;background:#eef7ee;border-left:4px solid #2e7d32;padding:6px 10px;border-radius:4px;margin-top:8px}
.line.forgotten span:first-child{color:#888;font-style:italic}

/* Large mic button: the one thing to press */
button.mic { font-size: 18px; font-weight: 600; padding: 14px 28px; border-radius: 999px; min-height: 52px; box-shadow: 0 2px 8px rgba(74,59,50,.25); }
button.mic::before { content: "\1F3A4"; margin-right: 8px; }
button.mic.live::before { content: "\25A0"; }
button.mic.live { animation: ring 1.6s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(139,46,22,.45); } 100% { box-shadow: 0 0 0 14px rgba(139,46,22,0); } }

/* Live tab: one big action, details tucked away */
.microw { align-items: center; gap: 14px; }
button.link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 8px; margin-left: auto; }
details.info { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); padding: 8px 12px; }
details.info summary { cursor: pointer; font-weight: 600; color: var(--green); list-style-position: inside; }
details.info[open] summary { margin-bottom: 6px; }
details.info .privacy { margin-top: 0; }
label.small { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

/* Accessibility: comfortable touch targets, calmer motion when asked */
button, .btnlink, select { min-height: 44px; }
.tab { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* Phones: full-width mic button, no empty gap under it */
@media (max-width: 600px) { button.mic { width: 100%; } .microw .state { flex: 1; } }
.interim:empty { display: none; }

/* Risk ring: the score inside a gauge that fills and changes colour */
.ring { --p: 0; --c: #2E7D32; width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #efe4d6 0); transition: background .4s; }
.ring #risk { width: 88px; height: 88px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 42px; min-width: 0; }

/* Level badge */
#level { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #e6f2e7; font-size: 20px; }
#level[data-level="warn"] { background: #fbefd2; }
#level[data-level="danger"] { background: #f7ddd4; }

/* Five scam steps as a tracker that lights up */
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.chip { border-radius: 10px; text-align: center; font-size: 12.5px; padding: 9px 4px; line-height: 1.2; transition: background .3s, color .3s; }
.chip.on::before { content: "\2713  "; font-weight: bold; }
@media (max-width: 420px) { .chip { font-size: 11px; padding: 8px 2px; } }

/* Softer cards, richer header */
.card { border-radius: 14px; box-shadow: 0 4px 18px rgba(74, 59, 50, .08); }
header { background: linear-gradient(135deg, var(--dk), var(--brown) 70%); box-shadow: 0 2px 10px rgba(30, 22, 18, .25); }

/* Transcript lines as bubbles that fade in */
.line { background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; animation: fadein .3s ease-out; }
.line .r { background: var(--tint); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.line.hot { background: #fff6f3; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#transcript { background: #fdfaf6; }

/* Friendly empty state */
#transcript .empty { text-align: center; padding: 40px 12px; font-size: 15px; }
#transcript .empty::before { content: "\1F3A7"; display: block; font-size: 34px; margin-bottom: 8px; }

/* Header: eye logo and privacy badge */
header h1 { display: flex; align-items: center; gap: 10px; }
header .logo { width: 38px; height: 38px; flex: none; }
header .badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(242,194,122,.15); border: 1px solid rgba(242,194,122,.5); font-size: 12.5px; white-space: nowrap; }

/* Tabs as a segmented control */
.tabs { border-bottom: 0; background: #f3e7da; padding: 4px; border-radius: 12px; gap: 4px; }
.tab { flex: 1; border: 0; border-radius: 9px; padding: 8px 10px; font-weight: 600; color: var(--muted); }
.tab.on { background: #fff; color: var(--dk); box-shadow: 0 1px 4px rgba(74,59,50,.18); border-bottom: 0; }

/* Risk bar: coloured track shows where safe ends and danger starts */
#bar { height: 12px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #dcefdd 0 40%, #fbefd2 40% 70%, #f7ddd4 70%); }
#fill { border-radius: 999px; }
#bar .tick { width: 2px; background: var(--deep); }

#spark { border-radius: 10px; background: linear-gradient(#fff, #fdf8f2); }

/* Why list: a coloured dot per step, matching the highlights */
#why { list-style: none; padding-left: 0; }
#why li { margin: 4px 0; }
#why .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(0,0,0,.15); }

/* Family alert looks like the message the family receives */
.family { border-radius: 14px; box-shadow: 0 2px 10px rgba(74,59,50,.08); }
.family::before { content: "📱 Message to family"; display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.family.sent { background: #fff6f3; }

/* Footer: help first */
.help { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 14px; }
.help a { color: var(--brown); }
.help .helpline { background: var(--deep); color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 999px; font-weight: 600; }

/* Alarm screen: pulsing warning sign */
#overlay h2::before { content: "\26A0\FE0F"; display: block; font-size: 64px; margin-bottom: 6px; animation: beat 1s infinite; }
@keyframes beat { 50% { transform: scale(1.12); } }
#overlay button { border-radius: 999px; min-height: 52px; }

/* Inputs and selects match the theme */
select, input[type="text"], input:not([type]), textarea { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; font: inherit; }
select:hover, input:hover { border-color: var(--gold); }

/* Live loudness bar along the bottom of the mic button */
button.mic { position: relative; overflow: hidden; }
button.mic::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--lvl, 0) * 100%); background: #F2C27A; transition: width .1s; }

kbd.hint { font: 12px/1 inherit; color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; background: #fff; }
@media (max-width: 600px) { kbd.hint { display: none; } }

/* Legend under the transcript matches the step tracker */
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.legend span { border-radius: 999px; padding: 3px 10px; font-size: 12.5px; border: 1px solid rgba(0,0,0,.08); }

/* Dark mode: same brown and orange palette, darker surfaces */
@media (prefers-color-scheme: dark) {
  :root { --tint: #2a201b; --line: #4a3b32; --muted: #c9b6a4; --bg: #1a1310; --dk: #f6ebe0; }
  body { background: var(--bg); color: var(--dk); }
  .card, details.info { background: var(--tint); }
  #transcript, .line, .family, #spark, select, input, textarea, button:not(.primary):not(.link), .chip, .ring #risk, kbd.hint { background: #33271f; color: var(--dk); }
  .tabs { background: #33271f; } .tab.on { background: #4a3b32; color: #fff; }
  .line.hot, .family.sent { background: #3d2219; }
  mark, .legend span, #why .dot { color: #1E1612; }
  .help a { color: #F2C27A; }
}
@media (prefers-color-scheme: dark) {
  h2, h3, .card h2, .card h3 { color: #f6ebe0; }
  header { background: linear-gradient(135deg, #1E1612, #4A3B32 70%); }
}
@media (prefers-color-scheme: dark) {
  details > summary { color: #f6ebe0; }
  details.info summary { color: #8fd694; }
}

/* First-visit tips */
.intro { display: flex; align-items: center; gap: 16px; margin-top: 16px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--orange); border-radius: 12px; padding: 10px 16px; box-shadow: 0 2px 10px rgba(74,59,50,.06); }
.intro ol { margin: 0; padding-left: 20px; display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; }
.intro button.link { margin-left: auto; }
@media (prefers-color-scheme: dark) { .intro { background: #33271f; } }

/* Keep the score in view while the transcript grows (wide screens) */
@media (min-width: 861px) { .card.view { position: sticky; top: 12px; align-self: start; } }

.state[data-time]::after { content: " · " attr(data-time); font-variant-numeric: tabular-nums; }

/* Skip link for keyboard and screen-reader users */
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--dk); padding: 8px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 8px; }

/* Test bench: tint rows by result */
tr:has(td.bad) { background: #fbe6e0; }
tr:has(td.ok) td.ok { color: var(--green); font-weight: 600; }
@media (prefers-color-scheme: dark) { tr:has(td.bad) { background: #3d2219; } }

.intro button.link { white-space: nowrap; }

/* A+ larger text */
button.atext { background: transparent; color: #F2C27A; border: 1px solid rgba(242,194,122,.6); border-radius: 10px; font-weight: 700; margin-left: auto; margin-right: 12px; }
button.atext[aria-pressed="true"] { background: #F2C27A; color: var(--dk); }
html.big { font-size: 118%; }
html.big body, html.big .line, html.big #why, html.big .family, html.big .note, html.big button { font-size: 1.12em; }

/* After hanging up: what to do next */
.after { margin-top: 16px; background: #eef7ee; border: 1px solid #cfe6d0; border-left: 5px solid var(--green); border-radius: 12px; padding: 12px 18px; }
.after h2 { margin: 0 0 6px; color: var(--green); font-size: 20px; }
.after ol { margin: 0 0 6px; padding-left: 22px; font-size: 15.5px; }
@media (prefers-color-scheme: dark) { .after { background: #1f2e20; border-color: #2e4a30; } }

/* Print: a clean report of the test bench and the current call (no buttons or alarm) */
@media print {
  header, .tabs, .btns, details, #intro, #after, .help, #overlay, .skip, kbd.hint { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body { background: #fff; color: #000; }
}
@media (prefers-color-scheme: dark) {
  .btnlink { background: #33271f; color: #f6ebe0; border-color: #8a7464; }
}

/* Dark mode: the risk number and level badge stay readable on the dark ring */
@media (prefers-color-scheme: dark) {
  .ring #risk { color: #f6ebe0 !important; }
  #level { color: #1E1612 !important; }
}

/* Theme and text-size buttons sit together */
#themeBtn { margin-right: 8px; }
#themeBtn + #bigText { margin-left: 0; }