/* Shared charts for the survey page and its PDF report. */
  /* ---- answer-tone colors ----
     One consistent language on every bar of this page: blue is yes,
     pale blue is a qualified yes (or "not yet"), gray is unsure,
     and brick red is no. */
  :root{
    --ans-yes:var(--accent);
    --ans-yes-soft:color-mix(in srgb, var(--accent) 45%, #fff);
    --ans-notyet:color-mix(in srgb, var(--accent) 18%, #fff);
    --ans-neutral:#DDDDD8;
    --ans-no:var(--viz-3);
  }

  /* ---- the recommendation wall: one book spine per family ---- */
  .rec-wall{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));
    gap:7px 3px;margin-top:26px;
  }
  .rec-cell{
    position:relative;height:46px;display:flex;align-items:flex-end;
    border-bottom:4px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  }
  .rec-cell::after{
    content:"";position:absolute;z-index:0;left:-2px;right:-2px;bottom:-7px;height:3px;
    border-radius:0 0 3px 3px;background:color-mix(in srgb,var(--accent) 8%,var(--line));
  }
  .rec-spine{
    position:relative;z-index:1;width:100%;border-radius:3px 3px 1px 1px;
    background-image:
      linear-gradient(90deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.28) 3px 5px,rgba(255,255,255,0) 5px),
      linear-gradient(270deg,rgba(0,0,0,.10) 0 2px,rgba(0,0,0,0) 2px),
      var(--deco,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));
    box-shadow:0 1px 2px rgba(0,0,0,.08);
    transform-origin:bottom center;opacity:0;translate:0 6px;
  }
  /* These are the same restrained jacket treatments used by the books
     on the impact page. */
  .rec-spine.b-bands{
    --deco:linear-gradient(180deg,transparent 10px,rgba(255,255,255,.68) 10px 12px,transparent 12px 17px,rgba(255,255,255,.68) 17px 19px,transparent 19px);
  }
  .rec-spine.b-top{
    --deco:linear-gradient(180deg,rgba(0,0,0,.13) 0 10px,rgba(255,255,255,.58) 10px 12px,transparent 12px);
  }
  .rec-spine.b-label{
    --deco:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.62) 38% 57%,transparent 57%);
  }
  .rec-spine.lean{transform:rotate(-6deg);margin-left:3px}
  .rec-spine:hover{filter:brightness(1.08)}
  .rec-spine.idk{
    border:1.5px dashed color-mix(in srgb,var(--text-soft) 55%,var(--line));
    background:var(--bg-alt);box-shadow:none;
  }
  .rec-spine.idk::after{
    content:"";position:absolute;left:2px;right:2px;top:35%;
    border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  }
  .rec-wall.revealed .rec-spine{
    opacity:1;translate:0 0;
    transition:opacity .3s ease, translate .3s ease;
  }
  .rec-tally{
    display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;
    font-size:13.5px;color:var(--text-soft);
  }
  .rec-tally b{color:var(--text);font-size:15px}

  /* ---- question cards with stacked answer bars ---- */
  .q-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .q-text{font-weight:700;font-size:16.5px;line-height:1.4}
  /* optional-question marker, inline after the question; the footer
     explains it */
  .opt-mark{color:var(--accent);font-weight:700}
  span.opt-mark{font-size:17px;margin-left:3px}
  .q-row{display:flex;align-items:flex-start;gap:22px;margin-top:16px}
  .q-pct{flex:none;line-height:1.05}
  .q-pct .big{font-weight:700;font-size:42px;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
  .q-pct .under{display:block;color:var(--text-soft);font-size:12px;max-width:15ch;margin-top:6px;line-height:1.4}
  .q-body{flex:1;min-width:0}
  .ans-bar{display:flex;gap:2px;height:34px}
  .ans-seg{min-width:5px;border-radius:4px}
  .ans-seg:hover{filter:brightness(1.06)}
  .ans-keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
  .akey{display:inline-flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--text-soft);line-height:1.35}
  .akey i{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
  .akey b{color:var(--text)}

  /* ---- weekly reading & children enrolled per household ---- */
  .distribution-card{margin-bottom:22px}
  #reading-days-card{margin-top:22px;margin-bottom:0}
  .distribution-layout{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,2fr);gap:36px;align-items:center;margin-top:24px}
  .distribution-stat .big{display:block;color:var(--accent);font-size:48px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
  .distribution-stat .under{display:block;max-width:23ch;margin-top:8px;color:var(--text-soft);font-size:14px;line-height:1.4}
  .distribution-unit,.distribution-axis{color:var(--text-soft);font-size:12px}
  .distribution-unit{margin-bottom:26px}
  .distribution-axis{text-align:center;margin-top:12px}
  .week-chart{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
  .week-track{height:150px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
  .week-bar{position:relative;width:100%;max-width:52px;border-radius:4px 4px 0 0;background:var(--ans-yes-soft)}
  .week-count{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
  .week-day{display:block;margin-top:8px;text-align:center;font-size:13px;color:var(--text-soft)}
  .week-daily .week-bar{background:var(--accent)}
  .week-daily .week-day{color:var(--accent);font-weight:700}
  .household-row{display:grid;grid-template-columns:84px minmax(0,1fr) 32px;gap:12px;align-items:center;padding:10px 0;font-size:13px}
  .household-track{height:13px;background:var(--bg-alt);border-radius:4px}
  .household-bar{display:block;height:100%;background:var(--accent);border-radius:4px}
  .household-count{text-align:right;font-variant-numeric:tabular-nums}
  #enrolled-children-card .distribution-unit{margin-bottom:4px;text-align:right}

  /* ---- age pictogram & representativeness bars ---- */
  .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
  /* the age card runs shorter than the zip card: center its chart in
     the leftover height and keep the footnote pinned to the bottom */
  .who-grid .card{display:flex;flex-direction:column}
  .who-grid .card svg,.who-grid .card #rep-rows{margin-top:auto;margin-bottom:auto}
  .rep-legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px}
  .rep-row{
    display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);
    gap:16px;align-items:center;padding:8px 0;
  }
  .rep-zip b{font-size:14.5px;letter-spacing:.02em}
  .rep-zip span{display:block;color:var(--text-soft);font-size:12px;line-height:1.3}
  .rep-bars{display:flex;flex-direction:column;gap:3px}
  .rep-bar{display:flex;align-items:center;gap:8px;min-width:0}
  .rep-bar i{
    display:block;height:13px;border-radius:0 4px 4px 0;flex:none;
    min-width:3px;
  }
  .rep-bar.survey i{background:var(--accent)}
  .rep-bar.readers i{background:var(--accent-2)}
  .rep-bar em{font-style:normal;font-size:12px;color:var(--text-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
  /* ---- "how they found us" bars ---- */
  .heard-row{
    display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);
    gap:16px;align-items:center;padding:7px 0;
    border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  }
  .heard-row:last-child{border-bottom:0}
  .heard-label{font-size:13.5px;line-height:1.35;text-align:right;color:var(--text)}
  .heard-bar{display:flex;align-items:center;gap:9px;min-width:0}
  .heard-bar i{display:block;height:15px;background:var(--accent);border-radius:0 4px 4px 0;min-width:3px}
  .heard-bar b{font-size:13px;font-variant-numeric:tabular-nums}
  .heard-bar span{font-size:12px;color:var(--text-soft);white-space:nowrap}