/* ── Shared CSS | 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:rgb(255 255 255/.55);
  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 rgb(255 255 255/.42);
  max-width:calc(100vw - 40px)
}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .tabs{background:rgb(255 255 255/.04);backdrop-filter:blur(6px) saturate(180%);-webkit-backdrop-filter:blur(6px) saturate(180%)}
}
.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,.72);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.12),inset 0 1px 0 rgb(255 255 255/.12)
}
.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)}

/* Announcement banner */
.ann-banner{
  max-width:400px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  background:var(--ann-bg);
  border:1px solid var(--ann-bdr);
  font:.8125rem/1.4 var(--font);
  color:var(--ann-color);
  text-decoration:none;
  transition:opacity .2s,transform .1s
}
@media(hover:hover){a.ann-banner:hover{filter:brightness(.95);transform:translateY(-1px)}}
a.ann-banner:active{transform:translateY(0) scale(.985)}
.ann-banner svg{width:18px;height:18px;flex-shrink:0;color:var(--ann-icon)}
.ann-banner span{flex:1;min-width:0}

/* Icon containers */
.picon{width:42px;height:42px;border-radius:14px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.picon svg{width:20px;height:20px;color:var(--t3)}
.picon-open{background:rgba(125,211,160,.15)}
.picon-open svg{color:#5BBF8A}
.picon-closed{background:rgba(244,166,160,.15)}
.picon-closed svg{color:#E08A83}

/* Footer */
.site-footer{text-align:center;padding:12px 16px 20px;font:400 .6875rem/1.4 var(--font);color:var(--t4)}
.site-footer a,.site-footer .footer-link{color:var(--t4);text-decoration:none}
@media(hover:hover){.site-footer a:hover,.site-footer .footer-link:hover{color:var(--t3)}}
.footer-sep{margin:0 6px;color:var(--t4)}
.footer-link{background:none;border:none;font:inherit;cursor:pointer;padding:0}

/* Analytics preferences dialog */
.analytics-dialog-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s;
  outline:none
}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .analytics-dialog-overlay{backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);background:rgba(0,0,0,.18)}
}
.analytics-dialog-overlay.open{opacity:1;visibility:visible}
.analytics-dialog{
  background:var(--card);
  border-radius:20px;
  padding:28px 24px 24px;
  width:calc(100% - 40px);
  max-width:360px;
  box-shadow:0 8px 40px rgba(0,0,0,.16),0 2px 12px rgba(0,0,0,.08);
  transform:scale(.95);opacity:0;
  transition:transform .2s cubic-bezier(.2,.9,.3,1),opacity .2s;
  display:flex;flex-direction:column;gap:16px;
  text-align:center
}
.analytics-dialog-overlay.open .analytics-dialog{transform:scale(1);opacity:1}
.analytics-dialog h2{font-size:1.125rem;font-weight:700;color:var(--t1);letter-spacing:-.02em;margin:0}
.analytics-dialog p{font-size:.8125rem;line-height:1.5;color:var(--t2);margin:0}
.analytics-toggle{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:12px 20px;
  border:1.5px solid var(--bdr);
  border-radius:var(--rr);
  background:none;
  font:500 .875rem/1 var(--font);
  color:var(--t1);
  cursor:pointer;
  transition:background .15s,border-color .15s
}
@media(hover:hover){.analytics-toggle:hover{background:var(--bg2);border-color:var(--t4)}}
.atog-track{
  width:42px;height:24px;border-radius:12px;
  background:var(--bdr);position:relative;flex-shrink:0;
  transition:background .2s
}
.atog-thumb{
  position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s
}
.analytics-toggle[data-state="on"] .atog-track{background:#5BBF8A}
.analytics-toggle[data-state="on"] .atog-thumb{transform:translateX(18px)}
.analytics-toggle[data-state="off"] .atog-track{background:var(--bdr)}
.analytics-dialog-close{
  padding:10px 20px;
  border:none;
  border-radius:var(--rr);
  background:var(--bg2);
  font:500 .875rem/1 var(--font);
  color:var(--t2);
  cursor:pointer;
  transition:background .15s,color .15s
}
@media(hover:hover){.analytics-dialog-close:hover{background:var(--bdr);color:var(--t1)}}

@media(prefers-reduced-motion:reduce){
  .analytics-dialog-overlay,.analytics-dialog,.ann-banner{transition-duration:.01ms!important}
}