/* Page styles from design/Family Cookbook.dc.html (its <helmet> block), plus hover classes
   standing in for the design's style-hover attributes. Tokens come from organic.css. */
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);transition:background .2s,color .2s}
a{color:var(--color-accent-700)}a:hover{color:var(--color-accent)}
[data-theme="dark"]{--color-bg:#1d1b18;--color-surface:#2a2621;--color-text:#f0e6d6;--color-accent:#e08a52;--color-accent-2:#a3b386;--color-divider:color-mix(in srgb,#f0e6d6 16%,transparent);
--color-neutral-100:#2e2b25;--color-neutral-200:#474238;--color-neutral-300:#645c50;--color-neutral-400:#82796a;--color-neutral-500:#a19786;--color-neutral-600:#c0b6a5;--color-neutral-700:#dcd3c4;--color-neutral-800:#eee7db;--color-neutral-900:#f9f4ed;
--color-accent-100:#402310;--color-accent-200:#643312;--color-accent-300:#8c491a;--color-accent-400:#b2622d;--color-accent-500:#d67f48;--color-accent-600:#f6a06b;--color-accent-700:#ffc6a5;--color-accent-800:#ffe1d0;--color-accent-900:#fff2eb;
--color-accent-2-100:#272e1b;--color-accent-2-200:#3d472b;--color-accent-2-300:#56633f;--color-accent-2-400:#728157;--color-accent-2-500:#8fa073;--color-accent-2-600:#aebf92;--color-accent-2-700:#ccdbb2;--color-accent-2-800:#e1eecc;--color-accent-2-900:#f0fae1;
--shadow-sm:0 0 0 1px color-mix(in srgb,#f0e6d6 8%,transparent);--shadow-md:0 0 0 1px color-mix(in srgb,#f0e6d6 8%,transparent),0 4px 14px rgba(0,0,0,.4);--shadow-lg:0 0 0 1px color-mix(in srgb,#f0e6d6 10%,transparent),0 16px 40px rgba(0,0,0,.55);color-scheme:dark}
[data-theme="dark"] .btn-primary:hover{background:var(--color-accent-400)}
@media print{[data-noprint]{display:none !important}[data-theme]{--color-bg:#fff;--color-surface:#fff;--color-text:#111;--color-divider:#ccc;background:#fff !important}[data-sticky]{position:static !important;box-shadow:none !important;border:1px solid #ccc}[data-printgrid]{grid-template-columns:240px 1fr !important}}

.row-link:hover{background:var(--color-surface)}
.toc-link:hover{color:var(--color-accent-700) !important}
.head-link:hover{color:var(--color-accent) !important}
[hidden]{display:none !important}

/* Recipe text rendered from Markdown */
.md-h{font-family:var(--font-heading);font-weight:400;line-height:1.2;margin:30px 0 12px}
.md-list{margin:0 0 16px;padding-left:22px}.md-list li{margin:0 0 10px;padding-left:4px}
.md-p{margin:0 0 16px;text-wrap:pretty}

/* Ingredient check-off */
.ing input{appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border-radius:50%;border:2px solid var(--color-accent);background:transparent;box-shadow:inset 0 0 0 3px var(--color-surface);cursor:pointer}
.ing input:checked{background:var(--color-accent)}
.ing input:checked + span{text-decoration:line-through;opacity:.5}

/* Rating picker */
.pick{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--color-neutral-200);flex:none}
.pick.on{background:var(--color-accent-2-200)}
.pick button{position:absolute;top:0;height:100%;width:50%;border:0;background:transparent;cursor:pointer}
.pick button:first-of-type{left:0;border-radius:24px 0 0 24px}.pick button:last-of-type{right:0;border-radius:0 24px 24px 0}

/* Narrow screens: the design is laid out for desktop, these keep it usable on a phone. */
@media (max-width:760px){
  .wrap{padding-left:16px !important;padding-right:16px !important}
  .hdr{padding:12px 16px !important;gap:12px !important}
  .page-title{font-size:36px !important}
  .recipe-grid{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
  .recipe-grid aside{position:static !important}
  .cat-grid{grid-template-columns:minmax(0,1fr) auto auto !important}
  .cat-grid .col-source{display:none}
  .meta > span{white-space:normal !important;flex:0 1 auto !important}
  .recipe-grid > *{min-width:0}
}