/* ═══════════════════════════════════════════════════════════════
   Vinnie's Sports Bar & Grill and Vinnie's Caddyshack — staff chrome
   Every color is a token. When the real Vinnie's brand colors
   arrive, this block is the only place that changes.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Sampled straight off the real menus and marks, so the tool sits in
     the same world as the printed pieces rather than near it.
       paper  #EFE8DE  the menu stock
       rule   #802020  the red under every section head
       gold   #C09040  the ring on the Vinnie's badge
       olive  #504020  the CADDYSHACK wordmark            */
  --paper:#EFE8DE;         /* the working surface, the menu's own stock */
  --paper-2:#E6DDD0;       /* wells and insets */
  --card:#F7F2EA;          /* card surface, never pure white */
  --oat:#DACEBC;           /* hairline */
  --oat-2:#C6B8A1;

  --olive:#504020;         /* the brand's dark, off the wordmark */
  --olive-2:#463818;
  --olive-deep:#332811;    /* the band and the screens */
  --olive-edge:#241C0B;

  --red:#872523;           /* section heads and rules */
  --red-2:#6E1C1B;
  --red-lt:#A03028;
  --red-bright:#C02818;    /* the V on both marks, small accents only */
  --red-soft:rgba(135,37,35,.09);

  --gold:#C09040;          /* the badge ring */
  --gold-lt:#D9A94E;
  --gold-ink:#7C5A1C;      /* gold dark enough for small type on paper, 5.0:1 */
  --gold-soft:rgba(192,144,64,.16);

  --ink:#3A3222;           /* body, 9.8:1 on paper */
  --ink-soft:#6B6152;
  --cream:#F7EFE2;         /* type on the dark */
  --line:rgba(58,50,34,.14);
  --line-2:rgba(58,50,34,.22);

  /* A slab, like the printed menu, but with real weights so the big
     display sizes are not a wall of ink. Display only, never body. */
  --fd:'Roboto Slab',Georgia,serif;
  --fb:'DM Sans',system-ui,-apple-system,sans-serif;
  /* The face the screens are set in. Condensed caps are what bar and
     stadium signage has always used, and they hold a long word at a
     size that reads across a room. Screens only, never the tools. */
  --fs:'Oswald','Roboto Slab',Arial Narrow,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* the old names still used in a few places, mapped onto the new set */
  --bottle:var(--olive-deep); --bottle-2:var(--olive-2); --bottle-3:var(--olive-edge);
  --parchment:var(--paper); --parchment-2:var(--paper-2); --bone:var(--card);
  --oxblood:var(--red); --oxblood-2:var(--red-2); --oxblood-lt:var(--red-lt);
  --oxblood-soft:var(--red-soft); --pine:var(--ink); --pine-soft:var(--ink-soft);
}
/* ── one accent apart ─────────────────────────────────────────────
   Two brands under one owner: same green, same parchment, one color
   between them so a bartender can tell at a glance which room a menu
   or a screen belongs to.

   --room      the room's color, used as a FILL
   --room-on   the type that sits on that fill
   --room-ink  the room's color as TEXT, on parchment only

   Oxblood on the dark green board is about 1.4:1, so it never appears
   as type on green. On a screen the room color is a filled nameplate
   with cream on it, which clears 7:1. */
/* Each room's accent is taken from its own mark: Vinnie's is the gold
   ring, Caddyshack is the olive wordmark.

   --room-ink    the accent as TYPE, on paper
   --room-plate  a light plate for dark surfaces, with --room-plate-on
                 as the type on it. A dark accent on the dark board
                 would vanish, so on the screens the plate is always
                 the light element and the type on it the dark one. */
[data-room="gretna"]{                 /* Vinnie's Sports Bar & Grill */
  --room:#C09040; --room-ink:#6E5015;
  --room-plate:#C09040; --room-plate-on:#33280F;
  --room-soft:rgba(192,144,64,.16);
}
[data-room="metairie"]{               /* Vinnie's Caddyshack */
  --room:#504020; --room-ink:#504020;
  --room-plate:#F0E7D8; --room-plate-on:#3E3218;
  --room-soft:rgba(80,64,32,.13);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  min-height:100vh;background:var(--parchment);
  background-image:
    radial-gradient(760px 520px at 12% -8%, rgba(176,141,66,.16), transparent 62%),
    radial-gradient(620px 480px at 96% 108%, rgba(22,48,31,.09), transparent 60%);
  color:var(--pine);font-family:var(--fb);
  display:flex;flex-direction:column;
}

/* ── the green band ───────────────────────────────────────────── */
.band{
  position:relative;overflow:hidden;background:var(--bottle);
  background-image:radial-gradient(680px 300px at 50% -40%, var(--bottle-2), transparent 70%);
  padding:1.15rem 1.5rem;box-shadow:0 14px 40px -26px rgba(15,34,22,.9);
}
.band::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none;mix-blend-mode:overlay;}
.band::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);opacity:.5;}
.band-in{position:relative;z-index:1;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:1.1rem;}
.band-in.centered{justify-content:center;}

/* The two marks are different shapes: Vinnie's is a round badge, Caddy
   Shack a wide stacked lockup. So nothing is cropped to a circle. Each
   is sized by HEIGHT with width auto, on a cream plate when it has to
   sit on the dark band, which is also how they sit on the real menus. */
.seal{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper);border-radius:14px;padding:8px 12px;text-decoration:none;
  box-shadow:0 0 0 1.5px var(--gold),0 10px 24px -12px rgba(0,0,0,.55);
}
.seal img{height:46px;width:auto;display:block;}
.seal.lg{padding:10px 16px;border-radius:16px;}
.seal.lg img{height:66px;}

.band-tool{display:flex;flex-direction:column;gap:3px;min-width:0;}
.band-tool .t{font-family:var(--fd);font-weight:600;font-size:1rem;color:var(--cream);line-height:1.1;}
.band-tool .s{font-size:.6rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);}

/* the compact room switcher, used on the editor pages */
.loc{display:inline-flex;gap:3px;background:rgba(0,0,0,.26);border:1px solid rgba(246,240,227,.16);border-radius:999px;padding:4px;}
.loc.hidden{display:none;}
.loc button{
  font-family:var(--fb);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(246,240,227,.72);background:none;border:none;border-radius:999px;
  padding:.6rem 1.05rem;min-height:44px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;
}
.loc button:hover{color:var(--cream);}
.loc button.on{background:var(--gold);color:#241B07;box-shadow:0 2px 8px -2px rgba(0,0,0,.5);}

.band-acts{margin-left:auto;display:flex;align-items:center;gap:.55rem;}
.band-acts.hidden{display:none;}
.tb-btn{
  font-family:var(--fb);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:rgba(246,240,227,.8);background:transparent;border:1.5px solid rgba(246,240,227,.24);
  border-radius:999px;padding:.58rem 1.05rem;min-height:44px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;transition:border-color .2s,color .2s;
}
.tb-btn:hover{border-color:var(--gold);color:var(--cream);}

/* ── page frame ───────────────────────────────────────────────── */
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:2.8rem 1.5rem 3rem;flex:1;}
.rule{width:52px;height:2px;background:var(--red);margin:0 auto 1.7rem;position:relative;}
.rule::after{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%) rotate(45deg);width:7px;height:7px;background:var(--gold);}
/* Alfa Slab One ships one weight, so size and spacing do the work */
h1{font-family:var(--fd);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.14;letter-spacing:-.4px;color:var(--ink);}
h1 .it{color:var(--red);}
.lead{font-size:1.04rem;line-height:1.7;color:var(--ink-soft);}
/* the red bar under a heading, straight off the printed menu */
.eyebrow{font-family:var(--fb);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}

.panel{background:var(--bone);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(27,42,32,.03),0 22px 48px -32px rgba(22,48,31,.5);padding:1.5rem;}
.panel-title{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
  margin-bottom:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.panel-title .count{font-size:.7rem;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--pine-soft);}

/* ── fields: wake softly, never a hard edge ───────────────────── */
.field{margin-bottom:1rem;}
.frow{display:flex;gap:.85rem;}
.frow .field{flex:1;min-width:0;}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--pine);margin-bottom:.4rem;}
.field .req{font-size:.68rem;font-weight:700;color:var(--oxblood);text-transform:uppercase;letter-spacing:.06em;}
.field .opt{font-size:.72rem;font-weight:400;color:var(--pine-soft);}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--fb);font-size:1rem;color:var(--pine);background:var(--parchment-2);
  border:1.5px solid var(--oat);border-radius:12px;padding:.72rem .85rem;min-height:50px;outline:none;
  transition:border-color .22s,box-shadow .22s,background .22s,transform .22s;
}
.field textarea{resize:vertical;min-height:76px;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:#A79C89;}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(176,141,66,.55);background:var(--bone);transform:translateY(-1px);
  box-shadow:0 0 0 4px var(--gold-soft),0 8px 18px -12px rgba(22,48,31,.45);
}
.field input.need{border-color:rgba(138,46,40,.55);background:var(--bone);box-shadow:0 0 0 4px rgba(138,46,40,.1);}
.hint{font-size:.78rem;line-height:1.5;color:var(--pine-soft);margin-top:.32rem;}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{
  font-family:var(--fb);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);background:linear-gradient(180deg,var(--oxblood-lt),var(--oxblood) 52%,var(--oxblood-2));
  border:none;border-radius:999px;padding:.85rem 1.6rem;min-height:50px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(138,46,40,.55);}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn-ghost{
  font-family:var(--fb);font-size:.78rem;font-weight:600;color:var(--pine);background:rgba(27,42,32,.03);
  border:1.5px solid var(--oat-2);border-radius:999px;padding:.85rem 1.35rem;min-height:50px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-soft);}
.btn-ghost svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn-ghost.hidden,.btn.hidden{display:none;}

.saved{font-size:.78rem;font-weight:600;color:var(--gold-ink);opacity:0;transition:opacity .3s;}
.saved.show{opacity:1;}

footer{text-align:center;padding:1.8rem;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pine-soft);}
footer span{color:var(--gold-ink);margin:0 .5rem;}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}
  .btn:hover,.tool:hover,.sf:hover{transform:none;}}
@media(max-width:640px){
  .wrap{padding:2.2rem 1.1rem 2.4rem;}
  .band{padding:.95rem 1.1rem;}
  .band-in{flex-wrap:wrap;gap:.85rem;}
  .seal{width:58px;height:58px;}
  .seal.lg{width:66px;height:66px;}
  .frow{flex-direction:column;gap:0;}
  .loc{order:5;width:100%;justify-content:center;}
  .loc button{flex:1;padding:.6rem .4rem;}
}