/* ==========================================================================
   visibility-guide.css — /restaurant-google-visibility-guide.html
   Added 2026-09-06.

   SHARED SHELL. This page also links assets/css/menu-engineering.css, which by
   now holds the shared article shell rather than anything menu-specific:
   .mg-wrap, .mg-hero, .mg-body, .mg-fig, .mg-band, .mg-note, .mg-toc,
   .mg-steps, .mg-cta, .mg-btn, .mg-faq, .mg-sources and the whole motion
   layer. Nothing is duplicated here. The filename is now misleading and wants
   renaming to article-shell.css, but that rename would mean editing the live
   menu-engineering guide, which this task is not permitted to touch.

   TOKENS. Nothing new. Every value below is already in use on the estate:
     gold      #E1B168  #9a6b12 (accessible on cream)  #B08A55  #D4A656
     ink       #1F2937  #111827  #374151  #4B5563  #6b7280  #9CA3AF
     surfaces  #FBF7F0  #F9FAFB  #F3F4F6
     rules     #E5E7EB  #E9DCC5
     type      'Playfair Display' headings, 'Montserrat' body
     radius    6px 8px 10px 50% 999px
     easing    cubic-bezier(0.22,1,0.36,1)

   NO-JS FLOOR. As in the shell, every start state below is scoped under
   .motion-on, and that class is only added by script after it has confirmed
   the reader has not asked for reduced motion. With JavaScript off, or with
   reduced motion on, nothing is ever hidden and every graphic is already in
   its final readable state.
   ========================================================================== */

/* ---------- control / cannot control summary ---------- */

.vg-control { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.75rem 0 2rem; }
@media (min-width: 640px) { .vg-control { grid-template-columns: 1fr 1fr; } }
.vg-col { border: 1px solid #E5E7EB; border-radius: 10px; padding: 1.125rem 1.25rem; background: #F9FAFB; }
.vg-col.is-fixed { background: #FBF7F0; border-color: #E9DCC5; }
.vg-col h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 0.75rem !important; color: #9a6b12;
}
.vg-col.is-fixed h3 { color: #4B5563; }
.vg-col ul { margin: 0; padding-left: 1.15rem; }
.vg-col li { font-size: 0.9375rem !important; line-height: 1.6; color: #374151; margin-bottom: 0.45rem; }

/* ---------- 1. relevance / distance / prominence ---------- */

.vg-pillars { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vg-pillars { grid-template-columns: repeat(3, 1fr); } }
.vg-pillar { border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 1rem; }
.vg-pillar.is-fixed { background: #FBF7F0; border-color: #E9DCC5; }
.vg-pillar h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; color: #111827; margin: 0 0 0.35rem; }
.vg-pillar p { font-size: 0.875rem !important; line-height: 1.6; color: #374151; margin: 0 0 0.75rem; }
.vg-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; border: 1px solid;
}
.vg-tag.is-work { color: #7a5405; background: #F4E6CB; border-color: #E1B168; }
.vg-tag.is-lock { color: #374151; background: #F3F4F6; border-color: #D1D5DB; }
.vg-tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Height is reserved before the bar animates, so nothing under it moves. */
.vg-meter { height: 6px; border-radius: 999px; background: #F3F4F6; border: 1px solid #E5E7EB; overflow: hidden; margin-top: 0.75rem; }
.vg-meter span { display: block; height: 100%; background: #B08A55; }
.vg-pillar.is-fixed .vg-meter span { background: #9CA3AF; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 8px); }

.motion-on .vg-pillar { opacity: 0; transform: translateY(10px); }
.motion-on .mg-fig-in .vg-pillar { opacity: 1; transform: none; transition: opacity 460ms cubic-bezier(0.22,1,0.36,1), transform 460ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .vg-pillar:nth-child(1) { transition-delay: 120ms; }
.motion-on .mg-fig-in .vg-pillar:nth-child(2) { transition-delay: 260ms; }
.motion-on .mg-fig-in .vg-pillar:nth-child(3) { transition-delay: 400ms; }
.motion-on .vg-meter span { width: 0 !important; }
.motion-on .mg-fig-in .vg-meter span { width: var(--mg-w) !important; transition: width 800ms cubic-bezier(0.22,1,0.36,1) 500ms; }

/* ---------- 2. profile accuracy checklist ---------- */

.vg-card { border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; overflow: hidden; }
.vg-card-head {
  background: #F9FAFB; border-bottom: 1px solid #E5E7EB; padding: 0.75rem 1rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280;
}
.vg-rows { list-style: none; margin: 0; padding: 0; }
.vg-rows li {
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.7rem 1rem; border-bottom: 1px solid #F3F4F6;
  font-size: 0.9375rem; color: #1F2937; line-height: 1.4;
}
.vg-rows li:last-child { border-bottom: 0; }
.vg-rows .vg-check {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: #E1B168; color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}
.vg-rows .vg-state { margin-left: auto; font-size: 0.75rem; color: #6b7280; text-align: right; }
/* The one row that demonstrates a stale value. Both readings are in the HTML;
   the script only swaps which is shown, so with JS off the corrected value is
   what the reader sees. */
.vg-rows li.is-demo .vg-state b { color: #7a5405; font-weight: 700; }
.vg-was { display: none; }
.motion-on .vg-rows li { opacity: 0; }
.motion-on .mg-fig-in .vg-rows li { opacity: 1; transition: opacity 340ms ease; }
.motion-on .mg-fig-in .vg-rows li:nth-child(1) { transition-delay: 80ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(2) { transition-delay: 180ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(3) { transition-delay: 280ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(4) { transition-delay: 380ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(5) { transition-delay: 480ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(6) { transition-delay: 580ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(7) { transition-delay: 680ms; }
.motion-on .mg-fig-in .vg-rows li:nth-child(8) { transition-delay: 780ms; }

/* ---------- 3. maps vs website split path ---------- */

.vg-paths { display: grid; gap: 0.875rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .vg-paths { grid-template-columns: 1fr 1fr; } }
.vg-path { border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 1rem; }
.vg-path h4 { font-family: 'Montserrat', sans-serif; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #9a6b12; margin: 0 0 0.75rem; }
.vg-step { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; color: #374151; line-height: 1.55; padding: 0.4rem 0; }
.vg-step .vg-node { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #B08A55; margin-top: 0.45rem; }
.vg-path + .vg-path .vg-node { background: #1F2937; }
.vg-join {
  grid-column: 1 / -1; text-align: center; border: 1px solid #E9DCC5; background: #FBF7F0;
  border-radius: 8px; padding: 0.75rem 1rem; font-weight: 600; color: #111827; font-size: 0.9375rem;
}
.motion-on .vg-path, .motion-on .vg-join { opacity: 0; transform: translateY(8px); }
.motion-on .mg-fig-in .vg-path, .motion-on .mg-fig-in .vg-join { opacity: 1; transform: none; transition: opacity 440ms cubic-bezier(0.22,1,0.36,1), transform 440ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .vg-path:nth-of-type(1) { transition-delay: 140ms; }
.motion-on .mg-fig-in .vg-path:nth-of-type(2) { transition-delay: 340ms; }
.motion-on .mg-fig-in .vg-join { transition-delay: 600ms; }

/* ---------- responsive comparison table ---------- */

.vg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border: 1px solid #E5E7EB; border-radius: 10px; }
.vg-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.9375rem; }
.vg-table th, .vg-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid #F3F4F6; vertical-align: top; line-height: 1.55; color: #374151; }
.vg-table thead th { background: #F9FAFB; color: #111827; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 1px solid #E5E7EB; }
.vg-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- 4. review request comparison ---------- */

.vg-two { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .vg-two { grid-template-columns: 1fr 1fr; } }
.vg-quote { border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 1rem; }
.vg-quote.is-flagged { background: #FBF7F0; border-color: #E9DCC5; }
.vg-quote h4 { font-family: 'Montserrat', sans-serif; font-size: 0.875rem; font-weight: 700; color: #111827; margin: 0 0 0.625rem; }
.vg-said {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; line-height: 1.55;
  color: #1F2937; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px;
  padding: 0.75rem 0.875rem; margin: 0 0 0.75rem;
}
/* Meaning never rests on colour: each card carries a word label and a shape. */
.vg-verdict { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; }
.vg-verdict .vg-mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 20px; }
.vg-verdict.is-ok { color: #1F2937; }
.vg-verdict.is-ok .vg-mark { background: #1F2937; color: #fff; }
.vg-verdict.is-no { color: #7a5405; }
.vg-verdict.is-no .vg-mark { background: #F4E6CB; color: #7a5405; border: 1px solid #E1B168; }
.motion-on .vg-quote { opacity: 0; transform: translateY(8px); }
.motion-on .mg-fig-in .vg-quote { opacity: 1; transform: none; transition: opacity 440ms cubic-bezier(0.22,1,0.36,1), transform 440ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .vg-quote:nth-child(1) { transition-delay: 120ms; }
.motion-on .mg-fig-in .vg-quote:nth-child(2) { transition-delay: 300ms; }
.motion-on .vg-verdict { opacity: 0; }
.motion-on .mg-fig-in .vg-verdict { opacity: 1; transition: opacity 420ms ease 720ms; }

/* ---------- 5. pdf vs web menu ---------- */

.vg-docs { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .vg-docs { grid-template-columns: 1fr 1fr; } }
.vg-doc { border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 1rem; }
.vg-doc.is-preferred { background: #FBF7F0; border-color: #E9DCC5; }
.vg-doc h4 { font-family: 'Montserrat', sans-serif; font-size: 0.875rem; font-weight: 700; color: #111827; margin: 0 0 0.5rem; }
.vg-doc ul { margin: 0.5rem 0 0; padding-left: 1.15rem; }
.vg-doc li { font-size: 0.875rem !important; line-height: 1.55; color: #374151; margin-bottom: 0.35rem; }
.vg-sheet { height: 74px; border-radius: 6px; border: 1px solid #E5E7EB; background: #fff; padding: 0.55rem 0.65rem; display: flex; flex-direction: column; gap: 5px; }
.vg-sheet i { display: block; height: 5px; border-radius: 3px; background: #E5E7EB; }
.vg-doc.is-preferred .vg-sheet i { background: #E1D4B8; }
.vg-sheet i:nth-child(1) { width: 55%; }
.vg-sheet i:nth-child(2) { width: 88%; }
.vg-sheet i:nth-child(3) { width: 76%; }
.vg-sheet i:nth-child(4) { width: 84%; }
.vg-stamp { font-size: 0.6875rem; color: #6b7280; margin: 0.5rem 0 0; }
.vg-stamp b { color: #7a5405; }
.vg-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.vg-links span { font-size: 0.6875rem; border: 1px solid #E1B168; background: #F4E6CB; color: #7a5405; border-radius: 999px; padding: 2px 8px; }
.motion-on .vg-doc { opacity: 0; transform: translateY(8px); }
.motion-on .mg-fig-in .vg-doc { opacity: 1; transform: none; transition: opacity 440ms cubic-bezier(0.22,1,0.36,1), transform 440ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .vg-doc:nth-child(1) { transition-delay: 120ms; }
.motion-on .mg-fig-in .vg-doc:nth-child(2) { transition-delay: 300ms; }
.motion-on .vg-links span { opacity: 0; }
.motion-on .mg-fig-in .vg-links span { opacity: 1; transition: opacity 380ms ease; }
.motion-on .mg-fig-in .vg-links span:nth-child(1) { transition-delay: 760ms; }
.motion-on .mg-fig-in .vg-links span:nth-child(2) { transition-delay: 900ms; }

/* ---------- 6. two routines ---------- */

.vg-routines { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vg-routines { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.vg-routine h4 {
  font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9a6b12; margin: 0 0 0.875rem;
}
/* The shell's .mg-steps is horizontal from 860px. Two routines side by side
   need the vertical rail at every width, so that rule is overridden here. */
.vg-routine .mg-steps { display: block !important; }
.vg-routine .mg-steps li { padding: 0 0 1.125rem 3rem !important; }
.vg-routine .mg-steps li::before { top: 0; left: 0; width: 30px; height: 30px; font-size: 0.8125rem; }
.vg-routine .mg-steps li::after { left: 14px !important; top: 30px !important; bottom: 0 !important; right: auto !important; width: 2px !important; height: auto !important; }
.vg-routine .mg-steps .mg-ico { display: none; }
.vg-routine .mg-steps b { font-size: 0.9375rem; }
.vg-routine .mg-steps span { font-size: 0.8125rem; }

/* ---------- reduced motion: strip every start state ---------- */

@media (prefers-reduced-motion: reduce) {
  .motion-on .vg-pillar,
  .motion-on .vg-rows li,
  .motion-on .vg-path,
  .motion-on .vg-join,
  .motion-on .vg-quote,
  .motion-on .vg-verdict,
  .motion-on .vg-doc,
  .motion-on .vg-links span { opacity: 1 !important; transform: none !important; }
  .motion-on .vg-meter span { width: var(--mg-w) !important; }
}
@media print {
  .vg-pillar, .vg-rows li, .vg-path, .vg-join, .vg-quote, .vg-doc { opacity: 1 !important; transform: none !important; }
  .vg-tablewrap { overflow: visible; }
}