/* Comment reader (from the Pulse project), scoped under .pulse so it never affects the rest of Mood Map PH. */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/Poppins-Regular.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/Poppins-SemiBold.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(fonts/Poppins-Bold.woff2) format("woff2")}
body.pulse-page{margin:0;background:#f5f7fb;font-family:Poppins,system-ui,sans-serif}
@media (prefers-color-scheme:dark){body.pulse-page{background:#0e1422}}
.cp-top{background:#1b2530;color:#eef3f1}
.cp-in{max-width:1240px;margin:0 auto;padding:.4rem 20px;display:flex;align-items:center;gap:1.5rem;min-height:56px}
.cp-brand{color:#8fd6a8;font-weight:600;text-decoration:none;margin-right:auto}
.cp-nav{display:flex;gap:1.5rem}
.cp-nav a{color:#aab9b5;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.cp-nav a[aria-current=page]{color:#eef3f1;border-color:#8fd6a8;font-weight:600}
.cp-nav a:hover,.cp-brand:hover{color:#fff}
.cp-top a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pulse{min-height:60vh}
.pulse{--bg: #f5f7fb;
  --surface: #ffffff;
  --sunk: #edf1f7;
  --ink: #1b2a47;
  --muted: #56627b;
  --line: #dbe1ec;
  --accent: #1b2a47;
  --accent-ink: #ffffff;
  --link: #1f7d72;
  --pos: #23897d;
  --neu: #a9afba;
  --neg: #d4603b;
  --pos-soft: #ddf1ed;
  --neg-soft: #fbe6de;
  --wave-a: #e07a5f;
  --wave-b: #6cc3b8;
  --display: Poppins, system-ui, sans-serif;
  --body: Poppins, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 12px;}
@media (prefers-color-scheme: dark){.pulse{--bg: #0e1422; --surface: #151d2e; --sunk: #1c2639; --ink: #e8edf6; --muted: #9aa6bd;
    --line: #283350; --accent: #e8edf6; --accent-ink: #0e1422; --link: #6cc3b8;
    --pos: #3aa99a; --neu: #59616f; --neg: #e0714c; --pos-soft: #143430; --neg-soft: #3a2119;
    color-scheme: dark;}
}
.pulse *{box-sizing: border-box;}
.pulse{margin: 0;}
.pulse [hidden]{display: none !important;}
.pulse img{max-width: 100%;}
.pulse{background: var(--bg); color: var(--ink); font: 15px/1.55 var(--body);}
.pulse .wrap{max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 8px 48px; display: grid; gap: 20px;}
.pulse h1,.pulse h2,.pulse h3{font-family: var(--display); margin: 0; text-wrap: balance;}
.pulse h1{font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12;}
.pulse h2{font-size: 1.1rem; font-weight: 600;}
.pulse .eyebrow{font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted);}
.pulse .num{font-family: var(--mono); font-variant-numeric: tabular-nums;}
.pulse button,.pulse input,.pulse select,.pulse textarea{font: inherit; color: inherit;}
.pulse :focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
.pulse .panel{background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0;}
.pulse .tabs{display: flex; gap: 4px; background: var(--sunk); padding: 4px; border-radius: 8px; width: fit-content; max-width: 100%; overflow-x: auto;}
.pulse .tabs button{border: 0; background: none; padding: 7px 14px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; white-space: nowrap;}
.pulse .tabs button[aria-selected="true"]{background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08);}
.pulse .source{margin-top: 14px; display: grid; gap: 10px;}
.pulse .row{display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.pulse .field{flex: 1 1 260px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);}
.pulse textarea.field{min-height: 120px; resize: vertical; width: 100%;}
.pulse .btn{border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer;}
.pulse .btn.ghost{background: transparent; color: var(--ink); border-color: var(--line);}
.pulse .btn:disabled{opacity: .55; cursor: wait;}
.pulse .hint{color: var(--muted); font-size: 13px; margin: 0;}
.pulse .samples{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;}
.pulse .sample{text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 12px; cursor: pointer; display: grid; gap: 2px;}
.pulse .sample:hover{border-color: var(--accent);}
.pulse .sample[aria-pressed="true"]{border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);}
.pulse .sample b{font-weight: 600;}
.pulse .sample span{color: var(--muted); font-size: 13px;}
.pulse .msg{padding: 10px 12px; border-radius: 8px; background: var(--neg-soft); color: var(--ink); font-size: 14px;}
.pulse .work{display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start;}
@media (max-width: 880px){.pulse .work{grid-template-columns: minmax(0, 1fr);}
}
.pulse .side{display: grid; gap: 16px; min-width: 0;}
.pulse .verdict{display: grid; gap: 14px;}
.pulse .verdict .head{display: flex; justify-content: space-between; align-items: start; gap: 10px;}
.pulse .big{font: 600 3.2rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;}
.pulse .pill{display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-weight: 600; font-size: 13px; border: 1px solid var(--line); white-space: nowrap;}
.pulse .dot{width: 9px; height: 9px; border-radius: 50%; flex: none;}
.pulse .stack{display: flex; gap: 2px; height: 30px;}
.pulse .stack button{border: 0; padding: 0; cursor: pointer; min-width: 4px; transition: opacity .15s;}
.pulse .stack button:first-child{border-radius: 4px 0 0 4px;}
.pulse .stack button:last-child{border-radius: 0 4px 4px 0;}
.pulse .stack.filtering button:not(.on){opacity: .3;}
.pulse .legend{display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.pulse .legend button{border: 1px solid transparent; background: none; text-align: left; padding: 6px; border-radius: 6px; cursor: pointer; display: grid; gap: 2px;}
.pulse .legend button:hover,.pulse .legend button.on{border-color: var(--line); background: var(--sunk);}
.pulse .legend .lab{display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted);}
.pulse .legend .val{font: 600 1.1rem var(--mono);}
.pulse .legend .pct{font-size: 12px; color: var(--muted);}
.pulse .toggles{display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px;}
.pulse .toggle{display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer;}
.pulse .toggle input{accent-color: var(--accent); width: 16px; height: 16px;}
.pulse .hist{position: relative;}
.pulse .hist svg{width: 100%; height: auto; display: block; overflow: visible;}
.pulse .hist rect.bar{cursor: pointer;}
.pulse .hist .axis{fill: var(--muted); font: 11px var(--mono);}
.pulse .hist .grid{stroke: var(--line); stroke-width: 1;}
.pulse .tip{position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; padding: 6px 8px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -110%);}
.pulse .drivers{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.pulse .drivers ol{list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px;}
.pulse .drivers li button{width: 100%; display: flex; justify-content: space-between; gap: 6px; border: 0; background: none; padding: 4px 6px; border-radius: 5px; cursor: pointer; text-align: left;}
.pulse .drivers li button:hover,.pulse .drivers li button.on{background: var(--sunk);}
.pulse .drivers li .w{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pulse .drivers li .c{font: 12px var(--mono); color: var(--muted);}
.pulse .chips{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;}
.pulse .chip{border: 1px solid var(--line); background: var(--bg); border-radius: 99px; padding: 4px 10px; cursor: pointer; font-size: 13px; display: inline-flex; gap: 6px; align-items: center;}
.pulse .chip.on{border-color: var(--accent); background: var(--sunk);}
.pulse .chip .c{font: 11px var(--mono); color: var(--muted);}
.pulse .tester .field{width: 100%;}
.pulse .meter{position: relative; height: 10px; border-radius: 5px; margin-top: 12px; background: linear-gradient(90deg, var(--neg), var(--neu) 50%, var(--pos));}
.pulse .meter i{position: absolute; top: -4px; width: 4px; height: 18px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); transition: left .25s ease;}
.pulse .meter-scale{display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); margin-top: 4px;}
.pulse .tester-out{margin-top: 10px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;}
.pulse .thread{display: grid; gap: 12px; min-width: 0;}
.pulse .thread .tools{display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.pulse .thread .tools .field{flex: 1 1 180px; padding: 8px 10px;}
.pulse .thread .tools select{padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);}
.pulse .active-filter{display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted);}
.pulse .list{display: grid; gap: 0; border-top: 1px solid var(--line);}
.pulse .c-item{display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);}
.pulse .c-item .stripe{border-radius: 2px;}
.pulse .c-meta{display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--muted);}
.pulse .c-meta .who{color: var(--ink); font-weight: 600;}
.pulse .c-text{margin: 4px 0 8px; overflow-wrap: anywhere;}
.pulse mark{background: none; color: inherit; border-radius: 3px; padding: 0 2px;}
.pulse mark.p{background: var(--pos-soft); box-shadow: inset 0 -2px 0 var(--pos);}
.pulse mark.n{background: var(--neg-soft); box-shadow: inset 0 -2px 0 var(--neg);}
.pulse mark.x{text-decoration: line-through; text-decoration-color: var(--muted);}
.pulse .c-actions{display: flex; flex-wrap: wrap; gap: 6px; align-items: center;}
.pulse .score{font: 600 12px var(--mono); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line);}
.pulse .seg{display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;}
.pulse .seg button{border: 0; background: none; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--muted);}
.pulse .seg button + button{border-left: 1px solid var(--line);}
.pulse .seg button[aria-pressed="true"]{background: var(--sunk); color: var(--ink); font-weight: 600;}
.pulse .link{border: 0; background: none; color: var(--link); cursor: pointer; font-size: 13px; padding: 2px 4px; font-weight: 600;}
.pulse .why{margin-top: 8px; background: var(--sunk); border-radius: 8px; padding: 10px 12px; font-size: 13px; overflow-x: auto;}
.pulse .why table{border-collapse: collapse; width: 100%;}
.pulse .why td,.pulse .why th{padding: 3px 8px 3px 0; text-align: left; white-space: nowrap;}
.pulse .why th{color: var(--muted); font-weight: 500;}
.pulse .tag{font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--sunk); color: var(--muted); border: 1px solid var(--line);}
.pulse .empty{padding: 24px 0; color: var(--muted);}
.pulse .more{justify-self: center;}
@media (prefers-reduced-motion: reduce){.pulse *{transition: none !important;}
}
.pulse .score-row{margin-top: 8px; gap: 12px;}
.pulse .mt6{margin-top: 6px;}
.pulse .mt16{margin-top: 16px;}
.pulse .pos-ink{color: var(--pos);}
.pulse .neg-ink{color: var(--neg);}
.pulse .spread{justify-content: space-between;}
.pulse .tester .field{margin-top: 8px;}
.pulse .meter i{left: 50%;}
.pulse .bar{position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);}
.pulse .bar-in{max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.pulse .brand{display: flex; align-items: center;}
.pulse .brand img{height: 36px; width: auto; display: block;}
.pulse .nav{display: flex; gap: 4px;}
.pulse .nav a{color: var(--muted); text-decoration: none; font-weight: 600; padding: 7px 12px; border-radius: 8px;}
.pulse .nav a:hover{color: var(--ink); background: var(--sunk);}
.pulse .nav a[aria-current="page"]{color: var(--ink); background: var(--sunk);}
.pulse .intro{display: grid; gap: 10px; padding-block: 28px 4px;}
.pulse .intro p{margin: 0; color: var(--muted); max-width: 64ch; font-size: 1.02rem;}
.pulse .wave{display: block; width: 180px; height: 22px;}
.pulse .wave path{fill: none; stroke: url(#waveGrad); stroke-width: 3.2; stroke-linecap: round;}
.pulse .notice{display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); background: var(--sunk); border-radius: 10px; padding: 10px 14px;}
.pulse .notice b{color: var(--ink);}
.pulse .notice a,.pulse .foot a,.pulse .prose a{color: var(--link); font-weight: 600;}
.pulse .panel-head{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;}
.pulse .foot{border-top: 1px solid var(--line); margin-top: 8px;}
.pulse .foot-in{max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 24px 40px; display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); color: var(--muted); font-size: 13px;}
.pulse .foot-in p{margin: 0 0 6px; max-width: 70ch;}
.pulse .foot-links{display: flex; flex-wrap: wrap; gap: 6px 16px; align-content: start; justify-content: end;}
@media (max-width: 700px){.pulse .foot-in{grid-template-columns: minmax(0, 1fr);}
.pulse .foot-links{justify-content: start;}
.pulse .brand img{height: 30px;}
}
.pulse .about{max-width: 1040px; margin: 0 auto; padding-inline: 20px; padding-block: 8px 56px; display: grid; gap: 28px;}
.pulse .about-grid{display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start;}
@media (max-width: 760px){.pulse .about-grid{grid-template-columns: minmax(0, 1fr); gap: 16px;}
.pulse .toc{position: static !important;}
}
.pulse .toc{position: sticky; top: 80px; display: grid; gap: 2px; font-size: 14px;}
.pulse .toc a{color: var(--muted); text-decoration: none; padding: 5px 10px; border-left: 2px solid var(--line);}
.pulse .toc a:hover{color: var(--ink); border-left-color: var(--ink);}
.pulse .prose{display: grid; gap: 34px; min-width: 0;}
.pulse .prose section{display: grid; gap: 10px; scroll-margin-top: 80px;}
.pulse .prose h2{font-size: 1.45rem;}
.pulse .prose h3{font-size: 1.02rem; font-weight: 600; margin-top: 6px;}
.pulse .prose p,.pulse .prose li{max-width: 68ch;}
.pulse .prose p{margin: 0;}
.pulse .prose ul,.pulse .prose ol{margin: 0; padding-left: 1.2em; display: grid; gap: 6px;}
.pulse .steps{list-style: none; padding: 0 !important; counter-reset: step; gap: 12px !important;}
.pulse .steps li{counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;}
.pulse .steps li::before{content: counter(step); font: 600 14px/34px var(--display); text-align: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sunk); color: var(--ink);}
.pulse .example{background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; font-size: 14px;}
.pulse .example .line{font-size: 15px;}
.pulse .legal{background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px;}
.pulse .legal ol{gap: 12px;}
.pulse .legal li b{color: var(--ink);}
.pulse .updated{font-size: 13px; color: var(--muted);}
.pulse .wave .ws1{stop-color: var(--wave-a);}
.pulse .wave .ws2{stop-color: var(--wave-b);}
.pulse a.btn{text-decoration:none;display:inline-block}

.cp-brand{display:inline-flex;align-items:center;gap:.6rem;color:#eef3f1;font-weight:700}
.cp-brand img{width:2rem;height:auto}.cp-brand b{color:#ffaaa5}
.cp-nav a[aria-current=page]{border-color:#a8e6cf}
.pulse{--pos:#2f8f78;--neg:#e0606c;--wave-a:#ff8b94;--wave-b:#a8e6cf}
.pulse .btn{background:#ffaaa5;border-color:#ffaaa5;color:#2a0f14}
@media (prefers-color-scheme:dark){.pulse{--pos:#a8e6cf;--neg:#ff8b94;--link:#a8e6cf}}
.pulse .how{margin:.25rem 0 .5rem;padding-left:1.2rem;display:grid;gap:.4rem}

.credit-bar{text-align:center;padding:1.5rem 16px 2.5rem;color:#56627b}
.credit-bar p{margin:.2rem auto}.credit-bar .made{font-weight:600;color:#1b2a47}.credit-bar .copy{font-size:.875rem}
.credit-bar a{color:#1f7d72}.credit-bar .heart{display:inline-block;color:#e0606c;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.25)}40%{transform:scale(1.1)}}
@media (prefers-color-scheme:dark){.credit-bar{color:#9aa6bd}.credit-bar .made{color:#e8edf6}.credit-bar a{color:#6cc3b8}}
@media (prefers-reduced-motion:reduce){.credit-bar .heart{animation:none}}
@media print{.credit-bar .heart{animation:none}}
.cp-in{flex-wrap:wrap;row-gap:0}.cp-nav{flex-wrap:wrap;gap:.2rem 1.1rem}   /* five menu items need to wrap on phones */

.proto-bar{background:#fff4ec;color:#5a3a22;font-size:.85rem;line-height:1.4;padding:.45rem 1rem;text-align:center;border-bottom:1px solid #f0d9c6}.proto-bar a{color:#8a3b12;font-weight:600}
