/* Phone layout for the Mealime app, which was built for desktop only.
 *
 * Mealime blocked small screens and pointed at its phone apps, so its layout
 * has fixed-height panes side by side, desktop spacing, and a different class
 * for a ticked grocery item than for an unticked one. This file restyles the
 * home screen, the meal plan builder, a recipe and settings for narrow
 * screens; nothing here applies above 640px.
 *
 * The app's build is frozen, so its generated class names (css-xxxxxxx) are
 * stable. Each one is named in a comment; to find an element's class, inspect
 * the page in a desktop browser.
 *
 * Which element scrolls differs by screen: the home screen and settings
 * scroll as a page, the builder and a recipe scroll inside their own panel,
 * so the shell rules below are scoped with :has() to the screen they belong
 * to.
 *
 * The design it follows:
 *
 *   Left edge   everything lines up 2rem (page 1rem + card 1rem) from the
 *               screen edge: pane titles, section headings, tick circles,
 *               meal photos, recipe cards, settings choices
 *   Spacing     multiples of 4px: 4, 8, 12, 16, 24
 *   Type        pane title 20px/700, section heading 12px/700 uppercase,
 *               item name 16px/500, amount 15px/400 in tabular figures
 *   Colour      from the app's palette: text #221D19, secondary #6C625A,
 *               ticked off #9C9189, cards white on the warm background
 *   Rows        48px tall so they are easy to hit, and a ticked row keeps
 *               exactly the same geometry as an unticked one
 */

@media (max-width: 640px) {
  /* ---- Shell: the page scrolls, not the panes --------------------------- */

  /* Desktop screens are a window-high shell with panes that scroll inside it.
   * On a phone a pane is the whole screen, so the page itself scrolls: the
   * home screen (css-ke8f4h) and settings (css-17irvwq). The builder keeps its
   * own scrolling area, because its carousels need a fixed height to size
   * their slides against. */
  html:has(.css-ke8f4h),
  body:has(.css-ke8f4h),
  html:has(.css-17irvwq),
  body:has(.css-17irvwq) {
    height: auto !important;
    overflow: visible !important;
  }

  /* css-hnszgp: the shell a full-screen panel renders in. Its single column is
   * sized to its content, which on a narrow phone would be wider than the
   * screen. */
  .css-hnszgp:has(.css-17irvwq) {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* css-ibb9d7: the app shell, one screen high. Its single column is sized to
   * its content, which on a narrow phone would be wider than the screen. */
  .css-ibb9d7:has(.css-ke8f4h) {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .css-ibb9d7:has(.css-ke8f4h) > div {
    height: auto !important;
  }

  /* The screen wrapper is positioned over the shell; in the flow it can grow. */
  .css-ibb9d7:has(.css-ke8f4h) > div > div {
    position: static !important;
    height: auto !important;
  }

  /* css-1u4bsc7: the page margin, on the home screen and on a recipe */
  .css-1u4bsc7:has(.css-ke8f4h) {
    height: auto !important;
    padding: 0 1rem 1.5rem !important;
  }

  /* ---- The two panes become two cards ----------------------------------- */

  /* css-ke8f4h: meals | groceries, side by side on desktop */
  .css-ke8f4h {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* css-1n1ctis: one pane. The app sets their colours and shadow inline. */
  .css-1n1ctis {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 1rem !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(34, 29, 25, 0.04), 0 8px 24px -16px rgba(34, 29, 25, 0.25) !important;
  }

  /* css-1gdmtfi: a pane's scrolling area */
  .css-1gdmtfi {
    overflow: visible !important;
  }

  /* ---- Header: logo, then the two buttons ------------------------------- */

  /* css-nmwi82: the top bar. Side by side, the meal plan button covers the
   * logo, so each element gets its own line. */
  .css-nmwi82 {
    flex-direction: column !important;
    gap: 0 !important;
    margin: 1.25rem 1rem 1.5rem !important;
  }

  /* Spacing says what belongs together: the logo stands apart, the two
   * buttons are a pair, and the cards start further down again.
   * 20px logo → button, 8px between buttons, 24px button → cards. */
  .css-nmwi82 > svg {
    margin-bottom: 1.25rem;
  }

  .css-nmwi82 > svg {
    height: 40px !important;
    width: auto !important;
    flex: none;
  }


  .css-nmwi82 > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  /* css-14um6bf: "Start a New Meal Plan" */
  .css-14um6bf {
    min-width: 0;
    padding: 0.625rem 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  /* css-2t24am: the settings button, a bare gear icon on desktop */
  .css-2t24am {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    height: auto !important;
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px;
    background-color: #F1ECE7 !important;
    color: #453D37;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.25;
  }

  .css-2t24am::after {
    content: 'Settings';
  }

  /* ---- Pane titles: "Meals", "Groceries" -------------------------------- */

  /* css-1dmxgs9: the title row, with the print button on the grocery pane */
  .css-1dmxgs9 {
    height: auto !important;
    margin-top: 0 !important;
    padding: 1rem 1rem 0.5rem !important;
  }

  .css-1dmxgs9 h2 {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
  }

  /* ---- Meals ------------------------------------------------------------ */

  /* css-qv8dvp: the meal list */
  .css-qv8dvp {
    padding: 0.25rem 1rem 1rem !important;
  }

  /* css-1hv8041: one meal, photo then title */
  /* Photo and title start at the same height, so the tick in the photo's
   * corner stays put however many lines the title runs to. */
  .css-1hv8041 {
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    align-items: start;
  }

  .css-1hv8041:last-child {
    margin-bottom: 0 !important;
  }

  .css-1hv8041 img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 0.75rem !important;
  }

  /* css-vhqj4n: the "cooked" tick. The app floats it over the middle of the
   * photo's right edge, half off the picture; it belongs in the corner. */
  .css-vhqj4n {
    position: static !important;
    grid-area: Image;
    align-self: start;
    justify-self: end;
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin: 0.25rem !important;
  }

  .css-1hv8041 > button {
    padding-top: 0.125rem;
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  /* ---- Groceries --------------------------------------------------------- */

  /* css-1gdmtfi > div: the grocery list */
  .css-1gdmtfi > div {
    padding: 0.25rem 1rem 1.25rem !important;
  }

  /* css-1tvrwcc: a section ("PRODUCE"). Desktop leaves 3rem between them. */
  .css-1tvrwcc + .css-1tvrwcc {
    margin-top: 1.5rem !important;
  }

  /* css-rvjid7: a section heading, indented 2rem of its own on desktop */
  .css-rvjid7 {
    margin: 0 0 0.25rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    color: #6C625A !important;
  }

  /* css-lh2d29: an item; css-sqd8ew: the same item once ticked off. The app
   * gives the ticked one different padding, which moved its amount sideways,
   * so both get the same geometry here. */
  .css-lh2d29,
  .css-sqd8ew {
    min-height: 3rem !important;
    padding: 0.5rem 0 !important;
    gap: 0.75rem;
  }

  /* css-lnaskn: the label holding the tick circle. Its desktop indent would
   * push the circle in from the page's left edge; the padding moves to the
   * right instead, where it still widens the tap target. The circle and the
   * 2.5rem column it sits in are the same as a settings choice's tick. */
  /* The circle is an svg stretched between this label's edges, so the label
   * keeps the size that draws it round and is pulled closer to the name
   * instead, into the same 2.5rem column as a settings choice's tick. */
  .css-lnaskn {
    position: relative;
    margin-right: -1rem !important;
    padding: 0 0.5rem 0 0 !important;
  }

  /* The label is 44x24 around a 24px circle, so ticking an item off was a
   * small target. It keeps its size and answers to a 48px square. */
  .css-lnaskn::after {
    content: '';
    position: absolute;
    top: -0.75rem;
    right: 0;
    bottom: -0.75rem;
    left: -0.5rem;
  }

  /* The app gives each amount a left margin worked out from its own text,
   * so amounts jumped whenever the list changed. Pinning the amount to the
   * right edge keeps every row aligned, ticked or not. */
  .css-lh2d29 > div,
  .css-sqd8ew > div {
    margin: 0 !important;
    font-size: 1rem;
    line-height: 1.3;
  }

  /* The name gives way first, so a long one wraps instead of pushing the
   * amount off the screen. */
  .css-lh2d29 > div:not(:last-child),
  .css-sqd8ew > div:not(:last-child) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* The amount keeps the right edge. It gives way after the name does: held
   * to one line it made "Italian (flat-leaf) parsley" break over four, and
   * free to wrap it broke itself up while the name still had room. */
  .css-lh2d29 > div:last-child,
  .css-sqd8ew > div:last-child {
    margin-left: auto !important;
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 0.75rem;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* The line under an item starts where its name does. */
  .css-lh2d29::after,
  .css-sqd8ew::after {
    left: 2.5rem !important;
  }

  /* ---- Meal plan builder ------------------------------------------------ */

  /* css-379vqm: the builder's two panes, recipes | your plan. On a phone the
   * recipes take the screen and the plan becomes a bar along the bottom. */
  .css-379vqm {
    display: block !important;
  }

  /* css-19g7cpb: a builder pane. Laid out as a block it no longer inherits the
   * builder's height, which left its scrolling area as tall as its contents:
   * the recipes were cut off at the bottom of the screen and nothing scrolled. */
  .css-379vqm > .css-19g7cpb:first-child {
    width: 100% !important;
    height: 100% !important;
    padding: 0 2rem !important;
  }

  /* css-np80uw: a pane's scrolling area. The recipes clear the bottom bar. */
  .css-379vqm > .css-19g7cpb:first-child .css-np80uw {
    height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: 8.5rem !important;
  }

  .css-379vqm > .css-19g7cpb:last-child {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto !important;
    max-height: 45vh;
    padding: 0.75rem 2rem calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
    background-color: #fff !important;
    border-top: 1px solid #F1ECE7;
    box-shadow: 0 -8px 24px -16px rgba(34, 29, 25, 0.4);
    z-index: 5;
  }

  .css-379vqm > .css-19g7cpb:last-child h2 {
    margin: 0 0 0.5rem !important;
    font-size: 1rem !important;
    line-height: 1.2;
  }

  /* css-1jqhg96: "Build a meal plan" and its line of explanation. The Close
   * button floats over the top left, 1rem down and 2.5rem tall, so a title
   * clears it by the same 1.25rem on every panel. */
  .css-1jqhg96 {
    margin: 4.75rem 0 1rem !important;
  }

  .css-1jqhg96 {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
  }

  /* The row headings ("Your Favorites"), indented 3rem on desktop */
  .css-379vqm h2 {
    margin: 0 0 0.5rem !important;
    font-size: 1.125rem !important;
    line-height: 1.25 !important;
  }

  /* glide works out how wide a card is from this element, so it keeps the
   * full width of the screen and the cards run off the right edge. */
  .css-379vqm .glide {
    width: calc(100% + 2rem) !important;
    margin-top: 0.75rem !important;
    margin-right: -2rem !important;
  }

  /* glide leaves 48px before the first card, so that the one before it peeks
   * in. Pull the track back by that much to put the cards on the same left
   * edge as the headings. */
  .css-379vqm .glide__track {
    width: calc(100% + 3rem);
    margin-left: -3rem;
  }

  .css-379vqm .glide__slide img {
    border-radius: 0.75rem;
  }

  /* css-1z0wopq: the + in a card's corner, which adds the recipe to the plan.
   * It is a 32px circle on a card only 88px wide, so rather than cover the
   * photo it keeps its size and takes a 44px area around it. */
  .css-379vqm .css-1z0wopq {
    position: relative;
  }

  .css-379vqm .css-1z0wopq::after {
    content: '';
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    bottom: -0.375rem;
    left: -0.375rem;
  }

  /* css-17xkavj: a recipe's name under its photo, kept to two lines */
  .css-17xkavj {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-top: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
  }

  .css-379vqm .glide__counter {
    font-size: 0.75rem !important;
  }

  /* css-1f6hvax: "Close". Its wrapper is fixed 1rem from the top left corner
   * (css-1j2iuao on a recipe, unnamed in the builder); it moves to the same
   * left edge as everything else. */
  .css-1f6hvax {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(34, 29, 25, 0.08), 0 8px 24px -16px rgba(34, 29, 25, 0.5);
  }

  .css-1j2iuao,
  .css-379vqm .css-np80uw > div:has(> .css-qkgxty) {
    left: 2rem !important;
  }

  /* The plan's own scrolling area, above the button. */
  .css-379vqm > .css-19g7cpb:last-child .css-np80uw {
    max-height: 25vh;
    padding-bottom: 0 !important;
  }

  /* css-enzus: the wrapper that floats "Build Plan" over the plan. It sits
   * inside the list, so on a phone the button scrolled away with the meals,
   * off the bottom of the screen. It is pinned to the screen instead, and the
   * bar leaves room for it. css-1ie3pbn: the fade behind it on desktop. */
  .css-379vqm .css-enzus {
    position: fixed !important;
    left: 2rem;
    right: 2rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    transform: none !important;
    z-index: 6;
  }

  .css-1ie3pbn {
    display: none !important;
  }

  /* css-73hb6j: "Build Plan" */
  .css-73hb6j {
    width: 100% !important;
    margin: 0 !important;
    font-size: 1rem !important;
  }

  /* A meal in the plan. css-1gxo19j: the row, css-iduoyd: its photo,
   * css-c75ij1: its name, css-173dj57: "4 servings", the same for every meal,
   * css-19tab4j: remove, css-1s2710v: the line under the row. Desktop sizes
   * made each one 100px tall, so two filled the bar. */
  .css-379vqm .css-1gxo19j {
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem !important;
    padding-right: 0 !important;
  }

  .css-379vqm .css-iduoyd {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  .css-379vqm .css-c75ij1 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
  }

  .css-379vqm .css-173dj57 {
    display: none !important;
  }

  .css-379vqm .css-19tab4j {
    flex: none;
    width: 2.5rem !important;
    height: 2.5rem;
    margin: 0 !important;
  }

  .css-379vqm .css-1s2710v {
    width: auto !important;
    margin: 0 0 0.5rem 4.25rem !important;
  }

  /* ---- Recipe ----------------------------------------------------------- */

  /* The recipe's page margin. Its 96px top margin left room for the Close
   * button, which is only 40px tall on a phone. */
  .css-1u4bsc7:has(.css-norcu) {
    height: auto !important;
    margin-top: 4.75rem !important;
    padding: 0 2rem 2rem !important;
  }

  /* A recipe opens in a panel that scrolls over the home screen. Without this
   * the home screen scrolls on behind it once the panel reaches its end. */
  div:has(> .css-1u4bsc7 > .css-norcu) {
    overscroll-behavior: contain;
  }

  /* css-norcu: the recipe's two columns, photo and steps | ingredients. In one
   * column the nutrition panel came between the photo and the cooking, which
   * is what the page is for, so the two halves are dissolved into the column
   * (display: contents) and put back in a useful order: photo, what to cook,
   * then nutrition and its note. */
  .css-norcu {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
    margin-bottom: 3rem !important;
  }

  .css-norcu > div {
    display: contents;
  }

  .css-norcu > div > img {
    order: 1;
  }

  .css-norcu > div:last-child > div {
    order: 2;
  }

  .css-norcu > div > div:has(.css-1g599vn) {
    order: 3;
  }

  .css-norcu > div > p {
    order: 4;
  }

  /* css-108qscy: the title block, then the time and servings line, which kept
   * 80px of desktop air between itself and the photo. */
  .css-108qscy {
    margin-bottom: 0.75rem !important;
  }

  .css-108qscy .css-1jqhg96 {
    margin: 0 0 0.75rem !important;
  }

  /* css-mww17g: favourite and print. They are part of the title, so they were
   * left wrapping onto its last line among the words. They move to the top
   * right corner instead, opposite Close, and answer to a 44px area. */
  .css-108qscy .css-mww17g {
    position: fixed;
    top: 1rem;
    z-index: 6;
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 !important;
  }

  .css-108qscy .css-mww17g:first-of-type {
    right: 4.25rem;
  }

  .css-108qscy .css-mww17g:last-of-type {
    right: 1rem;
  }

  .css-108qscy .css-mww17g::after {
    content: '';
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    bottom: -0.125rem;
    left: -0.125rem;
  }

  .css-108qscy + div {
    margin-bottom: 1.5rem !important;
  }

  /* The nutrition panel under the photo, 2rem of padding on desktop */
  .css-norcu > div > div:has(.css-1g599vn) {
    padding: 1rem !important;
  }

  /* css-1be8y94: the tab you are on, css-o2r9cx: Cookware | Ingredients |
   * Instructions. At desktop size the third one ran off the screen; they
   * share the width instead. Their row is pulled up 44px to sit beside the
   * panel on desktop, which here covered the line above it. */
  .css-1be8y94,
  .css-o2r9cx {
    flex: 1 1 0;
    min-width: 0;
    padding: 1px 0 !important;
    font-size: 0.9375rem !important;
    text-align: center;
  }

  .css-norcu div:has(> div > .css-1be8y94) {
    margin-top: 0 !important;
  }

  /* The list under them is long, so the tabs stay put while it scrolls,
   * below the buttons fixed in the corners. */
  .css-norcu div:has(> .css-1be8y94) {
    position: sticky;
    top: 4rem;
    z-index: 3;
    background-color: #FAF7F4;
  }

  /* css-bi0gc1: a piece of cookware or an ingredient, css-6y5ic1: a step and
   * css-p2vdxh its row. 2rem of desktop padding put them out of line with the
   * rest of the panel. */
  .css-bi0gc1,
  .css-6y5ic1 {
    padding: 0 1rem !important;
  }

  .css-6y5ic1 {
    font-size: 1rem !important;
  }

  .css-p2vdxh {
    padding: 0.75rem 0 1rem !important;
  }

  /* ---- Settings --------------------------------------------------------- */

  /* css-17irvwq: the settings menu | the chosen section, side by side */
  .css-17irvwq {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .css-17irvwq > div {
    width: 100% !important;
    max-width: none !important;
  }

  /* css-1j3r95t: the menu, a full-height sidebar on desktop. Stacked, it
   * pushed the section a screen down, so picking "Account" appeared to do
   * nothing. It becomes a row of chips, and the section follows straight on. */
  .css-1j3r95t {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    height: auto !important;
    padding: 1rem 1rem 1rem 2rem !important;
  }

  /* css-qkgxty: the Close row, css-1jqhg96: the "Settings" title */
  .css-1j3r95t > .css-qkgxty,
  .css-1j3r95t > .css-1jqhg96 {
    width: 100%;
  }

  /* The menu is a wrapped flex row with a 0.5rem gap, which counts towards
   * the 1.25rem every panel leaves between Close and its title. */
  .css-1j3r95t > .css-1jqhg96 {
    margin: 0.75rem 0 1rem !important;
  }

  /* css-dhdnkf: the section you are on, css-170uc15: the others */
  .css-1j3r95t > .css-dhdnkf,
  .css-1j3r95t > .css-170uc15 {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-height: 2.75rem;
    margin: 0 !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    font-size: 0.9375rem !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }

  .css-1j3r95t > .css-dhdnkf {
    background-color: #221D19 !important;
    color: #fff !important;
  }

  .css-1j3r95t > .css-170uc15 {
    background-color: #F1ECE7 !important;
  }

  /* css-fcuqlv: the line above "Sign Out" in the sidebar */
  .css-fcuqlv {
    display: none !important;
  }

  /* css-1jfzf6l: the chosen section, css-83dli7 its desktop margins */
  .css-1jfzf6l,
  .css-17irvwq .css-np80uw {
    height: auto !important;
    overflow: visible !important;
  }

  .css-83dli7 {
    padding: 1.5rem 2rem 3rem !important;
  }

  .css-83dli7 .css-1jqhg96 {
    margin: 0 0 1rem !important;
  }

  /* A section heading ("MENU TYPE"), 4rem of desktop padding either side left
   * it three words tall. */
  .css-83dli7 h2 {
    padding: 0 0 0.5rem !important;
  }

  /* A choice you can tick: a diet, an allergy, a meal size, a unit system.
   * Each is a button holding a tick and a label. The tick had a 4rem column
   * to itself and the label beside it was narrow enough to break "No holds
   * barred" over three lines. The tick moves into a 2.5rem column, in line
   * with the circles on the home screen, and the label takes the rest. */
  .css-83dli7 button:has(> div) {
    position: relative;
    align-items: center !important;
    min-height: 3rem;
    padding: 0.5rem 0 0.5rem 2.5rem !important;
  }

  .css-83dli7 button:has(> div) > svg {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .css-83dli7 button:has(> div) > div {
    display: block !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin-left: 0 !important;
  }

  /* The line under a choice ("No holds barred", "for a family of 5+") */
  .css-83dli7 button > div > div {
    width: auto !important;
    margin: 0.125rem 0 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
  }

  /* css-nfp8oe, css-72m1fb: the rule under a choice */
  .css-nfp8oe,
  .css-72m1fb {
    width: auto !important;
    margin-left: 2.5rem !important;
  }

  /* One settings section to the next, 4rem apart on desktop */
  .css-83dli7 > div:not([class]) + div:not([class]) {
    margin-top: 2.5rem !important;
  }

  /* css-7nh0kn: the ingredients you have ruled out, and the button to add
   * one, in the old label column. */
  .css-7nh0kn {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: auto !important;
    margin-left: 0 !important;
  }

  /* css-v5qhhs: one of them, with a − to take it off again. Desktop keeps
   * 2.5rem for the − to the left of the name and then draws it at the other
   * end, hard against the last letter. */
  .css-7nh0kn .css-v5qhhs {
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    font-size: 0.9375rem !important;
    font-weight: 500;
    line-height: 1.25;
  }

  /* The − sits at the top of a box two thirds taller than itself. (A class
   * more than you would expect: the app's own rule for it is !important and
   * its styles are injected after this file.) */
  .css-83dli7 .css-7nh0kn .css-v5qhhs > div {
    display: flex !important;
    align-items: center;
    flex: none;
    height: 1rem;
    background: none !important;
  }

  .css-7nh0kn .css-1hqj884 {
    margin: 0 !important;
  }

  /* css-14lr7ps: a settings field, its value and an Edit button. The value is
   * indented on desktop and never wraps, so an email address ran off the
   * screen, taking the page's sideways scroll with it. */
  .css-14lr7ps,
  .css-83dli7 [style*='space-between'] {
    gap: 0.5rem;
    height: auto !important;
    min-height: 3rem;
    margin-bottom: 1rem !important;
    padding: 0.5rem 0.5rem 0.5rem 1rem !important;
    border-radius: 0.5rem;
    background-color: #FAF7F4;
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }

  .css-14lr7ps > *,
  .css-83dli7 [style*='space-between'] > * {
    flex: none;
  }

  /* css-16wf10c: the same field while you are editing it, css-4knjz3 its
   * Save and Cancel. Side by side the two buttons ran off the screen, so the
   * box you type in takes the line and they sit under it. */
  .css-16wf10c {
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    background: none !important;
  }

  /* The app marks this input's 1rem bottom margin !important and injects its
   * styles after this file, so the rule below needs a class more to beat it. */
  .css-83dli7 .css-16wf10c > input {
    flex: 1 1 100% !important;
    min-width: 0;
    margin: 0 !important;
    font-size: 1rem !important;
  }

  .css-4knjz3 {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0 auto !important;
  }

  /* ---- Buttons ----------------------------------------------------------- */

  /* Every button on a phone takes the shape of the Settings button on the
   * home screen: a 2.5rem pill. Each keeps its own colours, so the red one
   * that commits still stands out from the warm grey ones.
   * css-14um6bf: Start a New Meal Plan, css-73hb6j: Build Plan,
   * css-zwvuya: Save, css-80n88w: Cancel, css-axz7um: Edit,
   * css-bhfhoh: show more, css-1hqj884: Add, css-1f6hvax: Close. */
  .css-14um6bf,
  .css-73hb6j,
  .css-zwvuya,
  .css-80n88w,
  .css-axz7um,
  .css-bhfhoh,
  .css-1hqj884,
  .css-1f6hvax {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
  }

  /* Cancel is a bare word beside Save on desktop. */
  .css-80n88w {
    margin-left: 0.25rem !important;
    background-color: #F1ECE7 !important;
    color: #6C625A !important;
  }

  /* The label that appears under an icon button on hover. There is no hover on
   * a phone, and the "Remove" one hung past the plan and made it scroll
   * sideways. */
  .css-19tab4j > span,
  .css-mww17g > span,
  .css-1dmxgs9 button > span {
    display: none !important;
  }

  /* The print button beside "Groceries", a 24px icon on desktop. */
  .css-1dmxgs9 button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
  }
}