/* Generated by export_portal_widget.py from web/squarespace-widget.html.
   Do not hand-edit -- edit the source file and regenerate. */
  /* WIDTH, 23 Sept 2026. This page (Lewis: "entirely devoted to the My
     Week view for customers") has nothing sharing it with the widget,
     so a narrow centered column just reads as wasted space on either
     side. Widened from 640px, but deliberately still capped rather
     than going edge to edge: the content is still mostly prose --
     instructions, ingredient lists -- and a line of text much past
     roughly 90-100 characters gets measurably harder to read no
     matter how much horizontal room there is to spend. 880px is
     still a generous jump (about 40% more) while keeping that line
     length sane at this font size. The auth card (.bf-auth-card,
     above) keeps its own separate 400px cap regardless -- a login
     form has no business being as wide as a recipe. */
  #bf-portal { font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
              color: #1a1a1a; max-width: 880px; margin: 0 auto; }
  #bf-portal * { box-sizing: border-box; }
  #bf-portal .bf-p-state { padding: 28px 4px; color: #555; }
  #bf-portal .bf-err { color: #8a1f11; background: #fbeceb; border: 1px solid #e3b3ac;
                       border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
  #bf-portal .bf-err p { margin: 0 0 10px; }
  #bf-portal .bf-err .bf-why { font-size: 12.5px; color: #9a5b52; margin: 10px 0 0; }
  #bf-portal .bf-err .bf-btn { border-color: #8a1f11; background: #fff; color: #8a1f11; }
  /* THE LOGIN SCREENS -- sign in, the access-code fallback, and choosing
     a password from a link. Polish pass, 23 Sept 2026: these used to be
     bare text and inputs floating directly on whatever the Squarespace
     page looked like behind them. This is the first thing most clients
     ever see of the whole system, so it gets its own card rather than
     inheriting the plain, edge-to-edge layout the week view uses once
     someone is already signed in. */
  #bf-portal .bf-auth-wrap { padding: 24px 16px; }
  #bf-portal .bf-auth-card { max-width: 400px; margin: 0 auto; background: #fff;
    border: 1px solid #e6e6e6; border-radius: 14px; padding: 32px 28px;
    box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 10px 30px rgba(20,20,20,.06); }
  #bf-portal .bf-auth-title { margin: 0 0 6px; font-size: 22px; font-weight: 700;
    text-align: center; letter-spacing: -.01em; }
  #bf-portal .bf-auth-sub { margin: 0 0 22px; color: #666; font-size: 14px;
    text-align: center; }
  #bf-portal .bf-auth-card .bf-err, #bf-portal .bf-auth-card .bf-note {
    text-align: left; margin: 0 0 18px; }
  /* "or", between the primary form and the alternative ways in -- a
     divider gives the eye somewhere to land, rather than the form and
     the text links running straight into each other. */
  #bf-portal .bf-auth-divider { display: flex; align-items: center; gap: 12px;
    margin: 22px 0; color: #999; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; }
  #bf-portal .bf-auth-divider::before, #bf-portal .bf-auth-divider::after {
    content: ''; flex: 1; height: 1px; background: #e6e6e6; }
  #bf-portal .bf-code-form { display: flex; gap: 10px; flex-wrap: wrap; padding: 0; }
  /* The sign-in form. Stacked rather than inline: two labelled fields
     side by side read as a search bar on a phone, and a password
     manager fills a stacked pair more reliably. No explicit width or
     align-self on the button below -- flex-direction:column's own
     default (align-items: stretch) is what makes every field AND the
     button fill the card; the only old rule that fought that
     (align-self: flex-start) was what made the button shrink to hug
     its own text before. */
  #bf-portal .bf-signin { display: flex; flex-direction: column; gap: 16px; }
  #bf-portal .bf-field { display: flex; flex-direction: column; gap: 6px; }
  #bf-portal .bf-field span { font-size: 13px; font-weight: 600; color: #444; }
  #bf-portal .bf-field input { padding: 12px 14px; border: 1px solid #d4d4d4;
    border-radius: 9px; font: 16px/1.3 inherit; background: #fff; }
  /* 16px, not 15 -- a focused input under 16px is what makes iOS Safari
     zoom the whole page in, which then has to be zoomed back out by
     hand to keep filling the form. */
  #bf-portal .bf-field input:focus, #bf-portal .bf-code-form input:focus {
    outline: none; border-color: #1f5d4c; box-shadow: 0 0 0 3px rgba(31,93,76,.15); }
  #bf-portal .bf-signin .bf-btn[disabled] { opacity: .6; cursor: default; }
  /* The alternatives. Real buttons, styled as links: they do things,
     so they have to be reachable by keyboard and announced as buttons,
     which an <a href="#"> is not. The access code is set apart and
     muted -- every existing client has one, but it is the third way
     in, not an equal to the other two. */
  #bf-portal .bf-alts { display: flex; flex-direction: column; align-items: center;
    gap: 12px; }
  #bf-portal .bf-alts-row { display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 8px; }
  #bf-portal .bf-alts-sep { color: #ccc; }
  #bf-portal .bf-linkish { background: none; border: 0; padding: 0;
    font: inherit; font-size: 13.5px; color: #1f5d4c; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; }
  #bf-portal .bf-linkish:hover { color: #14402f; }
  #bf-portal .bf-linkish[disabled] { opacity: .6; cursor: default; }
  #bf-portal .bf-linkish.bf-quiet { color: #888; font-size: 12.5px; }
  #bf-portal .bf-linkish.bf-quiet:hover { color: #555; }
  #bf-portal .bf-note { background: #e4efe9; color: #1f5d4c; border-radius: 6px;
    padding: 10px 12px; margin: 8px 0; }
  /* A small status line on every screen this widget draws -- the auth
     screens and the signed-in week alike -- so who (if anyone) is
     signed in, and the way out, are never more than a glance away. */
  #bf-portal .bf-auth-strip { display: flex; justify-content: flex-end;
    align-items: center; gap: 6px; font-size: 12px; color: #888;
    margin: 0 0 10px; }
  #bf-portal .bf-code-form input { flex: 1 1 180px; padding: 12px 14px; border: 1px solid #d4d4d4;
                                   border-radius: 9px; font: 16px/1.3 inherit; }
  /* Higher specificity than the base #bf-portal .bf-btn rule below
     (two classes vs one), so this wins on its own merits rather than
     needing to sit after that rule in the file. Covers the Sign-in
     button, Save-and-sign-in, and Continue -- everything inside the
     card gets the same rounder, slightly taller treatment. */
  #bf-portal .bf-auth-card .bf-btn { padding: 13px 20px; font-size: 15px;
    border-radius: 9px; }
  @media (max-width: 380px) {
    #bf-portal .bf-auth-card { padding: 24px 18px; border-radius: 12px; }
  }
  #bf-portal .bf-code-form button, #bf-portal .bf-btn {
    font: 600 14px/1 inherit; padding: 10px 16px; min-height: 40px; border-radius: 6px;
    border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff; cursor: pointer;
  }
  #bf-portal .bf-btn:hover { background: #000; }
  #bf-portal .bf-btn.bf-ghost { background: #fff; color: #1a1a1a; }
  /* The answer this night currently carries. Filled and ticked, so it
     reads as chosen rather than merely available -- and the other
     button stays beside it, so changing your mind is one tap. */
  #bf-portal .bf-btn.bf-chosen { background: #e4efe9; color: #1f5d4c;
                                 border-color: #1f5d4c; cursor: default; }
  #bf-portal .bf-btn.bf-chosen[aria-pressed="true"]:hover { background: #e4efe9; }
  #bf-portal .bf-btn.bf-warn { background: #fff; color: #97730a; border-color: #97730a; }
  #bf-portal .bf-btn:disabled { opacity: .5; cursor: default; }
  #bf-portal .bf-head { display: flex; align-items: baseline; justify-content: space-between;
                        flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
  #bf-portal .bf-head h2 { margin: 0; font-size: 20px; }
  #bf-portal .bf-pill { font: 600 11px/1 inherit; text-transform: uppercase; letter-spacing: .04em;
                        padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
  #bf-portal .bf-pill[data-status="draft"], #bf-portal .bf-pill[data-status="sent"] { color: #97730a; background: #f7efd8; }
  #bf-portal .bf-pill[data-status="changes_requested"] { color: #2f6fa0; background: #e3eff7; }
  #bf-portal .bf-pill[data-status="approved"] { color: #1f5d4c; background: #e4efe9; }
  #bf-portal .bf-hint { color: #666; font-size: 13.5px; margin: 4px 0 18px; }

  /* --- the week's state, as a picture rather than a sentence ---------
     Three states, one palette, used in the same order everywhere: the
     pill, the bar, the counts, the day strip and each night's own chip.
     Every one of them carries a GLYPH as well as a colour -- a client
     who cannot tell the green from the amber still reads the tick. */
  #bf-portal .bf-summary { margin: 2px 0 20px; }
  #bf-portal .bf-bar { display: flex; height: 8px; border-radius: 999px;
                       overflow: hidden; background: #ececec; margin: 0 0 10px; }
  #bf-portal .bf-bar-seg { height: 100%; transition: flex-grow .25s ease; }
  #bf-portal .bf-bar-seg[data-kind="approved"] { background: #3f8a72; }
  #bf-portal .bf-bar-seg[data-kind="changes"]  { background: #4d8ec2; }
  #bf-portal .bf-bar-seg[data-kind="waiting"]  { background: #d8c48a; }
  #bf-portal .bf-counts { display: flex; flex-wrap: wrap; gap: 6px 16px;
                          font-size: 13.5px; color: #444; margin: 0 0 14px; }
  #bf-portal .bf-count { display: inline-flex; align-items: center; gap: 6px; }
  #bf-portal .bf-count b { font-weight: 600; }
  #bf-portal .bf-count .bf-g { font-size: 12px; line-height: 1; }
  #bf-portal .bf-count[data-kind="approved"] .bf-g { color: #1f5d4c; }
  #bf-portal .bf-count[data-kind="changes"]  .bf-g { color: #2f6fa0; }
  #bf-portal .bf-count[data-kind="waiting"]  .bf-g { color: #97730a; }

  /* The whole week on one line, and a way to get to the nights that
     still need you. Each marker is a real button: 40px of tap target on
     a phone, and keyboard-reachable. */
  #bf-portal .bf-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px;
                        padding: 0; list-style: none; }
  #bf-portal .bf-day { min-width: 40px; min-height: 40px; padding: 4px 8px;
                       border-radius: 8px; border: 1px solid transparent;
                       font: 600 12px/1.25 inherit; cursor: pointer;
                       display: flex; flex-direction: column; align-items: center;
                       justify-content: center; gap: 2px; }
  #bf-portal .bf-day .bf-g { font-size: 13px; }
  #bf-portal .bf-day[data-state="approved"] { background: #e4efe9; color: #1f5d4c; border-color: #bcd8cd; }
  #bf-portal .bf-day[data-state="changes"]  { background: #e3eff7; color: #2f6fa0; border-color: #b7d3e8; }
  #bf-portal .bf-day[data-state="waiting"]  { background: #f7efd8; color: #97730a; border-color: #e4d3a6; }
  #bf-portal .bf-day[data-state="empty"]    { background: #f2f2f2; color: #8a8a8a; border-color: #e2e2e2; }
  #bf-portal .bf-day:hover { filter: brightness(.97); }
  #bf-portal .bf-day:focus-visible, #bf-portal .bf-btn:focus-visible {
    outline: 2px solid #1a1a1a; outline-offset: 2px; }

  /* Every night says where it stands, including the ones you have not
     got to yet. Before this you had to read which BUTTONS a card had to
     know whether you had already dealt with it. */
  #bf-portal .bf-slot-chip { display: inline-flex; align-items: center; gap: 6px;
                             font: 600 11px/1 inherit; text-transform: uppercase;
                             letter-spacing: .04em; padding: 5px 9px; border-radius: 999px;
                             margin: 0 0 6px; }
  #bf-portal .bf-slot-chip[data-state="approved"] { color: #1f5d4c; background: #e4efe9; }
  #bf-portal .bf-slot-chip[data-state="changes"]  { color: #2f6fa0; background: #e3eff7; }
  #bf-portal .bf-slot-chip[data-state="waiting"]  { color: #97730a; background: #f7efd8; }
  #bf-portal .bf-slot[data-state="waiting"] { border-left: 3px solid #e4d3a6; padding-left: 12px; }
  #bf-portal .bf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    #bf-portal .bf-bar-seg { transition: none; }
  }
  #bf-portal .bf-approve-all { display: flex; align-items: center; justify-content: space-between;
                               gap: 10px; background: #f5f5f5; border-radius: 8px; padding: 12px 14px;
                               margin: 0 0 18px; flex-wrap: wrap; }
  #bf-portal .bf-slot { border-top: 1px solid #e2e2e2; padding: 16px 2px; }
  #bf-portal .bf-slot:first-of-type { border-top: none; }
  #bf-portal .bf-slot-day { font: 600 12px/1 inherit; text-transform: uppercase; letter-spacing: .05em;
                            color: #888; margin: 0 0 4px; }
  #bf-portal .bf-slot-name { font-size: 17px; font-weight: 600; margin: 0 0 2px; }
  #bf-portal .bf-slot-facts { color: #666; font-size: 13.5px; margin: 0 0 8px; }
  #bf-portal .bf-slot-fb { font-size: 13.5px; margin: 8px 0; padding: 8px 10px; border-radius: 6px; }
  #bf-portal .bf-slot-fb.bf-fb-approved { background: #e4efe9; color: #1f5d4c; }
  #bf-portal .bf-slot-fb.bf-fb-changes { background: #e3eff7; color: #2f6fa0; }
  #bf-portal .bf-slot-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
  /* The standing-order button sits apart from the two review buttons:
     it answers a different question, and it is not one a client has
     to answer at all. */
  #bf-portal .bf-btn.bf-keep { margin-left: auto; font-size: 13px; }
  #bf-portal .bf-btn.bf-keep.bf-chosen { background: #f4ecd8; color: #6b4e16;
    border-color: #d8c48a; }
  #bf-portal details.bf-recipe { margin: 8px 0; }
  #bf-portal details.bf-recipe summary { cursor: pointer; color: #1a1a1a; font-size: 13.5px;
                                         text-decoration: underline; }
  #bf-portal .bf-recipe-body { padding: 10px 2px 2px; font-size: 14px; }
  #bf-portal .bf-recipe-body ul { margin: 4px 0 12px; padding-left: 20px; }
  #bf-portal .bf-recipe-body ol { margin: 4px 0; padding-left: 20px; }
  #bf-portal .bf-flag-form { display: none; margin: 8px 0; padding: 12px; background: #fafafa;
                            border-radius: 8px; }
  #bf-portal .bf-flag-form.bf-open { display: block; }
  #bf-portal .bf-flag-form select, #bf-portal .bf-flag-form textarea {
    width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px;
    margin: 0 0 8px;
  }
  #bf-portal .bf-flag-form textarea { min-height: 64px; resize: vertical; }
  #bf-portal .bf-shop { background: #f5f5f5; border-radius: 8px; padding: 14px 16px; margin-top: 22px; }
  #bf-portal .bf-shop h3 { margin: 0 0 6px; font-size: 16px; }
  #bf-portal .bf-shop .bf-aisle { font-weight: 600; margin: 12px 0 4px; }
  #bf-portal .bf-shop ul { margin: 0 0 4px; padding-left: 20px; }
  #bf-portal .bf-shop p.bf-cov { color: #666; font-size: 13px; margin: 10px 0 0; }