/* A single appearance picker, shared by desktop and touch. */
.quick-views{gap:14px}
.quick-views #open-appearance{padding-inline:14px;border-color:#879d795c;background:#365447;min-width:135px}
.quick-views #open-appearance small{font-size:15px;margin-left:4px;color:#d2c38f}
.quick-views .camera-presets{flex:none}
.appearance-picker{box-sizing:border-box;position:fixed;inset:auto;margin:0;width:440px;max-width:calc(100vw - 24px);height:min(690px,calc(100dvh - 150px));max-height:calc(100dvh - 100px);padding:0;border:1px solid #a89b73;border-radius:16px;background:#f8f5e9;color:#294d40;box-shadow:0 16px 60px #061c2380;overflow:hidden}
.appearance-picker:popover-open{display:flex;flex-direction:column}
.appearance-picker::backdrop{background:transparent}
.appearance-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 13px;border-bottom:1px solid #dcd7c3;background:linear-gradient(120deg,#faf7ec,#ecebd9);flex-shrink:0}
.appearance-heading .eyebrow{font-size:9px;margin:0 0 4px;color:#817349}
.appearance-heading h2{font:24px Georgia,serif;margin:0;font-weight:normal}
.appearance-heading button{height:36px;width:36px;font-size:23px;padding:0;border-color:transparent;background:transparent;color:#486452}
.appearance-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 20px 12px;scrollbar-width:thin;scrollbar-color:#a5b49c transparent}
.appearance-section{padding:15px 0;border-bottom:1px solid #dedac8}
.appearance-section h3{font-size:13px;margin:0 0 10px;letter-spacing:.15px}
.appearance-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.appearance-row h3{margin:0}.appearance-row h3 span{display:block;font-size:9px;font-weight:normal;color:#7c856e;margin-top:3px}
.appearance-picker button{font-family:inherit;color:#294d40;border:1px solid #c8cbb5;border-radius:8px;background:#fffdf5;box-shadow:inset 0 1px #ffffff80;font-size:11px}
.appearance-picker button:hover:not(:disabled){border-color:#8c9f7e;background:#eaeedd}
.appearance-picker button:disabled{opacity:.45}
.appearance-picker button[aria-pressed=true]{background:#efe3bb;border-color:#a38b4c;box-shadow:inset 0 0 0 1px #b29b62}
.appearance-picker .primary{background:#315744;color:#fff4d5;border-color:#315744}
.appearance-picker button:focus-visible,.appearance-picker summary:focus-visible{outline:3px solid #ba7931;outline-offset:2px}
.favorites-empty{font-size:11px;line-height:1.5;color:#7c846d;margin:10px 0 0}
#favorite-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
#favorite-list .favorites-empty{grid-column:1/-1}
.favorite-entry{display:flex;align-items:stretch;gap:5px;position:relative}
.favorite-entry>button{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px;text-align:left}
.favorite-entry strong{display:block;overflow-wrap:anywhere;font-size:11px;line-height:1.3}
.favorite-entry small{display:none}
.favorite-entry .look-thumb{width:34px;height:38px;flex-shrink:0;margin:0;border-radius:5px}
.favorite-entry details{border:0;margin:0;padding:0;position:relative}
.favorite-entry summary{list-style:none;width:30px;height:100%;display:grid;place-items:center;font-size:20px;cursor:pointer}
.favorite-entry summary::-webkit-details-marker{display:none}
.favorite-entry details>div{position:absolute;right:0;top:100%;z-index:2;padding:5px;width:165px;background:#fffdf4;border:1px solid #c3c8ac;border-radius:8px;box-shadow:0 8px 15px #183d3033}
.favorite-entry details button{display:block;width:100%;border:0;text-align:left;padding:10px 7px}
#favorite-form{margin-top:12px;display:flex;flex-direction:column;gap:6px}
#favorite-form[hidden]{display:none}#favorite-form label{font-size:11px}
#favorite-form input{min-width:0;flex:1;width:0;font-size:14px;padding:9px}
.choice-label{font-size:10px;color:#77816a;margin:10px 0 6px}
.piece-choices{display:grid;gap:8px}.piece-choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}.piece-choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.piece-choices .piece-choice{padding:6px;display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0;line-height:1.3;font-size:11px;text-align:center}
.piece-choice>span:last-child{min-height:28px;display:grid;place-items:center}
.look-thumb{display:block;overflow:hidden;border-radius:5px;height:72px;position:relative;background:linear-gradient(140deg,#c9ceb9,#9aa898)}
.look-thumb img{display:block;width:100%;height:100%;object-fit:contain;position:relative}
.look-thumb.artwork img,.look-thumb[class~="3d"] img,.look-thumb.classic img{object-fit:cover;object-position:center}
.piece-choices.two .look-thumb{height:58px}
.look-thumb.obsidian{background:linear-gradient(135deg,#5b686c,#263536)}
.look-thumb.green{background:linear-gradient(135deg,#e6e8cd,#779f89)}
.look-thumb.stone{background:linear-gradient(135deg,#d9dcd7,#667076)}
.board-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.board-choices button{padding:6px;font-size:10px;line-height:1.4}
.board-swatch{display:block;height:32px;border-radius:4px;margin-bottom:6px;background:conic-gradient(#151d22 25%,#778088 0 50%,#151d22 0 75%,#778088 0);background-size:32px 32px;border:1px solid #7b7966}
.board-swatch.green{background-image:conic-gradient(#789f88 25%,#e6e8cd 0 50%,#789f88 0 75%,#e6e8cd 0)}
.board-swatch.stone{background-image:conic-gradient(#667076 25%,#d9dcd7 0 50%,#667076 0 75%,#d9dcd7 0)}
.background-choice{display:flex;justify-content:space-between;align-items:center}.background-choice h3{margin-bottom:5px}.background-choice p{font-size:11px;color:#77816a;margin:0}
.courtyard-swatch{width:105px;height:43px;border:1px solid #738673;border-radius:6px;background:url('assets/backgrounds/courtyard.png');background-size:cover;background-position:center}
.appearance-details{border:0;border-bottom:1px solid #dedac8;padding:12px 0;margin:0;font-size:12px}
.appearance-details summary{cursor:pointer;font-size:12px;font-weight:bold}.appearance-details .check{margin-top:12px;font-size:12px}.appearance-details .hint{font-size:10px;margin:4px 0}
.appearance-footer{flex-shrink:0;border-top:1px solid #dcd7c3;background:#eeeedc;padding:10px 16px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.appearance-footer>span{font-size:10px;color:#667961;max-width:230px;line-height:1.4}.appearance-footer button{white-space:nowrap;font-size:10px;padding:7px}
.camera-default{margin-top:12px;width:100%}
.token.traditional{filter:drop-shadow(0 1px 1px #061c2980)}
#flat-board .token.traditional[data-role=p],.mini-map .token.traditional[data-role=p],.flat-motion-piece .token.traditional[data-role=p]{transform:none}
@media(max-width:760px){
  .sheet-open .workspace .dock{bottom:112px}
  .quick-views{gap:3px;padding:4px 5px}.quick-views #open-appearance{min-width:0;flex:1.3;padding:3px 4px;font-size:10px;gap:3px}.quick-views #open-appearance small{display:none}
  .quick-views .camera-presets{flex:1.65;gap:1px}.quick-views #flip{flex:.6}.quick-views #inspect{flex:1}
  .appearance-picker{left:7px;right:7px;bottom:calc(66px + env(safe-area-inset-bottom));top:auto!important;width:auto;max-width:none;height:min(610px,72dvh);max-height:calc(100dvh - 100px);border-radius:16px}
  .appearance-heading{padding:12px 14px}.appearance-heading h2{font-size:22px}.appearance-scroll{padding:0 14px 10px}.appearance-section{padding:12px 0}
  .appearance-picker button{min-height:40px}.piece-choices{gap:6px}.piece-choices .piece-choice{font-size:10px}.look-thumb{height:61px}.piece-choices.two .look-thumb{height:49px}
  .appearance-footer{padding:9px 12px}.appearance-footer>span{max-width:170px;font-size:9px}.appearance-footer button{font-size:10px}
  #favorite-form input{font-size:16px}.favorite-entry strong,.favorite-entry small{max-width:210px}.appearance-heading #close-appearance{min-height:40px;width:40px}
}