/* Stage 16.5B — Memoar Color Picker + compact appearance controls */

.settings-appearance .settings-choice-block{
 padding-block:12px;
}
.settings-appearance .settings-choice-head{
 margin-bottom:7px;
}
.primary-color-compact-row{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 gap:8px;
 align-items:stretch;
}
.primary-color-preview-control{
 appearance:none;
 width:100%;
 min-height:50px;
 padding:8px 10px;
 border:1px solid var(--hairline);
 border-radius:14px;
 background:var(--surface-raised);
 color:var(--text);
 display:grid;
 grid-template-columns:32px minmax(0,1fr) 18px;
 align-items:center;
 gap:10px;
 text-align:left;
}
.primary-color-preview-control>span:nth-child(2){
 display:grid;
 gap:1px;
 min-width:0;
}
.primary-color-preview-control strong{font-size:13px}
.primary-color-preview-control small{
 font-size:10px;
 color:var(--text-soft);
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.primary-color-preview-swatch{
 width:30px;
 height:30px;
 border-radius:50%;
 background:var(--swatch-color);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 2px 7px rgba(0,0,0,.12);
}
.primary-color-chevron{
 color:var(--text-soft);
 font-size:23px;
 line-height:1;
 text-align:center;
}
.primary-color-follow-inbox{
 min-height:50px!important;
 padding:8px 11px!important;
 border-radius:13px!important;
 font-size:11px!important;
 white-space:nowrap;
}

.bubble-override-list{
 display:grid;
 gap:7px;
}
.bubble-override-row{
 min-height:54px;
 padding:8px 10px;
 gap:10px;
 border-radius:14px;
 background:var(--surface);
}
.bubble-override-copy{
 gap:1px;
}
.bubble-override-copy strong{font-size:12px}
.bubble-override-copy small{
 font-size:10px;
 line-height:1.25;
}
.bubble-override-actions{
 gap:6px;
}
.bubble-color-trigger{
 appearance:none;
 width:36px;
 height:36px;
 border-radius:11px;
 padding:0;
}
.bubble-color-swatch{
 width:23px;
 height:23px;
}
.bubble-auto-reset{
 min-height:36px!important;
 padding:6px 9px!important;
 border-radius:10px!important;
 font-size:10px!important;
}

.settings-appearance .settings-preview{
 margin-bottom:12px;
}
.settings-appearance .settings-segment{
 gap:6px;
}

/* Custom picker */
.memoar-color-picker{
 display:grid;
 gap:14px;
 min-width:0;
}
.memoar-color-summary{
 display:flex;
 align-items:center;
 gap:11px;
 min-width:0;
}
.memoar-color-summary>div{
 display:grid;
 gap:2px;
 min-width:0;
}
.memoar-color-summary strong{font-size:14px}
.memoar-color-summary small{font-size:11px;color:var(--text-soft)}
.memoar-color-preview{
 width:40px;
 height:40px;
 flex:0 0 40px;
 border-radius:13px;
 background:var(--picker-color);
 border:1px solid color-mix(in srgb,var(--hairline) 78%,transparent);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 14px rgba(0,0,0,.12);
}
.memoar-color-sv{
 --picker-hue:270;
 position:relative;
 width:100%;
 aspect-ratio:1.55/1;
 min-height:180px;
 max-height:310px;
 overflow:hidden;
 border-radius:17px;
 border:1px solid var(--hairline);
 background:
  linear-gradient(to top,#000,transparent),
  linear-gradient(to right,#fff,transparent),
  hsl(var(--picker-hue) 100% 50%);
 touch-action:none;
 cursor:crosshair;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.memoar-color-cursor{
 position:absolute;
 width:22px;
 height:22px;
 border:3px solid #fff;
 border-radius:50%;
 transform:translate(-50%,-50%);
 box-shadow:0 1px 5px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.16);
 pointer-events:none;
}
.memoar-color-hue-row,
.memoar-color-hex-row{
 display:grid;
 grid-template-columns:42px minmax(0,1fr);
 gap:10px;
 align-items:center;
}
.memoar-color-hue-row>span,
.memoar-color-hex-row>span{
 font-size:11px;
 font-weight:700;
 color:var(--text-soft);
}
.memoar-color-hue{
 appearance:none;
 width:100%;
 height:12px;
 border:0;
 border-radius:999px;
 outline:0;
 background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.memoar-color-hue::-webkit-slider-thumb{
 appearance:none;
 width:24px;
 height:24px;
 border-radius:50%;
 background:#fff;
 border:2px solid rgba(0,0,0,.18);
 box-shadow:0 2px 8px rgba(0,0,0,.24);
}
.memoar-color-hue::-moz-range-thumb{
 width:20px;
 height:20px;
 border-radius:50%;
 background:#fff;
 border:2px solid rgba(0,0,0,.18);
 box-shadow:0 2px 8px rgba(0,0,0,.24);
}
.memoar-color-hex-field{
 min-height:44px;
 display:flex;
 align-items:center;
 gap:3px;
 padding:0 12px;
 border:1px solid var(--hairline);
 border-radius:12px;
 background:var(--surface-raised);
}
.memoar-color-hex-field>span{
 font-weight:800;
 color:var(--text-soft);
}
.memoar-color-hex-field input{
 width:100%;
 border:0;
 outline:0;
 background:transparent;
 color:var(--text);
 font:700 15px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 letter-spacing:.04em;
 text-transform:uppercase;
}
.memoar-color-picker-actions{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
 margin-top:2px;
}
.memoar-color-picker-actions .btn{
 min-height:42px;
}

/* Classic keeps a clean, solid material. */
body[data-ui-theme="classic"] .primary-color-preview-control,
body[data-ui-theme="classic"] .bubble-override-row,
body[data-ui-theme="classic"] .bubble-color-trigger,
body[data-ui-theme="classic"] .memoar-color-hex-field{
 background:var(--surface-raised);
 border-color:var(--hairline);
 box-shadow:none;
}

/* Temporal Glass uses translucent local glass, not Classic cards. */
body[data-ui-theme="temporal-glass"] .primary-color-preview-control,
body[data-ui-theme="temporal-glass"] .bubble-override-row,
body[data-ui-theme="temporal-glass"] .bubble-color-trigger,
body[data-ui-theme="temporal-glass"] .memoar-color-hex-field{
 background:color-mix(in srgb,var(--surface) 28%,transparent)!important;
 border-color:color-mix(in srgb,var(--hairline) 56%,transparent)!important;
 box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent),0 7px 18px color-mix(in srgb,#000 7%,transparent)!important;
 backdrop-filter:blur(16px) saturate(1.13);
 -webkit-backdrop-filter:blur(16px) saturate(1.13);
}
body[data-ui-theme="temporal-glass"] .memoar-color-sv{
 border-color:color-mix(in srgb,var(--hairline) 62%,transparent);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 26px rgba(0,0,0,.12);
}
body[data-ui-theme="temporal-glass"] .primary-color-follow-inbox,
body[data-ui-theme="temporal-glass"] .bubble-auto-reset{
 background:color-mix(in srgb,var(--surface) 22%,transparent)!important;
 border-color:color-mix(in srgb,var(--hairline) 52%,transparent)!important;
 backdrop-filter:blur(14px) saturate(1.1);
 -webkit-backdrop-filter:blur(14px) saturate(1.1);
}

@media(max-width:420px){
 .primary-color-compact-row{
  grid-template-columns:minmax(0,1fr) auto;
 }
 .bubble-override-row{
  flex-direction:row;
  align-items:center;
 }
 .bubble-override-actions{
  width:auto;
  justify-content:flex-end;
 }
 .memoar-color-sv{
  min-height:165px;
  aspect-ratio:1.45/1;
 }
 .primary-color-follow-inbox{
  max-width:100px;
 }
}