/* RM Skins (index only) v1.0 CLEAN
   Scope: #ba-skin skins only. No shell rules.
   Notes:
   - CLEAN rebuild to remove duplicate blocks + fix broken parse that stopped styles applying.
*/

/* ============================================================
   BASE: HOME / IMAGE SKINS
   ============================================================ */

#ba-skin .ba-skin-home-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch; /* lets both columns match height */
}

#ba-skin .ba-skin-home-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;

  height: clamp(420px, 58vh, 620px);

  display: flex;
  align-items: center;
  justify-content: center;
}

#ba-skin .ba-skin-image{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* centers the image */
  object-position: center;
  display: block;
}


/* Right text column */
#ba-skin .ba-skin-home-copy{
  border-radius: 18px;
  padding: 16px 18px;
  height: clamp(420px, 58vh, 620px);
  overflow: auto;
}

/* “Open Feature” overlay anchor (if used) */
#ba-skin .ba-feature-open-row{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
}


/* ============================================================
   ARCHIVE SKIN LAYOUT (2 columns + viewer frames)
   ============================================================ */

#ba-skin .ba-archive-shell{
  min-height: calc(100vh - var(--ba-header-h) - 70px);
}

/* Stage: 2 columns (list wider, detail narrower) */
#ba-skin .ba-archive-grid{
  display: grid;
  grid-by: auto;
  grid-template-columns: minmax(420px, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: stretch; /* columns match */
}


/* Columns behave like vertical stacks */
#ba-skin .ba-archive-col{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Top strips (IMPORT / EXPORT) */
#ba-skin .ba-archive-strip{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 8px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#ba-skin .ba-archive-strip-label{
  color: #FFEFBF;
  opacity: 0.95;
  font-weight: 650;
}

#ba-skin .ba-archive-actions{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-top: 10px;
}

#ba-skin .ba-archive-strip--export{
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}

#ba-skin .ba-archive-strip-btn{
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font: inherit;
  opacity: 0.95;
}
#ba-skin .ba-archive-strip-btn:hover{
  opacity: 1;
  text-decoration: underline;
}

#ba-skin .ba-archive-strip-sep{
  opacity: 0.6;
}

/* Category row above list */
#ba-skin .ba-archive-controls{
  padding: 6px 12px 10px 12px;
}

#ba-skin .ba-archive-controls label{
  font-size: 12px;
  opacity: 0.85;
  margin-right: 8px;
}

#ba-skin #archive-category:focus{
  border-color: rgba(255,127,0,0.55);
  box-shadow: 0 0 0 2px rgba(255,127,0,0.18);
}

/* Caret */
#ba-skin .ba-archive-viewer-head{
  position: sticky;
}
#ba-skin .ba-archive-viewer-head::after{
  content: "▾";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
}

/* Viewer frames */
#ba-skin .ba-archive-viewer{
  height: clamp(420px, 58vh, 620px);
  overflow: auto;

  background: #000;
  border-radius: 14px;
  padding: 10px 10px;
}

/* Right header above detail card */
#ba-skin .ba-archive-header{
  padding: 6px 12px 10px 12px;
}

#ba-skin .ba-archive-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

#ba-skin .ba-archive-title{
  color: #FF7F00;
  font-size: 16px;
  font-weight: 650;
}

#ba-skin .ba-archive-note{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

/* Detail card */
#ba-skin .ba-detail-card{
  height: clamp(420px, 58vh, 620px);
  overflow: auto;

  border-radius: 14px;
  padding: 16px 18px;
}

/* BEGIN BLOCK: RM.Detail.Footer.v1 */

/* Allow footer to sit at bottom of card */
#ba-skin .ba-detail-card{
  display: flex;
  flex-direction: column;
}

/* Footer container for delete action */
#ba-skin .ba-detail-footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: flex-end;
}

/* Delete button styling */
#ba-skin .ba-detail-delete-btn{
  background: none;
  border: none;
  color: var(--ba-muted);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

#ba-skin .ba-detail-delete-btn span{
  font-weight: normal;
}

#ba-skin .ba-detail-delete-btn:hover{
  color: #ff7f00;
}

/* END BLOCK: RM.Detail.Footer.v1 */

/* Detail typography */
#ba-skin .ba-detail-title{
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 8px;
}
#ba-skin .ba-detail-sub{
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 12px;
}
#ba-skin .ba-detail-label{
  opacity: 0.8;
  font-weight: 600;
  margin-right: 6px;
}
#ba-skin .ba-chip-ok{
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  background: rgba(60,200,120,0.18);
  color: rgba(140,255,190,0.95);
}

/* Recipe list items */
#ba-skin .ba-recipe-item{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.55;
  user-select: none;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
}
#ba-skin .ba-recipe-item--clickable{
  opacity: 0.92;
  cursor: pointer;
}
#ba-skin .ba-recipe-item--clickable:hover{
  background: rgba(255,255,255,0.08);
}
#ba-skin .ba-recipe-item--active{
  background: rgba(255,255,255,0.14);
  outline: 1px solid rgba(255,255,255,0.10);
}


/* ============================================================
   MULTI-COLUMN LIST (wide screens)
   ============================================================ */

#ba-skin .ba-archive-list-body{
  padding: 10px 10px 12px 10px;
  column-gap: 22px;
  column-rule: 1px solid rgba(255,255,255,0.06);
}

@media (min-width: 1100px){
  #ba-skin .ba-archive-list-body{ column-count: 2; }
}
@media (min-width: 1450px){
  #ba-skin .ba-archive-list-body{ column-count: 3; }
}


/* ============================================================
   GLOBAL “SEX APPEAL” FRAMES (ALL RM SKINS)
   More pronounced panels behind the black viewer + right column
   ============================================================ */

/* Home/image skins: give both panes a real framed surface */
#ba-skin .ba-skin-home-media,
#ba-skin .ba-skin-home-copy{
  background: rgba(255,255,255,0.060);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Keep image pane inner “stage” black + subtle inner edge */
#ba-skin .ba-skin-home-media{
  background: #000;
  outline: 1px solid rgba(255,255,255,0.10);
  outline-offset: -1px;
}

/* Archive: frame each column so content doesn’t float */
#ba-skin .ba-archive-col{
  background: rgba(255,255,255,0.058);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 12px;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Archive: keep the inner viewer black + clean inner edge */
#ba-skin .ba-archive-viewer{
  background: #000;
  outline: 1px solid rgba(255,255,255,0.10);
  outline-offset: -1px;
}

/* Archive: detail card readable surface */
#ba-skin .ba-detail-card{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}


/* ============================================================
   MOBILE STACK
   ============================================================ */

@media (max-width: 900px){
  #ba-skin .ba-archive-grid{
    grid-template-columns: 1fr;
  }

  #ba-skin .ba-archive-list-body{
    column-count: 1;
    column-rule: none;
  }

  #ba-skin .ba-archive-viewer,
  #ba-skin .ba-detail-card{
    max-height: calc(100vh - var(--ba-header-h, 60px) - 260px);
  }

  #ba-skin #archive-category{
    width: 100%;
    min-width: 0;
  }
}
/* BEGIN PATCH: RM.Archive.BlackViewer.FillCard v1.0 */
/* Keep archive column height; extend the black viewer to fill the left card symmetrically. */

/* Ensure the two archive columns stretch evenly */
body[data-page="rm-index"] .ba-archive-grid{
  align-items: stretch;
}

/* Make LEFT column a vertical flex container so the viewer can grow */
body[data-page="rm-index"] .ba-archive-col--left{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The black viewer becomes the fill area (overrides any fixed height) */
body[data-page="rm-index"] .ba-archive-viewer{
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;      /* kills any fixed height that creates the gap */
  display: flex;                /* allow internal sections to stack */
  flex-direction: column;
}

/* Let the list body expand + scroll inside the black viewer */
body[data-page="rm-index"] .ba-archive-list-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* END PATCH: RM.Archive.BlackViewer.FillCard v1.0 */

/* BEGIN PATCH: RM.Archive.CategoryHelp.UnclipPopover v1.0 */
/* Allow the help popover to render outside the black viewer frame */
body[data-page="rm-index"] .ba-archive-viewer{
  overflow: visible;
}
/* END PATCH: RM.Archive.CategoryHelp.UnclipPopover v1.0 */


/* BEGIN PATCH: RM.Demo.Modal.Fallback.CSS v1.0 */

/* Fullscreen modal host */
#rm-demo-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Backdrop */
#rm-demo-modal .rm-demo-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.60);
}

/* Card */
#rm-demo-modal .rm-demo-modal-card{
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 28px));
  background: #0b0f12;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* Header */
#rm-demo-modal .rm-demo-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#rm-demo-modal .rm-demo-modal-title{
  font-weight: 650;
  letter-spacing: 0.2px;
  color: #dbe4e8;
}

/* Close button */
#rm-demo-modal .rm-demo-modal-close{
  background: transparent;
  border: 0;
  color: #ff7f00;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
}

/* Body */
#rm-demo-modal .rm-demo-modal-body{
  padding: 16px;
  color: #dbe4e8;
  opacity: 0.92;
}

/* END PATCH: RM.Demo.Modal.Fallback.CSS v1.0 */



/* BEGIN BLOCK: RM.Archive.CategoryHelpStyles v1.1 */
#ba-skin .ba-archive-viewer-head{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* small (?) button */
#ba-skin .ba-help-mini{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

#ba-skin .ba-help-mini:hover{
  border-color: rgba(255,127,0,0.55);
  color: #ff7f00;
}

/* popover */
#ba-skin .ba-help-pop{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, 92vw);
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 50;
}

#ba-skin .ba-help-pop-title{
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

#ba-skin .ba-help-pop-text{
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}

#ba-skin .ba-help-pop-list{
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

#ba-skin .ba-help-pop-list li{
  margin: 4px 0;
}
/* END BLOCK: RM.Archive.CategoryHelpStyles v1.1 */

/* BEGIN PATCH: RM.Modal.CategoryHelp.Compact v3.0
   Why: Shell sizing is applied to .ba-modal-card in ba-frame.css.
   We shrink the card only when #ba-modal has .ba-modal--compact.
*/

.ba-modal-top,
.ba-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.ba-modal-title{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.ba-modal-close{
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--ba-text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}