/* Art — chat + embedded doc
   Scope: only elements the assistant renders.
   Uses your existing tokens (brand gold) if defined.
*/
/* Copy of Apothecary module styles — built to align with Pixel + pixel-overrides.css */
/* Uses brand tokens already defined in pixel-overrides.css (e.g., --brand-gold) */

/* --- Layout: left (content) + right (rail) --- */

/* 0) Tokens */
:root{
  /* fonts/colors already used by your theme — keep/add as needed */
  --bs-body-font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --bs-primary:#b08a48;
  --bs-primary-rgb:176,138,72;
  /* keep link colors inherited from global theme */

  /* Ensure body text is not gray */
  --color-bg: #fff;
 
  --color-accent: var(--brand-gold, #b08a48);
  
  --bs-body-color:#000;        /* <— main text color */
  --bs-heading-color:#000;     /* <— headings */
  --bs-body-bg:#fff;           /* <— page background (optional but recommended) */

  /* brand gold used for borders + scrollbar */
  --brand-gold:#b08a48;
}


#mainContainer.apoth-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 992px){
  #mainContainer.apoth-main{
    grid-template-columns: 1fr 1fr; /* 50/50 split on lg+ */
  }
}
#leftColumn,
#rightColumn{ min-width: 0; }






/* (The 1400px 3-up override is no longer needed and is removed.) */

 /* Keep non-rail hub-btn styling only */
#privateColumns .hub-btn,
#privateColumns .hub-btn.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 30px;
  padding: 0.18rem 0.48rem;
  font-size: 0.84rem;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
  break-inside: avoid;
}

/* Default pill behavior in right column (non-masonry contexts) */
#rightColumn .hub-btn,
#rightColumn .hub-btn.btn {
  display: inline-flex;
  max-width: 100%;
}

/* Masonry context: make pills full-width bricks inside columns */
#apothecaryButtons .hub-btn,
#apothecaryButtons .hub-btn.btn {
  display: inline-block !important;
  width: 100% !important;
  margin: 0 0 0.75rem 0 !important;
  break-inside: avoid !important;
}

/* moved: right-rail button width/nowrap now lives in aromarecipecard.css */

/* moved: right-rail UL/LI grid now lives in aromarecipecard.css */

/* moved: right-rail item span rules now live in aromarecipecard.css */


/* Stop any right-rail buttons/links from stretching full width */
/* moved: right-rail anti-stretch rules now live in aromarecipecard.css */



/* Top module nav (Apothecary) — responsive layout WITHOUT forcing full-width */
#hubNav{
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  grid-auto-rows: minmax(116px, 1fr) !important;
  gap: 10px !important;
}

/* Mobile-first: ensure tiles, never a stacked column */
@media (max-width: 991.98px){
  #hubNav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    gap: 10px !important;
  }
  /* Tiles fill their grid cells (match hub mobile sizing) */
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav button{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--bs-body-color, #000) !important;
    box-sizing: border-box !important;
  }
}

/* Desktop keeps your pill row */
@media (min-width: 992px){
  #hubNav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.18rem 0.48rem !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    gap: 0.75rem !important;
    border-radius: 0.5rem !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* Pills inside #hubNav fill their grid cell on mobile/tablet */
#hubNav .hub-btn{
  width: 100%;
}

/* On desktop, compact row with wrapping and auto-width pills */
@media (min-width: 992px){
  /* Desktop: identical to Pixel secondary-nav */
 #hubNav{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
 padding: 0.18rem 0.48rem !important;     /* small pill */
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  gap: 0.75rem !important; 
  border-radius: 0.5rem !important;                  /* match Pixel’s airy desktop gap */
 
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}



  /* Pills: same size as Pixel overrides (small) */
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav .nav-link.btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.18rem 0.48rem !important;     /* Pixel small pill */
    font-size: 0.84rem !important;           /* Pixel small text */
    line-height: 1.2 !important;
    gap: 0.75rem !important; 
    width: auto !important;
    white-space: nowrap !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* States: hover/focus/active/aria (non-rail only) */
#privateColumns .hub-btn:hover,
#hubNav .hub-btn:hover,
#privateColumns .hub-btn:focus,
#hubNav .hub-btn:focus,
#privateColumns .hub-btn:focus-visible,
#hubNav .hub-btn:focus-visible,
#privateColumns .hub-btn:active,
#hubNav .hub-btn:active,
#privateColumns .hub-btn[aria-pressed="true"],
#hubNav .hub-btn[aria-pressed="true"]{
  outline: none;
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2);
  background-color: #fff;
  color: #000;
}

/* Disabled */
#privateColumns .hub-btn:disabled,
#hubNav .hub-btn:disabled,
#apothecaryButtons .hub-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Fallback for plain buttons in non-rail container */
#hubNav button:not(.btn):not(.hub-btn){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 30px;
  padding: 0.18rem 0.48rem;
  font: inherit;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Keep brand look in dark mode (non-rail only) */
@media (prefers-color-scheme: dark){
  #privateColumns .hub-btn,
  #hubNav .hub-btn,
  #hubNav button:not(.btn){
    background-color: #fff;
    color: #000;
    border-color: var(--brand-gold, #b08a48);
  }
}

/* --- Top module nav (buttons you placed inside #hubNav) --- */
/* removed duplicate overrides: margins/width are already defined above; 
   this block forced width:auto on mobile and caused spacing mismatch */

/* --- Generic sections / messages used by loader --- */
/* Block gold box on right rail column and buttons container */
/* Scope the gold box ONLY to left column sections */
#leftColumn .apoth-section{
  background: #fff;
  border: 1px solid #b08a48;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  max-height: none;   /* explicit */
  height: auto;       /* ensure it shrinks to content */
}


.apoth-hint{
  color: #555;
  font-size: 0.95rem;
}
.apoth-error{
  color: #a10000;
}

/* --- Chat UI used by Aromatherapy assistant --- */
.rc-wrap{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.5rem;
}
.apoth-tabs{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.apoth-tab{
  display: inline-block;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-weight: 600;
}

.rc-title{
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rc-title--msg{ font-size: 0.95rem; color: #333; }

.chat-scroll{
  border: 1px solid rgba(0,0,0,.075);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem;
  max-height: 50vh;
  overflow: auto;
}

.action-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.composer__input{
  flex: 1 1 auto;
  min-height: 38px;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.2;
  resize: vertical;
}
/* Credit action pill — apply in header, NAVBAR, and within Apothecary UI */
.site-header .credit-button,
header .credit-button,
.navbar .credit-button,
.rc-wrap .credit-button,
.apoth-rail .credit-button,
#rightColumn .credit-button{

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 38px !important;
  padding: 0.35rem 0.6rem !important;
  border: 1px solid var(--brand-gold, #b08a48) !important; /* brand gold outline */
  border-radius: 0.5rem !important;
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important;  /* gold text */
  box-sizing: border-box !important;
  cursor: pointer;
}

.credit-button:hover,
.credit-button:focus,
.site-header .credit-button:hover,
.site-header .credit-button:focus,
header .credit-button:hover,
header .credit-button:focus,
.navbar .credit-button:hover,
.navbar .credit-button:focus,
.rc-wrap .credit-button:hover,
.rc-wrap .credit-button:focus,
.apoth-rail .credit-button:hover,
.apoth-rail .credit-button:focus,
#rightColumn .credit-button:hover,
#rightColumn .credit-button:focus{
  outline: none !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important; /* keep gold on hover/focus */
}

/* Navbar outline buttons — normalize to BRAND GOLD across all common variants */
.site-header .navbar .btn-outline-dark,
.site-header .navbar .btn-outline-black,
.site-header .navbar .btn-outline-gray,
.site-header .navbar .btn-outline-primary,
.site-header .navbar .btn-outline-secondary,
.site-header .navbar .btn-outline-light,
.navbar .btn-outline-dark,
.navbar .btn-outline-black,
.navbar .btn-outline-gray,
.navbar .btn-outline-primary,
.navbar .btn-outline-secondary,
.navbar .btn-outline-light,
.site-header .navbar .nav-link.btn.btn-outline-dark,
.site-header .navbar .nav-link.btn.btn-outline-black,
.site-header .navbar .nav-link.btn.btn-outline-gray,
.site-header .navbar .nav-link.btn.btn-outline-primary,
.site-header .navbar .nav-link.btn.btn-outline-secondary,
.site-header .navbar .nav-link.btn.btn-outline-light,
.navbar .nav-link.btn.btn-outline-dark,
.navbar .nav-link.btn.btn-outline-black,
.navbar .nav-link.btn.btn-outline-gray,
.navbar .nav-link.btn.btn-outline-primary,
.navbar .nav-link.btn.btn-outline-secondary,
.navbar .nav-link.btn.btn-outline-light{
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important; /* gold text */
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
}

.site-header .navbar .btn-outline-dark:hover,
.site-header .navbar .btn-outline-black:hover,
.site-header .navbar .btn-outline-gray:hover,
.site-header .navbar .btn-outline-primary:hover,
.site-header .navbar .btn-outline-secondary:hover,
.site-header .navbar .btn-outline-light:hover,
.site-header .navbar .btn-outline-dark:focus,
.site-header .navbar .btn-outline-black:focus,
.site-header .navbar .btn-outline-gray:focus,
.site-header .navbar .btn-outline-primary:focus,
.site-header .navbar .btn-outline-secondary:focus,
.site-header .navbar .btn-outline-light:focus,
.navbar .btn-outline-dark:hover,
.navbar .btn-outline-black:hover,
.navbar .btn-outline-gray:hover,
.navbar .btn-outline-primary:hover,
.navbar .btn-outline-secondary:hover,
.navbar .btn-outline-light:hover,
.navbar .btn-outline-dark:focus,
.navbar .btn-outline-black:focus,
.navbar .btn-outline-gray:focus,
.navbar .btn-outline-primary:focus,
.navbar .btn-outline-secondary:focus,
.navbar .btn-outline-light:focus,
.site-header .navbar .nav-link.btn.btn-outline-dark:hover,
.site-header .navbar .nav-link.btn.btn-outline-black:hover,
.site-header .navbar .nav-link.btn.btn-outline-gray:hover,
.site-header .navbar .nav-link.btn.btn-outline-primary:hover,
.site-header .navbar .nav-link.btn.btn-outline-secondary:hover,
.site-header .navbar .nav-link.btn.btn-outline-light:hover,
.site-header .navbar .nav-link.btn.btn-outline-dark:focus,
.site-header .navbar .nav-link.btn.btn-outline-black:focus,
.site-header .navbar .nav-link.btn.btn-outline-gray:focus,
.site-header .navbar .nav-link.btn.btn-outline-primary:focus,
.site-header .navbar .nav-link.btn.btn-outline-secondary:focus,
.site-header .navbar .nav-link.btn.btn-outline-light:focus,
.navbar .nav-link.btn.btn-outline-dark:hover,
.navbar .nav-link.btn.btn-outline-black:hover,
.navbar .nav-link.btn.btn-outline-gray:hover,
.navbar .nav-link.btn.btn-outline-primary:hover,
.navbar .nav-link.btn.btn-outline-secondary:hover,
.navbar .nav-link.btn.btn-outline-light:hover,
.navbar .nav-link.btn.btn-outline-dark:focus,
.navbar .nav-link.btn.btn-outline-black:focus,
.navbar .nav-link.btn.btn-outline-gray:focus,
.navbar .nav-link.btn.btn-outline-primary:focus,
.navbar .nav-link.btn.btn-outline-secondary:focus,
.navbar .nav-link.btn.btn-outline-light:focus{
  background: #fff !important;
  color: #000 !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
}

/* Ensure Credits stays gold even if combined with Bootstrap outline variants */
.navbar .credit-button,
.site-header .navbar .credit-button{
  color: var(--brand-gold, #b08a48) !important;
}
.navbar .credit-button:hover,
.navbar .credit-button:focus,
.site-header .navbar .credit-button:hover,
.site-header .navbar .credit-button:focus{
  color: var(--brand-gold, #b08a48) !important;
}
/* Hard-lock Credits pill to gold in header/nav regardless of outline or nav-link utilities */
.site-header .navbar .nav-link.btn.credit-button,
.site-header .navbar .btn.credit-button,
.navbar .nav-link.btn.credit-button,
.navbar .btn.credit-button,
.site-header .navbar .nav-link.btn[class*="btn-outline-"].credit-button,
.navbar .nav-link.btn[class*="btn-outline-"].credit-button{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background: #fff !important;
}

.site-header .navbar .nav-link.btn.credit-button:hover,
.site-header .navbar .nav-link.btn.credit-button:focus,
.navbar .nav-link.btn.credit-button:hover,
.navbar .nav-link.btn.credit-button:focus{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
}

/* Final specificity lock so Credits text never flips to black in any header/nav variant */
body .navbar .credit-button,
body .site-header .credit-button{
  color: var(--brand-gold, #b08a48) !important;
}

/* removed duplicate #hubNav block — rules already defined earlier.
   Keeping a single source of truth prevents order/specificity conflicts. */

/* moved: right-rail recipe item width now lives in aromarecipecard.css */
/* Guard against generic composer width rules leaking in */
#artistChatForm .composer__input { width: 100% !important; max-width: 100% !important; }

/* ===== Divider between top nav and assistant links (wins over Pixel hr rules) ===== */
.artist-divider,
hr.artist-divider{
  display: block !important;
  width: 100% !important;
  height: 1px !important;                      /* override hr:not([size]) */
  background: var(--brand-gold, #b08a48) !important;
  border: 0 !important;
  opacity: 1 !important;                       /* override hr default opacity */
  margin: .75rem 0 !important;                 /* even spacing above/below */
}
.secondary-nav + .artist-divider,
.secondary-nav + hr.artist-divider{ margin-top: .75rem !important; }
.artist-divider + #assistantNav,
hr.artist-divider + #assistantNav{ margin-top: .75rem !important; }

/* ===== Assistant links: remove default underline entirely here ===== */
#assistantNav .nav-link{
  text-decoration: none !important;            /* kill grey UA underline */
}

/* Active/selected assistant: GOLD underline (border-bottom wins over Pixel/Bootstrap) */
#privateSecondaryNav #assistantNav .nav-link.active,
#privateSecondaryNav #assistantNav .nav-link[aria-current="page"],
#privateSecondaryNav #assistantNav .nav-link[aria-selected="true"]{
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 2px solid var(--brand-gold, #b08a48) !important;
}


/* Hover state: subtle gold cue (not grey) */
#assistantNav .nav-link:hover{
  text-decoration: none !important;
  box-shadow: inset 0 -1px 0 0 var(--brand-gold, #b08a48) !important;
}

/* ===== Assistant links: kill Pixel/Bootstrap focus rings just for this row ===== */
#assistantNav .nav-link,
#assistantNav .btn{
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;   /* no square border on focus/active */
}

/* Hover/active cue: GOLD underline via border-bottom (no UA underline, no box) */
#privateSecondaryNav #assistantNav .nav-link:hover,
#privateSecondaryNav #assistantNav .nav-link.active{
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;  /* prevent grey UA underline */
  border-bottom: 2px solid var(--brand-gold, #b08a48) !important;
}

/* Balance spacing above/below the divider regardless of prior hubNav margins */
#privateSecondaryNav #hubNav {
  margin-top: .75rem !important;
  margin-bottom: .75rem !important;
}

/* ===== Mobile lock: force the TOP NAV back into a grid ===== */
@media (max-width: 991.98px){
  /* #hubNav itself becomes the grid */
  #privateSecondaryNav .secondary-nav > #hubNav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  /* Flatten wrappers so items fill cells */
  #privateSecondaryNav #hubNav .nav-item { display: contents !important; }
  #privateSecondaryNav #hubNav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--bs-body-color, #000) !important;
    box-sizing: border-box !important;
  }
}

/* ===== Assistant links: compact brick/grid (content-sized columns) ===== */
#assistantNav {
  display: grid !important;
  /* narrower tiles so more assistants fit on a single row */
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content)) !important;
  grid-auto-rows: minmax(32px, auto) !important;
  grid-auto-flow: row dense !important;
  justify-content: start !important;
  align-content: start !important;
  gap: 1.9rem !important;
  padding: 0.18rem 0 !important;
  margin-top: .95rem !important;
  margin-bottom: 0 !important;
}


/* Make LI wrapper transparent so the link can occupy the grid cell naturally */
#assistantNav .nav-item{ display: contents !important; }


/* Assistant links (no boxes). Keep icon + label inline; allow wrapping. */
#assistantNav .nav-link,
#assistantNav .btn,
#assistantNav button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: .5rem !important;
  width: auto !important;
  /* narrow text column so words stack vertically */
  max-width: 8ch !important;
  min-height: 32px !important;
  padding: 0.125rem 0.25rem !important;
  margin: 0 0.25rem 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #000 !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;      /* let long labels wrap */
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/* Hover: subtle underline */
#assistantNav .nav-link:hover{
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* Active/selected: gold underline (no box) */
#assistantNav .nav-link.active{
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--brand-gold, #b08a48) !important;
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Focus: keep accessibility without drawing a box */
#assistantNav .nav-link:focus,
#assistantNav .nav-link:focus-visible{
  outline: 2px solid rgba(176,138,72,.35) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border: 0 !important;
}
#assistantNav .nav-link{
  position: relative;
}

/* Vertical gold divider between assistant links (buttons removed) */
#assistantNav .nav-item + .nav-item .nav-link::before,
#assistantNav .nav-link + .nav-link::before{
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.1em;
  background: var(--brand-gold, #b08a48);
}