/* Praise Shield: the personal face of Praise. "The red rail": white panels and a solid red sidebar by day, black panels and a
   black sidebar by night, red as the only colour. Flat hairline panels, condensed headings, no doors and no glass.
   Scoped to html[data-theme="adult"], so the same dashboard markup renders as the family version for a family account.
   The look follows the device's light/dark setting until the person picks one (data-mode, set by js/theme.js). */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }

html[data-theme="adult"] {
  color-scheme: light;
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --ink: #17181b;
  --text2: #5a5e68;
  --line: #e5e6ea;
  --line-strong: #c9ccd3;
  --accent: #d7263d;             /* the red: buttons, the ring, the rail */
  --accent-hover: #b01d31;
  --on-accent: #ffffff;
  --accent-soft: #fdebed;
  --accent-text: #b01d31;        /* the red used as text on white: 6.9:1 */
  --amber: #e0a100;
  --amber-soft: #fbf0cf;
  --danger: #b3261e;
  --chip-bg: #fdebed; --chip-ink: #8f1627;
  --chip-ok-bg: #dff1e6; --chip-ok-ink: #17603a;
  --chip-warn-bg: #fbefcb; --chip-warn-ink: #6b4700;
  --chip-bad-bg: #f9dadd; --chip-bad-ink: #8f1627;
  --chart-1: #d7263d; --chart-2: #17181b;
  --chrome: #d7263d;
  --focus: #d7263d;
  --track: #e5e6ea;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: none;
  --rail-bg: #d7263d; --rail-text: #ffffff; --rail-dim: rgba(255, 255, 255, .8); --rail-hover: rgba(255, 255, 255, .14);
  --rail-active-bg: #ffffff; --rail-active-text: #b01d31; --rail-line: rgba(255, 255, 255, .3); --rail-chip: rgba(255, 255, 255, .18);
  --display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
/* by night: black, with the red turned up so it still reads */
html[data-theme="adult"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0b0b0c; --surface: #151517; --surface-2: #1d1d20; --ink: #f4f4f5; --text2: #a4a4ad; --line: #2a2a2e; --line-strong: #3b3b41;
  --accent: #d7263d; --accent-hover: #ec3e54; --accent-soft: #2b1317; --accent-text: #ff6b7c; --amber: #f2b61e; --amber-soft: #2d2410;
  --danger: #ff7b7b;
  --chip-bg: #2b1317; --chip-ink: #ff9aa6; --chip-ok-bg: #12301f; --chip-ok-ink: #7fdba3; --chip-warn-bg: #33270a; --chip-warn-ink: #f3c95b;
  --chip-bad-bg: #3a151b; --chip-bad-ink: #ff9aa6;
  --chart-1: #ff4a5c; --chart-2: #8a8a93; --chrome: #000000; --focus: #ff6b7c; --track: #2e2e33;
  --rail-bg: #000000; --rail-text: #f4f4f5; --rail-dim: #a4a4ad; --rail-hover: rgba(255, 255, 255, .08);
  --rail-active-bg: #d7263d; --rail-active-text: #ffffff; --rail-line: #26262a; --rail-chip: rgba(255, 255, 255, .08);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="adult"]:not([data-mode="light"]) {
    color-scheme: dark;
    --bg: #0b0b0c; --surface: #151517; --surface-2: #1d1d20; --ink: #f4f4f5; --text2: #a4a4ad; --line: #2a2a2e; --line-strong: #3b3b41;
    --accent: #d7263d; --accent-hover: #ec3e54; --accent-soft: #2b1317; --accent-text: #ff6b7c; --amber: #f2b61e; --amber-soft: #2d2410;
    --danger: #ff7b7b;
    --chip-bg: #2b1317; --chip-ink: #ff9aa6; --chip-ok-bg: #12301f; --chip-ok-ink: #7fdba3; --chip-warn-bg: #33270a; --chip-warn-ink: #f3c95b;
    --chip-bad-bg: #3a151b; --chip-bad-ink: #ff9aa6;
    --chart-1: #ff4a5c; --chart-2: #8a8a93; --chrome: #000000; --focus: #ff6b7c; --track: #2e2e33;
    --rail-bg: #000000; --rail-text: #f4f4f5; --rail-dim: #a4a4ad; --rail-hover: rgba(255, 255, 255, .08);
    --rail-active-bg: #d7263d; --rail-active-text: #ffffff; --rail-line: #26262a; --rail-chip: rgba(255, 255, 255, .08);
  }
}

html[data-theme="adult"] body { background: var(--bg); background-image: none; min-height: 100vh; color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
html[data-theme="adult"] body.shield-site { margin: 0; }
html[data-theme="adult"] h1, html[data-theme="adult"] h2, html[data-theme="adult"] h3 {
  font-family: var(--display); font-stretch: 80%; font-weight: 650; letter-spacing: -0.005em; line-height: 1.1; }
html[data-theme="adult"] h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
html[data-theme="adult"] h2 { font-size: 1.4rem; }
html[data-theme="adult"] h3 { font-size: 1.05rem; font-stretch: 88%; }
html[data-theme="adult"] .num, html[data-theme="adult"] td, html[data-theme="adult"] .ring-num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; left: -9999px; }

/* ---- shell: the red rail ---- */
html[data-theme="adult"] .shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
html[data-theme="adult"] .topbar {
  position: sticky; top: 0; height: 100vh; margin: 0; max-width: none; z-index: 5; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.5rem;
  padding: 1.5rem 1rem 1.2rem; background: var(--rail-bg); color: var(--rail-text); border: 0; border-right: 1px solid var(--rail-line); border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto; }
html[data-theme="adult"] .brand { padding: 0 .5rem; font: 700 1.35rem var(--display); font-stretch: 82%; color: var(--rail-text); gap: .6rem; }
html[data-theme="adult"] .brand svg { width: 28px; height: 28px; color: var(--rail-text); }
html[data-theme="adult"] .spaces { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; background: var(--rail-chip); border-radius: 10px; }
html[data-theme="adult"] .space { border-radius: 8px; padding: .45rem .3rem; font: 650 .85rem var(--display); font-stretch: 92%; color: var(--rail-dim); text-align: center; }
html[data-theme="adult"] .space:hover:not(.current) { background: var(--rail-hover); color: var(--rail-text); }
html[data-theme="adult"] .space.current { background: var(--rail-active-bg); color: var(--rail-active-text); }
html[data-theme="adult"] .space.add { border: 1px dashed var(--rail-line); }
html[data-theme="adult"] .topbar nav { flex-direction: column; flex: 0 0 auto; gap: 2px; overflow: visible; }
html[data-theme="adult"] .topbar nav a { padding: .65rem .8rem; border-radius: 10px; color: var(--rail-dim); font-weight: 600; font-size: 1rem; white-space: normal; gap: .75rem; }
html[data-theme="adult"] .topbar nav a:hover { background: var(--rail-hover); color: var(--rail-text); }
html[data-theme="adult"] .topbar nav a[aria-current="page"] { background: var(--rail-active-bg); color: var(--rail-active-text); }
html[data-theme="adult"] .who { margin-top: auto; flex-direction: column; align-items: stretch; gap: .45rem; padding: 1rem .2rem 0; border-top: 1px solid var(--rail-line); white-space: normal; color: var(--rail-dim); }
html[data-theme="adult"] .who .email { display: block; max-width: none; margin: 0 .3rem .3rem; font-size: .85rem; color: var(--rail-dim); }
html[data-theme="adult"] .who button.quiet { background: transparent; border: 1px solid var(--rail-line); color: var(--rail-text); border-radius: 10px; padding: .55rem .8rem; justify-content: flex-start; gap: .6rem; font-size: .92rem; }
html[data-theme="adult"] .who button.quiet:hover:not(:disabled) { background: var(--rail-hover); border-color: var(--rail-dim); }
html[data-theme="adult"] .main { max-width: 1080px; margin: 0; padding: 2.4rem 2.6rem 4.5rem; --pad: 2.6rem; }
html[data-theme="adult"] .page-head { margin-bottom: 1.6rem; }
html[data-theme="adult"] .page-head p { font-size: 1rem; }

/* ---- panels and controls: flat, hairline, square-ish ---- */
html[data-theme="adult"] section.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
html[data-theme="adult"] section.block > header { margin-bottom: .9rem; }
html[data-theme="adult"] button, html[data-theme="adult"] .btn { border-radius: 10px; font-family: var(--body); font-weight: 650; padding: .58rem 1.1rem; }
html[data-theme="adult"] button.quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
html[data-theme="adult"] button.quiet:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text2); }
html[data-theme="adult"] button.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
html[data-theme="adult"] button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); }
html[data-theme="adult"] input[type=text], html[data-theme="adult"] input[type=email], html[data-theme="adult"] input[type=password],
html[data-theme="adult"] input[type=search], html[data-theme="adult"] select, html[data-theme="adult"] textarea { border-color: var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); }
html[data-theme="adult"] input:focus, html[data-theme="adult"] select:focus { border-color: var(--accent); }
html[data-theme="adult"] .seg { background: var(--surface-2); border-radius: 10px; padding: 3px; }
html[data-theme="adult"] .seg button { border-radius: 8px; }
html[data-theme="adult"] .seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
html[data-theme="adult"] .seg button[aria-pressed="true"].is-allow { background: #1f8a4c; color: #fff; }
html[data-theme="adult"] .chip { border-radius: 6px; padding: .12rem .55rem; }
html[data-theme="adult"] .bar { height: 8px; border-radius: 4px; background: var(--surface-2); }
html[data-theme="adult"] .bar > span { border-radius: 4px; background: var(--accent); }
html[data-theme="adult"] .bar.hot > span { background: var(--danger); }
html[data-theme="adult"] .empty { background: transparent; border: 1px dashed var(--line-strong); border-radius: 10px; }
html[data-theme="adult"] .empty strong { font-family: var(--display); font-stretch: 84%; }
html[data-theme="adult"] .toast { border-radius: 10px; background: var(--ink); color: var(--bg); left: 1.4rem; transform: none; bottom: 1.4rem; }
html[data-theme="adult"] .toast::before { background: var(--accent); }
html[data-theme="adult"] .code { border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); }
html[data-theme="adult"] .modal-back { background: rgba(0, 0, 0, .55); }
html[data-theme="adult"] .modal { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
html[data-theme="adult"] .modal h2 { font-stretch: 82%; }
html[data-theme="adult"] .modal .ghost { border-color: var(--line-strong); }
html[data-theme="adult"] .sk-block { border-radius: var(--radius); }
html[data-theme="adult"] .chat { background: var(--surface); }

/* ---- Home: the protection ring is the page ---- */
.posture { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.2rem; align-items: center; margin: .6rem 0 1.6rem; }
.posture-ring { display: grid; place-items: center; }
.ring { display: block; overflow: visible; max-width: 100%; height: auto; }
.ring .arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.ring .arc.on { stroke: var(--accent); }
.ring .arc.off { stroke: var(--track); }
.ring[data-interactive] .arc { cursor: pointer; }
.ring .arc:focus-visible { outline: none; stroke-width: 18; }
.ring-num { font: 650 40px var(--display); font-stretch: 78%; fill: var(--ink); }
.ring-cap { font: 500 12px var(--body); fill: var(--text2); }
.ring.animate .arc.on { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .75s cubic-bezier(.3, .6, .2, 1) forwards; animation-delay: calc(var(--i) * .17s); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.posture-text h1 { margin-bottom: .4rem; }
.posture-text .status { font: 650 1.05rem var(--display); font-stretch: 88%; color: var(--accent-text); margin: 0 0 .5rem; }
.posture-text .status.partial { color: var(--chip-warn-ink); }
.posture-text .status.off { color: var(--danger); }
.posture-text p.sum { color: var(--text2); max-width: 46ch; font-size: 1.05rem; margin: 0 0 .9rem; }
.posture-text .row { display: flex; gap: .6rem; }

.layers { list-style: none; margin: 0; padding: 0; }
.layers li { display: grid; grid-template-columns: .8rem 11.5rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--line); }
.layers li:first-child { border-top: 0; }
.layers .pip { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); align-self: center; }
.layers li.off .pip { background: var(--track); }
.layers strong { font-weight: 650; }
.layers .detail { color: var(--text2); font-size: .95rem; }
.layers .count { font-weight: 650; white-space: nowrap; }
.layers li.off .count { color: var(--text2); font-weight: 500; }

/* ---- the phone: a red bar on top, the tab bar below ---- */
@media (max-width: 760px) {
  html[data-theme="adult"] .shell { display: block; }
  html[data-theme="adult"] .topbar { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem var(--pad); padding-top: calc(.6rem + env(safe-area-inset-top)); border-right: 0; border-bottom: 1px solid var(--rail-line); overflow: visible; }
  html[data-theme="adult"] .brand { padding: 0; font-size: 1.25rem; }
  html[data-theme="adult"] .brand svg { width: 24px; height: 24px; }
  html[data-theme="adult"] .spaces { display: inline-grid; width: 11.5rem; }
  html[data-theme="adult"] .main { padding: 1.4rem var(--pad) calc(6rem + env(safe-area-inset-bottom)); --pad: 1rem; }
  html[data-theme="adult"] section.block { padding: 1.1rem 1rem; }
  html[data-theme="adult"] .tabbar { background: var(--surface); border-top-color: var(--line); }
  html[data-theme="adult"] .tab[aria-current="page"], html[data-theme="adult"] button.tab.on { background: var(--accent-soft); color: var(--accent-text); }
  html[data-theme="adult"] .sheet nav a { color: var(--ink); }
  html[data-theme="adult"] .sheet-back { background: rgba(0, 0, 0, .55); }
  html[data-theme="adult"] .sheet { border-radius: 16px 16px 0 0; }
  html[data-theme="adult"] .toast { left: 50%; transform: translateX(-50%); }
  .posture { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; margin-top: 0; }
  .posture-ring svg { width: 200px; height: 200px; }
  .posture-text p.sum { margin-inline: auto; }
  .posture-text .row { justify-content: center; }
  .layers li { grid-template-columns: .8rem minmax(0, 1fr); gap: .1rem .8rem; }
  .layers .pip { grid-row: 1 / span 2; }
  .layers .count { grid-column: 2; white-space: normal; color: var(--text2); font-weight: 500; font-size: .92rem; }
  .layers .detail { display: none; }
}

/* ---- Praise Shield landing page ---- */
body.shield-site a { color: var(--accent-text); }
.sh-bar { max-width: 1120px; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
.sh-bar .sh-mark { display: inline-flex; align-items: center; gap: .55rem; font: 700 1.3rem var(--display); font-stretch: 82%; color: var(--ink); text-decoration: none; }
.sh-bar .sh-mark svg path { stroke: var(--accent); }
.sh-bar nav { display: flex; gap: 1.5rem; flex: 1; }
.sh-bar nav a { text-decoration: none; color: var(--text2); font-weight: 600; }
.sh-bar nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sh-btn { display: inline-block; font: 650 1rem var(--body); padding: .7rem 1.25rem; border-radius: 10px; border: 1.5px solid var(--accent); background: var(--accent); color: #fff !important; text-decoration: none; }
.sh-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sh-btn.quiet { background: transparent; color: var(--ink) !important; border-color: var(--line-strong); }
.sh-btn.quiet:hover { background: var(--surface-2); border-color: var(--text2); }
.sh-main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.sh-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.sh-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; font-stretch: 76%; margin-bottom: 1rem; }
.sh-hero p.lede { color: var(--text2); font-size: 1.2rem; max-width: 34rem; margin: 0 0 1.5rem; }
.sh-hero .row { display: flex; gap: .75rem; flex-wrap: wrap; }
.sh-demo { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; display: grid; gap: 1rem; justify-items: center; }
.sh-demo .hint { margin: 0; color: var(--text2); font-size: .92rem; text-align: center; }
.sh-demo .layers { width: 100%; }
.sh-demo .layers li { grid-template-columns: .8rem minmax(0, 1fr) auto; }
.sh-demo .layers .detail { display: none; }
.sh-section { padding: clamp(1.8rem, 5vw, 3.2rem) 0 0; scroll-margin-top: 1rem; }
.sh-section > h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-stretch: 76%; margin-bottom: 1.2rem; max-width: 34rem; }
.sh-rows { border-top: 2px solid var(--accent); }
.sh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.sh-row h3 { font-size: 1.25rem; }
.sh-row p { margin: 0; color: var(--text2); max-width: 56ch; }
.sh-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sh-table th, .sh-table td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.sh-table thead th { border-top: 0; background: var(--surface-2); }
.sh-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sh-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; }
.sh-panel h3 { margin-bottom: .6rem; font-size: 1.2rem; }
.sh-panel ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; color: var(--text2); }
.sh-cta { margin-top: clamp(2rem, 5vw, 3.5rem); background: var(--accent); color: #fff; border-radius: 16px; padding: clamp(1.6rem, 4vw, 2.8rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }
.sh-cta h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-stretch: 78%; margin: 0 0 .35rem; }
.sh-cta p { margin: 0; color: rgba(255, 255, 255, .86); }
.sh-cta .sh-btn { background: #fff; border-color: #fff; color: #b01d31 !important; }
.sh-cta .sh-btn:hover { background: #fdebed; border-color: #fdebed; }
.sh-foot { max-width: 1120px; margin: 0 auto; padding: 1.4rem 1.5rem 2.2rem; display: flex; gap: .8rem 1.8rem; flex-wrap: wrap; color: var(--text2); font-size: .95rem; border-top: 1px solid var(--line); }
.sh-foot a { color: var(--text2); }
html[data-theme="adult"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 900px) {
  .sh-bar nav { display: none; }
  .sh-bar { justify-content: space-between; padding: 1rem var(--pad, 1rem); }
  .sh-hero, .sh-row, .sh-two, .sh-cta { grid-template-columns: 1fr; }
  .sh-main { padding: 0 1rem 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { .ring.animate .arc.on { animation: none; stroke-dashoffset: 0; } }