/* /secret-santa-theme-ideas only. Loaded after styles/site.css; use its tokens (var(--ink), var(--tag), ...). Empty files are not linked. See docs/WRITERS.md. */

/* The theme table. Wide screens: a table, a little wider than the text
   column. Phones: each theme is a short card, with "Works at" and "Best for"
   side by side, so nothing scrolls sideways. */
.th-table tbody th { font-family: var(--serif); font-size: 1.02rem; }
.th-table th, .th-table td { overflow-wrap: normal; word-break: normal; }
.th-table td[data-label="Works at"] { white-space: nowrap; }
@media (min-width: 900px) {
  .th-answer .table-wrap { margin-left: calc((100% - min(52rem, 100vw - 32px)) / 2); margin-right: calc((100% - min(52rem, 100vw - 32px)) / 2); }
}
@media (max-width: 639px) {
  .th-answer .table-wrap { overflow: visible; }
  .th-table, .th-table caption, .th-table tbody { display: block; width: auto; }
  .page-body .th-table { background: none; border: 0; }
  .th-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .th-table tbody tr {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--tag); border: 1px solid var(--tag-edge); border-radius: 6px;
    box-shadow: 0 1px 0 var(--edge); margin: 0 0 10px; padding: 2px 0 8px;
  }
  .th-table tbody th, .th-table td[data-label="What people buy"] { grid-column: 1 / -1; }
  .page-body .th-table tbody th { border-bottom: 1px solid var(--rule); font-size: 1.12rem; padding: 9px 14px 7px; }
  .page-body .th-table td { border-bottom: 0; padding: 4px 14px 0; }
  .page-body .th-table td[data-label="What people buy"] { padding-top: 8px; padding-bottom: 4px; }
  .page-body .th-table td[data-label="Works at"], .page-body .th-table td[data-label="Best for"] { font-size: 0.94rem; white-space: normal; }
  .th-table td[data-label="Works at"]::before, .th-table td[data-label="Best for"]::before {
    content: attr(data-label); display: block;
    color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; font-variant-caps: all-small-caps; font-weight: 600;
  }
}

/* The picker: a card above the table. */
.th-picker {
  margin: 20px 0 6px;
  background: var(--tag); color: var(--ink);
  border: 1px solid var(--tag-edge); border-radius: 6px;
  box-shadow: 0 1px 0 var(--edge), 0 14px 22px -18px var(--shadow);
  padding: 16px;
}
@media (min-width: 560px) { .th-picker { padding: 20px 24px; } }
.th-picker-t { font: 600 1.3rem/1.2 var(--serif); margin: 0 0 0.6rem; }
.th-grid { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .th-grid { grid-template-columns: 1fr 1fr; } .th-grid .field:last-child { grid-column: 1 / -1; } }
@media (min-width: 720px) { .th-grid { grid-template-columns: 1fr 1fr 1.4fr; } .th-grid .field:last-child { grid-column: auto; } }
.th-picker .actions { margin-top: 0.25rem; }
.th-result { border-top: 1px dashed var(--rule); margin-top: 1rem; padding-top: 0.9rem; }
.th-name { font: 600 1.5rem/1.2 var(--serif); color: var(--cran); margin: 0 0 0.25rem; }
.th-buy { margin: 0 0 0.75rem; }
.th-use { margin: 0 0 0.5rem; }

.th-nojs { display: none; }
@media (scripting: none) {
  .th-picker { display: none; }
  .th-nojs { display: block; margin-top: 1rem; }
}

.th-week tbody th { white-space: nowrap; }