/* Sticky Create page — collapsible icon-rail sidebar of saved cocktails. */

.sidebar{
  width:56px;
  height:calc(100vh - var(--nav-height,65px) - env(safe-area-inset-top));
  height:calc(100dvh - var(--nav-height,65px) - env(safe-area-inset-top));
  position:sticky;
  top:calc(var(--nav-height,65px) + env(safe-area-inset-top));
  align-self:start;
  z-index:20;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--paper);
  border-right:1px solid var(--rule);
  transition:width .2s ease;
  flex-shrink:0;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.sidebar:hover{width:220px;box-shadow:8px 0 18px rgba(15,14,12,.08)}
.sidebar--hidden{display:none}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--muted)}

.sidebar-mobile-header,.sidebar-mobile-trigger,.sidebar-backdrop{display:none}
.sidebar-mobile-trigger[hidden],.sidebar-backdrop[hidden]{display:none!important}

.sidebar-list{list-style:none;margin:0;padding:1rem 0;--sidebar-count:0}
.sidebar-row{list-style:none}

.sidebar-item{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding-block:.6rem;
  padding-inline:1rem;
  border:0;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
  white-space:nowrap;
  color:var(--muted-strong);
  transition:background .15s ease,color .15s ease;
}

/* Past 7 cocktails, vertical padding shrinks smoothly with the item count
   (not in fixed steps) so a 12-cocktail list and a 90-cocktail list each
   get spacing proportional to how much they actually need to fit — down
   to a floor that stays comfortably clickable. */
.sidebar-list--dense .sidebar-item{
  padding-block:clamp(.18rem, calc(.6rem - (var(--sidebar-count) - 7) * .009rem), .6rem);
}
.sidebar-item:focus-visible{
  background:#ece8e0;
  color:var(--ink);
  outline:2px solid var(--ink);
  outline-offset:-2px;
}
@media (hover:hover){
  .sidebar-item:hover:not(.sidebar-item--active){background:#ece8e0;color:var(--ink)}
}
.sidebar-item--active{background:var(--amber-light);color:var(--ink)}
.sidebar-item--active::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--amber);
}
.sidebar-item--active .sidebar-icon{color:var(--amber)}
.sidebar-item--active .sidebar-name{font-weight:700}
.sidebar-item--active:focus-visible{background:var(--amber-light)}

.sidebar-icon{flex:0 0 24px;width:24px;height:24px}

.sidebar-name{
  opacity:0;
  font-size:.85rem;
  font-family:var(--font-ui);
  font-weight:500;
  transition:opacity .15s ease;
}
.sidebar:hover .sidebar-name{opacity:1}

.sidebar-empty{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.75rem 1rem;
  opacity:0;
  white-space:nowrap;
  transition:opacity .15s ease;
}
.sidebar:hover .sidebar-empty{opacity:1}
.sidebar-empty-title{font-size:.8rem;font-weight:500;color:var(--muted-strong);font-family:var(--font-ui)}
.sidebar-empty-sub{font-size:.7rem;color:var(--muted)}

/* ─── unsaved-changes modal ─────────────────────────────────────────────── */

@media (max-width:900px){
  html{scrollbar-gutter:stable}
  .sidebar{
    display:block;
    position:fixed;
    top:calc(var(--nav-height,65px) + env(safe-area-inset-top));
    left:0;
    width:min(86vw,22rem);
    height:calc(100vh - var(--nav-height,65px) - env(safe-area-inset-top));
    height:calc(100dvh - var(--nav-height,65px) - env(safe-area-inset-top));
    z-index:90;
    overflow-x:hidden;
    overflow-y:hidden;
    overscroll-behavior:contain;
    display:flex;
    flex-direction:column;
    transform:translateX(-100%);
    visibility:hidden;
    pointer-events:none;
    background:var(--paper);
    border-right:1px solid var(--rule);
    box-shadow:8px 0 24px rgba(15,14,12,.16);
    transition:transform .2s ease,visibility 0s linear .2s;
  }
  .sidebar:hover{width:min(86vw,22rem);box-shadow:8px 0 24px rgba(15,14,12,.16)}
  .sidebar.sidebar--open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .sidebar.sidebar--hidden{display:none}

  .sidebar-mobile-header{
    position:sticky;
    top:0;
    z-index:1;
    min-height:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.5rem 1rem;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .sidebar-mobile-title{
    font-family:var(--font-display);
    font-size:1.25rem;
    color:var(--ink);
  }
  .sidebar-mobile-close{
    min-width:48px;
    min-height:48px;
    padding:.5rem .75rem;
    border:1px solid var(--rule);
    background:transparent;
    color:var(--ink);
    font-family:var(--font-ui);
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .sidebar-mobile-close:hover{border-color:var(--ink)}

  .sidebar-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:.5rem 0 max(1rem,env(safe-area-inset-bottom));
  }
  .sidebar-list--dense .sidebar-item,.sidebar-item{
    min-height:48px;
    padding:.75rem 1rem;
  }
  .sidebar-name{min-width:0;opacity:1;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
  .sidebar-empty{opacity:1;white-space:normal;padding:1rem}

  .sidebar-mobile-trigger{
    width:100%;
    max-width:34rem;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:-1rem 0 2rem;
    padding:.75rem 1rem;
    border:1px solid var(--ink);
    background:transparent;
    color:var(--ink);
    font-family:var(--font-ui);
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .sidebar-mobile-trigger:hover{background:var(--amber-light)}

  .sidebar-backdrop{
    position:fixed;
    top:calc(var(--nav-height,65px) + env(safe-area-inset-top));
    right:0;
    bottom:0;
    left:0;
    z-index:80;
    display:block;
    border:0;
    background:rgba(15,14,12,.5);
  }
  body.sidebar-drawer-open{overflow:hidden}
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,14,12,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.modal-box{
  background:var(--card);
  border:1px solid var(--rule);
  padding:2rem;
  max-width:340px;
  width:calc(100% - 2rem);
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.modal-msg{font-size:.9rem;color:var(--ink);margin:0 0 1.5rem;line-height:1.5}
.modal-actions{display:flex;flex-direction:column;gap:.6rem}
.modal-actions button{
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.75rem 1rem;
  cursor:pointer;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition:background .15s ease,color .15s ease;
}
#modal-save-go{background:var(--amber);border-color:var(--amber);color:var(--ink)}
#modal-save-go:hover{background:#b07f1f}
#modal-discard-go:hover{background:var(--ink);color:var(--paper)}
#modal-cancel{border-color:var(--rule);color:var(--muted-strong)}
#modal-cancel:hover{border-color:var(--muted-strong)}