/* ==========================================================================
   Additions used only by the Family Safety Toolkit. Everything shared with the
   hub lives in dads.css; this file is the four tab panels and nothing else.
   ========================================================================== */

.chero-sm{min-height:clamp(320px,44vh,440px)}
.chero-sm .cinner{padding:4.4rem 0 2.4rem}
.chero-sm h1{font-size:clamp(1.9rem,4.6vw,3.1rem)}

/* A plate beside the section heading rather than above it: on a page someone
   reaches in a crisis the words must reach the top of the screen first. */
.platehead{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin:2.4rem 0 1.5rem}
.platehead img{flex:0 1 380px;width:min(380px,100%);height:auto;aspect-ratio:3/2;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-2)}
.platehead > div{flex:1 1 380px;min-width:min(340px,100%)}
.platehead h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:.2rem 0 .6rem}
@media (max-width:760px){.platehead{gap:1rem}.platehead img{order:-1}}

.pull{margin:1.6rem 0;padding:1.6rem 1.8rem;border-left:3px solid var(--amber);
  background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;
  font-family:'Oswald',sans-serif;font-weight:400;font-size:clamp(1.15rem,2.4vw,1.6rem);
  line-height:1.35;color:var(--bone);text-wrap:balance}

/* ── the lock-down progress ring ──────────────────────────────────────── */
.progress{display:flex;gap:1.3rem;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:1.1rem;flex-wrap:wrap}
.progress > div:last-child{flex:1 1 260px}
.progress b{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.progress p{margin:.2rem 0 0;color:var(--muted);font-size:14px}
.ring{position:relative;width:72px;height:72px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .ring-bg{stroke:var(--line)}
.ring .ring-fg{stroke:var(--green);stroke-linecap:round;stroke-dasharray:175.9;stroke-dashoffset:175.9;
  transition:stroke-dashoffset .4s ease}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.linkbtn{background:none;border:0;color:var(--steel);cursor:pointer;font:inherit;padding:0;text-decoration:underline}

/* ── checklists ───────────────────────────────────────────────────────── */
.checkgroup{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.checkgroup h3{display:flex;align-items:center;gap:.55rem;font-size:1rem;margin-bottom:.6rem}
.checkgroup ul{list-style:none;margin:0;padding:0}
.checkgroup li{border-top:1px solid var(--line)}
.checkgroup li:first-child{border-top:0}
.checkgroup label{display:flex;gap:.75rem;align-items:flex-start;padding:.72rem 0;cursor:pointer}
.checkgroup input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
  border:1.6px solid var(--line-2);border-radius:6px;background:var(--ink-2);cursor:pointer;
  display:grid;place-content:center;transition:background .15s,border-color .15s}
.checkgroup input:checked{background:var(--green);border-color:var(--green)}
.checkgroup input:checked::after{content:"";width:10px;height:6px;border:2.4px solid var(--ink);
  border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}
.checkgroup b{display:block;font-weight:600;font-size:15px}
.checkgroup span{display:block;color:var(--muted);font-size:13.6px;margin-top:.1rem}
.checkgroup input:checked ~ span b{color:var(--muted)}

/* ── the warning-signs meter ──────────────────────────────────────────── */
.meter{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.3rem;margin-bottom:1.1rem}
.meter-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:.75rem}
.meter-bar i{display:block;height:100%;width:0;background:var(--green);border-radius:3px;
  transition:width .35s ease,background .35s ease}
.meter b{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.meter p{margin:.2rem 0 0;color:var(--muted);font-size:14.4px}
.signlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.signlist li{flex:1 1 340px}
.signlist label{display:flex;gap:.75rem;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1rem;height:100%;cursor:pointer;
  transition:border-color .15s}
.signlist label:hover{border-color:var(--line-2)}
.signlist input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:1px;
  border:1.6px solid var(--line-2);border-radius:6px;background:var(--ink-2);cursor:pointer;
  display:grid;place-content:center}
.signlist input:checked{background:var(--amber);border-color:var(--amber)}
.signlist input:checked::after{content:"";width:10px;height:6px;border:2.4px solid var(--ink);
  border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}
.signlist span{font-size:14.6px}

/* ── who to call ──────────────────────────────────────────────────────── */
.helpcard{display:flex;flex-direction:column;gap:.3rem;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.05rem 1.15rem;height:100%;color:inherit}
a.helpcard:hover{border-color:var(--steel-dim);background:var(--panel-2);text-decoration:none}
.helpcard .hh{display:flex;align-items:center;gap:.55rem;font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:1rem}
.helpcard p{margin:0;color:var(--muted);font-size:13.8px;flex:1}
.helpcard .no{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums;
  font-size:1.02rem;color:var(--amber);margin-top:.45rem;letter-spacing:.01em}
.helpcard .go{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;font-weight:600;color:var(--steel);margin-top:.45rem}
.helpcard.urgent{border-color:var(--red-dim);background:#180F0E}
.helpcard.urgent .no{color:var(--red)}