/* My Pals: host-save selection, My Pals layout, and Pal details. */
.my-pals-heading { align-items: center; }
.heading-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.profile-source-badge { padding: 4px 7px; border: 1px solid rgba(217,10,44,.34); border-radius: 999px; color: #ff6a83; background: rgba(217,10,44,.08); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.my-pals-actions { justify-content: flex-end; }

.mode-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.mode-button { display: grid; grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 11px; min-height: 66px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel); text-align: left; }
.mode-button > span { grid-row: 1/3; display: grid; width: 32px; height: 32px; align-self: center; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-2); font-size: 9px; }
.mode-button strong { align-self: end; color: #e8e8ec; font-size: 12px; }
.mode-button small { align-self: start; color: var(--muted-2); font-size: 9px; }
.mode-button.active { border-color: rgba(217,10,44,.48); background: #131217; box-shadow: inset 3px 0 0 var(--red); }
.mode-button.active > span { border-color: rgba(217,10,44,.42); color: var(--red-2); }
.mode-button.active strong { color: var(--text); }

.compact-import-options { grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr); margin-bottom: 14px; }
.compact-import-options .import-option-card { min-height: 0; }
.compact-save-drop { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 0; padding: 14px; text-align: left; }
.compact-save-drop .save-drop-icon { margin: 0; }
.compact-save-drop > div:nth-child(2) { display: grid; gap: 2px; }
.compact-save-drop > div:nth-child(2) strong { font-size: 12px; }
.compact-save-drop > div:nth-child(2) span { color: var(--muted); font-size: 10px; }
.compact-save-drop .action-row { justify-content: flex-end; }
.save-summary-card { overflow: hidden; }
.save-source-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding: 9px 10px; border: 1px solid rgba(88,214,155,.22); border-radius: 8px; color: #98e9c3; background: rgba(88,214,155,.055); font-size: 9px; }
.save-source-banner > div { display: flex; align-items: center; gap: 7px; }
.source-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(88,214,155,.08); }
.save-summary-list .info-row strong { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-summary-empty { display: grid; min-height: 185px; align-content: center; justify-items: center; padding: 20px; border: 1px dashed var(--line-2); border-radius: 9px; text-align: center; }
.save-summary-empty strong { font-size: 14px; }
.save-summary-empty p { max-width: 380px; margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.local-processing-note[data-state="working"] { color: #c5d7ff; }
.local-processing-note[data-state="success"] { color: var(--green); }
.local-processing-note[data-state="error"] { color: #ff8da1; }

.manual-pal-panel { margin-bottom: 14px; }
.section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-heading-row h3 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.04em; }
.section-heading-row p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.manual-pal-form { display: grid; grid-template-columns: minmax(320px,2fr) minmax(125px,.65fr) minmax(145px,.75fr) auto auto auto; align-items: end; gap: 9px; }
.manual-pal-form .check-field { display: flex; min-height: 45px; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); white-space: nowrap; }
.manual-pal-form .check-field input { width: 15px; min-height: 0; height: 15px; margin: 0; }
.manual-pal-form .check-field span { font-size: 10px; }

.manual-pal-picker { position: relative; }
.manual-pal-trigger { display: flex; width: 100%; min-height: 45px; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); background: var(--panel); text-align: left; }
.manual-pal-trigger:hover, .manual-pal-trigger[aria-expanded="true"] { border-color: rgba(217,10,44,.5); }
.manual-pal-trigger-content { display: flex; min-width: 0; align-items: center; gap: 9px; }
.manual-pal-trigger-content > img { width: 34px !important; height: 34px !important; flex: 0 0 34px; object-fit: contain !important; }
.manual-pal-trigger-content > span:not(.manual-pal-placeholder) { display: grid; min-width: 0; gap: 2px; }
.manual-pal-trigger-content strong, .manual-pal-trigger-content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-pal-trigger-content strong { font-size: 11px; }
.manual-pal-trigger-content small { color: var(--muted); font-size: 8px; }
.manual-pal-placeholder { color: var(--muted); font-size: 11px; }
.manual-pal-chevron { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.manual-pal-menu { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; width: min(520px,calc(100vw - 48px)); overflow: hidden; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: 0 18px 45px rgba(0,0,0,.48); }
.manual-pal-menu[hidden] { display: none !important; }
.manual-pal-search-wrap { padding: 9px; border-bottom: 1px solid var(--line); }
.manual-pal-search-wrap input { width: 100%; min-height: 41px; }
.manual-pal-results { max-height: 340px; overflow-y: auto; padding: 6px; }
.manual-pal-result { display: grid; width: 100%; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; color: var(--text); background: transparent; text-align: left; }
.manual-pal-result:hover, .manual-pal-result.active { border-color: rgba(217,10,44,.42); background: rgba(217,10,44,.07); }
.manual-pal-result img { width: 42px !important; height: 42px !important; object-fit: contain !important; }
.manual-pal-result > span { display: grid; min-width: 0; gap: 2px; }
.manual-pal-result strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manual-pal-result small { color: var(--muted); font-size: 8px; }
.manual-pal-result em { max-width: 130px; overflow: hidden; color: #c7c7ce; font-size: 8px; font-style: normal; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.manual-pal-no-results { padding: 24px 12px; color: var(--muted); font-size: 10px; text-align: center; }

.collection-overview { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.collection-stat { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.collection-stat > span { display: block; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.collection-stat strong { display: inline-block; margin-top: 6px; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.collection-stat small { margin-left: 5px; color: var(--muted-2); font-size: 8px; }

.my-pals-collection-panel { padding: 18px; }
.collection-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.collection-panel-head h3 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.035em; }
.collection-panel-head > span { color: var(--muted); font-size: 10px; }
.location-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.location-tab { min-height: 31px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 9px; font-weight: 800; }
.location-tab.active { border-color: rgba(217,10,44,.5); color: var(--text); background: rgba(217,10,44,.1); }
.inventory-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) repeat(3,minmax(125px,.55fr)) minmax(155px,.65fr); margin-bottom: 13px; }
.inventory-toolbar .field { min-width: 0; }
.inventory-toolbar input, .inventory-toolbar select { min-height: 41px; }

.inventory-pal-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); gap: 10px; }
.inventory-pal-card { display: flex; min-width: 0; min-height: 215px; flex-direction: column; gap: 10px; padding: 13px; cursor: pointer; box-shadow: none; }
.inventory-pal-card:hover { transform: translateY(-1px); }
.inventory-pal-top { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 11px; align-items: center; }
.inventory-pal-image { display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.inventory-pal-image img { width: 64px !important; height: 64px !important; object-fit: contain !important; }
.inventory-pal-title { min-width: 0; }
.inventory-pal-title h3 { overflow: hidden; margin: 2px 0 1px; font-size: 15px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.inventory-pal-title small { display: block; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-location { align-self: start; max-width: 88px; overflow: hidden; padding: 4px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 7px; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.inventory-quick-stats, .inventory-passive-row { display: flex; flex-wrap: wrap; gap: 5px; }
.inventory-quick-stats span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: #d5d5da; background: var(--panel); font-size: 8px; font-weight: 800; }
.inventory-passive-row { min-height: 25px; align-content: flex-start; }
.inventory-passive-row span { max-width: 100%; overflow: hidden; padding: 4px 7px; border: 1px solid rgba(83,118,255,.26); border-radius: 999px; color: #c2ceff; background: rgba(83,118,255,.065); font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.inventory-passive-row .muted-chip { border-color: var(--line); color: var(--muted-2); background: transparent; }
.inventory-pal-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.inventory-pal-bottom span { color: var(--muted-2); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.inventory-pal-bottom strong { color: var(--muted); font-size: 8px; font-weight: 700; text-align: right; }
.inventory-card-actions { display: flex; gap: 6px; margin-top: -2px; }
.inventory-card-button { min-height: 28px; flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--panel); font-size: 8px; font-weight: 800; }
.inventory-card-button:hover { color: var(--text); border-color: var(--line-2); }
.inventory-card-button.danger:hover { color: #ff8da1; border-color: rgba(217,10,44,.45); }
.pagination-row { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; margin-top: 14px; }
.pagination-row span { color: var(--muted); font-size: 9px; }
.pagination-row button:disabled { opacity: .35; cursor: default; transform: none; }
.compact-empty { min-height: 250px; }

.clear-data-list { display: grid; gap: 8px; }
.clear-data-list > p { margin: 0 0 5px; color: var(--muted); font-size: 10px; }
.clear-data-option { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); text-align: left; }
.clear-data-option span { display: grid; gap: 3px; }
.clear-data-option strong { font-size: 11px; }
.clear-data-option small { color: var(--muted); font-size: 9px; }
.clear-data-option b { color: #ff718a; font-size: 9px; text-transform: uppercase; }
.clear-data-option:hover { border-color: rgba(217,10,44,.42); background: rgba(217,10,44,.055); }

.wipe-confirmation { display: grid; gap: 8px; }
.wipe-confirmation p { margin: 0; color: #dddde2; font-size: 11px; line-height: 1.55; }
.wipe-confirmation strong { color: #ff718a; font-size: 10px; }

/* Pal details cleanup and richer owned/breeding information. */
.modal-shell.modal-wide { width: min(1040px,100%); max-height: min(92vh,920px); }
.modal-shell.modal-wide .modal-content { padding: 18px; }
.pal-detail-hero-compact { display: grid; grid-template-columns: 124px minmax(0,1fr); gap: 18px; align-items: center; margin-bottom: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.pal-detail-hero-compact .pal-detail-image { display: grid; width: 124px; height: 124px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pal-detail-hero-compact .pal-detail-image img { width: 112px !important; height: 112px !important; }
.pal-detail-title h3 { margin: 2px 0 2px; font-size: 28px; line-height: 1; letter-spacing: -.045em; }
.pal-subtitle { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.availability-line { margin: 7px 0 0 !important; color: var(--muted) !important; font-size: 10px !important; }
.detail-description { max-width: 790px; margin: 8px 0 0 !important; font-size: 11px !important; line-height: 1.55 !important; }
.detail-grid-clean { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.detail-grid-clean .detail-panel { min-width: 0; padding: 13px; border-radius: 9px; }
.detail-grid-clean .detail-panel h4 { margin: 0 0 9px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.detail-grid-clean .detail-panel h5 { margin: 10px 0 6px; color: #d8d8dd; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.detail-panel-wide { grid-column: 1/-1; }
.owned-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.owned-panel-heading > div { display: flex; align-items: center; gap: 8px; }
.owned-panel-heading h4 { margin: 0 !important; }
.owned-panel-heading span { color: var(--muted); font-size: 8px; }
.owned-source-badge { padding: 4px 7px; border: 1px solid rgba(88,214,155,.25); border-radius: 999px; color: #92e5be !important; background: rgba(88,214,155,.055); font-weight: 900; letter-spacing: .07em; }
.owned-data-layout, .detail-breeding-grid { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 13px; }
.detail-chip-list, .detail-route-list { display: flex; flex-wrap: wrap; gap: 5px; }
.detail-chip-list span, .detail-route-list span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: #d8d8dd; background: var(--panel); font-size: 8px; }
.owned-copy-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 6px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.owned-copy-card { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--panel); text-align: left; }
.owned-copy-card span { overflow: hidden; color: var(--text); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.owned-copy-card strong { font-size: 8px; }
.owned-copy-card small { color: var(--muted-2); font-size: 7px; }
.owned-copy-card.active { border-color: rgba(217,10,44,.48); background: rgba(217,10,44,.06); }
.drop-list > div { min-height: 45px; }
.drop-list strong { min-width: 0; }
.drop-item-image, .drop-item-placeholder { flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #08080b; object-fit: contain; }
.drop-item-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 8px; font-weight: 900; }
.skill-disclosure > summary { min-height: 32px; }
.skill-list { margin-top: 9px; }
.skill-card { padding: 10px; }

@media (max-width: 1180px) {
  .collection-overview { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .manual-pal-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .manual-pal-select { grid-column: 1/-1; }
  .manual-pal-form .button { min-height: 45px; }
}

@media (max-width: 900px) {
  .compact-import-options { grid-template-columns: 1fr; }
  .compact-save-drop { grid-template-columns: 44px minmax(0,1fr); }
  .compact-save-drop .action-row { grid-column: 1/-1; justify-content: flex-start; }
  .inventory-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-toolbar .search-field { grid-column: 1/-1; }
  .my-pals-heading { align-items: flex-start; flex-direction: column; }
  .my-pals-actions { justify-content: flex-start; }
}

@media (max-width: 650px) {
  .mode-switch { grid-template-columns: 1fr; }
  .collection-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .manual-pal-form { grid-template-columns: 1fr 1fr; }
  .manual-pal-select { grid-column: 1/-1; }
  .manual-pal-form .button { grid-column: 1/-1; }
  .manual-pal-menu { width: 100%; }
  .manual-pal-result { grid-template-columns: 42px minmax(0,1fr); }
  .manual-pal-result em { display: none; }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-toolbar .search-field { grid-column: auto; }
  .inventory-pal-grid { grid-template-columns: 1fr; }
  .inventory-pal-card { min-height: 0; }
  .pal-detail-hero-compact { grid-template-columns: 88px minmax(0,1fr); gap: 12px; padding: 11px; }
  .pal-detail-hero-compact .pal-detail-image { width: 88px; height: 88px; }
  .pal-detail-hero-compact .pal-detail-image img { width: 80px !important; height: 80px !important; }
  .pal-detail-title h3 { font-size: 22px; }
  .detail-grid-clean { grid-template-columns: 1fr; }
  .detail-panel-wide { grid-column: auto; }
  .owned-data-layout, .detail-breeding-grid { grid-template-columns: 1fr; }
}

/* Pair Calculator uses the same searchable Pal picker as Manual My Pals. */
.calculator-panel .parent-slot { overflow: visible; }
.calculator-pal-field { position: relative; z-index: 15; }
.calculator-pal-picker .manual-pal-menu { width: 100%; min-width: 360px; }
.parent-slot:focus-within { position: relative; z-index: 25; }
@media (max-width: 650px) {
  .calculator-pal-picker .manual-pal-menu { min-width: 0; width: min(520px,calc(100vw - 48px)); }
}


/* 2026-08-06 readability hotfix: remove remaining dark cards and low-contrast text. */
.mode-button {
  color: #303038 !important;
  background: #ffffff !important;
  border-color: #cfd0d7 !important;
}
.mode-button strong { color: #111114 !important; }
.mode-button small { color: #55555f !important; }
.mode-button > span { color: #45454d !important; background: #f4f4f6 !important; border-color: #c8c9d0 !important; }
.mode-button:hover { border-color: #d90a2c !important; background: #fff6f8 !important; }
.mode-button.active {
  color: #111114 !important;
  background: #fff0f3 !important;
  border-color: #d90a2c !important;
  box-shadow: inset 4px 0 0 #d90a2c !important;
}
.mode-button.active strong { color: #111114 !important; }
.mode-button.active small { color: #4c4c54 !important; }
.mode-button.active > span { color: #d90a2c !important; background: #ffffff !important; border-color: #d90a2c !important; }

.compact-save-drop,
.save-drop {
  color: #111114 !important;
  background: #fff6f8 !important;
  border-color: #d90a2c !important;
}
.compact-save-drop strong,
.save-drop strong { color: #111114 !important; }
.compact-save-drop span,
.save-drop > span { color: #4d4d55 !important; }

.detail-grid-clean .detail-panel h5 { color: #34343b !important; }
.detail-chip-list span,
.detail-route-list span {
  color: #202027 !important;
  background: #f7f7f9 !important;
  border-color: #cfd0d7 !important;
  font-weight: 700;
}
.detail-route-list span:hover { border-color: #d90a2c !important; background: #fff1f4 !important; }
.drop-item-image,
.drop-item-placeholder { background: #f2f2f5 !important; }