/* Two optional paths into Peony's main color picker. */
.discovery-launchers { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0; }
.discovery-launch { min-height:48px; padding:10px 8px; border:1px solid #d9c5ec; border-radius:14px; background:linear-gradient(135deg,#fffafaeb,#ece5ffdb); color:#603289; font-size:14px; font-weight:600; box-shadow:inset 0 1px 0 #fff; }
.discovery-launch:hover { border-color:#b892df; background:#fff; }
dialog.discovery-dialog { width:min(570px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:20px; border:1px solid #fff; border-radius:24px; overflow:auto; overscroll-behavior:contain; background:linear-gradient(135deg,#fff8fdf8,#f3effff8); color:var(--ink,#231a43); box-shadow:0 22px 85px #35205038; }
.discovery-dialog::backdrop { background:#21113161; backdrop-filter:blur(5px); }
.discovery-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.discovery-dialog-heading h2 { margin:0; font-size:25px; letter-spacing:-.7px; line-height:1.2; }
.discovery-dialog .discovery-close { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border-radius:50%; background:#ffffff9c; color:#684489; font-size:27px; line-height:1; }
.discovery-dialog .discovery-close:hover { background:#eadffa; }
.discovery-intro { margin:9px 0 16px; font-size:14px; line-height:1.55; color:var(--muted,#625976); }
.discovery-photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0; }
.discovery-dialog .primary,.discovery-dialog .secondary { min-height:46px; font-size:14px; padding:10px 12px; }
.discovery-sampling-view { position:relative; border:1px solid #d5c5e2; border-radius:16px; overflow:hidden; background:repeating-conic-gradient(#efecf4 0% 25%,#faf8fe 0% 50%) 0 0/20px 20px; }
.discovery-reference { display:block; width:100%; height:clamp(190px,38dvh,340px); object-fit:contain; touch-action:manipulation; cursor:crosshair; }
.discovery-reference:focus-visible { outline:3px solid #8138d0; outline-offset:-4px; }
.discovery-sample-marker { position:absolute; width:24px; height:24px; border:2px solid #fff; box-shadow:0 0 0 2px #2d184b,0 1px 9px #0006; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.discovery-sample-marker[hidden],.discovery-photo-area[hidden] { display:none; }
.discovery-instruction { font-size:12px; line-height:1.45; color:#6c587e; margin:9px 0; }
.discovery-sampled-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; margin:13px 0 9px; }
.discovery-sampled-row>i { display:block; width:32px; height:37px; border:1px solid #bda9cf; border-radius:12px; }
.discovery-sampled-row>span { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.discovery-nearby { display:flex; gap:8px; }
.discovery-nearby-color { flex:1; display:flex; justify-content:center; align-items:center; gap:7px; min-height:46px; padding:8px; border:1px solid #dfd2eb; border-radius:12px; background:#fff9; font-size:12px; }
.discovery-nearby-color i { display:block; width:20px; height:26px; border:1px solid #6e498326; border-radius:9px 9px 7px 7px; }
.discovery-status { font-size:13px; line-height:1.5; margin:13px 0 0; color:#644780; }
.discovery-status:empty { display:none; }
.discovery-footnote { font-size:11px; line-height:1.5; color:#776685; margin:16px 0 0; }
.discovery-phrase-form { display:grid; grid-template-columns:1fr; gap:9px; }
.discovery-phrase-form label { font-size:13px; font-weight:600; }
.discovery-phrase-form input { width:100%; min-height:48px; padding:12px; border:1px solid #cfb5e5; border-radius:12px; background:#fff; color:#302144; font-size:16px; }
.discovery-phrase-form input:focus-visible { outline:3px solid #b085dc; outline-offset:2px; }
.discovery-examples { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 0; }
.discovery-examples button { min-height:44px; border:1px solid #e0d3ec; border-radius:22px; padding:8px 12px; font-size:12px; color:#674284; background:#fffc; }
.discovery-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.discovery-results:empty { margin:0; }
.discovery-result { display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 7px; border:1px solid #e2d2ee; border-radius:17px; background:linear-gradient(135deg,#fff,#f3eafa); min-width:0; }
.discovery-result:hover,.discovery-result:focus-visible { border-color:#b077dc; box-shadow:0 0 0 2px #cfb0e760; }
.discovery-result canvas { display:block; width:58px; height:92px; }
.discovery-result strong { font-size:12px; line-height:1.4; font-weight:600; }
.discovery-result span { font-size:10px; line-height:1.4; color:#736081; }
@media(max-width:380px) { dialog.discovery-dialog { padding:16px; }.discovery-dialog-heading h2 { font-size:23px; }.discovery-sampled-row { grid-template-columns:28px minmax(0,1fr); }.discovery-sampled-row .primary { grid-column:1/-1; }.discovery-nearby-color { gap:5px; padding:7px 4px; }.discovery-results { gap:7px; }.discovery-result strong { font-size:11px; } }
@media(prefers-reduced-transparency:reduce) { dialog.discovery-dialog { background:#f8f3ff; }.discovery-dialog::backdrop { backdrop-filter:none; } }