/* The look editor (Tovah, 2026-09-28: "when choosing the look i need the editor to pop out ... all the fonts, the color
   wheel you move and its changes, the accent word"): the 09-21/22 panel's own rules, copied from
   src/styles/experience.css + studio.css so it looks exactly as it did. Loaded by demo.html / next.html. */
.appearance-trigger{position:fixed;right:24px;bottom:22px;z-index:110;background:var(--ink);color:var(--on-ink);border:1px solid var(--line);border-radius:999px;padding:12px 18px;font-size:14px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center}.appearance-trigger>span:first-child{font-size:20px;line-height:1}
.appearance-panel {position:fixed;right:16px;top:16px;bottom:78px;width:360px;z-index:120;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lg);padding:24px;overflow:auto;overscroll-behavior:contain}.appearance-panel[hidden]{display:none}
.appearance-head {display:flex;justify-content:space-between;gap:20px}.appearance-head h2{font-size:30px;margin:14px 0}.appearance-close{font-size:27px;width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%}.appearance-note{font-size:14px;color:var(--text-muted);margin-bottom:20px}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preset-cell{position:relative;display:block}
.preset-cell .preset-option{width:100%}
.preset-del{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text-muted);font-size:15px;line-height:1;display:grid;place-items:center}
.preset-del:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}.preset-option{font-size:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:5px 5px 8px;text-align:left}.preset-option.selected{outline:2px solid var(--text);outline-offset:1px}.preset-sample{display:flex;padding:10px;font-size:25px;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:5px}.preset-sample span{width:12px;height:12px;border-radius:50%}
.appearance-fields {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.appearance-fields label{display:flex;flex-direction:column;gap:7px}.appearance-fields select{width:100%;font-size:14px;padding:8px;min-width:0}
.appearance-colors{border-top:1px solid var(--line);padding-top:18px}.color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}.color-row>span{text-transform:capitalize;font-size:14px}.color-row>div{display:flex;gap:5px}.color-swatch{width:23px;height:23px;border:1px solid var(--line);border-radius:50%}.color-swatch.selected{outline:2px solid var(--text);outline-offset:2px}
.appearance-scene{border-top:1px solid var(--line);padding-top:18px;margin:20px 0}.appearance-scene>div{display:flex;gap:7px;margin-top:12px}.appearance-scene .btn{font-size:14px;padding:8px 10px}
.appearance-panel [role=status]{font-size:14px;min-height:36px;margin:15px 0;color:var(--text-muted)}.appearance-footer{position:sticky;bottom:-24px;display:flex;justify-content:space-between;background:var(--card);border-top:1px solid var(--line);padding:16px 0}
@media(min-width:1150px){body.appearance-open .shell{margin-right:380px}.appearance-open .arrival{grid-template-columns:1fr 1fr;gap:24px}.appearance-open .arrival h1{font-size:50px}.appearance-open .experience-account .text-link{display:none}.appearance-open .experience-nav>a{padding:10px 14px}.appearance-open .experience-brand{font-size:28px}.appearance-open .dash,.appearance-open .main,.appearance-open .topbar{padding-left:28px;padding-right:28px}}
 .appearance-trigger{bottom:calc(98px + env(safe-area-inset-bottom));right:16px;padding:10px 12px;font-size:14px}@media (max-width: 700px) { .appearance-panel{inset:10px 10px calc(92px + env(safe-area-inset-bottom));width:auto;border-radius:24px;padding:22px} }@media (max-width: 700px) { .appearance-panel h2{font-size:28px} }.appearance-open .appearance-trigger{display:none}
@media(min-width:1150px){[data-surface=agent] .appearance-open .shell .nav{gap:12px;padding:0 24px}[data-surface=agent] .appearance-open .experience-brand{font-size:27px}[data-surface=agent] .appearance-open .experience-brand span{display:none}[data-surface=agent] .appearance-open .experience-nav>a{padding:10px 12px}[data-surface=agent] .appearance-open .experience-account{gap:10px}[data-surface=agent] .appearance-open .topbar{gap:5px}}
.appearance-trigger { display: none; }       /* it lives in the strip + Menu now */
.appearance-colors .color-row > div { flex-wrap: wrap; justify-content: flex-end; }
.appearance-colors .look-role { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font-size: 16px; text-align: left; cursor: pointer; }
.look-role > span:nth-child(2) { flex: 1; }
.look-role code { font: 500 14px var(--font-ui); color: var(--text-muted); letter-spacing: .02em; }
.look-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.look-role.open { border-bottom-color: transparent; font-weight: 600; }
.look-wheel { display: grid; gap: 14px; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.look-disc { position: relative; width: min(240px, 100%); aspect-ratio: 1; margin: 0 auto; touch-action: none; }
.look-disc canvas { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; touch-action: none; }
.look-knob { position: absolute; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--text), 0 4px 12px color-mix(in srgb, var(--text) 30%, transparent); pointer-events: none; }
.look-slide { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; font-size: 14px; color: var(--text-muted); }
.look-bright { -webkit-appearance: none; appearance: none; height: 18px; margin: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--look-grad, var(--line)); }
.look-bright::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 2px solid var(--text); cursor: grab; }
.look-bright::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--text); cursor: grab; }
.look-hex, .look-name input { font: 500 16px var(--font-ui); width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--text); }
.look-hex { text-transform: uppercase; letter-spacing: .03em; }
.look-read { display: flex; gap: 18px; margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.look-read .is-low { color: var(--dot-late); font-weight: 600; }
.look-name { display: grid; gap: 6px; margin: 18px 0 6px; font-size: 14px; color: var(--text-muted); }
.preset-sample i { width: 12px; height: 12px; border-radius: 50%; }
.preset-option em { font-style: normal; color: var(--text-muted); }
.appearance-footer { gap: 8px; }
.appearance-footer .btn { padding-inline: 14px; }
.appearance-fields .look-outline { grid-column: 1 / -1; font-size: 14px; flex-direction: row !important; align-items: center; gap: 10px !important; }
.appearance-panel .appearance-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0 !important; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.appearance-panel .appearance-close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.appearance-panel .appearance-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.appearance-fields .look-size { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px !important; font-size: 14px; }
.appearance-fields .look-size b { font-weight: 600; color: var(--text); }
.appearance-fields .look-size .look-size-range { grid-column: 1 / -1; --look-grad: linear-gradient(90deg, var(--line), var(--mauve-deep)); }
  [data-surface=agent] :is(.list-filters #list-q, .list-filters #library-q, .list-filters select.fld, select.stage-pick, .imp-maps select, .doc-due input, .stagepick-date, .hn-reply, .look-hex, .look-name input, .appearance-fields select) { font-size: 16px !important; }
.appearance-trigger { display: none !important; }