apes-sidebar/src/client/SideCardSection.module.css

/**
 * Side card settings section chrome (DSH-native tokens throughout):
 * - the feature inventories are responsive GRIDS of small toggle cards
 *   (auto-fill columns — several cards per row, wrapping);
 * - a card's on/off state IS its visual state: enabled = brand border +
 *   tinted fill + a check badge pinned to the far right of the top row,
 *   disabled = neutral hairline + dimmed text;
 * - features that declare related settings carry a gear corner button
 *   opening a native Modal whose rows are the DSH settings-row recipe
 *   (title/desc left + native accent checkbox, hairline separators);
 * - the width input stays a native settings row (a value, not a switch).
 */

.section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  /* Tall inventories (7 tab cards + 9 viewer cards + general rows) must
     never be clipped by the settings shell: fill the shell's options area
     and scroll inside the section when the content outgrows the panel. */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.section > :last-child {
  border-bottom: none;
}

/* Responsive inventory: as many small cards per row as the width allows. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

/* One small toggle card (visual chrome; the interactive part is .cardMain). */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid var(--dsw-alias-border-l2);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

/* Hover affordance on disabled cards only (enabled cards are already lit). */
.card:not(.cardOn):hover {
  background: var(--dsw-alias-interactive-bg-hover);
}

/* Enabled = highlighted: brand border + tinted fill. */
.cardOn {
  border-color: var(--dsw-alias-button-primary-fill);
  background: var(--dsw-alias-interactive-bg-active);
}

/* The card's switch: the whole main area (top row + desc) flips the feature. */
.cardMain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cardMain:focus-visible,
.cardGear:focus-visible {
  outline: 2px solid var(--dsw-alias-border-l4);
  outline-offset: 2px;
}

.cardTop {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cardIcon {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--dsw-alias-label-tertiary);
}

.cardOn .cardIcon {
  color: var(--dsw-alias-button-primary-fill);
}

.cardTitle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-alias-label-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardOn .cardTitle {
  color: var(--dsw-alias-label-primary);
}

/* The check badge: pinned to the FAR RIGHT of the top row (enabled only). */
.cardCheck {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--dsw-alias-button-primary-fill);
}

.cardDesc {
  font-size: 11px;
  line-height: 16px;
  color: var(--dsw-alias-label-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardOn .cardDesc {
  color: var(--dsw-alias-label-secondary);
}

/* The gear corner button: bottom-right of cards that declare related
   settings; the desc gets right padding so the ellipsis never runs under it. */
.cardWithGear .cardDesc {
  padding-right: 18px;
}

.cardGear {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
}

.cardGear:hover {
  color: var(--dsw-alias-label-primary);
  background: var(--dsw-alias-interactive-bg-hover);
}

/* Inventory section heading (常规 / 侧边栏内容 / 文件预览). */
.sectionHeading {
  padding: 14px 0 0;
  font-size: 12px;
  line-height: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dsw-alias-label-secondary);
}

/* Native settings row recipe (the width input row + popup rows). */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dsw-alias-border-l2);
}

.rowText {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.title {
  font-size: 14px;
  line-height: 22px;
  color: var(--dsw-alias-label-primary);
}

.desc {
  font-size: 12px;
  line-height: 17px;
  color: var(--dsw-alias-label-secondary);
}

/* Native checkbox: 16px, brand accent (the settings-row recipe). */
.toggle {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--dsw-alias-button-primary-fill);
  cursor: pointer;
}

.toggle:focus-visible {
  outline: 2px solid var(--dsw-alias-border-l4);
  outline-offset: 2px;
}

/* Secondary settings popup body: stacked native rows, trailing separator
   stripped by the trailing-child rule. */
.popupRows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.popupRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--dsw-alias-border-l2);
  cursor: pointer;
}

.popupRows > :last-child {
  border-bottom: none;
}

.control {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.percentInput {
  width: 76px;
}

.suffix {
  font-size: 14px;
  line-height: 22px;
  color: var(--dsw-alias-label-secondary);
}

.error {
  padding: 10px 0 2px;
  font-size: 12px;
  line-height: 17px;
  color: var(--dsw-alias-state-error-primary);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}