/* ---------------------------------------------------------------------
   Shared by /digitalsafety, /kidsafety/* and /parentcoaching/*.

   The same three topics are written twice, once for a young person and
   once for their parent, so one stylesheet serves both sections. It
   sits at the site root rather than inside either one for that reason.

   Loaded after site.css, which owns the theme tokens, the masthead and
   the footer. Nothing here redefines a token; these are the components
   the four pages have in common, pulled out of the first page rather
   than copied into the second.

   Two things that bite on these pages, both learned the hard way:

   1. --sink IS the page background. .site-body sits straight on the
      body in every static page here, so a shape or a card filled with
      --sink is an invisible shape. Raised things use --paper.
   2. Every inline drawing uses a 320-wide viewBox, whatever its height.
      They are all laid out at the same CSS width, so a narrower viewBox
      is scaled up more and its 11px labels come out half as big again
      as the next drawing's.
   --------------------------------------------------------------------- */

/* ---------- The menu across the section ---------- */
/* In the page rather than in the masthead. The masthead belongs to the
   whole site and says "Home"; this says where you are inside one
   section of it, which is a different question. */
.topicnav { max-width: 42rem; margin: 0 auto; padding: 1.2rem 1rem 0; }
.topicnav ul { list-style: none; display: flex; flex-wrap: wrap;
               gap: .4rem; padding: 0; margin: 0; }
.topicnav a {
  display: block; padding: .4rem .85rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  background: var(--paper); border: 1px solid var(--rule); color: var(--brand);
}
.topicnav a:hover { border-color: var(--brand); }
.topicnav a[aria-current="page"] {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
/* The first pill is the way back up, so it is set apart from the ones
   that are siblings of one another. */
.topicnav .up a { background: none; border-color: transparent; color: var(--muted); font-weight: 400; }
.topicnav .up a:hover { color: var(--brand); }

/* ---------- Which of the two versions you are reading ---------- */
/* Every topic exists twice, once for a young person and once for their
   parent. A reader who lands on the wrong one from a search or a
   forwarded link needs to find that out immediately, so this sits above
   the heading rather than at the foot of the page. */
.audience {
  max-width: 42rem; margin: .9rem auto 0; padding: 0 1rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  font-size: .9rem; color: var(--muted);
}
.audience strong { color: var(--ink); font-weight: 600; }
/* Deliberately not pushed right with margin-left:auto. On a phone the
   strip wraps, and an auto margin left the link stranded on a line of
   its own at the far edge, reading as unrelated to the sentence above
   it. Flowing straight after the text works at every width. */
.audience a { white-space: nowrap; }

/* ---------- Page furniture ---------- */
.guide { padding-top: 1.4rem; }
.guide h1 { font-family: var(--display); font-weight: 500;
            font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 0 0 .4rem; line-height: 1.12; }
.guide .lead { font-size: 1.08rem; color: var(--muted); margin: 0 0 2rem; line-height: 1.55; }
.guide h2 { font-family: var(--display); font-weight: 500;
            font-size: clamp(1.35rem, 4.4vw, 1.6rem);
            margin: 2.8rem 0 .6rem; line-height: 1.2; }
.guide h3 { font-size: 1.02rem; font-weight: 700; margin: 1.6rem 0 .4rem; }
.guide p, .guide li { line-height: 1.62; }
.guide ul { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.guide li { margin-bottom: .5rem; }

/* The one sentence a page is for, said at the top and again at the end.
   A reader who takes nothing else should take this. */
.creed {
  font-family: var(--display); font-size: clamp(1.25rem, 4.6vw, 1.55rem);
  line-height: 1.35; margin: 2.2rem 0;
  background: var(--brand-soft); border: 1px solid var(--rule);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; color: var(--ink);
}
.creed span { display: block; font-family: var(--sans); font-size: .8rem;
              font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
              color: var(--muted); margin-bottom: .5rem; }

.note { border-left: 3px solid var(--brand); padding: .25rem 0 .25rem 1rem;
        color: var(--muted); margin: 1.4rem 0; }

/* ---------- What it is good for, and what to watch ---------- */
/* Two columns above 42rem, stacked below. Deliberately NOT amber on the
   pitfalls side: --live is the one attention colour on these pages and
   .urgent owns it, so spending it here would leave the "something has
   gone wrong" box with no way left to say "this one". The two sides are
   told apart by the heading colour instead. */
.balance { display: grid; gap: 1rem; margin: 1.8rem 0 1.4rem; }
@media (min-width: 42rem) { .balance { grid-template-columns: 1fr 1fr; } }
.balance > div { border: 1px solid var(--rule); border-radius: var(--radius);
                 padding: 1rem 1.1rem; background: var(--paper); }
.balance .merits { border-top: 3px solid var(--brand); }
.balance .pitfalls { border-top: 3px solid var(--ink); }
.balance h3 { margin: 0 0 .6rem; font-family: var(--sans); font-size: .82rem;
              font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.balance .merits h3 { color: var(--brand); }
.balance .pitfalls h3 { color: var(--ink); }
.balance ul { margin: 0; padding-left: 1.15rem; }
.balance li { margin: 0 0 .45rem; line-height: 1.5; font-size: .95rem; }
.balance li:last-child { margin-bottom: 0; }

/* ---------- The one opinion these pages carry ---------- */
/* Everything else on the v2 pages describes a mechanism and leaves the
   conclusion to the reader. This block deliberately does not. A page
   that explains in detail how an app is built to make a young person
   feel worse, and then says nothing at all about their worth, has
   described the trap accurately and left them sitting in it.

   Added 26 October 2026 at Landon's request. It is the only place on
   these pages that tells the reader something about themselves rather
   than about a system, and it is the same text on every page on
   purpose -- it is the part meant to be remembered. */
.youmatter {
  margin: 2.4rem 0 1.4rem; padding: 1.3rem 1.4rem;
  background: var(--brand-soft); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.youmatter .kicker { font-size: .8rem; font-weight: 700; letter-spacing: .07em;
                     text-transform: uppercase; color: var(--brand);
                     margin: 0 0 .5rem; }
.youmatter p { margin: 0 0 .75rem; line-height: 1.65; }
.youmatter p:last-child { margin-bottom: 0; }

/* ---------- Inline drawings ---------- */
.shot { margin: 1.1rem 0 .3rem; }
/* Colors come from CSS classes, never from fill= attributes: a
   fill="var(--paper)" presentation attribute is not dependable across
   browsers, and these have to follow the dark theme. */
.shot svg { width: 100%; max-width: 22rem; height: auto; display: block;
            font-family: var(--sans); }
.sv-frame { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.sv-keep  { fill: var(--brand); }
.sv-onink { fill: var(--brand-ink); }
.sv-ink   { fill: var(--ink); }
.sv-muted { fill: var(--muted); }
.sv-paper { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.sv-warnfill { fill: var(--live); }
.sv-cross { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.sv-stroke { fill: none; stroke: var(--muted); stroke-width: 1.6;
             stroke-linecap: round; stroke-linejoin: round; }
.sv-inkstroke { fill: none; stroke: var(--ink); stroke-width: 2;
                stroke-linecap: round; stroke-linejoin: round; }
.sv-t { font-size: 11px; }
.cap { font-size: .85rem; color: var(--muted); font-style: italic; margin: .5rem 0 0; }

/* ---------- A list you can count rather than a paragraph ---------- */
.matters { list-style: none; padding: 0; margin: .8rem 0 1.4rem; }
.matters li {
  display: flex; gap: .8rem; align-items: flex-start;
  border-top: 1px solid var(--rule); padding: .8rem .2rem; margin: 0;
}
.matters li:last-child { border-bottom: 1px solid var(--rule); }
.matters svg { flex: none; margin-top: .15rem; color: var(--brand); }
.matters strong { display: block; }
.matters span { color: var(--muted); font-size: .95rem; }

/* ---------- Warning signs ---------- */
/* Amber, not green and not red. --live is the theme's one attention
   color, and a page of green boxes has no way left to say "this one". */
.flags { list-style: none; padding: 0; margin: .9rem 0 1.4rem; }
.flags li {
  position: relative; padding: .55rem 0 .55rem 2rem; margin: 0;
  border-bottom: 1px solid var(--rule);
}
.flags li:first-child { border-top: 1px solid var(--rule); }
.flags li::before {
  content: ""; position: absolute; left: .35rem; top: 1.05rem;
  width: .55rem; height: .55rem; border-radius: 2px;
  background: var(--live); transform: rotate(45deg);
}

/* ---------- The box for somebody already in trouble ---------- */
.urgent {
  margin: 1.6rem 0; padding: 1.2rem 1.3rem 1.4rem;
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--live);
  border-radius: var(--radius); box-shadow: var(--lift-sm);
}
.urgent > :first-child { margin-top: 0; }
.urgent > :last-child { margin-bottom: 0; }
.urgent h2, .urgent h3 { margin-top: 0; }
.urgent .kicker { font-size: .8rem; font-weight: 700; letter-spacing: .07em;
                  text-transform: uppercase; color: var(--live); margin: 0 0 .3rem; }
.urgent ol { padding-left: 1.3rem; margin: .6rem 0 1rem; }
.urgent li { margin-bottom: .55rem; line-height: 1.6; }

/* Where to go, as a table rather than a paragraph full of links. */
.resources { border-collapse: collapse; width: 100%; margin: .6rem 0 .2rem;
             font-size: .95rem; }
.resources th, .resources td { text-align: left; padding: .55rem .6rem;
                               border-bottom: 1px solid var(--rule); vertical-align: top; }
.resources th { font-weight: 700; white-space: nowrap; }
.resources td a { word-break: break-word; }

/* On a phone the nowrap label took 180px of a 300px table and left the
   address and the explanation in a 120px gutter -- measured, not
   guessed. Below this width the two cells stack instead. This is the
   page somebody reads in a panic; it is the last one that should be
   hard to read on the device it will be opened on. */
@media (max-width: 34rem) {
  .resources, .resources tbody, .resources tr,
  .resources th, .resources td { display: block; width: auto; }
  .resources tr { border-bottom: 1px solid var(--rule); padding: .5rem 0; }
  .resources tr:last-child { border-bottom: none; }
  .resources th { white-space: normal; border-bottom: none;
                  padding: 0 0 .15rem; color: var(--muted);
                  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
  .resources td { border-bottom: none; padding: 0; }
}

/* ---------- For parents ---------- */
/* --paper, not --sink: the page body is already --sink in both themes,
   so a sunken band is a border and nothing else, and the handover to
   the second audience is the thing that should be visible at a glance. */
.forparents {
  margin: 3.4rem 0 0; padding: 1.6rem 1.3rem 1.8rem;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--lift-sm);
}
.forparents > h2 { margin-top: .2rem; }
.forparents .kicker { font-size: .8rem; font-weight: 700; letter-spacing: .07em;
                      text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }
/* The one paragraph in the section that must not be skimmed past. */
.forparents .keystone {
  border-left: 4px solid var(--brand); background: var(--brand-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.1rem; margin: 1rem 0 1.4rem;
}
.forparents .keystone p:last-child { margin-bottom: 0; }

/* Things to say, in the words you would actually say them. */
.asks { list-style: none; padding: 0; margin: .7rem 0 1.2rem; }
.asks li { background: var(--sink); border: 1px solid var(--rule);
           border-radius: 10px; padding: .7rem .9rem; margin: 0 0 .55rem;
           font-family: var(--display); font-size: 1.08rem; line-height: 1.35; }

/* ---------- The hub's menu of topics ---------- */
.hub { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid;
       gap: 1rem; }
@media (min-width: 46rem) { .hub { grid-template-columns: 1fr 1fr; } }
.hub li { margin: 0; }
.hub a {
  display: flex; gap: .95rem; height: 100%; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--lift-sm);
}
.hub a:hover { border-color: var(--brand); }
.hub svg { flex: none; margin-top: .1rem; color: var(--brand); }
.hub .t { font-family: var(--display); font-size: 1.25rem; line-height: 1.2;
          color: var(--brand); display: block; margin-bottom: .25rem; }
.hub .d { color: var(--muted); font-size: .95rem; line-height: 1.5; display: block; }
.hub .r { display: block; margin-top: .6rem; font-size: .92rem;
          font-style: italic; color: var(--ink); }