/* The final material layer. All pieces use resolved whole/module/card tokens.
   The few !important declarations replace historical material selectors;
   accessibility and unsupported-backdrop fallbacks remain last. */
body[data-direction=focus]{--piece-edge:#ffffff60;--piece-shadow:inset 0 1px 0 #ffffff85,inset 1px 0 0 #ffffff20,0 8px 26px #173b4c12}
body[data-direction=focus][data-theme=dark]{--piece-edge:#d5edff3d;--piece-shadow:inset 0 1px 0 #ffffff3b,inset 1px 0 0 #ffffff14,0 8px 26px #06131c36}
body.app[data-direction=focus][data-material] .appearance-piece{background:var(--piece-bg)!important;backdrop-filter:var(--piece-blur)!important;-webkit-backdrop-filter:var(--piece-blur)!important;border-radius:var(--piece-radius)!important;border:1px solid var(--piece-edge);border-color:var(--piece-edge)!important;box-shadow:var(--piece-shadow)!important}
body.app[data-direction=focus][data-material] .appearance-piece[data-piece-surface=solid]{border-color:var(--line)!important;--piece-shadow:0 4px 18px #173b4c08}
body.app[data-direction=focus][data-material] .appearance-piece:is(.site-card,.category-tile){position:relative;isolation:isolate}
body.app[data-direction=focus][data-material] .appearance-piece:is(.site-card,.category-tile)::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(180px circle at var(--glow-x,-300px) var(--glow-y,-300px),#ffffff45,transparent 75%),linear-gradient(135deg,#ffffff32,transparent 38%,transparent 72%,#ffffff0d);box-shadow:inset 1px 1px 0 #ffffff3d;opacity:1;z-index:-1}
body.app[data-direction=focus][data-material] .appearance-piece[data-piece-surface=solid]::before{display:none}
/* Text shares its component surface. Individual words never get a second plate. */
body.app[data-direction=focus][data-material] .category-tile-copy{min-width:0}
body.app[data-direction=focus][data-material] .category-tile-copy small{margin-top:2px}
body.app[data-direction=focus][data-material] .search-wrap{gap:10px}
body.app[data-direction=focus][data-material] .search-wrap input{padding:7px 10px;color:var(--text)}
body.app[data-direction=focus][data-material] .app-footer.appearance-piece{padding:12px 16px;margin-top:25px}
/* Layout changes are independent of content order and bookmark data. */
body.app[data-direction=focus][data-material] main#main{max-width:var(--layout-width,1160px)}
body.app[data-direction=focus][data-view=home][data-material] main#main{max-width:var(--layout-width,1160px)}
body.app[data-direction=focus] :is(.desktop-grid,.category-grid){gap:var(--layout-gap,12px)}
body.app[data-direction=focus][data-view=home][data-clock-position=left] .startpage-clock{justify-self:start;align-items:flex-start}
body.app[data-direction=focus][data-view=home][data-clock-position=right] .startpage-clock{justify-self:end;align-items:flex-end}
body.app[data-direction=focus][data-view=home] .startpage-clock{min-width:0;max-width:100%;width:max-content}
body.app[data-direction=focus] #clock-time{font-size:var(--clock-size,64px);font-weight:300;line-height:1.08}
body.app[data-direction=focus][data-clock-date=false] .clock-calendar{display:none}
body.app[data-direction=focus][data-view=home][data-navigation-visible=false] .collection-tabs{display:none}
body.app[data-direction=focus][data-view=home][data-categories-visible=false] :is(.explore-heading,.category-grid){display:none}
@media(min-width:701px){
 body.app[data-direction=focus][data-view=home][data-clock-position=split][data-clock-visible=true] .discovery-panel{grid-template-columns:max-content minmax(0,1fr);grid-template-areas:'clock search' 'clock tabs';column-gap:36px;row-gap:14px;max-width:1060px;margin:12px auto 36px;align-items:center}
 body.app[data-direction=focus][data-view=home][data-clock-position=split] .startpage-clock{justify-self:start;align-self:stretch;justify-content:center;padding:20px 25px}
 body.app[data-direction=focus][data-view=home][data-clock-position=split] .search-wrap{align-self:end}
 body.app[data-direction=focus][data-view=home][data-clock-position=split] .collection-tabs{align-self:start;justify-self:center}
}
/* Effects are orthogonal: turning off motion does not remove static materials. */
body.app[data-direction=focus][data-reflection=false] .appearance-piece{--piece-shadow:0 8px 26px #173b4c17}
body.app[data-direction=focus][data-reflection=false] .appearance-piece::before{opacity:0!important}
body.app[data-direction=focus][data-reflection=false] .appearance-piece:is(:hover,:focus-within){border-color:var(--line)!important}
body.app[data-direction=focus][data-reflection=false] :is(.topbar .icon-button,.main-nav,.main-nav button,.collection-tabs button,.layout-edit-button){box-shadow:none!important}
body.app[data-direction=focus][data-shadow=false] .appearance-piece{box-shadow:none!important}
body.app[data-direction=focus][data-shadow=false] .appearance-piece :is(button,.site-icon,.category-tile-icon){box-shadow:none!important}
body.app[data-direction=focus][data-lift=false] :is(.site-card,.category-tile):hover{transform:none!important}
body.app[data-direction=focus][data-motion=on][data-transitions=true] .appearance-piece{transition:border-color .26s ease,box-shadow .26s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
body.app[data-direction=focus][data-transitions=false] .appearance-piece{transition:none!important}
body.app[data-direction=focus][data-transitions=false] .appearance-piece *{transition:none!important}
html.appearance-transitioning .appearance-piece{transition:none!important}
.startpage-clock{view-transition-name:navigation-clock}.search-wrap{view-transition-name:navigation-search}
::view-transition{pointer-events:none}::view-transition-group(*){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.75,.25,1)}
/* A navigable, compact settings surface rather than an endless row of toggles. */
#appearance-dialog{width:min(740px,calc(100% - 24px));padding:26px}
#appearance-dialog[open]{height:min(860px,calc(100dvh - 28px))}
.appearance-jumps{display:flex;gap:5px;flex-wrap:wrap;padding:0 0 13px;border-bottom:1px solid var(--line);flex-shrink:0}
.appearance-jumps button{padding:8px 12px;border-radius:999px;font-size:11px;color:var(--muted);min-height:36px;background:var(--soft)}
.appearance-jumps button:hover{color:var(--text);background:var(--accent-soft)}
.appearance-section{scroll-margin-top:5px;padding:24px 0}
.appearance-section h3{margin-bottom:16px}.appearance-section h3>span{max-width:64%;text-align:right;line-height:1.7}
.appearance-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.appearance-examples>button{text-align:left;border:1px solid var(--line);border-radius:13px;padding:5px 5px 12px;overflow:hidden;background:var(--bg)}
.appearance-examples>button:hover{border-color:var(--accent)}
.appearance-examples strong,.appearance-examples small{display:block;margin:10px 7px 0;font-size:12px;font-weight:550}.appearance-examples small{font-size:10px;font-weight:400;color:var(--muted);line-height:1.7;margin-top:5px}
.example-scene{display:block;height:112px;position:relative;border-radius:9px;overflow:hidden;background:url('/assets/wallpapers/dawn-lake.png') center/cover;color:#294553}
.example-scene i{position:absolute;display:block;font-style:normal}.example-clock{top:12px;left:50%;transform:translateX(-50%);background:#f6fbfc66;padding:4px 10px;border:1px solid #fff9;border-radius:9px;font-size:23px;font-weight:300}
.example-search{top:56px;left:15%;right:15%;height:13px;border-radius:8px;background:#f6fbfcbf;border:1px solid #fffa}
.example-tiles{left:12%;right:12%;bottom:12px;height:21px;background:repeating-linear-gradient(90deg,#f6fbfc80 0 20%,transparent 20% 26.66%);border-radius:5px}
.vista .example-clock{left:12px;top:22px;transform:none;font-size:19px;padding:6px}.vista .example-search{left:49%;right:7%;top:36px}.vista .example-tiles{left:8%;right:8%}
.quiet{background:#dae4e7}.quiet .example-clock{left:12px;top:14px;transform:none;font-size:17px;background:#f7fafbf0}.quiet .example-search{top:53px;border-radius:4px}.quiet .example-tiles{background:repeating-linear-gradient(90deg,#f6fbfc 0 21%,transparent 21% 26.33%)}
.appearance-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:21px}
.appearance-control-grid .range-heading{font-size:12px;margin-bottom:7px;gap:10px;line-height:1.7}
#appearance-dialog input[type=range]{width:100%;height:22px;accent-color:var(--accent);margin:0}
#appearance-dialog input:disabled{opacity:.4}
.appearance-check{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text);line-height:1.7;min-height:35px;margin-top:10px}
.appearance-check input{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}
.appearance-control-grid .appearance-check{margin:0 0 11px}
.appearance-select{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;margin:17px 0}
.appearance-select select{min-width:0;width:58%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12px}
.module-material-options,.clock-position-options{display:flex;gap:6px;flex-wrap:wrap}
.module-material-options button,.clock-position-options button{min-height:39px;padding:8px 14px;border:1px solid var(--line);border-radius:9px;font-size:12px;background:var(--bg)}
:is(.module-material-options,.clock-position-options) button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.appearance-reset-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}.appearance-reset-actions .button{font-size:11px;padding:10px 12px}
.text-button{font-size:11px;min-height:36px;text-decoration:underline;text-underline-offset:4px;margin-top:4px;color:var(--muted)}
.appearance-switches{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;margin-top:15px}
#appearance-layout .clock-toggle{margin:0 0 15px}#appearance-whole .glass-finish-options{margin-top:18px}
@media(max-width:700px){
 body.app[data-direction=focus] #clock-time{font-size:min(var(--clock-size,64px),15vw)}
 body.app[data-direction=focus] :is(.desktop-grid,.category-grid){gap:min(var(--layout-gap,12px),12px)}
 body.app[data-direction=focus][data-view=home][data-clock-position=split] .startpage-clock{justify-self:center}
 body.app[data-direction=focus][data-material] .category-tile{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-areas:'icon count' 'copy copy';align-content:start;align-items:center;min-height:132px;padding:14px 12px;gap:9px 7px}
 body.app[data-direction=focus][data-material] .category-tile-icon{grid-area:icon}
 body.app[data-direction=focus][data-material] .category-tile-copy{grid-area:copy;align-self:start;width:100%;padding:3px 5px}
 body.app[data-direction=focus][data-material] .category-tile-count{grid-area:count;position:static;justify-self:end;align-self:center;width:max-content;max-width:100%;padding:2px 4px;font-size:9px;white-space:nowrap}
 body.app[data-direction=focus][data-material] .category-tile-arrow{display:none}
 body.app[data-direction=focus][data-material] [data-piece-surface=glass].topbar .top-actions{padding-block:2px;padding-left:3px}
 #appearance-dialog{padding:19px 16px}#appearance-dialog .dialog-heading h2{font-size:16px}#appearance-dialog .dialog-heading{margin-bottom:13px}
 .appearance-jumps{gap:4px;padding-bottom:10px}.appearance-jumps button{padding:6px 10px;min-height:32px;font-size:10px}
 .appearance-examples{gap:7px}.example-scene{height:85px}.example-clock{font-size:17px;padding:3px 6px;top:8px}.example-search{top:42px;height:10px}.example-tiles{bottom:10px;height:15px}
 .vista .example-clock{left:5px;top:13px;font-size:12px;padding:3px}.vista .example-search{top:23px;left:54%}.quiet .example-clock{left:7px;top:9px;font-size:13px}.quiet .example-search{top:40px}
 .appearance-examples strong,.appearance-examples small{margin-inline:3px;font-size:11px}.appearance-examples small{font-size:9px}
 .appearance-control-grid{gap:16px}.appearance-control-grid .range-heading{font-size:11px;flex-wrap:wrap;gap:3px}
 .appearance-switches{grid-template-columns:1fr}.appearance-check{font-size:11px}
 .module-material-options button,.clock-position-options button{padding:7px 10px;font-size:11px}
 .appearance-section{padding:20px 0}#appearance-dialog .settings-footer{gap:8px;padding-top:13px;margin-top:12px}#appearance-dialog .settings-footer .button{padding:11px 12px;font-size:11px}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){body.app[data-direction=focus][data-material] .appearance-piece{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
body.app[data-direction=focus][data-motion=off] .appearance-piece{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.appearance-piece{transition:none!important;animation:none!important}::view-transition-group(*){animation-duration:0s!important}}
body[data-theme=dark] dialog .icon-button img,body[data-direction=workbench]:not([data-theme=light]) dialog .icon-button img{filter:invert(1)}
