/* packing.css — billubnb.in/packing-list (1.29.0). Phone first, tokens only. Big tap targets (the whole label row ticks the box), the ⓘ notes are
   native <details> (tap / Enter / Space), and a print layout that keeps just the list. */
@layer sections {
  .pk-hero { max-width: 760px; }
  .pk-hero h1 { font-size: var(--step-4); line-height: 1.04; margin: var(--space-2) 0 var(--space-3); }
  .pk { max-width: 760px; }
  .pk-sec { padding-top: var(--space-5); }

  .pk-bar { position: sticky; top: calc(var(--header-h) + 6px); z-index: 3; display: grid; gap: .4rem; margin: 0 0 var(--space-4); padding: .7rem 1rem .8rem;
    border-radius: var(--r-md); background: color-mix(in srgb, var(--paper-3) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .pk-count { margin: 0; font-weight: 800; color: var(--ink); }
  .pk-meter { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
  .pk-meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--sun); transition: width var(--dur-2) var(--ease); }

  .pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .pk-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .85rem; padding: 1rem 1rem 1rem .9rem;
    border-radius: var(--r-lg); background: var(--paper-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); transition: background-color var(--dur-2); }
  .pk-item.is-done { background: var(--sage-tint); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
  .pk-box { appearance: none; -webkit-appearance: none; flex: none; width: 30px; height: 30px; margin: .1rem 0 0; border: 2.5px solid var(--ink); border-radius: 9px;
    background: var(--paper); display: grid; place-items: center; cursor: pointer; }
  .pk-box::after { content: ""; width: 9px; height: 16px; margin-top: -3px; border: solid var(--paper); border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) scale(0);
    transition: transform var(--dur-1) var(--ease); }
  .pk-box:checked { background: var(--ok); border-color: var(--ok); }
  .pk-box:checked::after { transform: rotate(45deg) scale(1); }
  .pk-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .pk-body { min-width: 0; display: grid; gap: .35rem; }
  .pk-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; cursor: pointer; padding: .15rem 0; }
  .pk-title::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4.2rem; }        /* the top of the card ticks the box too (≥ 44 px) */
  .pk-item.is-done .pk-title { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--ok) 70%, transparent); }
  .pk-text { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.5; max-width: none; }

  .pk-word { position: relative; z-index: 1; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
  .pk-word summary { list-style: none; display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .3rem .7rem; font-weight: 750; font-size: .95rem; color: var(--ink); cursor: pointer; }
  .pk-word summary::-webkit-details-marker { display: none; }
  .pk-word summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 12px; }
  .pk-word[open] { background: var(--sun-soft); border-color: transparent; }
  .pk-word p { margin: 0; padding: 0 .8rem .75rem 2.45rem; color: var(--ink); font-size: .96rem; line-height: 1.5; max-width: none; }
  .pk-i { flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sage-deep); color: var(--on-deep);
    font: 800 .8rem/1 var(--font-display); font-style: italic; }
  .pk-i--inline { vertical-align: .1em; width: 1.15rem; height: 1.15rem; font-size: .72rem; }

  .pk-done { display: flex; align-items: center; gap: .6rem; margin: var(--space-4) 0 0; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--sage-tint); font-weight: 800; }
  .pk-done[hidden] { display: none; }
  .pk-done .i { color: var(--err); flex: none; }
  .pk-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--space-5) 0 var(--space-3); }
  .pk-actions .btn[hidden] { display: none; }
  .pk-fine { color: var(--ink-3); font-size: var(--step--1); max-width: 60ch; }
  .pk-next { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: var(--space-5); }
  @media (max-width: 599px) {
    .pk-actions .btn { flex: 1 1 100%; }
    .pk-item { padding: .9rem .85rem .9rem .8rem; }
  }
  @media (prefers-reduced-motion: reduce) { .pk-box::after, .pk-meter i { transition: none; } }

  /* paper: just the list (the notes are opened by packing.js before printing) */
  @media print {
    .site-header, .site-footer, .action-bar, .consent, .crumbs, .hero__beam, .pk-actions, .pk-next, .pk-bar, .toast-stack, .bq-pop { display: none !important; }
    .skip-link { display: none !important; }
    .page-hero { padding: 0 0 6mm; background: none; overflow: visible; }
    .pk-sec.sheet { margin-top: 0; padding-top: 0; border-radius: 0; }
    .pk-item { box-shadow: none; break-inside: avoid; background: #fff; }
    .pk-word, .pk-word[open] { background: #fff; border: 0; }
    .pk-word summary { min-height: 0; padding: 0; } .pk-word p { padding: .2rem 0 .3rem 1.85rem; }
    .pk-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }
}