/* The search pages (/recipes, /beans/<slug>, /guides/<slug>; built by scripts/seo-build.mjs): the light legal-page shell with the
   recipe first. Mobile first: the recipe's numbers and «افتح في اكسبلوم» sit in a 390 px phone's first screen. */
main.seo{max-width:560px;gap:12px}
.seo-body header.top{max-width:560px;margin-bottom:10px}
.crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.crumbs a{color:var(--link);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.seo-head{display:grid;gap:6px}
.seo-head h1{font-size:22px;line-height:1.5;color:var(--ink);text-shadow:none;margin:0}
.seo-head .eyebrow-dark{font-size:13px}
.seo-sum{margin:0;color:var(--ink);line-height:1.8;font-size:15px}
.seo-draft{margin:0;background:#fff7e0;border:1px solid #f0d58a;border-radius:10px;padding:8px 12px;font-size:13.5px}
.recipe-card{padding:16px;gap:10px}
.recipe-card h2{font-size:18px;display:flex;align-items:center;gap:6px}
.r-grid strong{font-size:17px;white-space:nowrap}
.open-btn{min-height:52px}
.open-btn.off{background:var(--mint);color:var(--muted);border-color:var(--line);cursor:default}
.open-line{margin-top:-4px;text-align:center}
.open-line bdi{white-space:nowrap}
.r-before{margin:0;font-size:14.5px;line-height:1.8}
.seo-pours{margin:0;padding-inline-start:0;list-style:none;display:grid;gap:6px;font-size:14px}
.seo-pours li{background:var(--bg);border-radius:10px;padding:8px 10px;display:grid;gap:2px}
.seo-pours strong{font-size:13px;color:var(--muted);font-weight:600}
.r-meta{margin:0}
.cup-photo{margin:0}
.cup-photo img{display:block;width:100%;height:auto;border-radius:14px}
.edit-line{margin:0;text-align:center;font-size:15px}
.edit-line a{color:var(--link);font-weight:700}
.seo-about p,.guide-part p{margin:0;line-height:1.9}
.seo-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seo-facts div{background:var(--bg);border-radius:10px;padding:8px 10px}
.seo-facts dt{font-size:12px;color:var(--muted)}
.seo-facts dd{margin:0;font-weight:600;font-size:14.5px}
.seo-facts dd small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.seo-tip{background:var(--mint);border-radius:10px;padding:10px 12px}
.owner-note{margin:0;border-inline-start:4px solid var(--green);background:var(--bg);border-radius:10px;padding:10px 14px}
.owner-note.todo{color:var(--muted);font-size:13.5px}
.seo-ways .chips{justify-content:flex-start}
.links{margin:0;padding-inline-start:20px;display:grid;gap:4px;line-height:1.8}
.links a,.seo-more p a,.seo-modes a{color:var(--link)}
.bean-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bean-link{padding:12px 14px}
.bean-link strong{font-size:16px}
.bean-link .modes{color:var(--green)}
.seo-list h3{margin-top:6px}
.seo-list h3 small{color:var(--muted);font-weight:400}
.steps,.tips{margin:0;padding-inline-start:22px;display:grid;gap:8px;line-height:1.8}
.ice-table{width:100%;border-collapse:collapse;font-size:14px;text-align:center}
.ice-table th{font-size:12px;color:var(--muted);font-weight:600;padding:6px 4px}
.ice-table td{border-top:1px solid var(--line);padding:8px 4px;font-weight:600}
.seo-foot{display:grid;gap:4px;margin-top:8px}
.seo-foot .updated{margin:0;text-align:center;color:var(--muted);font-size:13.5px}
.seo-foot .legal-nav{margin:6px 0 0}
/* A version's rating line (drawn by the Worker once it has 5 ratings, worker/page-rating.mjs) and «كيف طلعت؟» after its open
   (client/page-rate.js; the stars are the app's .stars/.star from style.css). */
.r-rating{margin:-6px 0 0;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:4px}
.r-rating .ic{width:18px;height:18px;color:var(--t-amber)}
.r-rating .ic path{fill:currentColor}
.rate-ask{display:grid;justify-items:center;gap:2px;background:var(--bg);border-radius:12px;padding:10px 12px}
.ra-title{margin:0;font-weight:700;font-size:15px}
.ra-hint,.ra-note{margin:0;font-size:13.5px;color:var(--muted);text-align:center}
.ra-note[data-ui-msg="error"]{color:var(--danger)}