/* Website equivalents of BetterTile's native wheel and Settings controls. */
.app-glyph{display:block;width:25px;height:25px;flex:0 0 25px}
.app-wheel{--wheel-hub:#1c1e1f;display:block;width:100%;height:auto;overflow:visible;color:#dedfe1;filter:drop-shadow(0 9px 15px #0003)}
.wheel-backdrop{fill:#232526;stroke:#5a5d60;stroke-width:1}
.sector-surface{fill:#ffffff05;stroke:#ffffff2b;stroke-width:1;stroke-linejoin:round}
.app-wheel-sector{transform-origin:0 0;transition:transform 120ms ease-out}
.app-wheel-sector.selected{transform:scale(1.045);color:#fff}
.app-wheel-sector.selected .sector-surface{fill:#2d63d5;stroke:#397cff;stroke-width:3}
.app-wheel-sector[role=button],.app-wheel-cancel[role=button]{cursor:pointer;outline:none}
.app-wheel-sector[role=button]:hover .sector-surface{fill:#ffffff18}
.app-wheel-sector.selected:hover .sector-surface{fill:#346ee6}
.app-wheel-sector:focus-visible .sector-surface{stroke:#a5c8ff;stroke-width:3}
.app-wheel-cancel circle{fill:var(--wheel-hub);stroke:#5a5d60;stroke-width:1}
.app-wheel-cancel path{fill:none;stroke:#929495;stroke-width:2;stroke-linecap:round}
.app-wheel-cancel.selected circle,.app-wheel-cancel:focus-visible circle{stroke:#78a9ff;stroke-width:3}
.app-wheel-cancel:hover circle{fill:#303235}
.story-wheel{width:32cqw;height:32cqw;border:0;background:none;box-shadow:none}
.wheel-demo{grid-template-columns:minmax(0,1fr) 155px;gap:20px;padding:12px;background:#242627;min-height:370px}
.wheel-demo>.app-wheel{max-width:440px;margin:auto}
.wheel-demo>p small{font-size:12px;line-height:1.7;color:var(--app-muted);margin-top:12px}
.native-demo{--app-bg:#1e2021;--app-sidebar:#1b1d1e;--app-card:#252728;--app-line:#3c3e40;--app-blue:#397cff}
.native-sidebar button.active{background:#2d57cc;color:#fff}
.native-sidebar button{font-size:14px;gap:12px;min-height:44px}
.native-sidebar .sidebar-icon{width:23px;height:23px;flex:0 0 23px}
.native-disabled{cursor:default;font-size:14px}
.native-sidebar p{color:#909394;font-size:12px}
.snap-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 12px}
.snap-heading h4{margin:0;font-size:15px}
.snap-heading .native-quiet{background:#303233;border:0;font-weight:600}
.snap-card{border:0;padding:12px;background:#252728}
.snap-map{grid-template-columns:minmax(112px,1fr) minmax(0,3fr) minmax(112px,1fr);grid-template-rows:80px 280px 80px;gap:10px}
.snap-map>button{display:flex;align-items:center;gap:10px;width:100%;height:100%;min-height:70px;padding:10px;border:1px solid #494b4d;border-radius:10px;background:#333536;font-size:13px;font-weight:600;line-height:1.3;text-align:left}
.snap-map>button:nth-child(4),.snap-map>button:nth-child(5){height:80px;align-self:center}
.snap-map>button:nth-child(2),.snap-map>button:nth-child(7){justify-content:center}
.snap-map>button small{font-size:12px;font-weight:500;line-height:1.35;margin-top:4px;color:#adafb1}
.snap-map>button[aria-pressed=true]{background:#304053;border-color:#397cff;box-shadow:0 0 0 1px #397cff}
.snap-map>button:hover{background:#3c4046}
.snap-monitor{height:100%;border:2px solid #626568;border-radius:12px;background:#222425}
.snap-monitor:after{bottom:-8px;height:2px;left:30%;right:30%;background:#a1a3a5}
.snap-screen{position:absolute;inset:12px}
.snap-placement{display:grid;place-items:center;border:1px solid #797e86;background:#223041;border-radius:8px;min-width:0}
.snap-placement>.app-glyph{width:28px;height:28px}
.snap-edge-marker{position:absolute;width:22px;height:22px;border:0 solid #397cff;border-radius:9px;left:0;top:0}
.snap-edge-marker[data-edge="0"]{border-top-width:4px;border-left-width:4px}
.snap-edge-marker[data-edge="1"]{left:40%;width:20%;height:4px;border-top-width:4px}
.snap-edge-marker[data-edge="2"]{left:auto;right:0;border-top-width:4px;border-right-width:4px}
.snap-edge-marker[data-edge="3"]{top:40%;height:20%;width:4px;border-left-width:4px}
.snap-edge-marker[data-edge="4"]{left:auto;right:0;top:40%;height:20%;width:4px;border-right-width:4px}
.snap-edge-marker[data-edge="5"]{top:auto;bottom:0;border-bottom-width:4px;border-left-width:4px}
.snap-edge-marker[data-edge="6"]{top:auto;bottom:0;left:40%;width:20%;height:4px;border-bottom-width:4px}
.snap-edge-marker[data-edge="7"]{top:auto;left:auto;right:0;bottom:0;border-bottom-width:4px;border-right-width:4px}
.snap-legend{display:flex;justify-content:center;gap:24px;font-size:12px;color:#a3a5a7;padding:20px 0}
.snap-legend span:first-child{color:#6498ff}
.snap-card>.native-row{border-top:1px solid #343637;padding:14px 0 0;gap:12px}
.snap-assignment{min-width:0;max-width:52%}
.snap-assignment select{font:inherit;font-size:13px;color:#e7e8ea;background:#333638;border:1px solid #55595e;border-radius:8px;padding:10px 25px 10px 10px;max-width:100%;min-height:44px;color-scheme:dark}
.native-demo select:focus-visible{outline:3px solid #8ab6ff;outline-offset:3px}
.header-actions{display:flex;gap:12px;align-items:center}
.theme-toggle{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle:hover{background:#7a95c31c}
.theme-toggle[aria-pressed=true]{color:#c5dbff;background:#2d3548}
.button{color:white}
.button.secondary{color:var(--ink)}
:root[data-theme=dark]{color-scheme:dark;--paper:#171a21;--ink:#edf0f8;--green:#8aaaff;--lime:#a8ecd6;--muted:#adb6c9;--line:#363d4c;background:#171a21}
:root[data-theme=dark] body{background:radial-gradient(ellipse 65% 650px at 50% 350px,#25304e 0,transparent 100%),var(--paper)}
:root[data-theme=dark] .button{background:#345fdc;border-color:#6384e7;color:#fff}
:root[data-theme=dark] .button:hover{background:#436ee9}
:root[data-theme=dark] .button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .button.secondary:hover{background:#2d3548}
:root[data-theme=dark] .desktop{border-color:#4e6391;box-shadow:0 35px 75px -30px #0009}
:root[data-theme=dark] .story-controls button[aria-pressed=true]{background:#2c3c63;color:#c6d6ff}
:root[data-theme=dark] .story-controls button:hover{background:#2b3446}
:root[data-theme=dark] .chapter-detail{color:#96d9c0}
:root[data-theme=dark] .shortcut kbd{background:#252d3e;border-color:#46536c;color:#e2e7f3}
:root[data-theme=dark] .wheel-card{background:#222c41}
:root[data-theme=dark] .about{background:#10131a;color:#edf0f8}
:root[data-theme=dark] .about-heading p,:root[data-theme=dark] .trust-grid p{color:#bcc6d8}
:root[data-theme=dark] .trust-grid>div{border-color:#3a4654}
:root[data-theme=dark] .footer{border-color:var(--line)}
:root[data-theme=dark] .skip-link{background:#edf0f8;color:#171a21}
:root[data-theme=dark] ::selection{background:#a8ecd6;color:#172a25}
@media(max-width:1050px){.wheel-demo{grid-template-columns:1fr}.wheel-demo>p small{margin-top:0}.snap-map{grid-template-columns:110px minmax(0,1fr) 110px}.snap-map>button{gap:6px;padding:8px}}
@media(max-width:620px){
  .header-actions{gap:7px}.header{gap:8px}.header .brand{font-size:20px}
  .native-sidebar button{font-size:13px}.native-sidebar .sidebar-icon{width:20px;height:20px;flex-basis:20px}
  .wheel-demo{padding:5px 0 18px;gap:5px;min-height:0}.wheel-demo>.app-wheel{width:min(100%,340px)}
  .snap-map{grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:112px 175px 112px;gap:6px}
  .snap-map>button{flex-direction:column;justify-content:center;gap:4px;padding:5px;font-size:11px;text-align:center;min-height:80px}
  .snap-map>button small{font-size:10px}.snap-map .app-glyph{width:22px;height:22px;flex-basis:22px}.snap-card{padding:8px}.snap-screen{inset:6px}
  .snap-heading h4{font-size:13px}.snap-heading .native-quiet{font-size:12px;min-height:44px}.snap-legend{gap:10px;font-size:10px;padding:16px 0}.snap-assignment{max-width:100%;width:100%}.snap-assignment select{width:100%;font-size:13px}
}

/* Measured against BetterTile's SettingsPageHeader and native grouped forms. */
.native-demo{font-size:13px;line-height:1.45;border-radius:12px;box-shadow:0 24px 60px -28px #0008,0 2px 6px #0002}
.native-titlebar{height:34px;padding-inline:14px;font-size:12px;gap:10px}
.native-titlebar>span{font-family:inherit;font-size:11px;text-transform:none;letter-spacing:0}
.native-app{grid-template-columns:218px minmax(0,1fr)}
.native-sidebar{padding:14px 8px}
.native-brand{padding:4px 10px 18px;font-size:13px}
.native-brand img{width:23px;height:23px}
.native-sidebar button{min-height:36px;padding:7px 10px;font-size:13px;gap:9px;border-radius:7px}
.native-sidebar .sidebar-icon{width:18px;height:18px;flex-basis:18px}
.native-sidebar > p{font-size:11px;font-weight:500;margin:17px 10px 5px}
.native-search{margin:0 5px 14px;padding:0 7px;gap:6px;height:32px;border:1px solid transparent;background:#ffffff04;border-radius:6px}
.native-search:focus-within{border-color:#8ab6ff}
.native-search svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.native-search input{width:100%;min-width:0;padding:0;border:0;outline:none;background:transparent;color:var(--app-text);font:inherit;font-size:12px}
.native-search input::placeholder{color:var(--app-muted)}
.native-content{padding:22px 24px 28px}
.native-page>header{margin-bottom:26px}
.native-page>header h3,.search-empty h3{font-size:25px;line-height:1.2;letter-spacing:-.025em;margin:0}
.native-page>header p{font-size:13px;margin-top:5px;line-height:1.45}
.native-page h4{font-size:13px;font-weight:500;margin:24px 8px 8px}
.native-card{border:1px solid #ffffff0b;border-radius:10px}
.native-row{min-height:40px;gap:16px;padding:9px 10px}
.native-row small{line-height:1.45}
.native-row+.native-row{border-color:#ffffff0a}
.native-row select{max-width:50%;min-width:0;min-height:30px;border:1px solid transparent;border-radius:6px;background:#343638;color:var(--app-text);font:inherit;padding:4px 8px;text-overflow:ellipsis}
.native-row select:focus-visible{outline:2px solid #8ab6ff;outline-offset:2px}
.native-help{font-size:12px;color:var(--app-muted);line-height:1.45;margin:0;padding:8px 10px 12px}
.mode-grid{padding:8px;gap:0 12px}
.mode-choice{display:flex;flex-direction:column;gap:6px;min-height:114px;padding:13px;border:1px solid #ffffff12;border-radius:10px;background:#ffffff04}
.mode-choice+.mode-choice{border:1px solid #ffffff12}
.mode-choice.selected{background:#007aff15;border-color:var(--app-blue);box-shadow:none}
.mode-choice strong{font-size:13px}
.mode-choice .mode-icon{width:19px;height:15px;border-width:1px;color:var(--app-muted);border-color:currentColor;border-radius:3px}
.mode-choice[data-mode=Native] .mode-icon:after{display:none}
.mode-choice[data-mode=Bento] .mode-icon:after{inset:0;border:0;background:linear-gradient(transparent 46%,currentColor 46% 54%,transparent 54%),linear-gradient(90deg,transparent 46%,currentColor 46% 54%,transparent 54%)}
.mode-choice.selected .mode-icon{color:var(--app-blue)}
.mode-grid>.native-row,.mode-grid>.native-help,.mode-grid>.single-sample{grid-column:1/-1}
.mode-grid>.native-row{border-bottom:1px solid #ffffff0a}
.native-segment{padding:2px;border-radius:6px}
.native-segment button{min-height:26px;padding:3px 10px;border-radius:4px}
.native-segment button[aria-pressed=true]{background:var(--app-blue);color:#fff}
.native-quiet{min-height:30px;padding:4px 10px;border-radius:6px}
.rule-value{font-size:12px;color:var(--app-muted)}
.search-empty p{color:var(--app-muted)}
.native-demo [hidden]{display:none!important}
.single-sample{padding:5px 10px}
.single-sample summary{cursor:pointer;color:var(--app-muted);font-size:12px;padding-block:7px}
.single-preview{position:relative;height:120px;margin:10px;background:#17191c;border-radius:8px}
.single-preview>div{position:absolute;background:#303a4c;border:1px solid #6d8bc0;border-radius:6px;min-width:0;overflow:hidden}
.single-preview span{display:block;padding:5px 8px;font-size:11px;border-bottom:1px solid #ffffff14}
.divider-preview{user-select:none}
.preview-window{border-radius:6px;border-color:#ffffff16;background:#ffffff06}
.preview-window:before{top:10px;left:10px;height:3px;box-shadow:0 11px #ffffff09}
.native-divider .up,.native-divider .down{height:15px;transform-origin:50% 100%}
.native-divider .left,.native-divider .right{width:15px;transform-origin:100% 50%}
.native-divider .down{transform-origin:50% 0}
.native-divider .right{transform-origin:0 50%}
.native-divider.dragging .up,.native-divider.dragging .down{transform:scaleY(2.6)}
.native-divider.dragging .left,.native-divider.dragging .right{transform:scaleX(2.6)}
.divider-preview[data-layout-mode=native] .native-divider{cursor:ew-resize}
.divider-preview[data-layout-mode=native] .native-divider .up,.divider-preview[data-layout-mode=native] .native-divider .down{height:28px}
.divider-preview[data-layout-mode=native] .native-divider.dragging .up,.divider-preview[data-layout-mode=native] .native-divider.dragging .down{transform:scaleY(3)}
@media(max-width:900px){
  .native-app{grid-template-columns:1fr}
  .native-sidebar{display:flex;flex-wrap:wrap;overflow:visible;padding:10px;gap:5px}
  .native-sidebar .native-brand{display:none}.native-sidebar>p{display:none}
  .native-search{display:flex;flex:1 0 100%;height:44px;margin:0 0 5px}
  .native-search input{font-size:16px}.native-sidebar button{width:auto;min-height:44px;min-width:0}
  .native-content{padding:22px 16px}.native-row select{font-size:16px;min-height:44px}
  .native-segment button,.native-quiet{min-height:44px}
}
@media(max-width:620px){
  .native-row{gap:8px;padding:12px}.native-row select{max-width:100%;width:100%}
  .mode-grid{gap:8px}.mode-choice{min-height:100px}
  .native-titlebar{height:38px}.native-sidebar button{font-size:12px;padding-inline:8px}
  .native-sidebar .sidebar-icon{width:16px;height:16px;flex-basis:16px}
  .preview-help{flex-direction:column;gap:4px}
}
@media(prefers-reduced-motion:reduce){.native-divider i{transition:none}}

.preview-window.committed{display:none;--x:var(--committed-x);--y:var(--committed-y);opacity:.45}
.ghost-drag .preview-window.committed{display:block}
.ghost-drag .preview-window:not(.committed){border-color:#0a84ff;background:#0a84ff18}
.native-demo select:focus-visible,.single-sample summary:focus-visible{outline:3px solid #8ab6ff;outline-offset:3px}