/* The plans on /build-a-website (partials/plans.html): one grid, the feature names at the left, then a column per plan, every column a
   subgrid of the same rows, so a row of the four plans lines up while each plan stays one block of markup. The heads (name, price, who,
   pick) scroll with the page. The recommended column is tinted from head to foot, the picked one ruled in ink with its button filled,
   every feature on one line at one row height, a group heading a bold word over an ink rule. Submit pressed with no plan picked
   shows the line under the heading and hops the four picks (js/plans.js).
   Phone: the feature column goes, and each plan is a block of its own, a list of label and mark under its head with only the rows
   where the plans differ, then one block of the rows every plan shares. Every class is plans-. */

@layer site {
  .plans { margin-top: 72px; padding-block: 0; border: 0; min-width: 0; }
  .plans-legend { display: block; width: 100%; padding: 0; }

  .plans-grid { display: grid; grid-template-columns: max-content repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(var(--plans-rows), auto); font-size: 14px; line-height: 20px; color: var(--ink); }
  .plans-feats, .plans-col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; min-width: 0; }

  /* the heads: one ink rule under them */
  .plans-corner, .plans-head { background: var(--white); box-shadow: 0 1px 0 var(--ink); }
  .plans-corner { display: flex; align-items: center; padding: 20px 16px 16px 12px; }
  .plans-corner__h { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
  .plans-head { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 20px 14px 16px; cursor: pointer; }
  .plans-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
  .plans-name__t { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
  .plans-tag { padding: 0 7px; border-radius: var(--r); background: var(--accent); color: var(--on-accent);
    font-size: 13px; line-height: 22px; font-weight: 600; white-space: nowrap; }
  .plans-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .plans-price__n { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.04em; }
  .plans-price__per { font-size: 13px; line-height: 18px; font-weight: 500; }
  .plans-who { font-size: 13px; line-height: 18px; }

  /* the pick: the label's button, the radio kept focusable under it */
  .plans-pick { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 8px;
    padding: 0 8px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--white); font-size: 14px; font-weight: 600;
    text-align: center; transition: background-color .15s ease, color .15s ease; }
  .plans-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .plans-pick__on { display: none; }
  .plans-head:hover .plans-pick { background: var(--sand); }
  .plans-col:has(input:checked) .plans-pick { background: var(--ink); color: var(--white); }
  .plans-col:has(input:checked) .plans-pick__off { display: none; }
  .plans-col:has(input:checked) .plans-pick__on { display: inline; }
  .plans-col:has(input:checked) .plans-pick__on::before { content: ""; display: inline-block; width: 10px; height: 5px; margin: 0 8px 3px 0;
    border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
  .plans-col:has(input:focus-visible) .plans-pick { outline: 2px solid var(--focus); outline-offset: 2px; }
  .plans-grid:has(input[aria-invalid="true"]) .plans-col:not(:has(input:checked)) .plans-pick { border-color: var(--red); color: var(--red);
    box-shadow: inset 0 0 0 1px var(--red); }

  /* Submit pressed with no plan (js/plans.js): the line under the heading, and the four picks hopping in turn, left to right, once.
     Once a plan is picked the line keeps its room and goes unseen, so nothing under the pointer moves. */
  .plans { scroll-margin-top: 24px; }
  .plans-ask { display: flex; justify-content: center; margin: -4px 0 20px; }
  .plans-ask[hidden] { display: none; }
  .plans-ask__t { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 16px; border-radius: 999px;
    background: var(--red); color: var(--white); font-size: 14px; line-height: 20px; font-weight: 600; animation: plans-ask-in .3s ease both; }
  .plans-ask__t::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: rotate(45deg); animation: plans-ask-bob 1s ease-in-out infinite; }
  .plans.is-picked .plans-ask { visibility: hidden; }
  .plans.is-asking .plans-pick { animation: plans-hop .8s cubic-bezier(.3, .7, .4, 1) calc(var(--plans-i, 0) * 110ms) both; }
  @keyframes plans-ask-in { from { opacity: 0; transform: translateY(-6px); } }
  @keyframes plans-ask-bob { 50% { transform: translateY(3px) rotate(45deg); } }
  @keyframes plans-hop { 0%, 55%, 100% { transform: none; } 20% { transform: translateY(-7px); } 38% { transform: translateY(0); } 46% { transform: translateY(-2px); } }

  /* the columns: the recommended one tinted head to foot, the picked one ruled in ink */
  .plans-col { position: relative; }
  .plans-col--rec, .plans-col--rec .plans-head { background: var(--accent-bg); }
  .plans-col:has(input:checked) { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 1; }
  .plans-col:has(input:checked) .plans-head { box-shadow: 0 1px 0 var(--ink), inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 2px 0 var(--ink); }

  /* the group headings: the word in sentence case over an ink rule that runs across every column, air above it, no fill
     */
  .plans-g { display: flex; align-items: flex-end; margin: 28px 0 0; padding: 0 16px 8px 12px; border-top: 0; border-bottom: 1px solid var(--ink);
    font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
  .plans-col .plans-g { padding-inline: 0; font-size: 0; line-height: 0; color: transparent; }

  /* the rows: the label at the left on one line, never wrapped, each plan's mark centred in its column, every row the same height */
  .plans { --plans-grey: #f1f0ee; --plans-line: #dedbd7; }
  :root[data-parts-theme="dark"] .plans { --plans-grey: #26231f; --plans-line: #3d3833; }
  .plans-lab, .plans-cell { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--plans-line); white-space: nowrap; }
  .plans-g + .plans-lab, .plans-g + .plans-cell { border-top-color: transparent; }
  .plans-feats > :last-child, .plans-col > :last-child { border-bottom: 1px solid var(--plans-line); }
  .plans-lab { padding: 0 24px 0 12px; }
  .plans-cell { justify-content: center; padding: 8px 12px; text-align: center; }
  .plans-cell__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plans-cell__mark { display: flex; align-items: center; justify-content: center; }
  .plans-yes { display: block; color: var(--accent); }
  .plans-no { display: block; color: var(--red); }
  .plans-txt { font-size: 13px; line-height: 18px; font-weight: 600; }
  .plans-every { display: none; }

  @media (max-width: 1100px) {
    .plans-head { padding-inline: 10px; }
    .plans-cell { white-space: normal; }  /* a text cell may wrap on a narrow laptop, the labels never do */
    .plans-price__n { font-size: 28px; line-height: 34px; }
  }

  /* the phone: each plan its own block, its head and then its rows as label and mark, the group headings kept */
  @media (max-width: 820px) {
    .plans { margin-top: 56px; }
    .plans-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 20px; }
    .plans-feats { display: none; }
    .plans-col { grid-row: auto; display: block; border: 1px solid var(--dove); border-radius: var(--r); }
    .plans-col:has(input:checked) { border-color: var(--ink); }
    .plans-head, .plans-col:has(input:checked) .plans-head { position: static; box-shadow: none; border-bottom: 1px solid var(--ink); border-radius: var(--r) var(--r) 0 0;
      padding: 16px; gap: 4px; }
    .plans-who { font-size: 14px; line-height: 20px; }
    .plans-pick { margin-top: 10px; }
    .plans-col .plans-same { display: none; }
    .plans-col .plans-g, .plans-every .plans-g { margin-top: 12px; padding: 8px 16px 6px; font-size: 14px; line-height: 20px; color: var(--ink); }
    .plans-lab, .plans-cell { white-space: normal; }
    .plans-col > :last-child, .plans-every > :last-child { border-bottom: 0; }
    .plans-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; justify-content: stretch; min-height: 44px;
      padding: 10px 16px; text-align: left; }
    .plans-cell__lab { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
    .plans-cell__mark { justify-content: flex-end; min-width: 20px; max-width: 13ch; text-align: right; }
    .plans-every { display: block; margin-top: 20px; padding-bottom: 6px; border: 1px solid var(--dove); border-radius: var(--r); }
    .plans-every__h { padding: 16px; border-bottom: 1px solid var(--ink); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .plans-pick { transition: none; }
  }
}