/* web/app.css - phone layout for showmacros.com/app, loaded after popup.css.
   The popup is a fixed 440px box; here it fills the screen (up to a
   comfortable reading width on tablets and computers). */

html.sm-web { background: var(--bg-page); -webkit-text-size-adjust: 100%; }
html.sm-web body {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: visible;
  /* iPhone notch and home bar */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
html.sm-web .header { padding-top: max(16px, env(safe-area-inset-top)); }

/* Phones: 16px text in inputs stops iOS zooming in on focus. */
@media (max-width: 600px) {
  html.sm-web input, html.sm-web textarea, html.sm-web select { font-size: 16px; }
  html.sm-web { --gutter: 16px; }
}

/* Bigger tap targets and text on touch screens (44px is Apple's minimum). */
@media (pointer: coarse) {
  html.sm-web .overflow-item { min-height: 44px; }
  html.sm-web .nr-chip { padding: 10px 14px; font-size: 13px; }
  html.sm-web .nr-paste { padding: 13px 10px; }
  html.sm-web .theme-toggle,
  html.sm-web .header-share-btn { min-height: 40px; min-width: 40px; }
  /* Batch size (½× 1× 2× 3×), % DV / % cal, copy: tiny in the popup. */
  html.sm-web .recipe-scale button { font-size: 13px; padding: 7px 9px; }
  html.sm-web .total-macros-label { white-space: nowrap; }
  /* Narrow phones: the size buttons drop under the label instead of running off the screen. */
  html.sm-web .total-macros-head { flex-wrap: wrap; row-gap: 8px; }
  html.sm-web .recipe-scale-wrap { margin-left: auto; }
  html.sm-web .recipe-scale-custom { padding: 4px 8px; font-size: 13px; }
  html.sm-web .recipe-scale-custom input { width: 38px; height: 28px; }
  html.sm-web .pct-mode-toggle { font-size: 12px; padding: 6px 10px; }
  html.sm-web .copy-macros-button { min-width: 36px; min-height: 36px; }
  html.sm-web .ing-mac-short { font-size: 12px; }
  /* Scan dots and streak: hover tips can't be hovered on a phone, so a tap
     shows them (app.js makes them focusable), wrapped to fit the screen. */
  html.sm-web .usage-counter[data-tip]:focus::after,
  html.sm-web .streak-badge:focus::after { opacity: 1; transform: translateY(0); }
  html.sm-web .usage-counter[data-tip]::after,
  html.sm-web .streak-badge::after { white-space: normal; width: max-content; max-width: 220px; }
  html.sm-web .usage-counter:focus, html.sm-web .streak-badge:focus { outline: none; }
}

/* Small phones: the header holds name, scans left, Invite and the ⋯ menu;
   the streak flame (least needed) makes way so ⋯ stays on screen. */
@media (max-width: 400px) {
  html.sm-web .streak-badge { display: none !important; }
}

a.overflow-item { text-decoration: none; color: inherit; }

/* "2 left" beside the scan dots (web/app.js sets data-left). */
html.sm-web .usage-counter[data-left]::before { content: attr(data-left); font-size: 11px; font-weight: 600; color: var(--text-muted); margin-right: 3px; white-space: nowrap; }

/* Start screen (web/app.js): why, one button, How it works. */
.web-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #059669;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.web-btn:hover { background: #047857; }
.web-btn-quiet { color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-light); }
.web-btn-quiet:hover { background: var(--bg-page); border-color: rgba(16,185,129,0.5); color: #059669; }
.web-hint { margin-top: 8px; }

.web-link-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.web-link-input { flex: 1 1 180px; height: 44px; line-height: 44px; }
.web-link-go { height: 44px; padding: 0 16px; flex: 0 0 auto; }
.web-link-error { flex-basis: 100%; font-size: 13px; color: var(--color-error); }

.web-source { color: var(--color-link); font-weight: 600; text-decoration: none; white-space: nowrap; }



/* Start screen: why, one button, then How it works (01 02 03 as on the
   homepage), each step with its picture. */
.web-start .nr-title { font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
.web-why { font-size: 14px !important; line-height: 1.55 !important; }
.web-share-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--color-link); }
.web-why .web-share-ico { width: 17px; height: 17px; vertical-align: -3px; }
.web-note { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-muted); text-align: center; }
.web-done { font-size: 14px; font-weight: 600; color: var(--text-primary); text-align: center; }
.how { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); }
.how-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.how-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.how-step { display: flex; gap: 12px; }
.how-n { flex: none; width: 22px; padding-top: 1px; font-size: 13px; font-weight: 700; color: #059669; font-variant-numeric: tabular-nums; }
.how-body { flex: 1; min-width: 0; }
.how-title { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.how-sub { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.how-pic { display: block; width: 100%; max-width: 360px; margin-top: 10px; border-radius: 14px; }
.web-try { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); }
.web-try .web-chips { margin-top: 10px; }
.web-beta { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #059669; background: rgba(16,185,129,0.12); vertical-align: 1px; }
.web-beta-note { margin-top: 18px; font-size: 12px; line-height: 1.45; color: var(--text-muted); text-align: center; }
.web-back { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--color-link); text-decoration: none; white-space: nowrap; }

/* Phone feel: no tap delay; the top bar is slightly see-through over the
   scrolling results (solid when the phone asks for less transparency). */
html.sm-web button, html.sm-web a, html.sm-web .nr-chip { touch-action: manipulation; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.sm-web .header { background: color-mix(in srgb, var(--bg-card) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
}
@media (prefers-reduced-transparency: reduce) {
  html.sm-web .header { background: var(--bg-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Lost in an earlier clean-up, put back: the quiet "Like it? On a computer…"
   line under phone results, and the gap above "Open a recipe to try it". */
.web-ext-line { margin: 16px var(--gutter) 4px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.web-ext-line a { color: var(--color-link); font-weight: 600; text-decoration: none; }
.web-practice { margin-top: 12px; }
#webPinTip { margin: 12px 0 0; }
/* Recipe line with "Back to recipe": the name shortens, the link stays. */
html.sm-web .recipe-title { display: flex; align-items: baseline; gap: 4px; }
html.sm-web .recipe-title-label { flex: none; }
html.sm-web .recipe-title-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.sm-web .web-back { flex: none; margin-left: auto; }

/* After setup: only the next step shows (web/app.js showTryNow). */
.web-focused > *:not(#webTryNow) { display: none !important; }
.web-trynow .how { margin-top: 12px; padding-top: 0; border-top: 0; }
.web-again { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* iPhone: the looping Share demo at the top of the setup. */
.web-demo { margin: 16px auto 6px; width: 236px; }
.web-demo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.18)); }
/* The rating ask links to the Chrome Web Store: not on phones. */
html.sm-web #nudgeCard.nudge-rate { display: none !important; }

/* Website "Get Pro": covers the start screen on the way to Google / Stripe. */
.web-pro-cover { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg-primary, #fff); color: var(--text-secondary, #4b5563); font-size: 15px; font-weight: 600; }

/* Get Pro on an account that already has Pro (web/app.js showAlreadyPro). */
.web-pro-done { align-items: flex-start; padding: 64px 20px; overflow: auto; background: var(--bg-secondary, #f6f7f9); font-weight: 400; }
.wpd-box { width: 100%; max-width: 480px; margin: 0 auto; padding: 36px 36px 30px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 1px 3px rgba(17,24,39,.06), 0 12px 32px rgba(17,24,39,.06); text-align: center; color: #374151; }
.wpd-ok { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: #ecfdf5; color: #059669; display: grid; place-items: center; }
.wpd-ok svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wpd-box h1 { margin: 0 0 10px; text-align: center; font: 700 28px/1.2 "Roboto Slab", Georgia, serif; color: #111827; }
.wpd-box p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.wpd-acct { color: #111827; }
.wpd-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.wpd-btn { display: block; padding: 14px 20px; border: 1px solid #111827; border-radius: 8px; background: #111827; color: #fff; font: 600 16px/1.2 inherit; text-decoration: none; cursor: pointer; }
.wpd-btn:hover { background: #1f2937; }
.wpd-ghost { background: #fff; color: #111827; border-color: #d1d5db; }
.wpd-ghost:hover { background: #f9fafb; }