/* ROUND 135, ITEM 31: THE COMMENT BOX'S GREY CONTAINER, ON THE CONTENT THAT
 * IS MISSING IT.
 *
 * WHAT IT IS, AND IT IS NOT THE DESK'S. Round 134 proved the grey does not
 * come from the trimmed stylesheet -- div#tomcomments-NNNN is identical
 * trimmed-vs-full -- and concluded it was "a separate cause". This is that
 * cause, and it turns out to be the site's own CSS after all, one line:
 *
 *     recipe-v3.css:710
 *     .embed{background:var(--card);border-radius:var(--r-lg);
 *            margin-top:30px;padding:48px var(--pad-r) 48px var(--pad-l)}
 *
 * The selector is BARE `.embed` -- it is not scoped to anything -- but the
 * STYLESHEET is loaded by the recipe page and by nothing else. So every
 * recipe gets the grey container and no column, page or listing does. The
 * Desk embed inside it is identical everywhere; what differs is whether the
 * box it sits in was ever painted.
 *
 * MEASURED at 1440 on the unchanged site, on `.embed#comments`:
 *
 *     /recipes/easy-salsa/    background rgb(247,247,247)  radius 40px
 *                             padding 48px 64px 48px 56px
 *     a column                background rgba(0,0,0,0)     radius 0  padding 0
 *     a page                  background rgba(0,0,0,0)     radius 0  padding 0
 *     /recipes/ (the hub)     background rgba(0,0,0,0)     radius 0  padding 0
 *
 * SCOPE, over all 233 published URLs: 231 carry a comment box. 172 have the
 * grey (every published recipe) and 59 do not -- 51 pages, 7 columns and the
 * recipes hub. That is exactly "most have it, some do not".
 *
 * THE NUMBERS ARE WRITTEN OUT RATHER THAN TAKEN FROM THE TOKENS, and that is
 * forced rather than chosen: --card, --r-lg, --pad-l and --pad-r are declared
 * in recipe-v3.css's own :root, and a column never loads that file, so
 * var(--card) on a column resolves to nothing. They are the same values
 * recipe-v3.css resolves to at each width, including both of its breakpoints,
 * so the restored container matches a recipe's to the pixel at every width
 * rather than only at 1440.
 *
 * SCOPED AWAY FROM `.ttc-v2` so it cannot touch a recipe: a recipe already
 * has this from its own stylesheet, and two rules painting one box is two
 * things to keep in step.
 *
 * ITS OWN SWITCH: `site_r135_commentgrey`, OFF by default -- the sheet is not
 * linked at all until it is on.
 * ROLLBACK: site_r135_commentgrey off.
 */

:not(.ttc-v2) > .embed#comments,
.embed#comments:not(.ttc-v2 *) {
  background: #f7f7f7;                 /* --card */
  border-radius: 40px;                 /* --r-lg */
  margin-top: 30px;
  padding: 48px 64px 48px 56px;        /* 48 / --pad-r / 48 / --pad-l */
}

/* recipe-v3.css's own first breakpoint: the side padding becomes a
 * percentage so the box keeps its proportion as the window narrows. */
@media (min-width: 1024px) and (max-width: 1244px) {
  :not(.ttc-v2) > .embed#comments,
  .embed#comments:not(.ttc-v2 *) {
    padding-left: 4.5%;
    padding-right: 5.2%;
  }
}

/* and its second: a phone gets 22px sides and a shallower 26px top and
 * bottom, which is what a recipe's comment box does at this width. */
@media (max-width: 1023px) {
  :not(.ttc-v2) > .embed#comments,
  .embed#comments:not(.ttc-v2 *) {
    padding: 26px 22px 26px 22px;
  }
}