/* =========================================================================
   Receptus – design system
   A warm, artisanal kitchen theme layered on top of Bootstrap 5.3.
   Palette drawn from the brand mark: terracotta, honey amber, cream,
   roasted-cocoa ink and a touch of herb green.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — served from this site, not from Google Fonts.
   Fraunces (headings) and Inter (body text), both SIL Open Font License
   (see /fonts/OFL-*.txt). They are variable fonts: one file covers every
   weight from 400 to 700, and Fraunces also carries its optical-size axis.
   "latin" has everything Swedish needs (å ä ö é è ê à ü …) and is the file
   the layout preloads; "latin-ext" is only downloaded by the browser when a
   page uses a character outside it (the unicode-range decides).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   Tokens. Every colour on the site comes from here: the light set in :root,
   the dark set under :root[data-theme="dark"]. Nothing outside these two
   blocks writes a colour of its own (HeaderTests/ThemeTests check that).

   The theme is chosen by the small script at the top of _Layout's <head>:
   the visitor's stored choice (Auto / Ljust / Mörkt), or with Auto the
   device's setting. It sets data-theme on <html> for these tokens, and
   data-bs-theme for Bootstrap's own components.

   Tokens written as var(--rc-…) follow the theme by themselves (the logo
   and avatar ones, most of the Bootstrap overrides); only literal colours
   need a dark counterpart.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Page and surfaces */
  --rc-cream: #fbf6ee;          /* page background */
  --rc-cream-deep: #f4ead8;     /* chips, secondary buttons, soft fills */
  --rc-cream-line: #ede0ca;
  --rc-cream-hover: #ecdfc8;
  --rc-cream-active: #e6d6ba;
  --rc-cream-line-strong: #e0d0b2;
  --rc-surface: #ffffff;        /* cards, panels, inputs, menus */
  --rc-header-bg: rgba(255, 255, 255, .92);
  --rc-hero-start: var(--rc-cream-deep);
  --rc-hero-end: #f7efe0;
  --rc-hero-sheen-top: rgba(255, 255, 255, .55);
  --rc-hero-sheen-bottom: rgba(255, 255, 255, .15);

  /* Text */
  --rc-ink: #2c2620;
  --rc-ink-soft: #756859;
  --rc-ink-faint: #7a6f62;     /* only ever small text, so 4.5:1 like the rest */

  /* Terracotta. A shade darker than the brand colour (--rc-brand-terracotta),
     so links on the cream page and white text on buttons reach 4.5:1.
     In the dark set the "-dark" steps get lighter, not darker: they are the
     stronger-contrast variants (link hover, text on soft fills). */
  --rc-primary: #b45639;
  --rc-primary-dark: #a2472e;
  --rc-primary-darker: #883a25;
  --rc-primary-soft: #f7e6de;
  --rc-primary-border: #e9c9bd;
  --rc-primary-disabled: #d3a396;
  --rc-on-primary: #ffffff;     /* text on terracotta fills */

  /* Honey amber */
  --rc-accent: #e0a438;
  --rc-accent-dark: #bc831e;    /* lit stars: 3:1 on the cream panel */
  --rc-accent-soft: #fbeed4;
  --rc-accent-border: #f0dcae;
  --rc-accent-ink: #6a5326;     /* text on amber-soft fills */
  --rc-on-accent: #2c2620;

  /* Herb green */
  --rc-herb: #6f7d4c;
  --rc-herb-soft: #eef1e3;
  --rc-herb-border: #d8e0c4;
  --rc-herb-ink: #4a5a2f;
  --rc-on-herb: #ffffff;

  /* Errors (Bootstrap's red, a touch darker for 4.5:1 on the page) */
  --rc-danger: #d33342;
  --rc-danger-rgb: 211, 51, 66;
  --rc-danger-hover: #b02a37;
  --rc-on-danger: #ffffff;

  /* Lines */
  --rc-line: #e9ddc9;
  --rc-control-border: #8c8579; /* inputs, selects, the tag picker, checkboxes: 3:1 */
  --rc-star-empty: #8c8579;     /* unlit rating stars: 3:1 */

  /* Deep: the footer and cookie bar — dark in both themes */
  --rc-deep: #2a2018;
  --rc-deep-border: transparent;
  --rc-deep-ink: #d9cbb8;
  --rc-deep-ink-strong: #ffffff;
  --rc-deep-ink-faint: #a89a86;
  --rc-deep-link: #f0e6d6;
  --rc-deep-line: rgba(217, 203, 184, .18); /* dividers on the deep background */

  /* Inverse buttons (.btn-dark): dark on light pages, light on dark ones */
  --rc-inverse-bg: #2a2018;
  --rc-inverse-border: #2a2018;
  --rc-inverse-fg: #ffffff;
  --rc-inverse-hover: #3d2f22;
  --rc-inverse-hover-border: #3d2f22;
  --rc-inverse-hover-fg: #ffffff;
  --rc-inverse-active: #1f1710;

  /* The like button when not liked. Lighter than the icon buttons beside it
     here; in the dark theme terracotta, so it stays the one that stands out. */
  --rc-like-fg: var(--rc-ink-soft);
  --rc-like-border: var(--rc-line);

  /* Light and shadow */
  --rc-glow-amber: rgba(224, 164, 56, .10);
  --rc-glow-terracotta: rgba(190, 90, 60, .09);
  --rc-hero-glow-amber: rgba(224, 164, 56, .22);
  --rc-hero-glow-terracotta: rgba(190, 90, 60, .10);
  --rc-highlight: rgba(224, 164, 56, .35);
  --rc-shadow-sm: 0 1px 2px rgba(44, 32, 20, .05), 0 2px 8px rgba(44, 32, 20, .05);
  --rc-shadow-md: 0 6px 18px rgba(44, 32, 20, .09), 0 2px 6px rgba(44, 32, 20, .06);
  --rc-shadow-lg: 0 18px 44px rgba(44, 32, 20, .14);
  --rc-shadow-header: 0 6px 20px rgba(44, 32, 20, .10);
  --rc-focus-ring: rgba(180, 86, 57, .80); /* 3:1 against page and cards */

  /* The brand colours, fixed: the ones in images/brand/*.svg, the favicons
     and the share image. --rc-primary may move for contrast; these don't. */
  --rc-brand-terracotta: #be5a3c;
  --rc-brand-amber: #e0a438;

  /* Logo colours (_Logo.cshtml): the brand colours in the light theme. The
     dark theme uses the lighter terracotta and amber, the page colour for
     the R and the light text colour for the wordmark. */
  --logo-badge: var(--rc-brand-terracotta);
  --logo-badge-letter: var(--rc-cream);
  --logo-spark: var(--rc-brand-amber);
  --logo-word: var(--rc-ink);

  /* The account menu's avatar: neutral, so it isn't mistaken for the logo
     badge. Follows the theme the same way. */
  --avatar-bg: var(--rc-cream);
  --avatar-fg: var(--rc-ink);
  --avatar-border: var(--rc-line);

  --rc-radius: 16px;
  --rc-radius-sm: 11px;
  --rc-radius-pill: 999px;

  --rc-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --rc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Bootstrap variable overrides ----
     Declared on :root after bootstrap.css, so they also win over Bootstrap's
     own [data-bs-theme=dark] values; the *-rgb triples are literal and so
     have dark counterparts below. */
  --bs-body-bg: var(--rc-cream);
  --bs-body-bg-rgb: 251, 246, 238;
  --bs-body-color: var(--rc-ink);
  --bs-body-color-rgb: 44, 38, 32;
  --bs-body-font-family: var(--rc-font-body);
  --bs-emphasis-color: var(--rc-ink);
  --bs-emphasis-color-rgb: 44, 38, 32;
  --bs-heading-color: var(--rc-ink);

  --bs-primary: var(--rc-primary);
  --bs-primary-rgb: 180, 86, 57;
  --bs-primary-text-emphasis: var(--rc-primary-darker);
  --bs-primary-bg-subtle: var(--rc-primary-soft);
  --bs-primary-border-subtle: var(--rc-primary-border);

  --bs-danger: var(--rc-danger);
  --bs-danger-rgb: var(--rc-danger-rgb);
  --bs-danger-text-emphasis: var(--rc-danger);
  --bs-form-invalid-color: var(--rc-danger);
  --bs-form-invalid-border-color: var(--rc-danger);

  --bs-link-color: var(--rc-primary);
  --bs-link-color-rgb: 180, 86, 57;
  --bs-link-hover-color: var(--rc-primary-dark);
  --bs-link-hover-color-rgb: 162, 71, 46;

  --bs-border-color: var(--rc-line);
  --bs-border-color-translucent: rgba(44, 32, 20, .12);

  --bs-secondary-color: var(--rc-ink-soft);
  --bs-secondary-bg: var(--rc-cream-deep);
  --bs-tertiary-bg: var(--rc-cream);
  --bs-tertiary-color: var(--rc-ink-faint);
  --bs-light: var(--rc-cream);
  --bs-light-rgb: 251, 246, 238;

  --bs-focus-ring-color: var(--rc-focus-ring);
  --bs-code-color: var(--rc-primary-dark);
}

/* The dark set: near-neutral grey with a trace of warmth. Screen only — printing a page always uses
   the light set (the separate print page has its own styles anyway).
   Contrast: text and links at least 4.5:1 on every surface they sit on,
   control borders, stars and focus rings at least 3:1. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* Near-neutral grey with a trace of warmth: the base values below,
       everything else mixed from them and the brand colours, so nothing
       has a brown cast. */
    --rc-cream: #161615;
    --rc-cream-deep: #2a2928;
    --rc-cream-line: #31302f;
    --rc-cream-hover: #333231;
    --rc-cream-active: #3a3938;
    --rc-cream-line-strong: #474644;
    --rc-surface: #1f1e1d;
    --rc-header-bg: rgba(31, 30, 29, .92);
    /* The hero is a flat surface: no gradient, no sheen. */
    --rc-hero-start: var(--rc-surface);
    --rc-hero-end: var(--rc-surface);
    --rc-hero-sheen-top: transparent;
    --rc-hero-sheen-bottom: transparent;

    --rc-ink: #f0eeeb;
    --rc-ink-soft: #bdb9b4;
    --rc-ink-faint: #9a9692;

    --rc-primary: #e0784c;
    --rc-primary-dark: #ec9570;
    --rc-primary-darker: #f4b293;
    --rc-primary-soft: #3e2c25;      /* 16 % terracotta on the surface */
    --rc-primary-border: #704431;    /* 42 % */
    --rc-primary-disabled: #6c4230;
    --rc-on-primary: #161615;

    --rc-accent: #e8b04b;
    --rc-accent-dark: #f0c46e;
    --rc-accent-soft: #373023;       /* 12 % amber on the surface */
    --rc-accent-border: #5f4d2c;
    --rc-accent-ink: #f0d29a;
    --rc-on-accent: #161615;

    --rc-herb: #a3b474;
    --rc-herb-soft: #2f3027;
    --rc-herb-border: #494e39;
    --rc-herb-ink: #c9d6a3;
    --rc-on-herb: #161615;

    --rc-danger: #f08a7e;
    --rc-danger-rgb: 240, 138, 126;
    --rc-danger-hover: #f4a399;
    --rc-on-danger: #161615;

    --rc-line: #353433;
    --rc-control-border: #777572;
    --rc-star-empty: #777572;

    --rc-deep: #0e0e0d;
    --rc-deep-border: #353433;
    --rc-deep-ink: #d4d1cd;
    --rc-deep-ink-strong: #ffffff;
    --rc-deep-ink-faint: #a19d98;
    --rc-deep-link: #f0eeeb;
    --rc-deep-line: rgba(212, 209, 205, .16);

    /* Print / upload / edit on the recipe page: outlined, not filled — the
       like button next to them is the one to stand out. */
    --rc-inverse-bg: var(--rc-surface);
    --rc-inverse-border: var(--rc-control-border);
    --rc-inverse-fg: var(--rc-ink);
    --rc-inverse-hover: var(--rc-primary-soft);
    --rc-inverse-hover-border: var(--rc-primary-border);
    --rc-inverse-hover-fg: var(--rc-primary-darker);
    --rc-inverse-active: var(--rc-primary-soft);

    --rc-like-fg: var(--rc-primary);
    --rc-like-border: var(--rc-primary-border);

    /* No coloured glows behind the page or in the hero. */
    --rc-glow-amber: transparent;
    --rc-glow-terracotta: transparent;
    --rc-hero-glow-amber: transparent;
    --rc-hero-glow-terracotta: transparent;
    --rc-highlight: rgba(232, 176, 75, .30);
    --rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .20);
    --rc-shadow-md: 0 6px 18px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
    --rc-shadow-lg: 0 18px 44px rgba(0, 0, 0, .50);
    --rc-shadow-header: 0 6px 20px rgba(0, 0, 0, .40);
    /* 70 % terracotta over the page: 3.5:1. */
    --rc-focus-ring: rgba(224, 120, 76, .70);

    /* Fixed, as in the light set. */
    --rc-brand-terracotta: #be5a3c;
    --rc-brand-amber: #e0a438;

    --logo-badge: var(--rc-primary);
    --logo-badge-letter: var(--rc-cream);
    --logo-spark: var(--rc-accent);
    --logo-word: var(--rc-ink);

    --avatar-bg: var(--rc-cream);
    --avatar-fg: var(--rc-ink);
    --avatar-border: var(--rc-line);

    --bs-body-bg-rgb: 22, 22, 21;
    --bs-body-color-rgb: 240, 238, 235;
    --bs-emphasis-color-rgb: 240, 238, 235;
    --bs-primary-rgb: 224, 120, 76;
    --bs-link-color-rgb: 224, 120, 76;
    --bs-link-hover-color-rgb: 236, 149, 112;
    --bs-border-color-translucent: rgba(255, 255, 255, .10);
    --bs-light-rgb: 22, 22, 21;
  }
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--rc-cream);
  color: var(--rc-ink);
  font-family: var(--rc-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Safety net: nothing may make the page scroll sideways. "clip", not
     "hidden": hidden would make body a scroll container and break the sticky
     header. Not a fix in itself — see .popular-tags__list for the real one. */
  overflow-x: clip;
}

/* subtle warm texture behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--rc-glow-amber), transparent 60%),
    radial-gradient(950px 480px at 98% 0%, var(--rc-glow-terracotta), transparent 55%);
}

body > .container {
  flex: 1 0 auto;
}

main {
  padding-top: 1.75rem;
}

::selection {
  background: var(--rc-primary-soft);
  color: var(--rc-primary-darker);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--rc-font-head);
  font-weight: 600;
  color: var(--rc-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.12;
  font-variation-settings: "opsz" 120;
}

h2, .h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.7rem);
  line-height: 1.2;
  font-variation-settings: "opsz" 60;
}

h3, .h3 { font-size: 1.3rem; }

p { line-height: 1.65; }

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color .15s ease;
}

.text-muted,
.text-body-secondary { color: var(--rc-ink-soft) !important; }

.text-body-tertiary { color: var(--rc-ink-faint) !important; }

.lead { color: var(--rc-ink-soft); }

hr {
  border: 0;
  border-top: 1px solid var(--rc-line);
  opacity: 1;
  margin: 1.5rem 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--rc-radius-pill);
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-padding-y: 0.5rem;
  letter-spacing: 0.01em;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color);
}

.btn-primary {
  --bs-btn-color: var(--rc-on-primary);
  --bs-btn-bg: var(--rc-primary);
  --bs-btn-border-color: var(--rc-primary);
  --bs-btn-hover-color: var(--rc-on-primary);
  --bs-btn-hover-bg: var(--rc-primary-dark);
  --bs-btn-hover-border-color: var(--rc-primary-dark);
  --bs-btn-active-color: var(--rc-on-primary);
  --bs-btn-active-bg: var(--rc-primary-darker);
  --bs-btn-active-border-color: var(--rc-primary-darker);
  --bs-btn-disabled-color: var(--rc-on-primary);
  --bs-btn-disabled-bg: var(--rc-primary-disabled);
  --bs-btn-disabled-border-color: var(--rc-primary-disabled);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--rc-primary) 28%, transparent);
}

.btn-primary:hover { box-shadow: 0 10px 22px color-mix(in srgb, var(--rc-primary) 32%, transparent); }

.btn-accent {
  --bs-btn-color: var(--rc-on-accent);
  --bs-btn-bg: var(--rc-accent);
  --bs-btn-border-color: var(--rc-accent);
  --bs-btn-hover-color: var(--rc-on-accent);
  --bs-btn-hover-bg: var(--rc-accent-dark);
  --bs-btn-hover-border-color: var(--rc-accent-dark);
  --bs-btn-active-bg: var(--rc-accent-dark);
}

/* The recipe page's icon buttons (print, upload, edit): filled dark in the
   light theme, outlined on the surface in the dark one (see the tokens). */
.btn-dark {
  --bs-btn-color: var(--rc-inverse-fg);
  --bs-btn-bg: var(--rc-inverse-bg);
  --bs-btn-border-color: var(--rc-inverse-border);
  --bs-btn-hover-color: var(--rc-inverse-hover-fg);
  --bs-btn-hover-bg: var(--rc-inverse-hover);
  --bs-btn-hover-border-color: var(--rc-inverse-hover-border);
  --bs-btn-active-color: var(--rc-inverse-hover-fg);
  --bs-btn-active-bg: var(--rc-inverse-active);
  --bs-btn-active-border-color: var(--rc-inverse-hover-border);
}

/* Keyboard focus looks like hover, plus the ring. */
.btn-dark:focus-visible {
  color: var(--rc-inverse-hover-fg);
  background-color: var(--rc-inverse-hover);
  border-color: var(--rc-inverse-hover-border);
}

.btn-secondary {
  --bs-btn-color: var(--rc-ink);
  --bs-btn-bg: var(--rc-cream-deep);
  --bs-btn-border-color: var(--rc-cream-line);
  --bs-btn-hover-color: var(--rc-ink);
  --bs-btn-hover-bg: var(--rc-cream-hover);
  --bs-btn-hover-border-color: var(--rc-cream-line-strong);
  --bs-btn-active-color: var(--rc-ink);
  --bs-btn-active-bg: var(--rc-cream-active);
  --bs-btn-active-border-color: var(--rc-cream-line-strong);
}

.btn-outline-secondary {
  --bs-btn-color: var(--rc-ink-soft);
  --bs-btn-border-color: var(--rc-line);
  --bs-btn-hover-color: var(--rc-primary-darker);
  --bs-btn-hover-bg: var(--rc-primary-soft);
  --bs-btn-hover-border-color: var(--rc-primary-soft);
  --bs-btn-active-color: var(--rc-primary-darker);
  --bs-btn-active-bg: var(--rc-primary-soft);
  --bs-btn-active-border-color: var(--rc-primary-soft);
}

.btn-danger {
  --bs-btn-color: var(--rc-on-danger);
  --bs-btn-bg: var(--rc-danger);
  --bs-btn-border-color: var(--rc-danger);
  --bs-btn-hover-color: var(--rc-on-danger);
  --bs-btn-hover-bg: var(--rc-danger-hover);
  --bs-btn-hover-border-color: var(--rc-danger-hover);
  --bs-btn-active-color: var(--rc-on-danger);
  --bs-btn-active-bg: var(--rc-danger-hover);
  --bs-btn-active-border-color: var(--rc-danger-hover);
}

.btn-outline-danger {
  --bs-btn-color: var(--rc-danger);
  --bs-btn-border-color: var(--rc-danger);
  --bs-btn-hover-color: var(--rc-on-danger);
  --bs-btn-hover-bg: var(--rc-danger);
  --bs-btn-hover-border-color: var(--rc-danger);
  --bs-btn-active-color: var(--rc-on-danger);
  --bs-btn-active-bg: var(--rc-danger-hover);
  --bs-btn-active-border-color: var(--rc-danger-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--rc-primary-dark);
  --bs-btn-border-color: var(--rc-primary);
  --bs-btn-hover-color: var(--rc-on-primary);
  --bs-btn-hover-bg: var(--rc-primary);
  --bs-btn-hover-border-color: var(--rc-primary);
  --bs-btn-active-bg: var(--rc-primary-dark);
  --bs-btn-active-border-color: var(--rc-primary-dark);
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--rc-surface);
  --bs-card-border-color: var(--rc-line);
  --bs-card-border-radius: var(--rc-radius);
  --bs-card-inner-border-radius: calc(var(--rc-radius) - 1px);
  --bs-card-spacer-x: 1.35rem;
  --bs-card-spacer-y: 1.2rem;
  --bs-card-cap-bg: var(--rc-cream-deep);
  --bs-card-cap-color: var(--rc-ink);
  box-shadow: var(--rc-shadow-sm);
}

.card.border-secondary { --bs-card-border-color: var(--rc-line); }

.card.shadow-sm { box-shadow: var(--rc-shadow-md) !important; }

.card-header {
  border-bottom: 1px solid var(--rc-cream-line);
  font-family: var(--rc-font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-header strong { font-weight: 600; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
  border-color: var(--rc-control-border);
  border-radius: var(--rc-radius-sm);
  background-color: var(--rc-surface);
  color: var(--rc-ink);
  padding: 0.55rem 0.85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--rc-ink-faint); }

/* The padding above would otherwise cover the room Bootstrap keeps for the
   arrow, and a long option would run into it. Too long anyway: an ellipsis.
   Native selects only: Tom Select copies "form-select" onto its wrapper
   <div>, and overflow: hidden there clips its dropdown (the tag picker's
   list looked empty). */
select.form-select {
  padding-right: 2.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color);
}

.form-label {
  font-weight: 600;
  color: var(--rc-ink);
  margin-bottom: 0.3rem;
}

.form-check-input {
  border-color: var(--rc-control-border);
  background-color: var(--rc-surface);
}

.form-check-input:checked {
  background-color: var(--rc-primary);
  border-color: var(--rc-primary);
}

.form-check-input:focus {
  border-color: var(--rc-primary);
}

.input-group .btn { border-radius: var(--rc-radius-sm); }

/* Tag picker (Tom Select, on the new/edit recipe form). Its stylesheet
   hard-codes greys and Bootstrap blue; this puts it on the tokens, in both
   themes. (Pages load such stylesheets before this one, so equal
   specificity is enough.) The wrapper carries .form-select, so the box
   itself is styled by the rules above. */
.ts-wrapper.form-select.focus {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 0.22rem var(--rc-focus-ring);
}

.ts-wrapper.focus .ts-control { box-shadow: none; }

/* A chosen tag */
.ts-wrapper.multi .ts-control > div {
  background: var(--rc-cream-deep);
  border: 1px solid var(--rc-cream-line);
  border-radius: var(--rc-radius-pill);
  color: var(--rc-ink);
  padding: 1px 4px 1px 9px;
}

.ts-wrapper.multi .ts-control > div.active {
  background: var(--rc-primary-soft);
  border-color: var(--rc-primary-border);
  color: var(--rc-primary-darker);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { border-left-color: var(--rc-cream-line); }

.ts-wrapper.plugin-remove_button .item .remove:hover { background: var(--rc-cream-hover); }

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  background: var(--rc-surface);
  border-color: var(--rc-line);
  box-shadow: var(--rc-shadow-lg);
  color: var(--rc-ink);
}

.ts-dropdown .option { color: var(--rc-ink); }

.ts-dropdown .active,
.ts-dropdown .active.create {
  background-color: var(--rc-primary-soft);
  color: var(--rc-primary-darker);
}

.ts-dropdown [data-selectable] .highlight { background: var(--rc-highlight); }

.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
  background: var(--rc-surface);
  color: var(--rc-ink-soft);
}

/* -------------------------------------------------------------------------
   Dialogs (delete recipe, delete account)
   ------------------------------------------------------------------------- */
.modal {
  --bs-modal-bg: var(--rc-surface);
  --bs-modal-color: var(--rc-ink);
  --bs-modal-border-color: var(--rc-line);
  --bs-modal-header-border-color: var(--rc-line);
  --bs-modal-footer-border-color: var(--rc-line);
  --bs-modal-border-radius: var(--rc-radius);
  --bs-modal-box-shadow: var(--rc-shadow-lg);
}

/* Bootstrap's own ring is blue; the dark theme's X is handled by Bootstrap
   (it inverts the icon under data-bs-theme="dark"). */
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.22rem var(--rc-focus-ring); }

/* -------------------------------------------------------------------------
   Alerts / messages
   ------------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--rc-radius-sm);
  border: 1px solid transparent;
  font-weight: 500;
}

.alert-success {
  --bs-alert-color: var(--rc-herb-ink);
  --bs-alert-bg: var(--rc-herb-soft);
  --bs-alert-border-color: var(--rc-herb-border);
}

.alert-info {
  --bs-alert-color: var(--rc-accent-ink);
  --bs-alert-bg: var(--rc-accent-soft);
  --bs-alert-border-color: var(--rc-accent-border);
}

.alert-danger {
  --bs-alert-color: var(--rc-primary-darker);
  --bs-alert-bg: var(--rc-primary-soft);
  --bs-alert-border-color: var(--rc-primary-border);
}

.alert-warning {
  --bs-alert-color: var(--rc-accent-ink);
  --bs-alert-bg: var(--rc-accent-soft);
  --bs-alert-border-color: var(--rc-accent-border);
}

/* -------------------------------------------------------------------------
   Badges & chips
   ------------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: 0.02em; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-cream-deep);
  border: 1px solid var(--rc-cream-line);
  color: var(--rc-ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}

.chip i { color: var(--rc-primary); font-size: 0.9em; }

.chip strong { font-weight: 600; }

/* -------------------------------------------------------------------------
   Home hero
   ------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  border-radius: var(--rc-radius);
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  margin-bottom: 1.5rem;
  background:
    radial-gradient(340px 240px at 100% 0%, var(--rc-hero-glow-amber), transparent 70%),
    radial-gradient(420px 300px at 0% 100%, var(--rc-hero-glow-terracotta), transparent 70%),
    linear-gradient(180deg, var(--rc-hero-sheen-top), var(--rc-hero-sheen-bottom)),
    linear-gradient(135deg, var(--rc-hero-start), var(--rc-hero-end));
  border: 1px solid var(--rc-cream-line);
  box-shadow: var(--rc-shadow-sm);
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rc-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-primary-dark);
  margin-bottom: 0.75rem;
}

.home-hero__eyebrow i { color: var(--rc-accent-dark); }

.home-hero h1 {
  margin: 0 0 0.5rem;
  max-width: 20ch;
}

.home-hero__lead {
  color: var(--rc-ink-soft);
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0 0 1.35rem;
}

.home-hero .input-group { position: relative; z-index: 2; }

.home-search {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.home-search .form-control,
.home-search .form-select,
.home-search .btn {
  border-radius: var(--rc-radius-pill) !important;
  box-shadow: var(--rc-shadow-sm);
}

.home-search .form-control { padding-left: 1.1rem; }

/* The arrow sits further in on the pill-shaped selects. */
.home-search select.form-select {
  padding-left: 1.1rem;
  padding-right: 2.75rem;
  background-position: right 1rem center;
}

/* One row on wide screens: search · Sök · the two filters. Narrower, the
   filters move to a row of their own, side by side; on a phone, where two
   don't fit, one per row. */
.home-search__query {
  flex: 1 1 10rem;
  min-width: 0;
}

.home-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
}

.home-search__filters .form-select {
  flex: 1 1 11rem;
  width: 15rem;
  min-width: 0;
}

.home-search__submit-text { margin-left: 0.25rem; }

/* Phones: the magnifying glass alone, 44px square at least. */
@media (max-width: 575.98px) {
  .home-search__submit-text { display: none; }

  .home-search__submit {
    min-width: 46px;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

@media (max-width: 991.98px) {
  .home-search__filters { flex-basis: 100%; }

  .home-search__filters .form-select { width: auto; }
}

/* "Populära taggar" under the search. Wide screens: the chips wrap. Phones:
   one row that scrolls sideways — twelve chips would otherwise stack five or
   six rows deep and push the recipes off the first screen. */
.popular-tags {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.75rem;
  margin-top: 1.1rem;
  position: relative;
  z-index: 1;
}

.popular-tags__label {
  flex-shrink: 0;
  color: var(--rc-ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.popular-tags__list {
  /* The containing block for what is absolutely positioned inside the chips
     (the visually hidden " recept"). Without it that is .popular-tags, outside
     the phone's scrolling row, so those spans weren't clipped by the row and
     widened the whole page to the row's content width. */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  max-width: 100%;
}

.popular-tags__chip {
  min-height: 2.25rem;
  text-decoration: none;
  white-space: nowrap;
  background: var(--rc-surface);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.popular-tags__chip:hover,
.popular-tags__chip:focus-visible {
  color: var(--rc-primary-darker);
  background: var(--rc-primary-soft);
  border-color: var(--rc-primary-border);
}

.popular-tags__count {
  color: var(--rc-ink-soft);
  font-size: 0.8em;
  font-weight: 600;
}

.popular-tags__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0 0.4rem;
  color: var(--rc-primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .popular-tags {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .popular-tags__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* No scroll snapping: it pulled a chip focused with the keyboard back
       behind the edge again. */
    scrollbar-width: none;
    /* room for the focus ring inside the scrolling box */
    padding: 4px 2px 6px;
    margin: -4px -2px 0;
  }

  .popular-tags__list::-webkit-scrollbar { display: none; }

  .popular-tags__list > li { flex-shrink: 0; }

  /* Tap targets. */
  .popular-tags__chip,
  .popular-tags__all { min-height: 44px; }
}

/* "Alla taggar" (/taggar). */
.tag-index__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.tag-index__letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-cream-deep);
  color: var(--rc-ink);
  font-weight: 600;
  text-decoration: none;
}

.tag-index__letters a:hover { background: var(--rc-primary-soft); color: var(--rc-primary-darker); }

.tag-index__group { margin-bottom: 1.5rem; scroll-margin-top: 5.5rem; }

.tag-index__letter {
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rc-line);
  font-size: 1.3rem;
}

.tag-index__list {
  columns: 3 12rem;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-index__list li {
  padding: 0.3rem 0;
  break-inside: avoid;
}

.tag-index__count { color: var(--rc-ink-soft); font-size: 0.9em; }

/* The count after a tag page's heading: "Kyckling · 125 recept". */
.tag-heading__count {
  color: var(--rc-ink-soft);
  font-family: var(--rc-font-body);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

.result-count {
  font-size: 0.92rem;
  color: var(--rc-ink-soft);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Search suggestions dropdown
   ------------------------------------------------------------------------- */
#suggestions {
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  box-shadow: var(--rc-shadow-lg);
  border: 1px solid var(--rc-line);
  margin-top: 0.4rem;
  background: var(--rc-surface);
}

/* Hidden until it has suggestions (the empty list still holds whitespace,
   so :empty alone doesn't match it). */
#suggestions:empty,
#suggestions:not(:has(li)) { display: none; }

#suggestions .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--rc-cream-line);
  padding: 0;
  background: var(--rc-surface);
}

#suggestions .list-group-item:last-child { border-bottom: 0; }

#suggestions .list-group-item a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: var(--rc-ink);
  text-decoration: none;
  transition: background-color .12s ease;
}

#suggestions .list-group-item a:hover {
  background: var(--rc-primary-soft);
  color: var(--rc-primary-darker);
}

/* Tag suggestions: tinted, with a tag icon and a "Tagg · n recept" label on
   the right, so they can't be mistaken for the recipe suggestions below. */
#suggestions .suggestion-tag,
#suggestions .suggestion-tag a {
  background: var(--rc-accent-soft);
}

#suggestions .suggestion-tag a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

#suggestions .suggestion-tag a:hover { background: var(--rc-primary-soft); }

.suggestion-tag__icon { color: var(--rc-accent-dark); }

.suggestion-tag__name { font-weight: 600; }

.suggestion-tag__meta {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--rc-ink-soft);
  white-space: nowrap;
}

/* An ingredient in the type-ahead: green where a tag is amber, a carrot where a tag has a tag. */
#suggestions .suggestion-ingredient,
#suggestions .suggestion-ingredient a {
  background: var(--rc-herb-soft);
}

#suggestions .suggestion-ingredient a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--rc-ink);
}

#suggestions .suggestion-ingredient a:hover { background: var(--rc-primary-soft); }

.suggestion-ingredient__icon { color: var(--rc-herb-ink); }

.suggestion-ingredient__name {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.suggestion-ingredient__meta {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--rc-ink-soft);
  white-space: nowrap;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity .2s ease;
  color: var(--rc-ink-faint);
  font-size: 0.85rem;
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { opacity: 1; }

/* -------------------------------------------------------------------------
   Recipe list (Index)
   ------------------------------------------------------------------------- */
.recipe-list-header a {
  color: var(--rc-ink-soft);
  font-family: var(--rc-font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recipe-list-header a.text-primary { color: var(--rc-primary-dark) !important; }

/* The list's header bar: its heading, and "Sortera" on the right. */
.recipe-list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.list-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--rc-font-body);
  letter-spacing: normal;
}

.list-sort__label {
  margin: 0;
  color: var(--rc-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.list-sort__select {
  width: auto;
  min-width: 10.5rem;
  min-height: 2.25rem;
  font-size: 0.9rem;
}

.recipe-list { display: flex; flex-direction: column; gap: 0.6rem; }

.recipe-row {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-sm);
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.recipe-row .row { align-items: center; }

.recipe-row:hover {
  background-color: var(--rc-surface);
  border-color: var(--rc-primary-border);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--rc-primary) 14%, transparent);
  transform: translateY(-2px);
  cursor: pointer;
}

.recipe-row .col-md-7 {
  font-family: var(--rc-font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--rc-ink);
}

/* The row's one link: thumbnail and title side by side. A long title wraps
   beside the picture rather than under it. */
.recipe-row__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--rc-ink);
  text-decoration: none;
}

.recipe-row__link:hover { color: var(--rc-ink); }

.recipe-row__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.recipe-row__title {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* "Innehåller: vispgrädde": why a recipe is in a search result when its title doesn't say. */
.recipe-row__hint {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--rc-ink-soft);
  overflow-wrap: anywhere;
}

/* The link's focus ring would only outline the text; outline the row instead. */
.recipe-row__link:focus-visible { outline: none; }

.recipe-row:focus-within {
  outline: 3px solid var(--rc-primary);
  outline-offset: 2px;
}

.recipe-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rc-line);
  background: var(--rc-cream-deep);
}

/* A recipe without a picture: a quiet square of the same size, so the titles line up. */
.recipe-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rc-ink-faint);
  font-size: 1.2rem;
}

@media (max-width: 575.98px) {
  .recipe-thumb {
    width: 48px;
    height: 48px;
  }

  .recipe-thumb--empty { font-size: 1.05rem; }
}

.recipe-row .col-md-2,
.recipe-row .col-md-1 {
  color: var(--rc-ink-soft);
  font-size: 0.92rem;
}

/* -------------------------------------------------------------------------
   Recipe detail
   ------------------------------------------------------------------------- */
.recipe-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 12px;
}

.recipe-title {
  margin: 0;
}

.recipe-description {
  color: var(--rc-ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 68ch;
}

.recipe-top-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.recipe-ingredients { flex: 1; min-width: 0; }

.recipe-image { flex-shrink: 0; }

.recipe-image img {
  width: 350px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rc-radius);
  display: block;
  box-shadow: var(--rc-shadow-md);
  border: 1px solid var(--rc-line);
}

.recipe-instructions { width: 100%; }

.section-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rc-line);
}

.section-heading i { color: var(--rc-primary); font-size: 0.95rem; }

/* Ingredients and steps are checklists. Each row is a real checkbox —
   visually hidden, but there for the keyboard and for screen readers —
   followed by its label. The label is the whole row: it draws the round
   marker and is what you tap. */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.checklist li { position: relative; }

.checklist label {
  display: block;
  position: relative;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.checklist label::before {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--rc-font-body);
  font-weight: 700;
  line-height: 1;
  transition: background-color .14s ease, border-color .14s ease;
}

/* Done: struck through, but still easy to read — "how much flour was it?" */
.checklist input:checked + label {
  color: var(--rc-ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--rc-ink-faint);
}

.checklist input:checked + label::before {
  content: "\2713"; /* a check mark: not colour alone */
  background: var(--rc-herb);
  border-color: var(--rc-herb);
  color: var(--rc-on-herb);
  box-shadow: none;
}

.checklist input:focus-visible + label {
  outline: 3px solid var(--rc-primary);
  outline-offset: 2px;
}

/* Ingredients */
.ingredient-list { gap: 0.4rem; }

.ingredient-list label {
  background: var(--rc-cream);
  border: 1px solid var(--rc-cream-line);
  border-left: 4px solid var(--rc-accent);
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  border-radius: var(--rc-radius-sm);
  font-size: 1rem;
  line-height: 1.4;
}

.ingredient-list label::before {
  content: "";
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--rc-accent-dark);
  background: transparent;
  font-size: 0.7rem;
}

.ingredient-list label:hover { background: var(--rc-cream-deep); }

.ingredient-list input:checked + label { border-left-color: var(--rc-herb); }

/* Instructions */
.instruction-list {
  counter-reset: step;
  gap: 0.75rem;
}

.instruction-list li { counter-increment: step; }

.instruction-list label {
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-sm);
  padding: 1rem 1rem 1rem 3.4rem;
  line-height: 1.6;
  box-shadow: var(--rc-shadow-sm);
}

.instruction-list label::before {
  content: counter(step);
  left: 0.9rem;
  top: 0.9rem;
  width: 1.7rem;
  height: 1.7rem;
  border: 0 solid transparent;
  background: var(--rc-primary);
  color: var(--rc-on-primary);
  font-size: 0.85rem;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--rc-primary) 30%, transparent);
}

.instruction-list input:checked + label {
  background: var(--rc-cream);
  box-shadow: none;
}

/* The current step: the first one not ticked off. Marked in cooking mode,
   and otherwise once someone has started ticking steps — a reader who is
   only browsing shouldn't find step 1 highlighted for no reason. */
.cooking-mode .instruction-list li.is-current label,
.instruction-list.has-progress li.is-current label {
  border-color: var(--rc-primary);
  box-shadow: 0 0 0 3px var(--rc-primary-soft), var(--rc-shadow-sm);
}

.recipe-notes {
  position: relative;
  background: var(--rc-accent-soft);
  border: 1px solid var(--rc-accent-border);
  border-left: 4px solid var(--rc-accent);
  border-radius: var(--rc-radius-sm);
  padding: 1rem 1.15rem;
  line-height: 1.6;
}

.recipe-notes h2 { margin-top: 0; }

.recipe-meta-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.recipe-tag-link {
  --bs-btn-border-radius: var(--rc-radius-pill);
}

/* -------------------------------------------------------------------------
   Portions on the recipe page: the portion chip with − / + beside it, or —
   for recipes counted in "st", "dl" … — a choice of batches. Buttons of
   44px, for a thumb.
   ------------------------------------------------------------------------- */
.portion-control { max-width: 100%; }

.portion-control__form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.2rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-cream-deep);
  border: 1px solid var(--rc-cream-line);
}

.portion-control--batches .portion-control__form {
  border-radius: var(--rc-radius-sm);
  padding: 0.3rem 0.4rem;
  gap: 0.5rem;
}

.portion-control__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  color: var(--rc-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.portion-control__label i { color: var(--rc-primary); font-size: 0.9em; }

.portion-control__choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.portion-control__step,
.portion-control__choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid var(--rc-control-border);
  background: var(--rc-surface);
  color: var(--rc-ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.portion-control__step:hover:not(:disabled),
.portion-control__choice:hover { background: var(--rc-cream-hover); }

.portion-control__step:focus-visible,
.portion-control__choice:focus-visible {
  outline: 3px solid var(--rc-primary);
  outline-offset: 2px;
}

.portion-control__step:disabled {
  color: var(--rc-ink-faint);
  border-color: var(--rc-cream-line-strong);
  background: transparent;
  cursor: default;
}

.portion-control__choice[aria-pressed="true"] {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: var(--rc-on-primary);
}

/* The same buttons as links (the shopping list), and one that can't be pressed. */
a.portion-control__step,
a.portion-control__choice { text-decoration: none; }

a.portion-control__step:hover,
a.portion-control__choice:hover { color: var(--rc-ink); }

.portion-control__step[aria-disabled="true"] {
  color: var(--rc-ink-faint);
  border-color: var(--rc-cream-line-strong);
  background: transparent;
  cursor: default;
}

.portion-control__choice[aria-current="true"],
a.portion-control__choice[aria-current="true"]:hover {
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: var(--rc-on-primary);
}

/* -------------------------------------------------------------------------
   The shopping list ("Inköpslista"): the add button on the recipe page, the
   count in the header, and the list page — made for a phone in one hand in
   a shop: rows of at least 52px, the amount where the thumb isn't.
   ------------------------------------------------------------------------- */
.shopping-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.shopping-add__on {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shopping-add__on[hidden] { display: none; }

.shopping-add__state {
  color: var(--rc-herb-ink);
  font-weight: 600;
}

/* The number of recipes on the list, beside "Inköpslista" in the menus. */
.shopping-count {
  display: inline-block;
  min-width: 1.35rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-primary);
  color: var(--rc-on-primary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.shopping-count[hidden] { display: none; }

.shopping-list__empty { color: var(--rc-ink-soft); }

/* "Du är offline – visar senast hämtade listan", and "kunde inte hämtas". */
.shopping-list__offline {
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-accent-soft);
  border: 1px solid var(--rc-accent-border);
  color: var(--rc-accent-ink);
  font-weight: 600;
}

.shopping-list__offline[hidden] { display: none; }

/* The visitor has a list, but it could not be fetched: not "Din inköpslista är tom". */
[data-shopping-page][data-unavailable] .shopping-list__empty,
[data-shopping-page][data-unavailable] .shopping-list__empty + p { display: none; }

.shopping-list__section { margin-bottom: 1.75rem; }

.shopping-list__shared {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-accent-soft);
  border: 1px solid var(--rc-accent-border);
  color: var(--rc-accent-ink);
}

.shopping-list__save,
.shopping-list__save-choice,
.shopping-list__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shopping-list__save-choice[hidden],
.shopping-list__confirm[hidden] { display: none; }

/* What the script switches between: the list as sent ("static": links only),
   the visitor's own, or one opened from a link. */
.shared-only { display: none; }
[data-mode="shared"] .shared-only { display: block; }

[data-mode="shared"] .own-only,
[data-mode="shared"] .own-or-static,
[data-mode="static"] .needs-script { display: none; }

.shopping-recipes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shopping-recipes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rc-cream-line);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-cream);
}

.shopping-recipes__title {
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.shopping-recipes__remove { min-height: 44px; display: inline-flex; align-items: center; }

.shopping-category { margin-bottom: 1.25rem; }

.shopping-category[hidden] { display: none; }

.shopping-category__name {
  margin: 0 0 0.5rem;
  font-family: var(--rc-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-ink-soft);
}

.shopping-items { gap: 0.4rem; }

.shopping-items li {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.shopping-items li[hidden] { display: none; }

.shopping-items label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.6rem;
  min-height: 52px;
  padding: 0.6rem 0.9rem 0.6rem 2.9rem;
  background: var(--rc-cream);
  border: 1px solid var(--rc-cream-line);
  border-left: 4px solid var(--rc-accent);
  border-radius: var(--rc-radius-sm);
  font-size: 1.05rem;
  line-height: 1.3;
}

.shopping-items label::before {
  content: "";
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--rc-accent-dark);
  background: transparent;
  font-size: 0.8rem;
}

.shopping-items label:hover { background: var(--rc-cream-deep); }

.shopping-items input:checked + label { border-left-color: var(--rc-herb); }

.shopping-items input:disabled + label { cursor: default; }

.shopping-item__name {
  flex: 1 1 5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.shopping-item__amount {
  flex: 0 1 auto;
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.shopping-item__optional {
  padding: 0.05rem 0.45rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-herb-soft);
  border: 1px solid var(--rc-herb-border);
  color: var(--rc-herb-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

/* Which recipes an item comes from: a small expand beside the row. */
.shopping-item__sources {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 45%;
}

.shopping-item__sources summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 52px;
  border-radius: var(--rc-radius-sm);
  color: var(--rc-ink-soft);
  cursor: pointer;
}

.shopping-item__sources summary::-webkit-details-marker { display: none; }

.shopping-item__sources summary:hover { background: var(--rc-cream-deep); }

.shopping-item__sources summary:focus-visible {
  outline: 3px solid var(--rc-primary);
  outline-offset: 2px;
}

.shopping-item__sources span {
  padding: 0 0.25rem 0.4rem;
  font-size: 0.8rem;
  color: var(--rc-ink-soft);
  text-align: right;
  overflow-wrap: anywhere;
}

.shopping-staples {
  margin-bottom: 1.25rem;
  border: 1px solid var(--rc-cream-line);
  border-radius: var(--rc-radius-sm);
  padding: 0 0.75rem;
}

.shopping-staples[hidden] { display: none; }

.shopping-staples summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--rc-ink);
  cursor: pointer;
}

.shopping-staples__count { color: var(--rc-ink-soft); font-weight: 500; }

.shopping-staples .shopping-items { padding-bottom: 0.75rem; }

.shopping-list__hidden-note { color: var(--rc-ink-soft); font-size: 0.9rem; }

.shopping-list__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shopping-list__actions .btn { min-height: 44px; }

.shopping-list__share-feedback { margin-top: 0.75rem; }

/* A heading inside the ingredient list ("Smuldeg"): between the rows, not one of them. */
.ingredient-heading {
  margin: 1.1rem 0 0.5rem;
  font-family: var(--rc-font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rc-ink);
}

#ingredient-lines > .ingredient-heading:first-child { margin-top: 0; }

/* On a line whose number was left as written while the rest was recalculated. */
.not-converted {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-accent-soft);
  border: 1px solid var(--rc-accent-border);
  color: var(--rc-accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: middle;
}

.scale-note {
  color: var(--rc-ink-soft);
  font-size: 0.95rem;
  margin: -0.25rem 0 0.9rem;
}

/* Share button feedback: "Länken är kopierad", or the link to copy by hand. */
.share-feedback__status {
  margin: 0;
}

.share-feedback__status:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.5rem 0 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-herb-soft);
  border: 1px solid var(--rc-herb-border);
  color: var(--rc-herb-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.share-feedback__fallback {
  max-width: 32rem;
  margin: -0.5rem 0 1rem;
}

.share-feedback__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--rc-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

/* "Fler recept att prova", below the recipe. */
.related-recipes {
  margin-bottom: 2rem;
}

.related-recipes .recipe-card { margin-bottom: 0 !important; height: 100%; }

/* -------------------------------------------------------------------------
   Recipe cards (sidebar / tag pages)
   ------------------------------------------------------------------------- */
.recipe-card {
  overflow: hidden;
  transition: transform .15s ease, box-shadow .18s ease;
}

.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rc-shadow-lg) !important;
}

.recipe-card .card-img-top,
.recipe-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  border-radius: 0;
}

/* A recipe without a picture (RecipeImageTagHelper): the same 4:3 box as a
   photo, in the soft fill, with a bowl and "Bild saknas". Decorative. */
.recipe-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--rc-cream-deep);
  color: var(--rc-ink-soft);
  text-align: center;
}

.recipe-image-placeholder > i {
  color: var(--rc-ink-faint);
  font-size: 1.9rem;
}

.recipe-image-placeholder__text {
  font-size: 0.85rem;
  font-weight: 500;
}

/* On the recipe page, for authors only: small, with a way to add a picture. */
.recipe-image-placeholder--compact {
  width: 220px;
  aspect-ratio: auto;
  padding: 1.1rem 1rem;
  border: 1px dashed var(--rc-control-border);
  border-radius: var(--rc-radius);
}

.recipe-image-placeholder--compact > i { font-size: 1.5rem; }

.recipe-image-placeholder__link {
  color: var(--rc-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .recipe-image-placeholder--compact { width: 100%; }
}

.recipe-card .card-title {
  font-family: var(--rc-font-head);
  font-weight: 600;
  color: var(--rc-ink);
  line-height: 1.25;
}

.recipe-card .card-header {
  background: transparent;
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--rc-primary-dark);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Misc pages
   ------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { color: var(--rc-ink-soft); }

.page-panel {
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow-md);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}

a.footer-link { text-decoration: none; }
a.footer-link:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Like ("heart") toggle
   ------------------------------------------------------------------------- */
form.d-inline { margin: 0; }

.like-heart {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--rc-like-border);
  background: var(--rc-surface);
  color: var(--rc-like-fg);
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, color .15s ease, border-color .15s ease,
    background-color .15s ease, box-shadow .15s ease;
}

.like-heart:hover {
  border-color: var(--rc-primary-border);
  color: var(--rc-primary);
  background: var(--rc-primary-soft);
}

.like-heart:active { transform: scale(0.92); }

.like-heart:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color);
}

.like-heart--on {
  color: var(--rc-on-primary);
  border-color: transparent;
  background: linear-gradient(135deg, var(--rc-primary), var(--rc-primary-dark));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--rc-primary) 35%, transparent);
}

.like-heart--on:hover {
  color: var(--rc-on-primary);
  background: linear-gradient(135deg, var(--rc-primary-dark), var(--rc-primary-darker));
}

/* -------------------------------------------------------------------------
   Recipe rating
   ------------------------------------------------------------------------- */
.rating-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--rc-cream);
  border: 1px solid var(--rc-cream-line);
  border-radius: var(--rc-radius-sm);
}

.rating-panel__average {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rating-panel__text {
  color: var(--rc-ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
}

.rating-panel__mine {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rating-panel__label {
  color: var(--rc-ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
}

.rating-panel__login-link {
  color: var(--rc-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.rating-panel__login-link:hover { text-decoration: underline; }

/* Read-only average, e.g. in the rating panel or on a recipe card. */
.rating-stars {
  display: inline-flex;
  gap: 0.1rem;
  color: var(--rc-accent-dark);
  font-size: 1rem;
  line-height: 1;
}

.rating-stars .fa-regular { color: var(--rc-star-empty); }

/* Interactive 1-5 star picker. Markup lists stars 5→1 and relies on
   flex row-reverse + the general sibling combinator so no JS is required:
   hovering or checking a star highlights it and every star to its left. */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.15rem;
  border: 0;
  padding: 0;
  margin: 0;
}

.star-input label {
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--rc-star-empty);
  transition: color .12s ease, transform .1s ease;
}

.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: var(--rc-accent-dark);
}

.star-input label:active { transform: scale(1.18); }

.star-input input:focus-visible + label {
  outline: 2px solid var(--rc-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   Site header (_Layout.cshtml). Here rather than in _Layout.cshtml.css:
   its links are tag helpers, which CSS isolation leaves unmarked.

   One row. Wide screens (992px and up, the navbar-expand-lg breakpoint):
   logo · navigation ········ "Nytt recept" · account.
   Narrower: logo ········ account · menu button, with the navigation and
   "Nytt recept" in a panel that opens under the row.
   The markup is in focus order — logo, menu button, navigation, account —
   and `order` arranges it for the narrow layout.
   ------------------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

header .navbar {
  background-color: var(--rc-header-bg);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rc-line);
  transition: box-shadow .2s ease, background-color .2s ease;
}

header .navbar.is-scrolled {
  box-shadow: var(--rc-shadow-header);
}

.navbar > .site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0.6rem;
  min-height: 60px;
}

.site-logo {
  order: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
  border-radius: 8px;
  text-decoration: none;
}

.site-logo:focus-visible {
  outline: 3px solid var(--rc-primary);
  outline-offset: 3px;
}

/* The right-hand group: account, then the menu button, at the right edge. */
.site-header__account {
  order: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.navbar .site-menu-button {
  order: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-sm);
  color: var(--rc-ink);
  font-size: 1.15rem;
}

.navbar .site-menu-button:focus {
  box-shadow: 0 0 0 0.22rem var(--rc-focus-ring);
}

.site-nav {
  order: 3;
  flex-basis: 100%;
}

.site-nav .navbar-nav {
  padding: 0.35rem 0 0.4rem;
  gap: 0.15rem;
}

.site-nav .nav-link {
  color: var(--rc-ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--rc-radius-pill);
  transition: color .14s ease, background-color .14s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  color: var(--rc-primary-dark);
  background-color: var(--rc-cream-deep);
}

/* Instead of Bootstrap's blue ring. */
.site-nav .nav-link:focus-visible { box-shadow: 0 0 0 0.22rem var(--rc-focus-ring); }

/* The page you're on: terracotta, on a soft terracotta pill. (primary-dark
   rather than primary: plain terracotta is just under 4.5:1 on that pill.) */
.site-nav .nav-link[aria-current="page"] {
  color: var(--rc-primary-dark);
  background-color: var(--rc-primary-soft);
}

.site-new-recipe {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  margin: 0.15rem 0 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: var(--rc-radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.site-new-recipe[aria-current="page"] {
  background-color: var(--rc-primary-soft);
}

@media (min-width: 992px) {
  .navbar > .site-header {
    flex-wrap: nowrap;
    gap: 1.25rem;
    min-height: 72px;
  }

  .site-logo,
  .site-nav,
  .site-header__account { order: 0; }

  .site-logo { margin-right: 0.5rem; }

  /* Bootstrap hides the toggler from this breakpoint on, but the rule above
     (same specificity, later stylesheet) would show it again. */
  .navbar .site-menu-button { display: none; }

  /* Fills the row, so the account menu after it is at the right edge. */
  .site-nav {
    flex-basis: auto;
    flex-grow: 1;
  }

  .site-nav .navbar-nav {
    flex-direction: row;
    padding: 0;
    gap: 0.25rem;
  }

  /* Pushed to the end of the navigation, against the account menu: together
     they are the right-hand group. (The pill is in the navigation's markup
     so it can move into the menu panel on narrow screens.) */
  .site-new-recipe { margin: 0 0 0 auto; }
}

/* -------------------------------------------------------------------------
   Logo in the header (_Logo.cshtml): an inline SVG — badge shapes plus the
   wordmark as live Fraunces text, to the geometry of images/brand/logo.svg.
   ------------------------------------------------------------------------- */
.site-logo__mark {
  display: block;
  height: 40px;
  width: auto;
  aspect-ratio: 379.02 / 100;
  overflow: visible; /* the fallback font, until Fraunces has loaded, may run wider */
}

.site-logo__badge { fill: var(--logo-badge); }
.site-logo__letter { fill: var(--logo-badge-letter); }
.site-logo__spark { fill: var(--logo-spark); }

.site-logo__word {
  fill: var(--logo-word);
  font-family: var(--rc-font-head);
  font-weight: 600;
  font-size: 60px; /* in the SVG's units: a cap height of 42, as in logo.svg */
  font-variation-settings: "opsz" 48;
}

@media (max-width: 991.98px) {
  .site-logo__mark { height: 34px; }
}

/* -------------------------------------------------------------------------
   Account menu (navbar avatar dropdown)
   ------------------------------------------------------------------------- */
.user-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  gap: 0.4rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  background: var(--rc-surface);
  color: var(--rc-ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
  border-color: var(--rc-primary-border);
  background: var(--rc-cream);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rc-primary) 14%, transparent);
}

.user-chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color);
}

.user-chip__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--avatar-border);
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-family: var(--rc-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-transform: uppercase;
}

.user-chip__caret {
  font-size: 0.7rem;
  transition: transform .15s ease;
}

.user-chip[aria-expanded="true"] .user-chip__caret { transform: rotate(180deg); }

.nav-login-btn { white-space: nowrap; }

.account-menu.dropdown-menu {
  --bs-dropdown-min-width: 15rem;
  --bs-dropdown-bg: var(--rc-surface);
  --bs-dropdown-color: var(--rc-ink);
  --bs-dropdown-border-color: var(--rc-line);
  --bs-dropdown-border-radius: var(--rc-radius-sm);
  --bs-dropdown-link-color: var(--rc-ink);
  --bs-dropdown-link-hover-color: var(--rc-primary-darker);
  --bs-dropdown-link-hover-bg: var(--rc-primary-soft);
  --bs-dropdown-link-active-color: var(--rc-primary-darker);
  --bs-dropdown-link-active-bg: var(--rc-primary-soft);
  --bs-dropdown-divider-bg: var(--rc-cream-line);
  --bs-dropdown-padding-y: 0.4rem;
  padding: 0.4rem;
  box-shadow: var(--rc-shadow-lg);
  margin-top: 0.5rem;
}

.account-menu .dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-weight: 500;
}

.account-menu .dropdown-item:active { color: var(--rc-primary-darker); }

.account-menu form { margin: 0; }
.account-menu form .dropdown-item { width: 100%; text-align: left; background: none; border: 0; }

.account-menu__head {
  padding: 0.4rem 0.7rem 0.55rem;
}

.account-menu__name {
  display: block;
  font-family: var(--rc-font-head);
  font-weight: 600;
  color: var(--rc-ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__email {
  display: block;
  font-size: 0.82rem;
  color: var(--rc-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Site footer (_Layout.cshtml). Here rather than in _Layout.cshtml.css: its
   links are tag helpers and its logo and theme control come from partials,
   none of which CSS isolation marks.

   992px and up (two rows, about 120px):
     logo | tagline ················ theme control
     Facebook  Integritetspolicy ········ © year Receptus
   Narrower (about 190px; no tagline):
     logo ························· Facebook icon
     [ Auto | Ljust | Mörkt ]  (full width)
     Integritetspolicy ············ © year Receptus
   ------------------------------------------------------------------------- */
footer.footer {
  flex-shrink: 0;
  margin-top: 3rem;
  padding: 0.75rem 0 0.6rem;
  background-color: var(--rc-deep);
  color: var(--rc-deep-ink);
  border-top: 1px solid var(--rc-deep-border);
  line-height: 1.5;
}

footer.footer a {
  color: var(--rc-deep-link);
  text-decoration: none;
}

footer.footer a:hover { text-decoration: underline; }

footer.footer a:focus-visible,
.cookie-notice__text a:focus-visible {
  outline: 3px solid var(--rc-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-bottom: 0.6rem;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

/* The header's logo, smaller: a 28px badge. The wordmark is light on the
   deep background in both themes. */
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

footer.footer .site-footer__logo:hover { text-decoration: none; }

.site-footer__logo .site-logo__mark { height: 28px; }

.site-footer__logo .site-logo__word { fill: var(--rc-deep-ink-strong); }

.site-footer__divider {
  width: 1px;
  height: 1.5rem;
  background: var(--rc-deep-line);
}

.site-footer__tagline {
  margin: 0;
  color: var(--rc-deep-ink);
  font-size: 0.9rem;
  line-height: 1.3;
}

.site-footer__facebook-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--rc-radius-sm);
  font-size: 1.5rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rc-deep-line);
  color: var(--rc-deep-ink-faint);
  font-size: 0.82rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

/* The links take the fine-print colour too; hover and focus still show them. */
footer.footer .site-footer__links a { color: var(--rc-deep-ink-faint); }

footer.footer .site-footer__links a:hover { color: var(--rc-deep-link); }

.site-footer__facebook {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.site-footer__copyright { margin: 0; }

/* The theme control: on the deep background, in both themes. */
footer.footer .theme-switch {
  --theme-switch-fg: var(--rc-deep-ink);
  --theme-switch-bg: transparent;
  --theme-switch-border: var(--rc-deep-ink-faint);
  --theme-switch-hover: color-mix(in srgb, var(--rc-deep-link) 14%, transparent);
  --theme-switch-on-fg: var(--rc-deep);
  --theme-switch-on-bg: var(--rc-deep-link);
  --theme-switch-focus: var(--rc-accent);
}

@media (max-width: 991.98px) {
  .site-footer__divider,
  .site-footer__tagline,
  .site-footer__facebook { display: none; }

  /* Its own row, three equal segments a thumb can hit. */
  .site-footer__theme { flex-basis: 100%; }

  .site-footer__theme .theme-switch__options { display: flex; }

  .site-footer__theme .theme-switch__option {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
  }
}

@media (min-width: 992px) {
  footer.footer { padding: 0.95rem 0 0.85rem; } /* about 120px in all */

  .site-footer__facebook-icon { display: none; }

  .site-footer__theme { margin-left: auto; }
}

.cookie-notice__text a {
  color: var(--rc-deep-link);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Colour theme control (_ThemeSwitch.cshtml): Auto / Ljust / Mörkt, in the
   footer and in the account menu. Real radio buttons, visually hidden: the
   labels are the segments, the checked one is filled, and arrow keys move
   the choice. Colours come from the --theme-switch-* properties, set for
   each place it appears.
   ------------------------------------------------------------------------- */
.theme-switch {
  --theme-switch-fg: var(--rc-ink-soft);
  --theme-switch-bg: var(--rc-cream-deep);
  --theme-switch-border: var(--rc-line);
  --theme-switch-hover: var(--rc-cream-hover);
  --theme-switch-on-fg: var(--rc-on-primary);
  --theme-switch-on-bg: var(--rc-primary-dark);
  --theme-switch-focus: var(--rc-primary);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.theme-switch__legend {
  float: none;
  width: auto;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--theme-switch-fg);
}

.theme-switch__options {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--theme-switch-border);
  border-radius: var(--rc-radius-pill);
  background: var(--theme-switch-bg);
}

.theme-switch__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--rc-radius-pill);
  color: var(--theme-switch-fg);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

.theme-switch__option:hover { background: var(--theme-switch-hover); }

.theme-switch__input:checked + .theme-switch__option {
  background: var(--theme-switch-on-bg);
  color: var(--theme-switch-on-fg);
}

.theme-switch__input:focus-visible + .theme-switch__option {
  outline: 3px solid var(--theme-switch-focus);
  outline-offset: 2px;
}

/* In the account menu, between the links and "Logga ut". */
.account-menu__theme { padding: 0.35rem 0.7rem 0.45rem; }

/* -------------------------------------------------------------------------
   Profile page
   ------------------------------------------------------------------------- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.profile-avatar {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rc-primary), var(--rc-primary-dark));
  color: var(--rc-on-primary);
  font-family: var(--rc-font-head);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--rc-primary) 28%, transparent);
}

.profile-header h1 {
  margin: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-header .profile-email {
  color: var(--rc-ink-soft);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.profile-facts {
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.25rem;
}

.profile-facts dt {
  color: var(--rc-ink-faint);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
}

.profile-facts dd {
  margin: 0;
  color: var(--rc-ink);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--rc-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--rc-cream-deep);
  border: 1px solid var(--rc-cream-line);
  color: var(--rc-ink);
}

.role-badge--admin { background: var(--rc-primary-soft); border-color: var(--rc-primary-border); color: var(--rc-primary-darker); }
.role-badge--contributor { background: var(--rc-accent-soft); border-color: var(--rc-accent-border); color: var(--rc-accent-ink); }
.role-badge i { font-size: 0.85em; }

.profile-empty {
  text-align: center;
  padding: 1rem 0;
}

.profile-empty__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-cream-deep);
  color: var(--rc-primary);
  font-size: 1.4rem;
}

/* -------------------------------------------------------------------------
   Cooking mode ("Matlagningsläge") on the recipe page
   For a phone or tablet propped up in the kitchen: only the recipe, in large
   type, with rows big enough to hit with a floury knuckle. Switched on by the
   class "cooking-mode" on <body> — set by the server for ?matlagning=1 and
   toggled by recipe.js.
   ------------------------------------------------------------------------- */
.cooking-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.cooking-note {
  color: var(--rc-ink-soft);
  font-size: 0.95rem;
  margin: -0.75rem 0 1.5rem;
}

/* Everything that isn't the recipe itself. */
body.cooking-mode > header,
body.cooking-mode > footer,
body.cooking-mode .cookie-notice,
body.cooking-mode .cooking-hide {
  display: none !important;
}

/* env(safe-area-inset-*) is the part of the screen taken by an iPhone's notch,
   status bar or rounded corners; 0 where there is none. */
body.cooking-mode > .container {
  max-width: none;
  padding-left: max(clamp(0.75rem, 2.5vw, 2.5rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(0.75rem, 2.5vw, 2.5rem), env(safe-area-inset-right, 0px));
}

body.cooking-mode .recipe-container {
  max-width: 1500px;
  padding: 0;
}

body.cooking-mode .recipe-container > .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

body.cooking-mode .recipe-container > .card > .card-body { padding: 0 0 3rem; }

body.cooking-mode .recipe-title {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.15;
  padding-top: 1rem;
}

/* The way out stays in reach however far down the recipe you are. */
body.cooking-mode .cooking-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 1.25rem !important;
  /* The bar still reaches the top edge (so nothing scrolls past above it),
     but its buttons start below the notch / status bar. */
  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 0 0.6rem;
  background: var(--rc-cream);
  border-bottom: 1px solid var(--rc-line);
}

body.cooking-mode .cooking-note { margin-top: 0; font-size: 1.05rem; }

body.cooking-mode .section-heading { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }

body.cooking-mode .checklist label {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  line-height: 1.45;
}

body.cooking-mode .ingredient-list { gap: 0.6rem; }

body.cooking-mode .ingredient-heading { font-size: 1.25rem; margin-top: 1.4rem; }

body.cooking-mode .portion-control__label { font-size: 1.05rem; }

body.cooking-mode .scale-note { font-size: 1.05rem; }

body.cooking-mode .ingredient-list label {
  min-height: 3.5rem;
  padding: 0.9rem 1.1rem 0.9rem 3.9rem;
}

body.cooking-mode .ingredient-list label::before {
  left: 1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-width: 3px;
  font-size: 1.1rem;
}

body.cooking-mode .instruction-list { gap: 1rem; }

body.cooking-mode .instruction-list label {
  min-height: 4rem;
  padding: 1.15rem 1.2rem 1.15rem 4.6rem;
}

body.cooking-mode .instruction-list label::before {
  left: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
}

body.cooking-mode .instruction-list li.is-current label { border-width: 2px; }

body.cooking-mode .recipe-notes { font-size: 1.15rem; }

/* A tablet in landscape, or anything as wide: ingredients beside the steps,
   and staying in view while the steps scroll. Narrower than this (a phone, a
   tablet upright) they are stacked, as on the ordinary page. */
@media (min-width: 900px) {
  body.cooking-mode .recipe-body {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.7fr);
    gap: 1.5rem 2.5rem;
    align-items: start;
  }

  body.cooking-mode .recipe-top-layout {
    position: sticky;
    top: calc(5.5rem + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 6.5rem);
    max-height: calc(100dvh - 6.5rem - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    margin-bottom: 0;
    padding: 3px; /* room for the focus ring inside the scrolling box */
  }

  body.cooking-mode .recipe-instructions { margin-top: 0 !important; }

  body.cooking-mode .recipe-notes { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
/* The recipe page in one column: title and buttons, meta chips, the picture,
   then everything else in source order. The picture is rendered once, beside
   the ingredients (where wide screens show it); here the card body becomes a
   flex column and the two wrappers around it step aside (display: contents —
   they are plain <div>s, nothing for assistive technology to lose), so
   `order` can lift it to the top. It isn't focusable, so keyboard order is
   unchanged; a screen reader still reaches it after the ingredients. */
@media (max-width: 768px) {
  .recipe-card-body {
    display: flex;
    flex-direction: column;
  }

  .recipe-card-body .recipe-body,
  .recipe-card-body .recipe-top-layout { display: contents; }

  .recipe-card-body > *,
  .recipe-card-body .recipe-body > *,
  .recipe-card-body .recipe-top-layout > * { order: 2; }

  .recipe-card-body > .recipe-header,
  .recipe-card-body > .share-feedback,
  .recipe-card-body > .recipe-meta-chips { order: 0; }

  .recipe-card-body .recipe-image {
    order: 1;
    margin-bottom: 1.5rem;
  }

  /* Full content width, 4:3, cropped to fill — not a whole screen of picture. */
  .recipe-image img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* The wrapper's own bottom margin is gone with it. */
  .recipe-card-body .recipe-ingredients { margin-bottom: 2rem; }

  /* The authors' "Bild saknas / Ladda upp bild" box: wide screens only; the
     upload button among the action buttons covers phones. */
  .recipe-image--missing { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto; }
  .recipe-row:hover, .recipe-card:hover { transform: none; }
}