/* Salene's chosen study: Cream 2 · Type 2 · Tools 1.
   Keep material pigments and interaction geometry independent of the chrome. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Fira+Sans:wght@400;500;600&display=swap');
:root{--linen:#f7f1e5;--ink:#51483e;--muted:#74695c;--line:#ddd3c2;--font-reading:'Newsreader',Georgia,serif;--font-tools:'Fira Sans',system-ui,sans-serif}
body{background:#f7f1e5}
body,button,input,textarea,select,#tools.material-tray .tool-caption,.quiet-note,.map-search,.map-category h3,.map-room-list button,.map-list-number,.map-legend,.map-panel-head,.map-location,.index-page button span{font-family:var(--font-tools)!important}
h1,h2,.wordmark,.room-title,.quiet-note h2,#worldMapDialog h2,.breath-cue,.world-gesture-hint,.map-visit-key,.playground-return{font-family:var(--font-reading)!important;font-optical-sizing:auto}
.room-tile text,.overview-art text{font-family:var(--font-tools)}
.overview-heart text,.playground-island text{font-family:var(--font-reading)}
#quietNav{background:#f7f1e5bb;border-color:#ddd3c260}
.quiet-note,#worldMapPanel,#worldMapDialog,#worldMapDialog .map-index{background:#f7f1e5;color:var(--ink)}
#worldMapDialog .map-search{background:#eee5d6;color:var(--ink)}
/* The materials sit directly on the room, without a containing pill. */
#tools.material-tray{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;gap:14px;padding:8px 12px;scroll-padding:12px}
#tools.material-tray .material-tool{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--ink);opacity:1}
#tools.material-tray .tool-caption{color:var(--ink);border-bottom:2px solid transparent;padding-bottom:3px;letter-spacing:.015em}
#tools.material-tray .material-tool:is(.active,[aria-pressed='true']) .tool-caption{border-bottom-color:currentColor}
#tools.material-tray .material-tool:focus-visible{outline:2px solid #768164;outline-offset:-2px}
#tools.material-tray .material-tool:hover .tool-caption{color:#705d49}
/* A quiet paper surface only when a palette or utility menu is open. */
.tray-options-panel,#tools .color-foldout{background:#f7f1e5!important;color:var(--ink);border:1px solid #d8cbbb!important;border-radius:4px!important;box-shadow:0 3px 12px #51483e0a!important}
#tools .swatch{border-color:#f7f1e5}
#tools.material-tray.brick-returning{outline:2px dashed #7b886a!important;outline-offset:3px}
#tools.material-tray.brick-returning::before{background:#f7f1e5;border-radius:3px;font-family:var(--font-tools)}
@media(max-width:650px){#tools.material-tray{gap:8px;padding:6px 8px}}
@media(max-height:500px) and (orientation:landscape){#tools.material-tray{gap:10px;padding:4px 8px}}
.rail-popover{position:fixed;inset:auto;margin:0;padding:8px;display:none;gap:6px;align-items:center;flex-wrap:wrap;background:#f7f1e5;border:1px solid #d8cbbb;border-radius:5px;box-shadow:0 5px 20px #51483e10;color:#51483e;font:13px 'Fira Sans',sans-serif;z-index:20;max-height:45dvh;overflow:auto}
.rail-popover:popover-open{display:flex}.rail-popover button{min-width:44px;min-height:44px;border-radius:50%;padding:4px;border:2px solid transparent}.rail-popover button[aria-pressed='true'],.rail-popover button.active{border-color:#738166}.rail-popover .rail-color{width:44px;height:44px;flex:none;margin:0;background-clip:content-box!important}.rail-popover .rail-color svg{width:36px;height:32px}.rail-popover .material-tool{display:flex;flex-direction:column;align-items:center;min-width:65px;border-radius:3px}.rail-popover .material-tool svg{width:35px;height:30px}.rail-popover .tool-caption{font-size:12px}.rail-popover button:focus-visible{outline:2px solid #738166;outline-offset:2px}#tools .palette-trigger>.tool-caption~.tool-caption{display:none}
#worldMapPanel [data-map-category]{cursor:pointer}#worldMapPanel [data-map-category]:focus-visible{outline:none;filter:drop-shadow(0 0 20px #536449)}#worldMapPanel .overview-art>svg>text{display:none}

/* Integrated header: visible glyphs, invisible but generous touch areas. */
.quiet-controls>button,#worldMapToggle,#quietGuide,#quietSound{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
.quiet-controls>button[aria-pressed='true']{color:#8c694e!important}
#quietNav{border:0;background:transparent;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x}
#quietNav .index-page button{scroll-snap-align:none}#quietNav .index-page{padding-left:0;padding-right:0}
#quietNav .index-page button span{max-width:32px;border-radius:3px}