/* static/css/menu_strip.css — shared favorites strip as tab bar */
:root{
  --hgap:8px;
  --padY:.12rem;
  --padX:.48rem;
  --radius:10px;
  --border:#bfdbfe;
  --border-strong:#93c5fd;
  --text:#1e3a8a;

  /* Make the rail match the app-shell/blue panel vibe */
  --rail-bg:#dbeafe;      /* blue-100 */
  --tab-bg:#ffffff;
  --tab-hover:#f8fafc;
  --active-bg:#dbeafe;    /* same as rail so active blends */
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* === TAB BAR BACKGROUND (match app shell) === */
.menu-strip{
  position:relative;
  background:var(--rail-bg);
  padding:0.28rem 0 0.10rem 0;
  border-radius:.80rem .80rem 0 0;
  border-bottom:1px solid #bfdbfe;
  margin-bottom:0;
}

/* row that holds tabs + pencil + hamburger */
.hwrap{
  display:flex;
  align-items:flex-end;   /* makes tabs feel seated on the rail */
  gap:0;
  margin:.05rem 0 0;
  min-width:0;
  overflow:hidden;
  padding-right:.25rem;   /* small breathing room at the far right */
}

/* main strip (tabs) uses all remaining space */
#favStrip{
  display:flex;
  align-items:flex-end;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
}

/* tray for overflowed items */
#favTray{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  z-index:40;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:6px 8px;
  box-shadow:var(--shadow);
  gap:4px;
  flex-wrap:wrap;
  overflow:visible;
  max-width:calc(100vw - 16px);
}

/* === TAB LINKS (true “tab” shape) === */
.hlink{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:var(--padY) var(--padX);
  border:1px solid var(--border);
  border-bottom:1px solid var(--border); /* seam line for inactive tabs */
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--tab-bg);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.85rem;
  transition:background .15s ease, border-color .15s ease;
}

.hlink:hover,
.hlink:focus{
  background:var(--tab-hover);
  border-color:var(--border-strong);
  outline:none;
}

/* active tab – visually connected to the rail/panel */
.hlink[aria-current="page"]{
  background:var(--active-bg);
  border-color:#93c5fd;
  border-bottom-color:var(--active-bg); /* hide seam into the rail */
  color:#1e3a8a;
  margin-bottom:-1px;                  /* tuck into rail like real tabs */

  position:relative;
  z-index:2;                           /* IMPORTANT: sits above the rail border */
}


/* hamburger pinned on the right */
.hmore{
  background:transparent;
  border:none;
  padding:0 .25rem;
  cursor:pointer;
  font:inherit;
  order:3;
  flex:0 0 auto;
  margin-left:0;
}

/* pencil sits just left of hamburger */
.heditt{
  order:2;
  flex:0 0 auto;
}

/* density classes used by JS */
.hlink--d1{padding:.10rem .38rem;font-size:.80rem;line-height:1.2}
.hlink--d2{padding:.08rem .34rem;font-size:.75rem;line-height:1.15}

.hwrap.dense-1 #favStrip{gap:4px}
.hwrap.dense-2 #favStrip{gap:3px}
.hwrap.dense-1 .hlink{padding:.10rem .38rem;font-size:.80rem}
.hwrap.dense-2 .hlink{padding:.08rem .34rem;font-size:.75rem}

/* small screens */
@media (max-width:480px){
  .hlink{
    font-size:.78rem;
    padding:.10rem .36rem;
    border-radius:9px 9px 0 0;
  }
}

/* tighten space between pencil and hamburger */
.menu-shell .menu-strip .hwrap { gap:0 !important; }
.menu-shell .menu-strip #favStrip { margin-right:0 !important; }
.menu-shell .menu-strip #moreBtn { margin-left:0 !important; }

/* MOBILE: keep pencil visible + make + and pencil look like icons (NOT tabs) */
@media (max-width: 640px) {

  /* Let tabs area scroll so we can still show ~5 items while icons stay pinned right */
  #favStrip{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* Firefox */
  }
  #favStrip::-webkit-scrollbar{ display:none; }

  /* Actions rail (created by menu_strip.js) */
  #menuActionsRail{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    margin-left:6px;
  }

  /* Make + and ✎ NOT look like tabs */
  #menuActionsRail .hlink,
  #menuActionsRail .hmore,
  #ceMenuAddBtn{
    border:0 !important;
    border-bottom:0 !important;
    background:transparent !important;
    padding:0 .35rem !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #menuActionsRail .hlink:hover,
  #menuActionsRail .hmore:hover,
  #ceMenuAddBtn:hover{
    background:transparent !important;
  }
}

/* FIX: stop seating tabs on the rail (flex-end pushes descenders into the line) */
.menu-strip .hwrap,
.menu-strip #favStrip{
  align-items: center !important;
}

/* tiny extra gutter so descenders never touch the rail */
.menu-strip{
  padding-bottom: 0.06rem !important;  /* was 0.22rem (too tall) */
}
/* === CE FIX: tighten tabs + remove extra gutter before + / ✎ / ☰ === */
:root{
  --hgap:4px;       /* was 8px */
  --padX:.40rem;    /* was .48rem */
}

/* tighter gaps between tabs */
#favStrip{ gap:2px !important; padding-right:10px !important; }

/* remove the “extra space before +” (gap between tabs and the actions rail) */
#menuActionsRail{ margin-left:2px !important; gap:4px !important; }

/* keep labels readable */
.hlink{
  padding: var(--padY) var(--padX) !important;
  font-size: .82rem !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

/* mobile */
@media (max-width:640px){
  :root{ --padX:.34rem; }
  #favStrip{ gap:2px !important; }
  .hlink{
    font-size:.76rem !important;
    min-width:max-content !important;
  }
}