/* Compact mobile lookup; the original chart is kept intact inside an optional disclosure. */
.mobile-interval-list {display:none;}
body.ub-colors #all-intervals .mobile-fullmatrix {border:0; background:transparent; margin:0; border-radius:0;}
body.ub-colors #all-intervals .mobile-fullmatrix > summary {display:none;}

@media(max-width:600px) {
  .mobile-interval-list {display:block; padding:2px 14px 16px;}
  body.ub-colors .mobile-interval-list [hidden] {display:none;}
  body.ub-colors .mobile-list-label {display:block; margin:0 0 8px; color:#4e4035; font:600 13px/1.6 var(--sans-ja); letter-spacing:.01em;}
  body.ub-colors .mobile-interval-list select {width:100%; min-height:52px; font-size:16px; margin:0; background-color:#fff; border-radius:8px;}
  body.ub-colors .mobile-list-help {margin:10px 0 16px; font:12px/1.8 var(--sans-ja); letter-spacing:.01em; color:#6b5b4e;}
  .mobile-list-categories {display:flex; gap:6px; overflow-x:auto; max-width:100%; padding:0 0 8px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
  body.ub-colors .mobile-list-categories button {flex:0 0 auto; min-height:44px; padding:9px 12px; border:1px solid #d6c8bb; border-radius:7px; background:#fff; color:#675345; font:500 12px/1.5 var(--sans-ja); letter-spacing:.01em; white-space:nowrap; cursor:pointer;}
  body.ub-colors .mobile-list-categories button[aria-pressed="true"] {background:#514135; color:#fff; border-color:#514135;}
  body.ub-colors .mobile-list-count {margin:4px 0 8px; color:#77675a; font:12px/1.6 var(--sans-ja);}
  .mobile-list-rows {max-height:420px; max-height:min(420px,65dvh); overflow-y:auto; overflow-x:hidden; border:1px solid #e0d6cc; border-radius:8px; background:#fff; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
  body.ub-colors .mobile-interval-row {display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:5px; align-items:center; width:100%; min-height:74px; padding:12px; border:0; border-bottom:1px solid #e8dfd6; border-radius:0; background:#fff; color:#42352c; text-align:left; cursor:pointer; font-family:var(--sans-ja);}
  body.ub-colors .mobile-interval-row:last-child {border-bottom:0;}
  body.ub-colors .mobile-interval-row:hover,body.ub-colors .mobile-interval-row.is-selected {background:#f6f0e8;}
  .mobile-row-name {grid-column:1; grid-row:1; min-width:0; font-size:13px; font-weight:500; line-height:1.7; letter-spacing:.01em; overflow-wrap:anywhere;}
  .mobile-row-interval {grid-column:1; grid-row:2; min-width:0; color:#735135; font-size:14px; font-weight:600; line-height:1.7; letter-spacing:.01em; overflow-wrap:anywhere;}
  .mobile-row-detail {grid-column:2; grid-row:1 / span 2; padding:5px 0; color:#725d4c; font-size:12px; border-bottom:1px solid #ccb9a7; white-space:nowrap;}
  body.ub-colors .mobile-list-empty {margin:10px 0 0; padding:14px 12px; border-radius:7px; background:#f8f4ef; color:#7a695a; font:12px/1.8 var(--sans-ja); letter-spacing:.01em;}
  body.ub-colors #all-intervals .mobile-fullmatrix {border-top:1px solid #e6dcd2;}
  body.ub-colors #all-intervals .mobile-fullmatrix > summary {display:flex; justify-content:space-between; min-height:48px; padding:13px 16px; color:#75604f; font:500 12px/1.7 var(--sans-ja);}
  body.ub-colors #all-intervals .mobile-fullmatrix > summary::after {font-size:18px;}
}

@media(max-width:350px) {
  .mobile-interval-list {padding-left:10px; padding-right:10px;}
  body.ub-colors .mobile-interval-row {padding:11px 10px; column-gap:8px;}
}