/* Food Cost — what a dish costs to make against what it sells for.
   The screen wears Loss Prevention's skin, as Gift cards, Instagram, Tips and Waste Logs do: the
   --lp-* tokens, the Fraunces/Karla pair, the top bar, badge and sidebar come from web/styles.css,
   where the Lovable-derived block names .food-cost-main beside .gift-cards-main. What is here is
   this screen's own components in that language.

   The screen is a table, because that is what the question is: three hundred products, a dozen
   figures each, read down a column. So almost all of this is one table's typography and alignment
   -- figures right-aligned on a shared edge, tabular numerals so a column of them lines up, a
   hairline between rows and nothing else between them, the sorted column's header the only thing
   in the accent.

   Colour means one of three things and never decoration: the chosen range, store or page; the
   direction of a change; and a figure that is missing rather than zero. Nothing is tinted for being
   expensive -- the ordering carries that, and a tint on most of three hundred rows is wallpaper. */

.food-cost-main{
  --fc-good:#2f7a5b;
  --fc-bad:var(--lp-high);
  --fc-good-tint:color-mix(in srgb, var(--fc-good) 14%, var(--lp-card));
  --fc-good-ink:color-mix(in srgb, var(--fc-good) 80%, var(--lp-ink));
  --fc-bad-tint:color-mix(in srgb, var(--fc-bad) 12%, var(--lp-card));
  --fc-bad-ink:color-mix(in srgb, var(--fc-bad) 85%, var(--lp-ink));
  /* The middle of the three food cost states. Amber of its own rather than the data-gap tint,
     which sits so close to the card that a 31% and a 22% read the same across a kitchen. */
  --fc-warn:#b8761c;
  --fc-warn-tint:color-mix(in srgb, var(--fc-warn) 22%, var(--lp-card));
  --fc-warn-ink:color-mix(in srgb, var(--fc-warn) 70%, var(--lp-ink));
  /* A gap in the data -- an item with no recipe, a component nothing could price -- is Loss
     Prevention's medium signal, which is the honest reading: something to go and fix, not an alarm. */
  --fc-gap-tint:color-mix(in srgb, var(--lp-medium) 18%, var(--lp-card));
  --fc-gap-ink:color-mix(in srgb, var(--lp-medium) 40%, var(--lp-ink));
  --fc-link:color-mix(in srgb, var(--lp-accent) 72%, var(--lp-ink));
  --fc-bar:color-mix(in srgb, var(--lp-accent) 70%, var(--lp-card));
  --fc-bar-quiet:color-mix(in srgb, var(--lp-muted) 26%, var(--lp-card));
  --fc-grid:color-mix(in srgb, var(--lp-line) 80%, transparent);
}
/* The main is a grid, so its header and shell are grid items with min-width:auto; both may shrink. */
.food-cost-main .topbar,.food-cost-main .module-shell{min-width:0}
.food-cost-main .module-shell{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:0 clamp(16px,3vw,44px) 54px}
.food-cost-main .fc-page{max-width:1480px;margin:0 auto;padding-top:28px;display:grid;gap:20px;min-width:0}
.food-cost-main :is(.fc-page,.fc-body,.fc-kpis,.fc-panel)>*{min-width:0}
.food-cost-main .fc-body{display:grid;gap:20px;transition:opacity .18s ease}
.food-cost-main .fc-page.is-loading .fc-body{opacity:.55}
.food-cost-main :is(button,a,select,input,[tabindex]):focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}

/* ── The title, the page strip, the coverage line, then the filters ──────────────────────────── */
.food-cost-main .fc-head{display:grid;gap:12px;min-width:0}
.food-cost-main .fc-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;min-width:0}
.food-cost-main .fc-title h2{margin:0;font-family:var(--lp-display);font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--lp-ink)}
/* The sidebar, as every other app on this skin draws it (reviews.css does the same for Reviews,
   and web/styles.css for Loss Prevention): the pages, with the one you are on a filled dark pill.
   Without this the shell's own pink sidebar and its cream active pill show through, and the app
   reads as if it came from somewhere else. The app card says what the top bar and the pages
   already say, so it is kept for the collapsed rail and hidden on the full sidebar. */
body[data-module="food-cost"] [data-module-sidebar="food-cost"] .agent{display:none}
body[data-nav="rail"][data-module="food-cost"] .sidebar:not(.open) [data-module-sidebar="food-cost"] .agent{display:flex}
body[data-module="food-cost"] [data-module-sidebar="food-cost"] .agent-label{margin:22px 12px 4px;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em}
body[data-module="food-cost"] .food-cost-nav{gap:3px;margin-top:8px}
body[data-module="food-cost"] .food-cost-nav .lp-nav-item{min-height:40px;padding:9px 12px;border-radius:10px;color:color-mix(in srgb, var(--lp-ink) 88%, var(--lp-muted));font-family:var(--lp-body);font-size:14.5px;font-weight:500}
body[data-module="food-cost"] .food-cost-nav .lp-nav-item:hover{background:var(--lp-sidebar-hover);color:var(--lp-ink)}
body[data-module="food-cost"] .food-cost-nav .lp-nav-item.active{background:var(--lp-primary);color:var(--lp-primary-ink);font-weight:600;box-shadow:none}
body[data-module="food-cost"] .food-cost-nav .lp-nav-item.active svg{color:var(--lp-primary-ink);opacity:1}
body[data-module="food-cost"] .food-cost-nav .lp-nav-count{background:var(--lp-accent);color:#fff}
body[data-module="food-cost"] .food-cost-nav .lp-nav-item.active .lp-nav-count{background:rgb(255 255 255 / 22%);color:var(--lp-primary-ink)}

/* On a phone the sidebar is a drawer, so the pages are cloned into a scrolling strip here. */
.food-cost-main .fc-strip{display:none;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.food-cost-main .fc-strip::-webkit-scrollbar{display:none}
/* The cloned buttons are .lp-nav-item, which the sidebar lays out full width. Every one of those
   properties is restated here rather than overridden piecemeal, because the sidebar's rule is the
   more specific of the two in some cascades and a pill that inherits width:100% is a brown blob. */
.food-cost-main .fc-strip .lp-nav-item{flex:0 0 auto;width:auto;min-height:34px;height:34px;padding:0 13px;border:1px solid var(--lp-line);border-radius:999px;background:var(--lp-card);color:var(--lp-ink);font-size:13px;font-weight:560;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:none;text-align:left}
.food-cost-main .fc-strip .lp-nav-label{display:inline;font-size:13px}
.food-cost-main .fc-strip .lp-nav-item svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.food-cost-main .fc-strip .lp-nav-item.active{border-color:var(--lp-primary);background:var(--lp-primary);color:var(--lp-primary-ink);font-weight:600;box-shadow:none}
.food-cost-main .fc-strip .lp-nav-item.active svg{color:currentColor;opacity:1}
.food-cost-main .fc-strip .lp-nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:color-mix(in srgb, var(--lp-ink) 12%, transparent);font-size:11px;font-weight:700}

.food-cost-main .fc-coverage{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;color:var(--lp-muted);font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
.food-cost-main .fc-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--fc-good-tint);color:var(--fc-good-ink)}
.food-cost-main .fc-pill[data-tone="gap"]{background:var(--fc-gap-tint);color:var(--fc-gap-ink)}

.food-cost-main .fc-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.food-cost-main .fc-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.food-cost-main .fc-search{position:relative;display:flex;align-items:center;min-width:0;flex:0 1 268px}
.food-cost-main .fc-search-icon{position:absolute;left:11px;color:var(--lp-muted);font-size:15px;line-height:1;pointer-events:none}
.food-cost-main .fc-search input{width:100%;height:36px;padding:0 12px 0 31px;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-card);color:var(--lp-ink);font-family:var(--lp-body);font-size:14px}
.food-cost-main .fc-search input::placeholder{color:var(--lp-muted)}
.food-cost-main .fc-search input:focus-visible,.food-cost-main .fc-chip:focus-visible{outline:2px solid var(--lp-accent);outline-offset:1px}

/* A filter is a chip carrying its own value, so the state of the screen reads along one line. */
.food-cost-main .fc-chip-wrap{position:relative;min-width:0}
.food-cost-main .fc-chip{display:inline-flex;align-items:center;gap:6px;height:36px;max-width:100%;padding:0 11px;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-card);color:var(--lp-ink);font-family:var(--lp-body);font-size:13.5px;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.food-cost-main .fc-chip:hover{background:var(--lp-sidebar-hover,color-mix(in srgb, var(--lp-accent) 6%, var(--lp-card)))}
.food-cost-main .fc-chip-label{color:var(--lp-muted)}
.food-cost-main .fc-chip-value{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.food-cost-main .fc-chip-caret{color:var(--lp-muted);font-size:10px}
.food-cost-main .fc-chip[data-set="1"]{border-color:color-mix(in srgb, var(--lp-primary) 55%, var(--lp-line));background:color-mix(in srgb, var(--lp-primary) 7%, var(--lp-card))}
.food-cost-main .fc-chip.open{border-color:var(--lp-primary)}
.food-cost-main .fc-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:232px;max-height:340px;overflow:auto;display:grid;gap:2px;padding:6px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:0 10px 28px color-mix(in srgb, var(--lp-ink) 16%, transparent)}
.food-cost-main .fc-pop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--lp-ink);font-family:var(--lp-body);font-size:14px;text-align:left;cursor:pointer}
.food-cost-main .fc-pop-row:hover{background:color-mix(in srgb, var(--lp-accent) 8%, transparent)}
.food-cost-main .fc-pop-row[data-active="1"]{font-weight:600}
.food-cost-main .fc-pop-tick{color:var(--lp-accent);font-weight:700}
.food-cost-main .fc-pop-form{display:grid;gap:10px;padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--fc-grid)}
.food-cost-main .fc-pop-buttons{display:flex;gap:8px}
.food-cost-main .fc-field{display:grid;gap:6px;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.food-cost-main .fc-field :is(input,select){height:36px;padding:0 10px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;color-scheme:light}
.food-cost-main .fc-apply{height:36px;padding:0 16px;border:1px solid var(--lp-accent);border-radius:8px;background:var(--lp-accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer}

/* The food cost box: colour is the state and the only thing it means. */
.food-cost-main .fc-state{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:26px;padding:0 9px;border-radius:8px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.food-cost-main .fc-state[data-tone="good"]{background:var(--fc-good-tint);color:var(--fc-good-ink)}
.food-cost-main .fc-state[data-tone="warn"]{background:var(--fc-warn-tint);color:var(--fc-warn-ink)}
.food-cost-main .fc-state[data-tone="bad"]{background:var(--fc-bad-tint);color:var(--fc-bad-ink)}
.food-cost-main .fc-kpi-value .fc-state{min-width:0;height:auto;padding:2px 10px;border-radius:10px;font-family:var(--lp-display);font-size:30px;font-weight:600;letter-spacing:-.02em}
.food-cost-main .fc-legend{display:flex;align-items:center;gap:12px;color:var(--lp-muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.food-cost-main .fc-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.food-cost-main .fc-legend i{width:10px;height:10px;border-radius:3px}
.food-cost-main .fc-legend i[data-tone="good"]{background:var(--fc-good-tint);box-shadow:inset 0 0 0 1px var(--fc-good-ink)}
.food-cost-main .fc-legend i[data-tone="warn"]{background:var(--fc-warn-tint);box-shadow:inset 0 0 0 1px var(--fc-warn-ink)}
.food-cost-main .fc-legend i[data-tone="bad"]{background:var(--fc-bad-tint);box-shadow:inset 0 0 0 1px var(--fc-bad-ink)}
.food-cost-main .fc-note-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:color-mix(in srgb, var(--lp-ink) 7%, transparent);color:var(--lp-muted);font-size:11.5px;font-weight:600;white-space:nowrap}
.food-cost-main .fc-error{margin:0;padding:12px 14px;border:1px solid var(--fc-bad);border-radius:10px;background:var(--fc-bad-tint);color:var(--fc-bad-ink);font-size:14px}

/* ── Figures across the top ──────────────────────────────────────────────────────────────────── */
.food-cost-main .fc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px}
.food-cost-main .fc-kpi{padding:16px 18px;border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card);box-shadow:0 1px 2px color-mix(in srgb, var(--lp-ink) 5%, transparent);display:grid;gap:6px;align-content:start}
.food-cost-main .fc-kpi-label{margin:0;color:var(--lp-muted);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.food-cost-main .fc-kpi-value{margin:0;font-family:var(--lp-display);font-size:30px;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.food-cost-main .fc-kpi-foot{margin:0;color:var(--lp-muted);font-size:12.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.food-cost-main .fc-delta{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--fc-bad-tint);color:var(--fc-bad-ink)}
/* Down is good here: food cost falling is the point of the app. */
.food-cost-main .fc-delta[data-direction="down"]{background:var(--fc-good-tint);color:var(--fc-good-ink)}
.food-cost-main .fc-delta[data-direction="flat"],.food-cost-main .fc-delta[data-direction="none"]{background:color-mix(in srgb, var(--lp-muted) 12%, var(--lp-card));color:var(--lp-muted)}

/* ── A panel, and the table inside it ───────────────────────────────────────────────────────── */
.food-cost-main .fc-panel{border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card);box-shadow:0 1px 2px color-mix(in srgb, var(--lp-ink) 5%, transparent);overflow:hidden}
.food-cost-main .fc-panel-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;padding:16px 18px 14px}
.food-cost-main .fc-panel-head h3{margin:0;font-family:var(--lp-display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--lp-ink)}
.food-cost-main .fc-panel-head .fc-eyebrow{margin:0 0 3px;color:var(--lp-muted);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.food-cost-main .fc-panel-note{margin:0;padding:0 18px 14px;color:var(--lp-muted);font-size:12.5px;line-height:1.5}
.food-cost-main .fc-panel-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.food-cost-main .fc-ghost{height:34px;padding:0 13px;border:1px solid var(--lp-line);border-radius:8px;background:transparent;color:var(--fc-link);font-size:13px;font-weight:600;cursor:pointer}
.food-cost-main .fc-ghost:hover{background:color-mix(in srgb, var(--lp-accent) 7%, transparent)}

/* The table scrolls sideways inside its panel rather than widening the page. The first column is
   sticky, because a figure eight columns across means nothing without the name beside it. */
.food-cost-main .fc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--fc-grid);
  /* The right edge carries a shadow while there is more table to the right of it, and loses it at
     the end. `background-attachment:local` on the cover and `scroll` on the shadow is what makes
     that happen with no script: the cover travels with the content and uncovers the shadow. */
  background-image:linear-gradient(to left, var(--lp-card) 30%, transparent),
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--lp-ink) 16%, transparent), transparent);
  background-position:100% 0,100% 0;background-repeat:no-repeat;background-size:36px 100%,13px 100%;
  background-attachment:local,scroll}
.food-cost-main table.fc-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.food-cost-main .fc-table th,.food-cost-main .fc-table td{padding:11px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--fc-grid)}
.food-cost-main .fc-table :is(th,td).fc-text{text-align:left;white-space:normal}
.food-cost-main .fc-table thead th{position:sticky;top:0;z-index:2;background:color-mix(in srgb, var(--lp-ground) 94%, var(--lp-card));color:var(--lp-muted);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;vertical-align:bottom}
.food-cost-main .fc-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.food-cost-main .fc-table th[aria-sort] button{color:var(--fc-link)}
.food-cost-main .fc-table th .fc-caret{font-size:9px}
.food-cost-main .fc-table tbody tr:hover{background:color-mix(in srgb, var(--lp-accent) 4%, transparent)}
.food-cost-main .fc-table tbody tr:last-child :is(td,th){border-bottom:0}
.food-cost-main .fc-table .fc-sticky{position:sticky;left:0;z-index:1;background:var(--lp-card);min-width:200px;max-width:320px}
.food-cost-main .fc-table thead .fc-sticky{z-index:3;background:color-mix(in srgb, var(--lp-ground) 94%, var(--lp-card))}
.food-cost-main .fc-table tbody tr:hover .fc-sticky{background:color-mix(in srgb, var(--lp-accent) 4%, var(--lp-card))}
/* A column whose content is a phrase rather than a figure needs room, or the table squeezes it to
   its narrowest word and a row grows to four lines. The name clips rather than wraps: the share in
   front of it is the figure being read down the column, and the title carries the whole name. */
.food-cost-main .fc-table :is(th,td).fc-wide{min-width:208px;max-width:260px}
.food-cost-main .fc-table td.fc-wide .fc-item strong,.food-cost-main .fc-table td.fc-wide .fc-item small{
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.food-cost-main .fc-item{display:grid;gap:2px;justify-items:start}
.food-cost-main .fc-item strong{font-weight:600;font-size:13.5px;color:var(--lp-ink);line-height:1.3}
.food-cost-main .fc-item small{color:var(--lp-muted);font-size:11.5px;line-height:1.3}
.food-cost-main .fc-group th{padding:14px 12px 7px;text-align:left;font-family:var(--lp-display);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--lp-ink);text-transform:none;background:color-mix(in srgb, var(--lp-accent) 5%, var(--lp-card));position:static}
.food-cost-main .fc-none{color:var(--lp-muted)}
/* A figure that is missing rather than zero. The em dash carries it; the title says why. */
.food-cost-main .fc-gap{color:var(--fc-gap-ink);font-weight:600}
.food-cost-main .fc-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--fc-gap-tint);color:var(--fc-gap-ink)}
.food-cost-main .fc-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:21px;padding:0 6px;border-radius:999px;background:color-mix(in srgb, var(--lp-accent) 12%, var(--lp-card));color:var(--fc-link);font-size:12px;font-weight:700}
.food-cost-main .fc-count[data-zero="1"]{background:transparent;color:var(--lp-muted);font-weight:400}

/* A share, as a bar behind its own figure: the ranking is the ordering, and this is the magnitude. */
.food-cost-main .fc-share{display:inline-grid;grid-template-columns:1fr auto;align-items:center;gap:8px;min-width:112px;width:100%}
.food-cost-main .fc-track{height:6px;border-radius:999px;background:var(--fc-bar-quiet);overflow:hidden}
.food-cost-main .fc-fill{display:block;height:100%;border-radius:999px;background:var(--fc-bar)}
.food-cost-main .fc-swipe{margin:0;padding:9px 18px 13px;color:var(--lp-muted);font-size:12px}
.food-cost-main .fc-empty{margin:0;padding:26px 18px;color:var(--lp-muted);font-size:14px;line-height:1.55;text-align:center}

/* ── Cut list and modifier lists: an entry per candidate rather than a row, because each carries
   its reasons. An entry is not a card: a bordered box inside a bordered panel is the one thing the
   house style forbids, so the separation is a hairline and the space around it, as a table's is. */
.food-cost-main .fc-cuts{display:grid;padding:0 18px 4px}
.food-cost-main .fc-cut{padding:15px 0 16px;border-top:1px solid var(--fc-grid);display:grid;gap:9px}
.food-cost-main .fc-cut:first-child{border-top:0;padding-top:4px}
.food-cost-main .fc-cut-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 14px}
.food-cost-main .fc-cut-head strong{font-family:var(--lp-display);font-size:17px;font-weight:600;color:var(--lp-ink)}
.food-cost-main .fc-cut-figures{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--lp-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.food-cost-main .fc-cut-figures b{color:var(--lp-ink);font-weight:600}
.food-cost-main .fc-reasons{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--lp-ink);font-size:13.5px;line-height:1.5}

/* ── Report: a page built to print ──────────────────────────────────────────────────────────── */
.food-cost-main .fc-report{display:grid;gap:18px}
.food-cost-main .fc-report-head{display:grid;gap:4px}
.food-cost-main .fc-report-head h3{margin:0;font-family:var(--lp-display);font-size:24px;font-weight:600;color:var(--lp-ink)}
.food-cost-main .fc-report-head p{margin:0;color:var(--lp-muted);font-size:13px}
.food-cost-main .fc-notes{margin:0;padding:0 18px 18px 36px;display:grid;gap:6px;color:var(--lp-muted);font-size:12.5px;line-height:1.55}

/* ── Modifiers, price moves and in-house: sections inside a panel, and a direction pill ──── */
/* A sub-heading inside a panel. Three kinds of modifier list are three different pieces of work,
   and a reader who only has the second one should be able to find it without reading the first. */
.food-cost-main .fc-sub{margin:0;padding:4px 18px 8px;font-family:var(--lp-display);font-size:15.5px;font-weight:600;color:var(--lp-ink)}
.food-cost-main .fc-sub+.fc-panel-note{padding-bottom:10px}
.food-cost-main .fc-cut+.fc-sub{padding-top:14px}
/* Direction is the only thing colour says here: up costs money, down saves it. The sign is on the
   figure as well, so the pill never carries the meaning on its own. */
.food-cost-main .fc-move{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--fc-bar-quiet);color:var(--lp-ink)}
.food-cost-main .fc-move[data-direction="up"]{background:var(--fc-bad-tint);color:var(--fc-bad-ink)}
/* The weekly email: one switch and one button, on a row that stacks on a phone. */
.food-cost-main .fc-email-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;padding:4px 18px 18px}
.food-cost-main .fc-email-switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--lp-ink);cursor:pointer;line-height:1.45}
.food-cost-main .fc-email-switch input{width:20px;height:20px;flex:none;accent-color:var(--lp-accent);cursor:pointer}
.food-cost-main .fc-move[data-direction="down"]{background:var(--fc-good-tint);color:var(--fc-good-ink)}

@media (max-width:860px){
  .food-cost-main .fc-strip{display:flex}
  .food-cost-main .fc-title{display:grid;gap:10px}
  .food-cost-main .fc-search{flex:1 1 100%}
  .food-cost-main .fc-kpi-value{font-size:26px}
  .food-cost-main .fc-table th,.food-cost-main .fc-table td{padding:8px 10px}
  .food-cost-main .fc-table .fc-sticky{min-width:150px;max-width:190px}
  .food-cost-main .fc-cuts,.food-cost-main .fc-panel-note,.food-cost-main .fc-swipe,.food-cost-main .fc-sub{padding-left:14px;padding-right:14px}
  .food-cost-main .fc-notes{padding-left:32px;padding-right:14px}
  .food-cost-main .fc-panel-head{padding:14px 14px 12px}
}
/* On a phone a chip's sheet is wider than the chip and would hang off the right edge, so it is
   pinned to the row rather than to its own chip. */
@media (max-width:560px){
  /* Wrapped chips leave a ragged edge on a phone. Two to a row, the search above them and the
     actions below, is the same row laid out deliberately rather than however it happened to fall. */
  .food-cost-main .fc-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .food-cost-main .fc-search,.food-cost-main .fc-toolbar-right{grid-column:1/-1}
  .food-cost-main .fc-toolbar-right{margin-left:0}
  .food-cost-main .fc-toolbar-right > *{flex:1 1 0}
  .food-cost-main .fc-chip{width:100%;justify-content:flex-start}
  .food-cost-main .fc-chip-wrap{position:static}
  .food-cost-main .fc-pop{left:0;right:0;min-width:0;width:100%}
  .food-cost-main .fc-field :is(input,select){width:100%;min-width:0}
  .food-cost-main .fc-legend{gap:8px;font-size:11px}
}
/* A control a thumb has to hit on a tablet at the back door is 44px, like every other screen. */
@media (pointer:coarse){
  .food-cost-main :is(.fc-apply,.fc-chip,.fc-ghost,.fc-pop-row,.fc-strip .lp-nav-item){min-height:44px}
  .food-cost-main .fc-field :is(input,select),.food-cost-main .fc-search input{min-height:44px}
}

@media print{
  .food-cost-main .topbar,.food-cost-main .fc-toolbar,.food-cost-main .fc-strip,
  .food-cost-main .fc-panel-actions,.food-cost-main .fc-error,.food-cost-main .fc-swipe{display:none!important}
  .food-cost-main .module-shell{overflow:visible;height:auto;padding:0}
  .food-cost-main .fc-page{padding-top:0;max-width:none}
  .food-cost-main .fc-panel{break-inside:avoid;box-shadow:none;border-color:#bbb}
  .food-cost-main .fc-scroll{overflow:visible}
  .food-cost-main .fc-table{font-size:10px}
  .food-cost-main .fc-table thead th{position:static}
  .food-cost-main .fc-table .fc-sticky{position:static}
}