/* ═══════════════════════════════════════════════════════════════════════
   brew27.css – visual language v3 ("Kitchen 2027" design system, adapted to amber/beer).
   Loaded after theme-2027.css; remaps tokens and restyles shared components.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"InterV";src:url(fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@view-transition{navigation:auto}
:root{
  --accent:oklch(0.72 0.16 65);              /* amber / pale ale */
  --accent-hover:oklch(0.64 0.16 60);
  --accent-ink:oklch(0.99 0 0);
  --accent-dim:color-mix(in oklch,var(--accent) 16%,transparent);
  --accent-soft:var(--accent-dim);
  --bg:oklch(0.975 0.008 80);--surface-2:oklch(0.95 0.01 80);
  --surface:oklch(1 0 0 / .8);
  --text:oklch(0.2 0.012 60);--muted:oklch(0.52 0.012 60);--ink-2:oklch(0.42 0.01 60);
  --border:oklch(0.2 0.01 60 / .09);
  --glass:oklch(1 0 0 / .62);--glass-strong:oklch(1 0 0 / .86);--glass-line:oklch(1 0 0 / .7);
  --ok:oklch(0.66 0.15 150);--green:var(--ok);--danger:oklch(0.6 0.2 25);
  --radius:24px;--radius-sm:16px;--r-xl:34px;
  --shadow:0 1px 2px oklch(0.2 0.02 60 / .05),0 8px 24px -8px oklch(0.2 0.02 60 / .14);
  --shadow-hover:0 2px 6px oklch(0.2 0.02 60 / .06),0 24px 60px -20px oklch(0.2 0.02 60 / .3);
  --spring:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.1,1.079 30.6%,1.019 38.5%,0.995 43.3%,0.988 48.3%,0.994 59.6%,1.001 76.7%,1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --tabbar-h:72px;
}
[data-theme="dark"]{
  --accent:oklch(0.78 0.15 70);--accent-ink:oklch(0.18 0.03 60);
  --bg:oklch(0.15 0.01 60);--surface-2:oklch(0.2 0.012 60);--surface:oklch(0.21 0.012 60 / .78);
  --text:oklch(0.96 0.006 80);--muted:oklch(0.68 0.01 80);--ink-2:oklch(0.8 0.008 80);
  --border:oklch(1 0 0 / .08);
  --glass:oklch(0.22 0.012 60 / .58);--glass-strong:oklch(0.22 0.012 60 / .9);--glass-line:oklch(1 0 0 / .08);
  --shadow:0 1px 2px oklch(0 0 0 / .3),0 10px 30px -10px oklch(0 0 0 / .6);
  --shadow-hover:0 2px 6px oklch(0 0 0 / .35),0 30px 70px -20px oklch(0 0 0 / .8);
}
html{scroll-padding-top:84px}
body,.bkb-nav,.bkb-tabbar,.bkb-sheet{font-family:"InterV",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-feature-settings:"cv11","ss01","ss03"}
body{line-height:1.5;overflow-x:hidden}
:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 70%,white);outline-offset:2px}

/* Ambient aurora (amber + hop green) */
.bk-aurora{position:fixed;inset:-20vh -10vw auto;height:70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 50% at 18% 30%,color-mix(in oklch,var(--accent) 30%,transparent),transparent 70%),
             radial-gradient(35% 45% at 85% 8%,oklch(0.82 0.11 125 / .35),transparent 70%);
  filter:blur(40px);opacity:.8}
[data-theme="dark"] .bk-aurora{opacity:.45}

/* Top bar → glass */
.bkb-nav{background:var(--glass)!important;-webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important;border-bottom:1px solid var(--border)!important;view-transition-name:topbar}
.bkb-brand{font-weight:740!important;letter-spacing:-.025em!important;font-size:18px}
.bkb-brand-icon{width:34px!important;height:34px!important;border-radius:11px!important;background:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:0 6px 16px -6px var(--accent)!important}
.bkb-link{font-weight:560!important;font-size:15px!important;color:var(--ink-2)!important;padding:8px 14px!important;transition:background .2s,color .2s}
.bkb-link:hover{background:var(--border)!important}
.bkb-link.active{background:var(--text)!important;color:var(--bg)!important}
.bkb-icon-btn{background:var(--surface)!important;border-color:var(--border)!important}

/* Bottom tab bar → floating pill dock */
@media (max-width:767.98px){
  body{padding-bottom:calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom))!important}
  .bkb-tabbar{left:50%!important;right:auto!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;transform:translateX(-50%);
    width:min(460px,calc(100vw - 20px));height:auto!important;padding:6px!important;gap:2px;border-radius:999px;
    background:var(--glass-strong)!important;border:1px solid var(--glass-line)!important;box-shadow:var(--shadow-hover);view-transition-name:dock}
  .bkb-tab{min-height:56px;border-radius:999px;font-size:11px!important;color:var(--muted)!important;transition:color .25s,background .35s var(--spring),transform .35s var(--spring)}
  .bkb-tab:active{transform:scale(.92)}
  .bkb-tab.active{color:var(--text)!important;background:var(--surface);box-shadow:var(--shadow)}
  .bkb-tab.active i{color:var(--accent)}
  .bkb-tab.active::before{display:none}
}
.bkb-sheet{left:8px!important;right:8px!important;bottom:8px!important;border-radius:var(--r-xl)!important;background:var(--glass-strong)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-line);max-width:560px;margin:0 auto;transition:transform .5s var(--spring)!important}
.bkb-sheet-bg{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:oklch(0 0 0 / .3)!important}
.bkb-sheet-item{background:var(--surface)!important;border-radius:20px!important;flex-direction:column;align-items:flex-start!important;gap:14px!important;padding:16px!important;transition:transform .35s var(--spring)}
.bkb-sheet-item:active{transform:scale(.96)}

/* Page + typography */
.bk-page{max-width:1240px;padding:18px 16px 24px;view-transition-name:page}
@media (min-width:900px){.bk-page{padding:32px 32px 40px}}
.bk-eyebrow{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bk-head h1,.bk-display{font-size:clamp(34px,7vw,56px)!important;line-height:1!important;letter-spacing:-.045em!important;font-weight:780!important;text-wrap:balance;margin:2px 0 6px!important}
.bk-head h1 em,.bk-display em{font-style:normal;color:var(--accent)}
.bk-head p{font-size:16px;color:var(--muted)}

/* Cards */
.bk-card,.bk-stat{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:28px!important;box-shadow:var(--shadow)!important}
.bk-card-head{border-bottom:0!important;padding:18px 18px 4px!important}
.bk-card-head h3{font-size:19px!important;letter-spacing:-.02em;font-weight:720!important}
.bk-stat b,.bk-stat .v{font-size:34px;letter-spacing:-.04em;font-weight:760}

/* Buttons */
.bk-btn{min-height:48px;padding:0 20px;border-radius:999px!important;font-weight:650!important;font-size:15px;transition:transform .35s var(--spring),background .2s,box-shadow .2s!important}
.bk-btn:active{transform:scale(.95)}
.bk-btn.primary{background:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:0 10px 24px -10px var(--accent)!important;border-color:transparent!important}
.bk-btn.ghost{background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--text)!important}
.bk-btn.dark{background:var(--text)!important;color:var(--bg)!important}
.bk-btn.sm{min-height:38px;padding:0 14px;font-size:14px}
.bk-btn.icon{width:48px;padding:0}
.bk-btn.sm.icon{width:38px}

/* Chips / tabs / segmented */
.bk-tabs{scrollbar-width:none}
.bk-tabs::-webkit-scrollbar{display:none}
.bk-tabs button,.bk-tabs a,.bk-chip{height:38px;padding:0 14px;border-radius:999px!important;background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--ink-2)!important;font-weight:600!important;font-size:14px;flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:transform .3s var(--spring),background .2s}
.bk-tabs button:active,.bk-chip:active{transform:scale(.95)}
.bk-tabs button.active,.bk-tabs a.active,.bk-chip.on{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important}
.bk-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border)}
.bk-seg button,.bk-seg label{position:relative;display:grid;place-items:center;min-height:42px;border-radius:14px;border:0;background:none;cursor:pointer;font-weight:650;color:var(--ink-2);font-size:14px;padding:0 10px;transition:background .3s var(--spring),color .2s,transform .3s var(--spring);white-space:nowrap}
.bk-seg input{position:absolute;opacity:0;pointer-events:none}
.bk-seg .on,.bk-seg label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.bk-seg button:active{transform:scale(.96)}

/* Fields */
.bk-search,.bk-field2{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 8px 0 16px;border-radius:999px!important;background:var(--surface-2)!important;border:1px solid var(--border)!important;transition:border-color .2s,box-shadow .2s}
.bk-search:focus-within{border-color:color-mix(in oklch,var(--accent) 60%,transparent)!important;box-shadow:0 0 0 4px var(--accent-dim)}
.bk-search input{border:0!important;background:none!important;box-shadow:none!important;font-size:16px;height:48px;flex:1;min-width:0;outline:none}
.bk-form input:not([type=checkbox]):not([type=radio]),.bk-form select,.bk-form textarea,.bk-in{min-height:52px;border-radius:16px!important;border:1px solid var(--border)!important;background:var(--surface-2)!important;color:var(--text)!important;font-size:16px;padding:0 16px;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}
.bk-form input:focus,.bk-form select:focus,.bk-form textarea:focus,.bk-in:focus{border-color:color-mix(in oklch,var(--accent) 60%,transparent)!important;box-shadow:0 0 0 4px var(--accent-dim)!important}
.bk-num{display:grid;gap:4px;padding:12px 14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border);transition:border-color .2s,box-shadow .2s}
.bk-num:focus-within{border-color:color-mix(in oklch,var(--accent) 60%,transparent);box-shadow:0 0 0 4px var(--accent-dim)}
.bk-num span{font-size:13px;font-weight:650;color:var(--ink-2)}
.bk-num div{display:flex;align-items:baseline;gap:6px}
.bk-num input,.bk-num select{width:100%;min-width:0;border:0;background:none;outline:none;font-size:24px;font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text);padding:0}
.bk-num select{font-size:17px;font-weight:650}
.bk-num small{color:var(--muted);font-weight:600}

/* Pills */
.bk-pill{border-radius:999px!important;font-weight:700!important}

/* Sheet (detail drawer): bottom sheet on phones, side drawer on desktop */
.bk-sheet{position:fixed;inset:0;z-index:1060;display:none}
.bk-sheet.open{display:block}
.bk-sheet-bg{position:absolute;inset:0;background:oklch(0 0 0 / .35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:bk-fade .3s var(--ease)}
.bk-sheet-panel{position:absolute;left:8px;right:8px;bottom:8px;max-height:88dvh;overflow:auto;padding:10px 18px calc(18px + env(safe-area-inset-bottom));border-radius:var(--r-xl);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-line);box-shadow:var(--shadow-hover);animation:bk-rise .55s var(--spring)}
.bk-grabber{width:40px;height:5px;border-radius:9px;background:var(--border);margin:4px auto 10px}
@media (min-width:900px){
  .bk-sheet-panel{left:auto;top:12px;right:12px;bottom:12px;width:480px;max-height:none;animation:bk-slide .5s var(--spring)}
  .bk-grabber{display:none}
}

/* Toast */
.bkb-toast{border-radius:999px!important;background:var(--text)!important;color:var(--bg)!important;font-weight:600;box-shadow:var(--shadow-hover)}

/* Motion */
.bk-reveal{animation:bk-rise .7s var(--spring) both;animation-delay:calc(var(--d,0) * 50ms)}
@keyframes bk-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bk-slide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes bk-fade{from{opacity:0}}
::view-transition-old(page){animation:.2s var(--ease) both bk-vt-out}
::view-transition-new(page){animation:.36s var(--ease) both bk-vt-in}
@keyframes bk-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes bk-vt-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.bkb-tabbar,.bkb-nav,.bk-aurora{display:none!important}}

/* ── Admin / settings pages (brewery_admin, user_admin, super_admin, mail_setup) ── */
.bk-admin{max-width:1040px}
.bk-admin + .bk-admin{padding-top:0}
.bk-admin-h1{font-size:clamp(30px,5vw,46px)!important}
.bk-admin .section-card,.bk-admin .card,.bk-admin .admin-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:28px!important;box-shadow:var(--shadow)!important;padding:20px!important;margin-bottom:16px;scroll-margin-top:140px;break-inside:avoid}
.bk-admin .section-title,.bk-admin .card-header{font-size:19px!important;font-weight:740!important;letter-spacing:-.02em;color:var(--text)!important;background:none!important;border:0!important;padding:0 0 12px!important;display:flex;align-items:center;gap:10px}
.bk-admin .section-title i,.bk-admin .card-header i{width:34px;height:34px;border-radius:11px;display:inline-grid;place-items:center;background:var(--accent-dim);color:var(--accent)!important;font-size:16px;flex:none}
.bk-admin .form-control,.bk-admin .form-select{min-height:48px;border-radius:14px;border-color:var(--border);background:var(--surface-2);color:var(--text)}
.bk-admin .form-control:focus,.bk-admin .form-select:focus{border-color:color-mix(in oklch,var(--accent) 60%,transparent);box-shadow:0 0 0 4px var(--accent-dim)}
.bk-admin .btn{border-radius:999px;font-weight:650;min-height:40px;padding-left:16px;padding-right:16px}
.bk-admin .btn-primary,.bk-admin .btn-success,.bk-admin .btn-warning{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.bk-admin table{font-size:14.5px}
.bk-admin th{font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;font-weight:700!important;background:none!important}
.bk-admin td{border-color:var(--border)!important;vertical-align:middle}
@media (min-width:1100px){
  .bk-admin .bk-admin-cols{column-count:2;column-gap:16px}
}
.bk-jump{position:sticky;top:62px;z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 0 10px;margin:0 0 6px;background:linear-gradient(var(--bg) 75%,transparent)}
.bk-jump::-webkit-scrollbar{display:none}
.bk-jump a{text-decoration:none}