/* ── Shared CSS | staging.menuva.co.uk ── */

/* Design tokens */
:root{
  --bg:#FAFAFA;--bg2:#F5F5F5;
  --card:#FFFFFF;
  --t1:#1A1A1A;--t2:#6B6B6B;--t3:#9A9A9A;--t4:#C7C7CC;
  --bdr:#E8E8E8;--bdr2:#F0F0F0;
  --acc:#12B3A8;
  --shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.04);
  --rr:50px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --accent:#555
}

/* Reset + base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--t1);
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

/* Scrollbar + selection */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
::selection{background:rgba(18,179,168,.12);color:var(--t1)}

/* Skip link */
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--card);border-radius:0 0 12px 12px;box-shadow:var(--shadow);font:500 .875rem/1 var(--font);color:var(--t1);z-index:100;transition:top .2s;text-decoration:none}
.skip-link:focus{top:0}

/* Focus */
:focus{outline:2px solid var(--acc);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.kb-focus{outline:2px solid var(--acc);outline-offset:2px;border-radius:20px}

/* Nav bar */
nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;gap:12px;align-items:center
}
.tabs{
  display:flex;
  background:rgba(245,245,245,.92);
  border-radius:var(--rr);
  padding:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.06);
  border:1px solid rgba(255,255,255,.45);
  max-width:calc(100vw - 40px)
}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .tabs{background:rgba(255,255,255,.35);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6)}
}
.tabs a{
  background:none;
  padding:12px clamp(12px,3.5vw,22px);
  border-radius:var(--rr);
  font:500 clamp(.8125rem,2.8vw,.875rem)/1 var(--font);
  color:var(--t3);
  cursor:pointer;
  transition:color .15s,background .15s,box-shadow .15s;
  white-space:nowrap;
  text-decoration:none
}
.tabs a.active{
  background:rgba(50,50,52,.85);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15)
}
.tabs a:active{opacity:.7}
@media(hover:hover){.tabs a:hover:not(.active){color:var(--t2)}}
@media(max-width:390px){.tabs{max-width:calc(100vw - 20px)}}

/* Language toggle */
.lang-toggle{background:none;padding:12px clamp(12px,3.5vw,22px);border-radius:var(--rr);border:none;font:500 clamp(.8125rem,2.8vw,.875rem)/1 var(--font);color:var(--t3);cursor:pointer;transition:color .15s;white-space:nowrap}
.lang-toggle:active{opacity:.7}
@media(hover:hover){.lang-toggle:hover{color:var(--t1)}}

/* Command palette */
.cmd-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.25);
  opacity:0;pointer-events:none;
  transition:opacity .15s
}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .cmd-overlay{backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);background:rgba(0,0,0,.18)}
}
.cmd-overlay.open{opacity:1;pointer-events:auto}
.cmd-palette{
  position:absolute;
  top:min(20vh,160px);
  left:50%;
  transform:translateX(-50%) scale(.97);
  width:calc(100% - 40px);
  max-width:480px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .15s cubic-bezier(.2,.9,.3,1),opacity .15s;
  opacity:0;
  contain:layout style
}
.cmd-overlay.open .cmd-palette{transform:translateX(-50%) scale(1);opacity:1}
.cmd-input-wrap{position:relative}
.cmd-x{
  display:none;
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border:none;
  border-radius:50%;
  background:var(--bg2);
  color:var(--t3);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .15s,color .15s;
  z-index:1
}
@media(hover:hover){.cmd-x:hover{background:var(--bdr);color:var(--t2)}}
.cmd-x::before,.cmd-x::after{
  content:'';
  position:absolute;
  width:10px;
  height:1.5px;
  background:currentColor;
  border-radius:1px
}
.cmd-x::before{transform:rotate(45deg)}
.cmd-x::after{transform:rotate(-45deg)}
.cmd-input{
  display:block;width:100%;
  padding:14px 42px 14px 44px;
  border:none;
  border-radius:var(--rr);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 16px center/18px no-repeat;
  font:400 1rem/1 var(--font);
  color:var(--t1);
  outline:none;
  box-sizing:border-box;
  box-shadow:0 8px 40px rgba(0,0,0,.16),0 2px 12px rgba(0,0,0,.08)
}
.cmd-input::placeholder{color:var(--t4)}
.cmd-results{
  max-height:min(40vh,320px);overflow-y:auto;padding:6px 0;
  background:var(--card);
  border-radius:20px;
  box-shadow:0 8px 40px rgba(0,0,0,.16),0 2px 12px rgba(0,0,0,.08);
  scrollbar-width:none
}
.cmd-results::-webkit-scrollbar{display:none}
.cmd-results:empty{display:none}
.cmd-row{
  display:flex;align-items:center;
  width:100%;padding:9px 20px;
  border:none;background:none;
  font:400 .9375rem/1.3 var(--font);
  color:var(--t1);
  cursor:pointer;text-align:left;
  transition:background .1s
}
.cmd-row.cmd-active{background:var(--bg2)}
@media(hover:hover){.cmd-row:hover{background:var(--bg2)}}
.cmd-row-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-row-type{
  flex-shrink:0;margin-left:12px;
  font-size:.6875rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);
  padding:3px 8px;
  background:var(--bg);
  border-radius:6px
}
.cmd-empty{padding:24px 20px;text-align:center;color:var(--t3);font-size:.875rem}

/* Download link */
.dl-link{margin-bottom:14px;max-width:400px;margin-left:auto;margin-right:auto}
.dl-link a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 20px;
  font-size:.9375rem;
  font-weight:600;
  color:#fff;
  background:#48484A;
  text-decoration:none;
  border-radius:20px;
  box-shadow:var(--shadow);
  transition:background .15s,transform .1s
}
@media(hover:hover){.dl-link a:hover{background:#3A3A3C;transform:translateY(-1px)}}
.dl-link a:active{transform:translateY(0) scale(.985)}

/* Footer */
.site-footer{text-align:center;padding:12px 16px 20px;font:400 .6875rem/1.4 var(--font);color:var(--t4)}
.site-footer a{color:var(--t4);text-decoration:none}
@media(hover:hover){.site-footer a:hover{color:var(--t3)}}