/* ============================================================
   YCYW AI Platform — Guidance page content styles
   Used by the Razor view Views/Guidance/Index.cshtml (route: /guidance.html).

   The page header (logo / tabs / user area) is provided by the site
   stylesheet (site.css), so it is intentionally NOT defined here.
   This file is loaded after site.css, so these rules win where they overlap.

   Interactions run on hidden radio / checkbox inputs + :checked
   sibling selectors: 11 section pills, prev/next, the "N / 11"
   counter, Students/Teachers/Parents tabs, and every
   show/hide toggle.
   ============================================================ */

/* ==================== page-level layout override ====================
   使用指南页需要「整页滚动 + Header 吸顶」（Header 的 position: sticky 由
   site.css 提供，此处不动它）。site.css 的 html, body { height: 100% } 会把
   body 的盒子限制为一屏高，sticky 的 header 只能在 body 盒子内吸附，滚过约
   一屏后就会被 body 的底边顶走；这里让 body 随内容自然增高（且不低于一屏，
   保证内容不足一屏时底色仍铺满），Header 即可在整页滚动中全程吸顶，
   与首页 page-header 的表现一致。
   本文件仅被 Views/Guidance/Index.cshtml（/guidance.html）加载，不影响其它页面。 */
body {
  height: auto;
  min-height: 100%;
}

/**, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }*/
/*
body {
  margin: 0;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: #252525;
}*/
a { color: #0032A0; text-decoration: none; }
a:hover { color: #FF0044; }
img { display: block; max-width: 100%; }
input[type=checkbox] + label::before, label > input[type=checkbox] + span::before, .checked-label > input[type=checkbox] + span::before{display:none;}
.login {
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    letter-spacing: 0.3em;
    text-decoration: none;
    display: block;
    padding: 0 0.7em 0 1em;
    border-radius: 20px;
    line-height: 30px;
    box-sizing: border-box;
    white-space: nowrap;
}


/* ---------- hidden form controls driving the interactions ---------- */
.rsec, .raud, .tg {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==================== banner (matches home page) ====================
   Copied from home-ailist.scss (.banner block) so the guidance page
   banner looks identical to the home page banner.                      */
.banner { width: 100%; position: relative; scroll-snap-align: start; }
.banner .banner-bg img { display: block; width: 100%; }
.banner .banner-text { position: absolute; width: 60%; left: 192px; bottom: 67.2px; }
.banner .banner-text img { display: block; width: 70%; opacity: 1; }
@media (max-width: 1024px) and (orientation: portrait) {
  .banner .banner-text { width: 50%; left: 10vw; bottom: 5vw; }
  .banner .banner-text img { display: block; width: 100%; opacity: 1; }
}

/* ============================ layout ============================ */
.layout { display: flex; gap: 24px; padding: 24px 40px 80px; align-items: flex-start; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.guidance {
  display: flex; flex-direction: column; gap: 44px;
  width: 100%; max-width: 1080px; margin: 0 auto;
}

/* ---------- page heading ---------- */
.g-head { display: flex; flex-direction: column; gap: 10px; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #E0003C; font-weight: 600; }
.g-title { font-family: Poppins, sans-serif; font-size: 34px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: #031293; }
.g-lead { margin: 0; font-size: 17px; line-height: 1.6; color: #0032A0; font-weight: 500; max-width: 62ch; }
.g-sub { margin: 0; font-size: 16px; line-height: 1.7; color: #545454; max-width: 62ch; }

/* ---------- section pills ---------- */
.g-nav { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid #F0F0F0; padding-bottom: 12px; }
.pills { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; padding: 4px 0; }
.pill {
  font-size: 13px; font-weight: 500; padding: 12px 14px; min-height: 44px; flex-shrink: 0;
  border: 0; border-radius: 999px; background: #F7F7FA; color: #444444;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  display: inline-flex; align-items: center;
}
.g-controls { display: flex; align-items: center; gap: 8px; align-self: flex-end; }
.step { display: none; font-size: 12px; color: #6B6B6B; font-variant-numeric: tabular-nums; }
.arrows { display: none; align-items: center; gap: 8px; }
.arrow {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid #D4DCE3;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #0032A0; cursor: pointer;
}

/* ---------- panels ---------- */
.panel { display: none; flex-direction: column; gap: 16px; }
.sec-title { font-size: 18px; font-weight: 600; color: #252525; }
.sec-lead { margin: 0; font-size: 14px; line-height: 1.75; color: #545454; max-width: 62ch; }

/* ---------- dark blue feature card ---------- */
.blue-card { border-radius: 10px; background: #031293; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.blue-card.wide-gap { gap: 24px; }
.eyebrow-light { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8FA8FF; font-weight: 600; }
.big-q { font-family: Poppins, sans-serif; font-size: 26px; font-weight: 600; color: #fff; line-height: 1.3; }

.q-block { display: flex; flex-direction: column; gap: 14px; }
.q-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.q-label { font-size: 12px; color: #8FA8FF; white-space: nowrap; }
.q-strike { font-size: 20px; color: #93A6EA; text-decoration: line-through; }
.q-ask { font-family: Poppins, sans-serif; font-size: 28px; font-weight: 600; color: #fff; line-height: 1.25; }
.q-note { font-size: 13px; color: #C9D4FF; }

/* ---------- thinking cycle ---------- */
.cycle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cycle-card { min-width: 0; border-radius: 10px; padding: 20px; background: #031293; display: flex; flex-direction: column; gap: 8px; }
.cycle-num { font-family: Poppins, sans-serif; font-size: 24px; font-weight: 600; color: #6FD0FF; }
.cycle-name { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.cycle-desc { font-size: 13px; line-height: 1.6; color: #C9D4FF; }

.callout {
  border: 1px solid #D9E6F5; border-left: 4px solid #1D4CF4; border-radius: 8px;
  padding: 14px 18px; background: #F7FCFF; display: flex; flex-direction: column; gap: 4px;
}
.callout-title { font-size: 14px; font-weight: 700; color: #0032A0; }
.callout-text { font-size: 14px; line-height: 1.7; color: #444; }

/* ---------- toggle button ---------- */
.pill-toggle {
  align-self: flex-start; font-size: 13px; font-weight: 500; color: #0032A0;
  background: #fff; border: 1px solid #C7D6F0; border-radius: 999px;
  padding: 11px 18px; min-height: 44px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center;
}
.when-open { display: none; }

/* ---------- detail tables ---------- */
.detail { display: none; border: 1px solid #E5E5E5; border-radius: 10px; overflow: hidden; }
.detail-row { display: grid; grid-template-columns: 200px minmax(0, 62ch); gap: 10px 24px; padding: 18px 20px; border-bottom: 1px solid #F0F0F0; }
.detail-row:last-child { border-bottom: 0; }
.detail-row.age { grid-template-columns: 160px minmax(0, 62ch); }
.detail-key { font-size: 14px; font-weight: 600; color: #252525; }
.detail-val { font-size: 14px; line-height: 1.75; color: #545454; }

/* ---------- key terms ---------- */
.term-table { border: 1px solid #E5E5E5; border-radius: 10px; overflow: hidden; }
.term-row { display: grid; grid-template-columns: 220px minmax(0, 62ch); gap: 10px 24px; padding: 18px 20px; border-bottom: 1px solid #F0F0F0; }
.term-row:last-child { border-bottom: 0; }
.term-key { font-size: 15px; font-weight: 700; border-left: 3px solid; padding-left: 12px; }
.term-def { font-size: 14px; line-height: 1.75; color: #444; }
.term-row.a { background: #F7FCFF; }
.term-row.a .term-key { color: #0032A0; border-left-color: #0032A0; }
.term-row.b { background: #FFFFFF; }
.term-row.b .term-key { color: #1D4CF4; border-left-color: #1D4CF4; }

/* ---------- task levels (red / amber / green) ---------- */
.levels { display: flex; flex-direction: column; gap: 10px; }
.level-row { display: flex; align-items: center; gap: 16px; border: 1px solid #EDF2F7; border-radius: 8px; padding: 16px 20px; }
.level-dot { display: block; width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.level-name { font-size: 15px; font-weight: 700; color: #252525; width: 72px; flex-shrink: 0; }
.level-text { font-size: 14px; color: #444; }
.level-text.stack { display: flex; flex-direction: column; gap: 4px; }
.l-red { border-left: 4px solid #D8232A; }   .l-red .level-dot { background: #D8232A; }
.l-amber { border-left: 4px solid #E08A00; } .l-amber .level-dot { background: #E08A00; }
.l-green { border-left: 4px solid #1E9E5A; } .l-green .level-dot { background: #1E9E5A; }

.amber-grid { display: none; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.amber-card { min-width: 0; border: 1px solid #EDF2F7; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.amber-title { font-size: 13px; font-weight: 700; color: #E08A00; }
.amber-text { font-size: 14px; line-height: 1.75; color: #545454; }

/* ---------- the test ---------- */
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.test-card { min-width: 0; background: #0B2BC4; border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.test-flag { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.flag-yes { color: #7BE0A8; }
.flag-no { color: #FFB3BE; }
.test-text { font-size: 15px; color: #fff; line-height: 1.5; }

/* ---------- by age ---------- */
.age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.age-card { min-width: 0; border: 1px solid #D9E6F5; border-radius: 10px; padding: 20px; background: #F5FBFF; display: flex; flex-direction: column; gap: 8px; }
.age-tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #4A6DBF; font-weight: 600; }
.age-name { font-size: 15px; font-weight: 700; color: #0032A0; }
.age-text { font-size: 14px; line-height: 1.65; color: #4A5568; }

/* ---------- for you ---------- */
.aud-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.aud-pill {
  font-size: 14px; font-weight: 500; padding: 12px 22px; min-height: 44px;
  border: 0; border-radius: 999px; background: #F7F7FA; color: #333333;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  display: inline-flex; align-items: center;
}
.aud-body { display: block; }
.aud-panel { display: none; flex-direction: column; gap: 16px; }

.you-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.you-card { min-width: 0; border: 1px solid #D9E6F5; border-radius: 10px; padding: 22px; background: #F5FBFF; display: flex; flex-direction: column; gap: 10px; }
.you-title { font-size: 16px; font-weight: 700; color: #0032A0; }
.you-text { font-size: 14px; line-height: 1.7; color: #4A5568; }

.subcard { border: 1px solid #E5E5E5; border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.subcard-title { font-size: 18px; font-weight: 600; color: #252525; }
.cannot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cannot-card {
  min-width: 0; border-radius: 10px; padding: 18px; background: #F7FCFF;
  border: 1px solid #D9E6F5; border-top: 4px solid var(--accent);
  display: flex; flex-direction: column; gap: 6px;
}
.cannot-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.cannot-note { font-size: 13px; line-height: 1.65; color: #545454; }
.punchline { font-size: 14px; line-height: 1.7; color: #0032A0; font-weight: 500; }

.cycle3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cycle3-card { min-width: 0; border-radius: 10px; padding: 18px; background: #F7FCFF; border: 1px solid #D9E6F5; border-top: 4px solid var(--accent); display: flex; flex-direction: column; gap: 8px; }
.cycle3-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.cycle3-text { font-size: 13px; line-height: 1.65; color: #545454; }

.quote { border-left: 4px solid #1D4CF4; border-radius: 4px; padding: 4px 0 4px 16px; display: flex; flex-direction: column; gap: 4px; }
.quote-lead { font-size: 14px; line-height: 1.7; color: #0032A0; font-weight: 600; }
.quote-text { font-size: 14px; line-height: 1.7; color: #545454; }

.alert { border: 1px solid #F5CFD1; border-left: 5px solid #D8232A; border-radius: 10px; padding: 22px; background: #FDF6F6; display: flex; flex-direction: column; gap: 10px; }
.alert-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #A81A20; }
.alert-title { font-size: 15px; font-weight: 700; color: #252525; line-height: 1.5; }
.alert-text { font-size: 14px; line-height: 1.75; color: #444; }

/* ---------- staying safe ---------- */
.safe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.safe-card { min-width: 0; background: #0B2BC4; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.safe-heading { font-family: Poppins, sans-serif; font-size: 24px; font-weight: 600; color: #fff; line-height: 1.3; }
.safe-title { font-size: 15px; font-weight: 700; color: #fff; }
.safe-text { font-size: 14px; line-height: 1.7; color: #C9D4FF; }

/* ---------- citing AI ---------- */
.cite-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cite-card { min-width: 0; border-radius: 10px; background: #031293; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cite-n { font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; color: #6FD0FF; }
.cite-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.4; }
.cite-why { font-size: 13px; line-height: 1.65; color: #C9D4FF; }
.cite-toggle {
  align-self: flex-start; margin-top: 2px; font-size: 13px; font-weight: 500;
  color: #fff; background: none; border: 1px solid #4A63C8; border-radius: 999px;
  padding: 10px 14px; min-height: 44px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center;
}
.cite-eg { display: none; background: #0B2BC4; border-radius: 8px; padding: 14px 16px; flex-direction: column; gap: 6px; }
.cite-eg-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6FD0FF; }
.cite-eg-text { font-size: 13px; line-height: 1.7; color: #fff; }

.formats { display: none; border: 1px solid #D9E6F5; border-radius: 10px; background: #F7FCFF; padding: 24px; flex-direction: column; gap: 24px; }
.fmt-intro { margin: 0; font-size: 14px; line-height: 1.75; color: #444; max-width: 62ch; }
.fmt-hint { font-size: 13px; line-height: 1.7; color: #545454; }
.fmt-group { display: flex; flex-direction: column; gap: 10px; }
.fmt-style { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0032A0; }
.fmt-label { font-size: 13px; line-height: 1.7; color: #545454; }
.fmt-box {
  background: #fff; border: 1px solid #D9E6F5; border-radius: 8px;
  padding: 14px 16px; font-size: 14px; line-height: 1.75; color: #252525;
  overflow-wrap: anywhere;
}
.fmt-note { margin: 0; font-size: 13px; line-height: 1.7; color: #6B6B6B; }

/* ---------- where to go ---------- */
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.route-card {
  min-width: 0; border: 1px solid #EDF2F7; border-radius: 10px; padding: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FCFF 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.route-title { font-size: 17px; font-weight: 700; color: #0032A0; }
.route-desc { margin: 0; font-size: 14px; line-height: 1.75; color: #545454; flex: 1; }
.btn-primary {
  align-self: flex-start; font-size: 13px; font-weight: 500; color: #fff;
  background: #1D4CF4; border: 0; border-radius: 999px; padding: 12px 20px;
  min-height: 44px; cursor: pointer; white-space: nowrap; font-family: inherit;
  display: inline-flex; align-items: center;
}

/* ---------- handbook footer ---------- */
.handbook { border-top: 1px solid #F0F0F0; padding-top: 24px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.handbook-col { display: flex; flex-direction: column; gap: 4px; }
.handbook-title { font-size: 14px; font-weight: 600; color: #252525; }
.handbook-sub { font-size: 13px; color: #6B6B6B; }
.btn-link { font-size: 13px; font-weight: 500; color: #fff; background: #1D4CF4; border-radius: 999px; padding: 8px 18px; white-space: nowrap; display: inline-flex; align-items: center; }
.btn-link:hover { color: #fff; background: #0032A0; }

/* ============================================================
   Interaction wiring — :checked sibling selectors
   ============================================================ */

#gs0:checked  ~ .g-nav .pill[for="gs0"],
#gs1:checked  ~ .g-nav .pill[for="gs1"],
#gs2:checked  ~ .g-nav .pill[for="gs2"],
#gs3:checked  ~ .g-nav .pill[for="gs3"],
#gs4:checked  ~ .g-nav .pill[for="gs4"],
#gs5:checked  ~ .g-nav .pill[for="gs5"],
#gs6:checked  ~ .g-nav .pill[for="gs6"],
#gs7:checked  ~ .g-nav .pill[for="gs7"],
#gs8:checked  ~ .g-nav .pill[for="gs8"],
#gs9:checked  ~ .g-nav .pill[for="gs9"] { background: #031293; color: #FFFFFF; }

#gs0:focus-visible  ~ .g-nav .pill[for="gs0"],
#gs1:focus-visible  ~ .g-nav .pill[for="gs1"],
#gs2:focus-visible  ~ .g-nav .pill[for="gs2"],
#gs3:focus-visible  ~ .g-nav .pill[for="gs3"],
#gs4:focus-visible  ~ .g-nav .pill[for="gs4"],
#gs5:focus-visible  ~ .g-nav .pill[for="gs5"],
#gs6:focus-visible  ~ .g-nav .pill[for="gs6"],
#gs7:focus-visible  ~ .g-nav .pill[for="gs7"],
#gs8:focus-visible  ~ .g-nav .pill[for="gs8"],
#gs9:focus-visible  ~ .g-nav .pill[for="gs9"] { outline: 2px solid #1D4CF4; outline-offset: 2px; }

#gs0:checked  ~ .g-nav .s0,
#gs1:checked  ~ .g-nav .s1,
#gs2:checked  ~ .g-nav .s2,
#gs3:checked  ~ .g-nav .s3,
#gs4:checked  ~ .g-nav .s4,
#gs5:checked  ~ .g-nav .s5,
#gs6:checked  ~ .g-nav .s6,
#gs7:checked  ~ .g-nav .s7,
#gs8:checked  ~ .g-nav .s8,
#gs9:checked  ~ .g-nav .s9 { display: inline; }

#gs0:checked  ~ .g-nav .a0,
#gs1:checked  ~ .g-nav .a1,
#gs2:checked  ~ .g-nav .a2,
#gs3:checked  ~ .g-nav .a3,
#gs4:checked  ~ .g-nav .a4,
#gs5:checked  ~ .g-nav .a5,
#gs6:checked  ~ .g-nav .a6,
#gs7:checked  ~ .g-nav .a7,
#gs8:checked  ~ .g-nav .a8,
#gs9:checked  ~ .g-nav .a9 { display: flex; }

#gs0:checked  ~ .panels #p0,
#gs1:checked  ~ .panels #p1,
#gs2:checked  ~ .panels #p2,
#gs3:checked  ~ .panels #p3,
#gs4:checked  ~ .panels #p4,
#gs5:checked  ~ .panels #p5,
#gs6:checked  ~ .panels #p6,
#gs7:checked  ~ .panels #p7,
#gs8:checked  ~ .panels #p8,
#gs9:checked  ~ .panels #p9 { display: flex; }

#aud-s:checked ~ .aud-pills .aud-pill[for="aud-s"],
#aud-t:checked ~ .aud-pills .aud-pill[for="aud-t"],
#aud-p:checked ~ .aud-pills .aud-pill[for="aud-p"] { background: #031293; color: #FFFFFF; }
#aud-s:focus-visible ~ .aud-pills .aud-pill[for="aud-s"],
#aud-t:focus-visible ~ .aud-pills .aud-pill[for="aud-t"],
#aud-p:focus-visible ~ .aud-pills .aud-pill[for="aud-p"] { outline: 2px solid #1D4CF4; outline-offset: 2px; }
#aud-s:checked ~ .aud-body .aud-panel-students,
#aud-t:checked ~ .aud-body .aud-panel-teachers,
#aud-p:checked ~ .aud-body .aud-panel-parents { display: flex; }

#tg-phases:checked  ~ .detail-phases  { display: block; }
#tg-ages:checked    ~ .detail-ages    { display: block; }
#tg-amber:checked   ~ .amber-grid     { display: grid; }
#tg-formats:checked ~ .formats        { display: flex; }
#cite1:checked ~ .cite-eg,
#cite2:checked ~ .cite-eg,
#cite3:checked ~ .cite-eg,
#cite4:checked ~ .cite-eg { display: flex; }

#tg-phases:checked  ~ .pill-toggle .when-closed,
#tg-ages:checked    ~ .pill-toggle .when-closed,
#tg-amber:checked   ~ .pill-toggle .when-closed,
#tg-formats:checked ~ .pill-toggle .when-closed,
#cite1:checked ~ .cite-toggle .when-closed,
#cite2:checked ~ .cite-toggle .when-closed,
#cite3:checked ~ .cite-toggle .when-closed,
#cite4:checked ~ .cite-toggle .when-closed { display: none; }

#tg-phases:checked  ~ .pill-toggle .when-open,
#tg-ages:checked    ~ .pill-toggle .when-open,
#tg-amber:checked   ~ .pill-toggle .when-open,
#tg-formats:checked ~ .pill-toggle .when-open,
#cite1:checked ~ .cite-toggle .when-open,
#cite2:checked ~ .cite-toggle .when-open,
#cite3:checked ~ .cite-toggle .when-open,
#cite4:checked ~ .cite-toggle .when-open { display: inline; }

.tg:focus-visible ~ .pill-toggle,
.tg:focus-visible ~ .cite-toggle { outline: 2px solid #1D4CF4; outline-offset: 2px; }
.cite-card .tg:focus-visible ~ .cite-toggle { outline-color: #6FD0FF; }

/* ============================================================
   Bug fixes (carried over from the original page)
   ============================================================ */

/* [FIX 1] Two-column detail rows that carried a second sentence put
   three children into a two-column grid, so the extra sentence fell
   into the narrow left column (200px / 160px) under the key.
   Pin every sentence after the first to the value column. */
.detail-val + .detail-val { grid-column: 2; }

/* [FIX 2] The key-terms table applied border-bottom to all 11 rows,
   including the last, so it doubled up with the container border. */
.term-row:last-child { border-bottom: 0; }

/* ============================================================
   Responsive — mirrors the original breakpoints
   (720px "For you" grid, 640px table columns).
   ============================================================ */
@media (max-width: 720px)  { .you-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .detail-row, .detail-row.age, .term-row { grid-template-columns: minmax(0, 1fr); }
  .detail-val + .detail-val { grid-column: 1; }
  .layout { padding: 24px 16px 60px; }
}