/* Owner-smoke follow-up for Collection Workspaces.
   Presentation only: this file does not redefine color evidence, axis anchors or
   matching semantics. */

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"]{
  padding-top:10px;
  overflow:visible;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-head{
  align-items:center;
  gap:10px;
  min-height:26px;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-head>div:first-child{
  display:flex;
  align-items:center;
  min-width:0;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-help{
  position:relative;
  margin:0;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-help>summary{
  list-style:none;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid rgba(32,60,52,.15);
  border-radius:50%;
  background:rgba(255,255,255,.78);
  color:#5e706a;
  cursor:pointer;
  font-size:.8rem;
  font-weight:800;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-help>summary::-webkit-details-marker{
  display:none;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-help>p{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:35;
  width:min(430px,calc(100vw - 56px));
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(32,60,52,.14);
  border-radius:11px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,45,39,.15);
  color:#52615c;
  font-size:.75rem;
  line-height:1.38;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-status{
  margin-left:auto;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-toolbar{
  justify-content:flex-start;
  align-items:center;
  gap:6px;
  margin:8px 0 8px;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-mode-switch{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:2px;
  border:1px solid rgba(32,60,52,.14);
  border-radius:999px;
  background:rgba(23,63,55,.055);
  overflow:hidden;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-mode-switch button{
  min-height:29px;
  padding:5px 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  font-size:.76rem;
  font-weight:700;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-mode-switch button.active{
  background:#173f37;
  color:#fff;
  box-shadow:0 1px 2px rgba(22,45,38,.16);
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-reset{
  min-height:31px;
  gap:4px;
  padding:5px 8px;
  border:0;
  color:#65746f;
  font-size:.73rem;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-reset>span:first-child{
  font-size:1rem;
  line-height:1;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-badges{
  margin-bottom:9px;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-selection{
  display:flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  justify-content:space-between;
  gap:10px!important;
  min-width:0;
  margin:4px 0 2px;
  font-size:.78rem;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-selection strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.82rem;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-selection span{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:.74rem;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-distribution{
  margin-top:9px;
  padding-top:8px;
}

.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-distribution summary{
  font-size:.78rem;
}

/* Localized anchor names need enough vertical room to stay readable instead of
   collapsing into ellipses (for example Yellow-green / Reddish brown). The
   anchor identity, position, gradient and matching semantics remain untouched. */
.collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-badges span{
  min-height:2.2em;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  line-height:1.08;
  word-break:normal;
}

/* Tea Bank four-column views (Archetypes and Lots) need a little more room for
   Classification while keeping Tea Level, Colour and Updated visually distinct.
   The All view can expose more columns, so it deliberately retains the generic
   collection grid instead of forcing this specialised template. */
@media(min-width:761px){
  .collection-color-scope:has([data-liquor-color-axis^="tea-bank-archetypes-"]) .collection-table-head,
  .collection-color-scope:has([data-liquor-color-axis^="tea-bank-archetypes-"]) .collection-row,
  .collection-color-scope:has([data-liquor-color-axis^="tea-bank-lots-"]) .collection-table-head,
  .collection-color-scope:has([data-liquor-color-axis^="tea-bank-lots-"]) .collection-row{
    grid-template-columns:minmax(150px,1fr) minmax(130px,1.18fr) minmax(78px,.62fr) minmax(108px,.82fr) minmax(92px,.7fr);
  }

  .collection-color-scope:has([data-liquor-color-axis^="tea-bank-"]) .collection-table-head>span{
    min-width:0;
    padding-inline:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:.025em;
  }

  .collection-color-scope:has([data-liquor-color-axis^="tea-bank-"]) .collection-table-head>span+span{
    border-left:1px solid rgba(42,63,54,.075);
  }
}

@media(max-width:760px){
  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-head{
    display:flex;
    align-items:flex-start;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-status{
    margin-top:0;
    max-width:72%;
    align-items:flex-end;
    text-align:right;
    font-size:.66rem;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-status small{
    white-space:normal;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-toolbar{
    display:flex;
    grid-template-columns:none;
    flex-direction:row;
    align-items:center;
    gap:5px;
    margin-top:7px;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-mode-switch{
    width:auto;
    flex:0 1 auto;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-mode-switch button{
    padding-inline:9px;
    font-size:.7rem;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-reset{
    justify-self:auto;
    align-self:center;
    flex:0 0 auto;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-selection{
    margin-top:2px;
    font-size:.72rem;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-selection strong{
    font-size:.75rem;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-selection span{
    font-size:.69rem;
  }
}

@media(max-width:390px){
  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-reset>span:last-child{
    display:none;
  }

  .collection-color-explorer .lc-axis-card[data-presentation="collection-compact"] .lc-axis-reset{
    width:30px;
    padding-inline:5px;
  }
}