/* Answer-first gate: the Years and Occasion controls push the day block past
   400px on a phone unless trimmed here (dates.css is shared and has no
   payload headroom). The sunset note sits below #t-answer, not hidden. */
@media (max-width: 560px) {
  .controls .dc-field { flex-basis: 9.2rem; }
  .controls .dc-field:has(#t-count) { flex: 0 1 6.5rem; }
  main.wrap { padding-top: .4rem; }
  .eyebrow, h1 { margin-bottom: .05rem; }
  .tool-panel { padding: .4rem; margin-bottom: .25rem; }
  .controls { margin: .15rem 0; gap: .2rem .45rem; }
  .dc-answer { padding: .4rem .55rem .35rem; }
  .dc-answer .dc-big { font-size: clamp(1.1rem, 5.6vw, 1.4rem); }
  .dc-answer .dc-sub { font-size: .72rem; margin-top: .25rem; }
}
#hb-who { display: none; }
#hb-list { padding-left: 1.1rem; }
#hb-list .btn { margin-left: .3rem; padding: .1rem .5rem; }
/* The printable card: name, answer and the years table, nothing else. */
@media print {
  .site-header, .site-footer, .lede, .prose, .related, #t-sunset-note, #dd-grid-wrap, #dd-folded, #hb-fam, #dd-link-out, #dd-action-status { display: none !important; }
  .tool-panel { border: 2px solid #000; border-radius: 8px; padding: .5rem .6rem; }
  #hb-who { display: block; font-weight: 700; margin: 0 0 .4rem; }
  /* One line a row: a 34-row default fits one page. */
  #t-work table { font-size: 8pt; }
  #t-work th, #t-work td { padding: 0 4px; }
}