/* Rules this project adds that the live theme has no equivalent for, plus the
 * two places Tom asked us to depart from live deliberately.
 *
 * Kept OUT of `theme/css/_dist/*`, which is ported from the live theme and is
 * compared against it file by file. A new rule in there would show up as a
 * difference from live for ever after, and the next person would have to work
 * out whether it was a port error or a deliberate addition.
 *
 * The look is taken from the theme's own `.simple-btn`: same radius, same
 * border colour, same font size, so the control reads as part of the strip
 * rather than as a browser default dropped into it.
 */

.organized-by {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    margin: 1.6rem 0 0 0;
    font-size: 1.4rem;
}

.organized-by label {
    color: #6b6b6b;
    white-space: nowrap;
}

.organized-by select {
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.2;
    padding: 0.7rem 3rem 0.7rem 1.2rem;
    border: 1px solid #e0e0e0;
    border-radius: 2rem;
    background-color: #fff;
    /* the chevron is drawn, not fetched: one more request on every member page
     * for a 10x6 triangle is not worth it (item 9). */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23222' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    color: #222;
}

.organized-by select:focus-visible {
    /* the keyboard-focus fix a port silently removed once before; stated here
     * so this control cannot lose it the same way. */
    outline: 2px solid #f60;
    outline-offset: 2px;
}

/* The submit button exists for the no-JavaScript case only.
 *
 * `button[type="submit"]`, NOT `button` (Phase 1I). Written unqualified, this
 * rule hid the new whole-box click target the moment it was added -- a button
 * of ours inside the same form -- and the control read as correct in every
 * measurement of its BOX while nothing on it could be clicked.
 *
 * And it is `.js`, not `.no-js`. Nothing on this site has ever set `no-js`, so
 * the submit button was hidden from EVERYBODY, and the only remaining way to
 * reorder a list was `onchange="this.form.submit()"` -- itself JavaScript. A
 * member with scripting off had a control that did nothing at all. The class
 * is now added by `chub/list-header.js`, so the fallback is what a page shows
 * until the script has run and what it keeps if the script never arrives. */
.organized-by button[type="submit"] {
    display: inline-block;
    font-family: inherit;
    font-size: 1.4rem;
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: 2rem;
    background: #f60;
    color: #fff;
    cursor: pointer;
}

.js .organized-by button[type="submit"] {
    display: none;
}

@media screen and (max-width: 500px) {
    .organized-by {
        justify-content: space-between;
    }
}

/* The disabled "Rebuild in progress" button on the Publish chooser (item 4).
 * The theme has no disabled state for `.btn`, so one is defined here rather
 * than added to the ported stylesheet. Kept legible rather than ghosted: it is
 * telling the member something, not just refusing them. */
.btn--disabled,
.btn[disabled] {
    background: #e6e3d4;
    color: #5c5a4e;
    border-color: #e6e3d4;
    cursor: not-allowed;
    box-shadow: none;
}


/* ---------------------------------------------------------------------------
 * My Menu opens to the height of its items, not the height of the screen.
 * Phase 1E item 8 -- a deliberate deviation from live, at Tom's request.
 *
 * Live sizes the open panel from the VIEWPORT and not from its contents:
 *
 *     .account-menu-content        { height: calc(100vh - 20rem); }
 *     header .account ...-content  { height: calc(100vh - 12rem); }   (narrow)
 *
 * so a six-item menu opens as a near-full-height column with a large empty
 * area under the last item, at every width. That is what Tom photographed.
 *
 * The fix animates MAX-height instead of height. `height: auto` alone would
 * size the panel correctly and kill the open/close transition, because a
 * transition cannot run to `auto`; capping with max-height keeps the animation
 * AND lets the box take its natural height, since max-height only limits and
 * never stretches.
 *
 * The cap is still viewport-based on purpose: a member with every menu section
 * expanded can exceed the screen, and a panel taller than the window with no
 * way to scroll would be worse than the bug being fixed. So: natural height,
 * plus the 30px Tom asked for, up to what the screen can show, then scroll.
 * ------------------------------------------------------------------------ */

/* TWO elements have to change, not one. The panel is sized from the viewport,
 * and so is the scroll container inside it -- which is also `position:
 * absolute`, so it contributes NO height to its parent at all:
 *
 *     .account-menu-content     { height: calc(100vh - 20rem); }
 *     .account-menu-content-in  { height: calc(100vh - 20rem);
 *                                 position: absolute; overflow: auto; }
 *
 * Overriding only the parent gives a panel 30px tall -- the padding and
 * nothing else -- because an absolutely positioned child cannot stretch it.
 * Measured, not guessed: the first version of this rule produced exactly
 * `panel=30, content=746`.
 *
 * So the inner element goes back into normal flow at its natural height, and
 * the scrolling moves up to the panel. */
header .account .account-menu.opened .account-menu-content-in,
.account-menu.opened .account-menu-content-in {
    position: static;
    height: auto;
    overflow: visible;
}

header .account .account-menu.opened .account-menu-content,
.account-menu.opened .account-menu-content {
    height: auto;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    /* "the height of its items plus 30 px" */
    padding-bottom: 30px;
}

header .account .account-menu:not(.opened) .account-menu-content,
.account-menu:not(.opened) .account-menu-content {
    height: 0;
    max-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Clipped, not hidden. `display: none` -- which is what the theme's own
 * `.hidden` does, and what live puts on these file inputs -- takes the input
 * out of the tab order entirely, so the camera becomes unreachable by
 * keyboard. Clipping keeps it focusable and announced while showing nothing.
 * Item 7. */
.chub-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ...but a focused file input must be visible, or a keyboard user is tabbing
 * to something they cannot see. Bring it back on focus, over the photo. */
.chub-visually-hidden:focus-visible {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    outline: 2px solid #f60;
    outline-offset: 2px;
    background: #fff;
    padding: 0.4rem;
}

/* --- the publish page's photo gallery (Phase 1G item 1) -------------------
   Live styles `#gallery .items span` as a thumbnail tile; the file NAME is
   ours, because Tom asked for the chosen names to show the way the text-file
   field shows them. It sits on a translucent strip along the bottom of the
   tile so it never covers the photo it names, and it truncates rather than
   pushing the tile wider. */
#gallery .items span { position: relative; }
#gallery .items span .gallery-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  background: rgba(255,255,255,.88);
  font-size: 11px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 0 0 6px 6px;
}
#gallery .error-empty { display: block; margin-top: 8px; }



/* The header of every My Menu list — BUILT TO audit/HEADER-SPEC.md.
 *
 * PHASE 1I, AND THE THING THAT CHANGED. Tom's two recipe drawings are 1:1
 * screenshots of his own screen, not scaled mockups: the title box in them is
 * 1245px wide because THE CONTENT COLUMN IS 124.5rem and the theme's root font
 * size tops out at 10px, which it reaches at a viewport of 1875 and wider.
 * Phase 1H measured the same drawings, decided they were 0.76603 of our 1440
 * layout, and built a header a third too small at Tom's own width.
 *
 * SO EVERY LENGTH BELOW IS IN rem, AND ONE rem IS TEN DRAWN PIXELS.
 * `.chub-listhead__title { height: 8rem }` is the drawing's 80px title box,
 * exactly, at 1920; at 1440 the same rule is 61.4px because the root is 7.68
 * there, which is the whole layout's own scale and not a second one invented
 * here. Widths that must stay a proportion of the column -- the Filters bar,
 * the search field -- are percentages, because below 1180 the column is the
 * viewport rather than 124.5rem and a rem width would overflow it.
 *
 * Where a number came from: `audit/HEADER-SPEC.md` carries the measurement
 * behind every line, `scripts/ops/header_measure.py` re-derives it from the
 * JPEGs on every run, and `scripts/ops/header_compare.py` subtracts the two
 * and draws the overlay. A number changed here without changing it there is a
 * number nobody can check.
 *
 * ONE stylesheet for every section: the colour arrives as `--sec` inline from
 * `core/sections.py`, so there is no per-colour class.
 */

.chub-listhead {
  --line: #DDDDDD;        /* measured: the unselected pill outline */
  --wash: #F8F8F8;        /* measured: pill fill, Filters bar, panel fill */
  --rule: #D3D3D3;        /* measured: every 1px outline below the card */
  --ink-soft: #707070;    /* measured: "Filters", 112,112,112 */
  --pill-gap: 0.44rem;    /* drawn: the eight gaps mean 4.4 */
  margin: 0 0 2.65rem;    /* drawn: the cards begin 26.5 under the header */
  position: relative;
  /* THE PANEL FLOATS, SO THE HEADER NEEDS A STACKING CONTEXT OF ITS OWN.
     Every list block after it is `position: relative` with `z-index: auto`,
     so it paints ON TOP of an out-of-flow panel that comes earlier in the
     document -- the open panel was under the recipe cards, and the only way
     that showed was a click that never landed. 20 clears `.chef-menu`'s 10
     and stays under the site header. */
  z-index: 20;
}

/* the title box ---------------------------------------------------- spec 1
 * IT IS PAINTED ABOVE THE TAB CARD, and that is the whole of the fix Tom
 * asked for. The card runs up BEHIND it (see below); this box is opaque white
 * and sits on top, so the card's own top edge and top corners are never seen
 * and the only curves at the junction are this box's two bottom corners.
 *
 * Before, the card was above: it painted over the title box's drop shadow and
 * cut it off in a hard horizontal line at its own top edge, which is the notch
 * Tom saw at both ends of the khaki "All Saved Pages" header. */
.chub-listhead__title {
  position: relative;
  z-index: 3;
  background: #fff;
  border: 0.2rem solid var(--sec);
  border-radius: 2.5rem;       /* drawn 25.0, fitted to the corner arc */
  height: 8rem;                /* drawn 80.2 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 3.5rem 0 5.2rem;  /* the drawn INK starts 55.6 inside the box's
                                  outer left edge; 2 of that is the border and
                                  a Montserrat capital carries about 1.5 of
                                  left side bearing */
  box-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.10);
}
.chub-listhead__title h1 {
  margin: 0;
  color: var(--sec-title);
  /* 700, and MEASURED: the drawn `A` is 25px wide and its `l` stems are 5,
     which is Montserrat Bold at this size -- 800 draws them 26 and 6. The
     tracking is what makes the whole line 282 wide as drawn instead of 294;
     Tom's own line is not evenly spaced, so this is the fit over 17 glyphs
     and not a per-letter match. */
  font-weight: 700;
  font-size: 3.25rem;          /* drawn cap height 23.0 / 0.7077 */
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the tab card ----------------------------------------------------- spec 1
 * THE SAME BOX AS THE TITLE, not inset: drawn, both run the full column.
 *
 * IT RUNS 21px UP BEHIND THE TITLE BOX. Tom: "the card runs UP BEHIND the
 * title box -- its top edge hidden under the box, the box painted above it
 * with an opaque white fill -- so the card's sides run straight up into the
 * box's sides and the only visible curves are the box's own bottom corners."
 * So the top margin is NEGATIVE and the height and top padding carry the same
 * 21px back, which leaves every visible edge exactly where it was measured:
 * the card's visible top is the title box's bottom edge, its bottom is 160.4,
 * and the pills are still at 101.5.
 *
 * Its top corners stay square. They are behind the box now, so nothing sees
 * them -- but a radius there is the shape of the defect, and leaving it at 0
 * means the fix cannot be half-undone by someone rounding "all four corners
 * for consistency". */
.chub-listhead__tabs {
  position: relative;
  z-index: 1;                  /* BELOW the title box's 3 */
  margin: -2.1rem 0 0;         /* 21px up behind the box */
  height: 10.14rem;            /* 79.4 drawn + the 21 it is tucked by */
  box-sizing: border-box;
  background: #fff;
  border-radius: 0 0 2.5rem 2.5rem;
  box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,.12);
  padding: 4.25rem 3.81rem 1.62rem 4.09rem;
  /* drawn 20.5 top, 16.2 bottom, and the two side insets are NOT equal in the
     drawing: 42.5 on the left, 39.7 on the right. Expressed in our frame --
     the drawn box is 1248.2 where ours is 1245.0, and the overlay is aligned
     on the centre line -- that is 40.9 and 38.1, which is what these are.
     They matter: the nine drawn pills and their eight gaps need 1166.3, and
     40.9 + 1166.3 + 38.1 is 1245.3. Round them to a common 4.25 and the row
     no longer fits, `list-header.js` spends a step of padding it should not
     have had to, and every pill comes out 5px narrow. */
  display: flex;
  flex-wrap: wrap;             /* THE FALLBACK THAT CANNOT CLIP. See below. */
  row-gap: 0.44rem;
  column-gap: var(--pill-gap);
  align-items: center;
  /* NO overflow:hidden and no fixed overflow-x. Tom's screenshot lost
   * "Classes & Events" and "Pages (6)" to a clipped row; a row that wraps is
   * wrong-looking, a row that hides a tab is broken. */
}
/* one row is the goal, and `list-header.js` sets this the moment it has
 * measured that the row fits. Without the script the row wraps instead of
 * clipping, and every tab stays inside the card. */
.chub-listhead__tabs[data-fit="1"] {
  flex-wrap: nowrap;
  height: 10.14rem;
}
.chub-listhead__tabs[data-fit="0"] { height: auto; min-height: 10.14rem; }

.chub-pill {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0 var(--pill-pad, 1.3rem);
  height: 4.27rem;                     /* drawn 42.7, outline included */
  line-height: 4.07rem;
  border-radius: 1.2rem;               /* drawn 11.9 -- NOT fully round */
  border: 0.1rem solid var(--line);
  background: var(--wash);
  color: #1d1d1b;
  font-size: var(--pill-size, 1.43rem);   /* drawn cap 10 / 0.7077 */
  letter-spacing: var(--pill-track, 0);
  text-decoration: none;
  white-space: nowrap;
}
.chub-pill:hover { border-color: var(--sec); }
.chub-pill--on {
  background: var(--sec);
  border-color: var(--sec);
  color: var(--sec-ink);
  font-weight: 700;
}
.chub-pill em,
.chub-pill strong { font-style: normal; font-weight: 700; }

/* the row under the card ------------------------------------- spec 2 and 4
 *
 * A BLOCK, NOT A GRID, AND THAT IS THE WHOLE POINT. The Filters bar is 74.67%
 * of the CARD, and a percentage resolves against the containing block: put the
 * bar in a `1fr auto` grid and its column is the card minus the "Organized by"
 * control, so 74.67% came out 745 where the drawing says 932. The bar and the
 * search field are therefore laid out against the card's own width, and the
 * control is taken out of flow and pinned to the right, where the drawings put
 * it.
 *
 * `min-height` is what the row costs: the control sits 30.5 below the card and
 * is 51 tall, and it is the taller of the two things on this row in both
 * variants, so nothing below it moves when the bar changes. */
.chub-listhead__bottom {
  position: relative;
  min-height: 8.15rem;
  /* flow-root, AND IT IS LOAD-BEARING. The search field on every non-recipe
     list is the first in-flow child and carries `margin-top: 3.1rem`; without
     a block formatting context that margin COLLAPSES out through this box and
     moves the box itself down 31px, taking the absolutely-positioned
     "Organized by" control -- which is placed against this box -- with it. The
     control read 29.1px low on all thirteen of those lists while its own
     `top` was right. */
  display: flow-root;
}

/* VARIANT 2 (recipe lists): the closed "Filters" bar --------------- spec 2 */
.chub-filterbar {
  margin: -0.4rem 0 0 3.21rem; /* TUCKED 4px UNDER THE CARD, which is Tom's
                                  own measurement of it ("its top 4 px under
                                  the card"). The card is painted above, so
                                  the bar's visible top edge is the card's
                                  bottom edge -- exactly what the drawing
                                  shows -- and its square top corners can
                                  never make a notch. */
  width: 74.67%;               /* drawn 932 of a 1248.2 card */
  max-width: calc(100% - 6.4rem);
  height: 6.05rem;             /* drawn 56.5 visible + the 4 it is tucked by */
  box-sizing: border-box;
  border: 0;
  border-radius: 0 0 1.72rem 1.72rem;  /* drawn 17.2, bottom corners only:
                                          its top edge is straight, under the
                                          card */
  background: var(--wash);
  box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,.09);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 1.8rem;           /* MEASURED on the word, not on a ratio: the
                                  drawn "Filters" is 57 wide with a 14px cap,
                                  and 2.05rem draws it 65 wide with 16 */
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;     /* drawn: the word and its chevron centre on
                                  511 in a bar centred on 506.5 */
}
.chub-filterbar:hover { background: #F2F2F2; }
.chub-caret {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  margin-left: 2.6rem;         /* drawn 26 between the word and the chevron */
  border-right: 0.25rem solid currentColor;
  border-bottom: 0.25rem solid currentColor;
  transform: translateY(-0.4rem) rotate(45deg);
}
[aria-expanded="true"] > .chub-caret {
  transform: translateY(0.25rem) rotate(-135deg);
}

/* VARIANT 1 (every other list): the search field ------------------- spec 4
 * The crop is 0.891 of the recipe drawings, and its scale is derived from the
 * "Organized by" control, which is drawn on all three files. Converted, the
 * field and the control are the same height and top-aligned, which is what
 * Tom's note says in words. */
.chub-listsearch {
  position: relative;
  margin: 3.15rem 0 0 2.77rem; /* the same top as the control beside it --
                                  drawn, on the crop, the two are aligned --
                                  and 27.7 from the card's left */
  width: 31.33%;               /* drawn 391.1 of a 1248.2 card */
  max-width: calc(100% - 5.6rem);
}
.chub-listsearch input {
  width: 100%;
  height: 5.1rem;              /* the same box as "Organized by" */
  box-sizing: border-box;
  padding: 0 1.8rem 0 6.08rem; /* drawn: the placeholder's ink starts 63.1
                                  inside the field, and an `S` carries 2.3 of
                                  side bearing at 1.6rem */
  border: 0.1rem solid var(--rule);
  border-radius: 1.3rem;
  background: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  color: #1d1d1b;
}
.chub-listsearch input::placeholder { color: #7a7a7a; opacity: 1; }
.chub-listsearch input:focus-visible {
  outline: 0.2rem solid var(--sec);
  outline-offset: 0.1rem;
}
/* the magnifier is drawn, not fetched: one more request on every member page
 * for a 20x20 glyph is not worth it. */
.chub-listsearch::before {
  content: "";
  position: absolute;
  left: 1.83rem; top: 1.58rem;    /* drawn 18.3 in, 15.8 down */
  width: 2.13rem; height: 2.13rem; /* drawn 21.3 across */
  background: no-repeat center/2.13rem 2.13rem
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1b' stroke-width='1.6'%3E%3Ccircle cx='6.6' cy='6.6' r='5'/%3E%3Cpath d='M10.4 10.4L15 15' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.chub-listsearch button {
  position: absolute; right: 0.6rem; top: 0.6rem;
  height: 3.9rem;
  font-family: inherit; font-size: 1.4rem;
  padding: 0 1.6rem; border: 0; border-radius: 1rem;
  background: var(--sec); color: var(--sec-ink); cursor: pointer;
}
/* with the script running the field filters as the member types, so the
   button is the no-JavaScript path and nothing else. */
.js .chub-listsearch button { display: none; }

/* "Organized by:" — TWO LINES, AND ONE CONTROL ------------- spec 2 and 4
 *
 * IT WAS A BROKEN CONTROL and this is the rebuild Tom asked for: only the
 * word used to open anything, the chevron did nothing, and what opened was
 * the browser's own list. Now the whole box is the click target -- label,
 * value and chevron -- and what opens is `.organized-by__list` below, in the
 * same font, outline and radius as the box.
 *
 * The native <select> is still in the markup and still works with the script
 * absent, together with its own submit button; `list-header.js` hides both
 * the moment it takes over. The two drawings agree about this control to
 * within 1.7px on its right inset and 0.9px on its top. */
.chub-listhead__bottom .organized-by {
  position: absolute;
  right: 2.71rem;              /* drawn 27.1 inside the card's right edge; the
                                  crop, independently, says 25.4 */
  top: 3.15rem;                /* THE MEAN OF THE TWO DRAWINGS, which disagree
                                  about this by 1.9px: the recipe drawing says
                                  30.5 below the card and the crop 32.4. Taking
                                  either one leaves the other 1.9 out on
                                  thirteen lists; the mean leaves both under
                                  1.0. */
  width: 22rem;                /* drawn 220.0 */
  margin: 0;
}
/* THE BOX ITSELF IS AN INNER ELEMENT, so that `.organized-by__open` -- which
   is positioned against the FORM, a box with no border and no padding -- ends
   up exactly on it. Against the form-as-box, `inset: 0` resolves against the
   PADDING box and the click target stopped 26px short of the label. */
.chub-listhead__bottom .organized-by .organized-by__box {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label chev" "value chev";
  align-items: center;
  column-gap: 1.2rem;
  width: 100%;
  box-sizing: border-box;
  height: 5.1rem;              /* drawn 51.0 */
  background: #fff;
  border: 0.1rem solid var(--rule);
  border-radius: 1.6rem;       /* drawn 16.1 */
  padding: 0 3.0rem 0 2.6rem;  /* drawn: the label's ink starts 26 in, the
                                  chevron's right edge is 30 from the right */
  font-size: 0;                /* kill the inline gap between the two rows */
}
.chub-listhead__bottom .organized-by label,
.chub-listhead__bottom .organized-by .organized-by__label {
  grid-area: label;
  color: #6b6b6b;
  font-size: 1.18rem;          /* drawn "Organized by:" is 94 wide */
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}
.chub-listhead__bottom .organized-by .organized-by__value {
  grid-area: value;
  font-weight: 700;
  font-size: 1.43rem;          /* drawn "Newest" is 55 wide with an 11px cap */
  line-height: 1.2;
  color: #1d1d1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the native control, for the no-JavaScript case only */
.chub-listhead__bottom .organized-by select {
  grid-area: value;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.43rem;
  line-height: 1.2;
  padding: 0;
  margin: 0;
  color: #1d1d1b;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 100%;
}
.chub-listhead__bottom .organized-by button[type="submit"] {
  grid-area: chev;
  font-size: 1.1rem; padding: 0.2rem 0.8rem; border: 0; border-radius: 999px;
  background: var(--sec); color: var(--sec-ink); cursor: pointer;
}
/* ...and with the script running, neither of those is on the page */
.js .chub-listhead__bottom .organized-by select,
.js .chub-listhead__bottom .organized-by button[type="submit"] {
  display: none;
}
/* WITH SCRIPTING OFF the native select is the value line and the Sort button
   takes the chevron's cell, so neither is drawn on top of the other. Written
   as `html:not(.js)` because `.js` is added by the script and there is no
   other way for a stylesheet to know: the class this used to test, `.no-js`,
   was never set by anything at all. */
html:not(.js) .chub-listhead__bottom .organized-by .organized-by__value {
  display: none;
}
html:not(.js) .chub-listhead__bottom .organized-by .organized-by__box::after {
  display: none;
}
/* THE WHOLE BOX IS THE TARGET. A transparent button laid over the control,
   so a click on the label, on the value, on the chevron or on the white
   between them all open the same list. */
.organized-by__open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  border-radius: 1.6rem;
}
.organized-by__open:focus-visible {
  outline: 0.2rem solid var(--sec);
  outline-offset: 0.2rem;
}
/* the chevron: one element, drawn, so it lines up across both rows */
.chub-listhead__bottom .organized-by .organized-by__box::after {
  grid-area: chev;
  content: "";
  width: 1.1rem; height: 1.1rem;   /* drawn 14 x 7 */
  border-right: 0.22rem solid #4a4a4a;
  border-bottom: 0.22rem solid #4a4a4a;
  transform: translateY(-0.4rem) rotate(45deg);
}
.chub-listhead__bottom .organized-by[data-open="1"] .organized-by__box::after {
  transform: translateY(0.25rem) rotate(-135deg);
}
/* the list the box opens: the box's own font, outline and radius */
.organized-by__list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.4rem);
  z-index: 30;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 0.1rem solid var(--rule);
  border-radius: 1.6rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.14);
}
.organized-by__list[hidden] { display: none; }
.organized-by__list li {
  margin: 0;
  padding: 0.9rem 1.6rem;
  font-size: 1.43rem;
  line-height: 1.2;
  color: #1d1d1b;
  border-radius: 1.1rem;
  cursor: pointer;
  white-space: nowrap;
}
.organized-by__list li[aria-selected="true"] { font-weight: 700; }
.organized-by__list li:hover,
.organized-by__list li.is-active {
  background: var(--wash);
}
.organized-by__list li.is-active { outline: 0.2rem solid var(--sec); }

/* the filter panel ------------------------------------------------- spec 3
 * It FLOATS OVER the content: in Tom's two drawings the recipe cards behind
 * are at the SAME y whether the panel is open or shut, so it cannot be in
 * flow. `position: absolute` in the header's own stacking context. */
.chub-searchpanel {
  position: absolute;
  left: 3.21rem;               /* the closed bar's left edge, to the pixel */
  /* TUCKED UNDER THE CARD, exactly as the bar is. Tom: "the panel starts
     below the card with its own rounded top corners, a second notch. In the
     drawing the panel's top is tucked under the card (the card's shadow falls
     onto the panel)." Its 26.5px top radius is therefore behind the card and
     its visible top edge is the card's bottom edge. */
  top: -0.4rem;
  z-index: 0;                  /* BELOW the card's 1. It must be a NUMBER and
                                  it must be lower: at an equal z-index the
                                  later element in the document wins, and the
                                  panel comes after the card -- which is how
                                  it was painting over it. */
  width: 74.67%;
  max-width: calc(100% - 6.4rem);
  box-sizing: border-box;
  background: var(--wash);
  /* SQUARE AT THE TOP, like the bar and like the card, and for the same
     reason: a 26.5px arc tucked only 4px still shows 22px of curve below the
     card's edge, which is the notch again in miniature. Drawn, the panel's
     sides are already straight at the first row below the card (its extent is
     a steady x 37..976 from row 176, and rows 168-175 are the card's shadow
     over it, not a corner) -- so there is no arc there to reproduce. */
  border-radius: 0 0 2.65rem 2.65rem;   /* drawn 26.5 at the bottom */
  box-shadow: 0 0.4rem 1.4rem rgba(0,0,0,.10);
  padding: 2.65rem 4.27rem 0.95rem 4.47rem;   /* +4 for the tuck */
  /* the bottom is measured under the INK of "Filters ^" and our box is a line
     box, so this is not the drawn 16.5 -- it is what puts the panel's own
     bottom edge on the drawn one. */
}
.chub-searchpanel[hidden] { display: none; }
/* the panel's own wrapper. `flow-root` for the same reason the row itself is
   one: the bar's -4px tuck would otherwise COLLAPSE out through this box and
   move the wrapper up too, so the panel -- positioned against the wrapper --
   ended up tucked 8px instead of 4 and its bottom edge moved with it. */
.chub-listhead__panelwrap { position: relative; display: flow-root; }

/* PANEL INTERNALS ARE SELECTED BY ID, NOT BY CLASS, AND THAT IS DELIBERATE.
 * The ported theme stylesheet styles this markup with `#list-filter .filter
 * form .title` and `form[data-form] div.input`, which outrank any rule built
 * from our own classes. The first build lost to them silently and nothing in
 * a screenshot says "a rule you cannot see won"; the numbers did.
 */
#chub-search-panel .title {
  display: block;
  position: static;
  font-size: 1.61rem;          /* drawn "Search for Recipe:" is 147 wide */
  font-weight: 500;
  line-height: 1.2;
  color: #8a8a8a;
  margin: 0 0 1.88rem;         /* the drawing measures the INK and this box is
                                  a line box: 2.2 put the first input 6.7 low */
  white-space: normal;
}
/* the X, drawn as a 28px circle on the title's row, right-aligned with the
 * inputs -- drawn right edge 920.6, the inputs' 921.4. */
#chub-search-panel .close {
  position: absolute;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #E5E5E5
    no-repeat center/1.2rem 1.2rem
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%23272E34' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1l8 8M9 1l-8 8'/%3E%3C/svg%3E");
  cursor: pointer;
}
#chub-search-panel .close:hover { background-color: #D8D8D8; }
/* ITS BOX NEEDS TWO IDS. The theme sizes and places this button as
   `#list-filter .filter form .close` -- one id, two classes, a type, and its
   stylesheet is linked AFTER ours, so an equal-specificity rule of ours still
   loses the tie. It was drawing the button 30px where the drawing says 28,
   and the only sign was a 2.0px row in the comparison. `right: 0` is the
   theme's own answer and it is the right one: the form fills the panel's
   content box, so the button's right edge lands on the inputs' right edge,
   which is where Tom drew it. */
#chub-search-panel #list-filter .filter form .close {
  width: 2.8rem; height: 2.8rem;   /* drawn d 28 */
  right: 0;
  top: 0;
}

/* the eight fields, in the two columns TOM DREW: 439.6 and 389.6 with 15.4
 * between them, not the `repeat(2, 1fr)` live's own archive page uses. Phase
 * 1H followed live's stylesheet here and put the column boundary 25px away
 * from the drawing's, which is a double edge anyone can see in the overlay.
 * The drawings are the specification. */
#chub-search-panel .inputs-row {
  display: grid;
  grid-template-columns: 439.6fr 389.6fr;
  column-gap: 1.54rem;
  row-gap: 0;
  margin: 0 0 1.0rem;          /* drawn row gap 10.0 */
}
/* NOT `.inputs-row:last-of-type`: `.buttons` is a DIV too, so the last DIV of
   its type is the buttons row and the fourth input row never matched. */
#chub-search-panel .buttons { margin-top: 1.75rem; }   /* COLLAPSES against
   the row's own 1rem bottom margin, so this is the gap, not an addition. */
#chub-search-panel .input { position: relative; min-width: 0; padding: 0; }
#chub-search-panel .input > input[type="text"],
#chub-search-panel .select2-container .select2-selection,
#chub-search-panel .input > select {
  box-sizing: border-box;
  display: block;              /* NOT inline-block: see the note below */
  width: 100%;
  height: 4.4rem;              /* drawn: the four rows all measure 44.0 */
  min-height: 4.4rem;
  border: 0.1rem solid var(--rule);
  border-radius: 999px;        /* drawn: fully round, h/2 = 22 */
  background: #fff;
  font-family: inherit;
  font-size: 1.45rem;          /* MEASURED on the words: drawn, "Select
                                  Categories" is 127 wide and "Select Budget
                                  Cooking Categories" 251; 1.7rem draws them
                                  149 and 298 */
  color: #1d1d1b;
  padding: 0 1.8rem 0 1.75rem; /* the drawn placeholder ink starts 20.8 inside
                                  the field, and an `S` carries 3.4 of side
                                  bearing at this size */
  line-height: 4.2rem;
}
/* a multi-select GROWS once something is chosen -- the chips need the room,
 * and live's does the same. 4.4rem is its empty height, which is what the
 * drawing shows and what the comparison measures. */
#chub-search-panel .select2-container .select2-selection--multiple {
  height: auto;
}
/* BLOCK, not select2's inline-block: an inline-block sits on a text baseline
   and the line box adds its descender under the field. */
#chub-search-panel .select2-container {
  display: block;
  width: 100% !important;
  vertical-align: top;
}
#chub-search-panel .input { line-height: 0; }
/* AND THE SAME TRAP ONE LEVEL DOWN. select2's `__rendered` list is an
   inline-block, and no rule anywhere sets a height, so nothing in the cascade
   points at it. */
#chub-search-panel .select2-selection__rendered,
#chub-search-panel .select2-selection__placeholder {
  display: block;
  padding: 0 !important;
  margin: 0;
  line-height: 4.2rem;
  font-size: 1.45rem;
  color: #BBBBBB;
}
#chub-search-panel .select2-selection__rendered > li { line-height: 4.2rem; }
#chub-search-panel .select2-selection__arrow { display: none; }
/* THE PLACEHOLDER LIVES ON select2's INLINE SEARCH FIELD, and select2 sizes
   that field itself, in a `style="width:0px"` it writes on the element. Once
   the `__rendered` list was made `display: block` it measured 0 and stayed
   there, so all seven selects rendered EMPTY while every box was the right
   size -- which is why the comparison reads the eight placeholders as text
   and not only the boxes as numbers. */
#chub-search-panel .select2-search--inline { display: block; width: 100%; }
#chub-search-panel .select2-search--inline .select2-search__field {
  height: 4.2rem; margin: 0; line-height: 4.2rem; font-size: 1.45rem;
  width: 100% !important;
}
#chub-search-panel .select2-search__field::placeholder {
  color: #BBBBBB; opacity: 1;
}
#chub-search-panel .input > input[type="text"]::placeholder {
  color: #BBBBBB;
  opacity: 1;
}
#chub-search-panel .input > input[type="text"]:focus-visible,
#chub-search-panel .input > select:focus-visible {
  outline: 0.2rem solid var(--sec);
  outline-offset: 0.1rem;
}
/* the only field the drawing gives a chevron: Select Total Time, a 22px grey
 * disc 17 in from the field's right edge. */
#chub-search-panel .input--chevron::after {
  content: "";
  position: absolute;
  right: 1.7rem; top: 2.2rem;
  width: 2.2rem; height: 2.2rem;
  margin-top: -1.1rem;
  border-radius: 999px;
  background: #E1E1E1
    no-repeat center/0.9rem 0.65rem
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' fill='none' stroke='%234a4a4a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 1l2.5 2.5L6 1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
}

#chub-search-panel .buttons { text-align: center; padding: 0; }
#chub-search-panel .buttons .btn {
  display: inline-block;
  width: 19rem;                /* drawn 190 */
  height: 4.9rem;              /* drawn 49 */
  line-height: 4.9rem;
  border: 0;
  border-radius: 999px;        /* drawn: fully round */
  background: #3BB81E;         /* drawn 59,184,30 */
  color: #fff;
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
}
#chub-search-panel .buttons .btn:hover { background: #34A61B; }
/* the caret inside "Filters ^" is OURS, and the theme's
   `#list-filter .filter .expander span` would absolutely position it at the
   panel's centre and paste its own chevron image on top -- the caret vanished
   and the word sat alone, while a check that only asked whether it had a
   width said yes. One id, two classes and a type has to be beaten. */
#chub-search-panel .filter .expander span.chub-caret {
  position: static;
  width: 1.1rem; height: 1.1rem;
  padding: 0;
  color: inherit;
  font-size: 0;
  /* the panel is open whenever this button is on screen, so it points UP */
  transform: translateY(0.25rem) rotate(-135deg);
}
#chub-search-panel .filter .expander span.chub-caret::after { content: none; }

/* "Filters ^", centred beneath, collapses the panel */
#chub-search-panel .expander {
  display: block;
  width: auto; height: auto;
  position: static;
  margin: 1.4rem auto 0;       /* the drawing measures the INK and this box is
                                  a line box: 1.0 put the word 4px high, and
                                  the 0.4 it gains here comes off the panel's
                                  bottom padding so the panel's own edge does
                                  not move */
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}

/* mobile: the same boxes, stacked, nothing outside its box ---------- spec 5
 * MEASURED OFF TOM'S PHONE CAPTURE, not scaled down from the desktop drawing,
 * and therefore still in px: `Screenshot_20260905_213327_Chrome.jpg` is
 * live's Followers list on his phone -- 1440 device px at 390 CSS, so 3.692
 * device px to one of ours -- and it gives, in our pixels:
 *
 *     the column          19.0 .. 370.8   (ours renders 20 .. 370)
 *     pill box height     38.5, 38.4, 38.4
 *     row gap             7.3
 *     pill inset          23.5 from the card's left edge
 *     gap between pills   7.0, measured to the NEXT PILL'S OUTLINE
 *
 * The desktop pill is 42.7 with 4.4px gaps because that is what Tom DREW; the
 * phone one is 38 with 7px gaps because that is what he CAPTURED. They are
 * two references and they disagree, which is why neither is derived from the
 * other. */
@media (max-width: 767px) {
  .chub-listhead { margin-bottom: 20px; }
  .chub-listhead__title { height: auto; border-radius: 14px; padding: 12px 18px; }
  .chub-listhead__title h1 { font-size: 21px; white-space: normal; }
  /* the same tuck on the phone, and `0 0 14px 14px` rather than `14px`: a
     radius on the card's TOP corners is literally the notch Tom reported. */
  .chub-listhead__tabs {
    height: auto; min-height: 0; border-radius: 0 0 14px 14px;
    padding: 26px 23px 14px;
    row-gap: 7px;
    column-gap: 7px;
    margin-top: -12px;
  }
  .chub-listhead__tabs[data-fit="1"] { height: auto; flex-wrap: wrap; }
  .chub-pill { height: 38px; line-height: 36px; font-size: 13px;
               border-radius: 10px; padding: 0 10px; }
  .chub-filterbar { width: auto; max-width: none; margin: -4px 10px 0;
                    height: 48px; font-size: 15px;
                    border-radius: 0 0 14px 14px; }
  .chub-listsearch { width: auto; max-width: none; margin: 12px 10px 0; }
  .chub-listsearch input { height: 42px; font-size: 14px;
                           padding: 0 14px 0 40px; }
  .chub-listsearch::before { left: 14px; top: 13px; width: 16px; height: 16px;
                             background-size: 16px 16px; }
  /* still `flow-root`, not `block`: the search field's top margin would
     collapse out through this box on the phone exactly as it did on the
     desktop, and take the spacing under the card with it. */
  .chub-listhead__bottom { min-height: 0; display: flow-root; }
  .chub-listhead__bottom .organized-by {
    position: static; width: auto; margin: 10px 10px 0;
  }
  .chub-listhead__bottom .organized-by .organized-by__box {
    height: 44px; border-radius: 12px; padding: 0 18px 0 16px;
  }
  .chub-listhead__bottom .organized-by .organized-by__label { font-size: 11px; }
  .chub-listhead__bottom .organized-by .organized-by__value,
  .chub-listhead__bottom .organized-by select { font-size: 13px; }
  .organized-by__list { border-radius: 12px; }
  .organized-by__list li { font-size: 13px; padding: 8px 12px; }
  .chub-searchpanel {
    position: static; width: auto; max-width: none;
    margin: -4px 10px 0; padding: 20px 16px 16px;
    border-radius: 0 0 16px 16px;   /* its top is under the card here too */
  }
  .chub-searchpanel .close { right: 16px; top: 14px; width: 24px; height: 24px; }
  .chub-searchpanel .inputs-row { grid-template-columns: 1fr; row-gap: 8px; }
  #chub-search-panel .input > input[type="text"],
  #chub-search-panel .select2-container .select2-selection,
  #chub-search-panel .input > select {
    height: 38px; min-height: 38px; line-height: 36px; font-size: 14px;
    padding: 0 12px;
  }
  #chub-search-panel .buttons .btn { width: 150px; height: 40px;
                                     line-height: 40px; font-size: 15px; }
  #chub-search-panel .expander { font-size: 15px; }
}

/* THE THEME'S OWN #list-filter RULES, NEUTRALISED INSIDE OUR PANEL.
 *
 * `static/theme/css/_dist/style.css:10578` styles `#list-filter` for the
 * archive pages: a -8rem pull-up, a 6rem/5rem padded grey box with its own
 * bottom radius, an absolutely-positioned expander, and -- the one that
 * matters --
 *
 *     #list-filter .filter:not(.opened) form { max-height: 0; padding: 0;
 *                                              opacity: 0 }
 *
 * Live's markup carries the typo `class="filter ope ned"`, so `.opened` never
 * matches and the FORM IS COLLAPSED TO NOTHING until the theme's JS adds the
 * class. Our panel is opened and closed by us, not by that class, so every one
 * of those rules has to be undone here -- by selector, not by editing the
 * ported stylesheet, which is compared against live file by file.
 *
 * Specificity: `.chub-searchpanel #list-filter .filter form` is one id, three
 * classes and a type, which beats the theme's one id, two classes and a type.
 */
.chub-searchpanel #list-filter {
  margin: 0;
  position: static;
  z-index: auto;
}
.chub-searchpanel #list-filter .controls { display: block; gap: 0; }
.chub-searchpanel #list-filter .filter {
  padding: 0;
  overflow: visible;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.chub-searchpanel #list-filter .filter form,
.chub-searchpanel #list-filter .filter:not(.opened) form {
  max-height: none;
  padding: 0;
  margin: 0;
  opacity: 1;
  overflow: visible;
  transition: none;
}
.chub-searchpanel #list-filter .filter form .title {
  /* the TYPOGRAPHY belongs here too, not with the other panel rules. The
     theme's selector is `#list-filter .filter form .title` -- one id, two
     classes, one type -- which outranks `#chub-search-panel .title`, so its
     `line-height: 3rem` survived and put the first input low while the font
     size looked right. */
  position: static;
  white-space: normal;
  display: block;
  font-size: 1.61rem;
  font-weight: 500;
  line-height: 1.2;
  color: #8a8a8a;
  margin: 0 0 1.88rem;
}
.chub-searchpanel #list-filter .filter .expander {
  width: auto;
  height: auto;
  position: static;
}

/* the chef profile's "Recipes by Cook" tab: the bottom row alone, with no
 * title box and no tab card above it -- that page has a header of its own. */
/* THERE IS NO CARD HERE TO TUCK UNDER. The bar and the panel are tucked 4px
   up behind the tab card on every list that has one; this page has the cook's
   own header instead, so the tuck would put the bar's visible top 4px above
   where the drawing puts it -- which is exactly what the comparison said. */
.chub-listhead--bottomonly { margin-top: -2rem; }
.chub-listhead--bottomonly .chub-filterbar {
  border-radius: 1.72rem;
  margin-top: 0;
  height: 5.65rem;
}
.chub-listhead--bottomonly .chub-searchpanel {
  top: 0;
  border-radius: 2.65rem;
  padding-top: 2.25rem;
}