/* the beta look (settings, appearance, try the beta design), on html.ui-beta. black, bookmarks, tabs and pages down a sidebar
   on the left, the address bar over the page, which sits in its own rounded frame. the colours only change on the default
   theme, the other themes keep theirs. phones keep the bottom bar and only get the colours and corners */

/* tells mochii's pages (through the theme vars) that the beta look is on */
:root { --ui-beta:0; }
html.ui-beta {
  --ui-beta:1;
  --radius-detail:4px; --radius-frame:10px; --radius-item:9px; --radius-control:10px; --radius-panel:12px; --radius-dialog:16px; --radius-bar:14px;
  --beta-side:224px; --beta-line:rgba(255,255,255,.075); --beta-line-2:rgba(255,255,255,.13); --beta-soft:rgba(255,255,255,.07); --beta-hover:rgba(255,255,255,.04);
  --beta-inset:inset 0 1px 0 rgba(255,255,255,.05);
}
html.ui-beta:not([data-theme]) {
  --bg-body:#000; --bg-body-translucent:rgba(0,0,0,.8); --bg-grid:#0e0e10;
  --surface-0:#060607; --surface-1:#0a0a0b; --surface-2:#0d0d0f; --surface-3:#121214; --surface-4:#17171a; --surface-5:#1e1e22; --surface-hover:#26262b; --surface-active:#2e2e34;
  --text-primary:#f5f6f8; --text-secondary:#c9cacf; --text-muted:#9a9aa2; --text-faint:#6b6b73; --text-white:#fff;
  --border-subtle:rgba(255,255,255,.075); --border-faint:rgba(255,255,255,.12); --border-medium:#242429;
  --accent:#a1f6cc; --accent-soft:rgba(161,246,204,.09); --accent-active:rgba(161,246,204,.16);
  --input:#0d0d0f; --search-inset:#0a0a0b; --search-inset-focus:#0d0d0f; --search-glow:rgba(161,246,204,.22);
}
html.ui-beta ::-webkit-scrollbar-thumb { background:#2a2a2f; }
html.ui-beta * { scrollbar-color:#2a2a2f transparent; }
html.ui-beta svg[stroke="currentColor"] { stroke-width:2; }

/* the bars: one see-through surface, no lines between them */
html.ui-beta .tabbar, html.ui-beta .main-nav, html.ui-beta .side-rail { background:color-mix(in srgb, var(--bg-body) 72%, transparent); border:0; }
html.ui-beta .chrome-icon { border-radius:9px; color:var(--text-muted); }
html.ui-beta .chrome-icon:hover, html.ui-beta .new-tab-btn:hover, html.ui-beta .side-btn:hover, html.ui-beta .tab:hover { background:var(--beta-hover); color:var(--text-primary); }
html.ui-beta .omnibox input, html.ui-beta .nav-music {
  border:1px solid color-mix(in srgb, var(--accent) 13%, transparent); border-radius:12px;
  background:color-mix(in srgb, var(--surface-1) 80%, transparent); box-shadow:var(--beta-inset);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
html.ui-beta .omnibox input { height:36px; padding-left:38px; font-size:13px; }
html.ui-beta .omnibox-icon { left:13px; }
html.ui-beta .omnibox input:hover { border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
html.ui-beta .omnibox input:focus { background:var(--surface-2); border-color:color-mix(in srgb, var(--accent) 38%, transparent); box-shadow:var(--beta-inset), 0 0 0 3px var(--accent-soft); }
html.ui-beta .nav-music { height:36px; }
html.ui-beta .nav-account { width:28px; height:28px; flex-basis:28px; border-color:var(--beta-line-2); }
/* the blocked ads and trackers count isn't part of this look */
html.ui-beta .group:has(#block-stats) { display:none; }
/* the sidebar's bookmarks and collapse button only exist in this look */
.side-marks, .side-btn[data-side="collapse"] { display:none; }

@media (min-width:641px) {
  html.ui-beta .browser-container {
    display:grid; grid-template-columns:var(--beta-side) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"tabs nav" "tabs frame" "rail frame";
  }
  html.ui-beta .shell-body { display:contents; }

  /* bookmarks, then tabs, at the top of the sidebar */
  html.ui-beta .tabbar { grid-area:tabs; height:auto; min-height:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px 8px 6px; }
  html.ui-beta .side-marks { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--beta-line); }
  html.ui-beta .side-mark {
    aspect-ratio:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:10px;
    background:var(--surface-3); box-shadow:var(--beta-inset), 0 0 0 1px var(--beta-line); color:var(--text-muted); font-size:14px; font-weight:600; cursor:pointer;
    transition:background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
  }
  html.ui-beta .side-mark img { width:18px; height:18px; border-radius:4px; object-fit:contain; }
  html.ui-beta .side-mark:hover { background:var(--surface-5); color:var(--text-white); box-shadow:var(--beta-inset), 0 0 0 1px var(--beta-line-2); }
  html.ui-beta .side-mark.add { background:transparent; box-shadow:inset 0 0 0 1px var(--beta-line); }
  html.ui-beta .side-mark.add:hover { background:var(--beta-hover); }
  html.ui-beta .side-mark:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  html.ui-beta .tabs-container { flex:0 1 auto; flex-direction:column; align-items:stretch; gap:2px; overflow-x:hidden; overflow-y:auto; }
  html.ui-beta .tab { flex:0 0 32px; width:auto; min-width:0; height:32px; gap:9px; padding:0 4px 0 9px; border-radius:9px; font-weight:500; }
  html.ui-beta .tab::after { display:none; }
  html.ui-beta .tab.active { background:var(--beta-soft); box-shadow:var(--beta-inset), 0 0 0 1px var(--beta-line); color:var(--text-white); }
  html.ui-beta .tab.drag-over { box-shadow:inset 0 0 0 1px var(--accent); }
  html.ui-beta .tab-title { font-size:12.5px; }
  html.ui-beta .tab-close { border-radius:7px; }
  html.ui-beta .new-tab-btn { align-self:stretch; flex:0 0 32px; width:auto; height:32px; justify-content:flex-start; gap:9px; padding:0 9px; border-radius:9px; font-size:12.5px; font-weight:500; }
  html.ui-beta .new-tab-btn::after { content:"new tab"; }

  /* mochii's pages, bottom of the sidebar, with their names */
  html.ui-beta .side-rail { grid-area:rail; width:auto; flex:none; align-items:stretch; justify-content:flex-start; gap:0; padding:0 8px 10px; }
  html.ui-beta .side-rail-nav, html.ui-beta .side-rail-foot { flex-direction:column; align-items:stretch; gap:2px; padding-top:8px; border-top:1px solid var(--beta-line); }
  html.ui-beta .side-rail-foot { margin-top:8px; }
  html.ui-beta .side-btn { width:auto; height:34px; justify-content:flex-start; gap:10px; padding:0 10px; border:0; border-radius:9px; font-size:12.5px; font-weight:500; }
  html.ui-beta .side-btn::after, html.ui-beta .side-btn:hover::after, html.ui-beta .side-btn:focus-visible::after {
    content:attr(data-tip); position:static; transform:none; opacity:1; padding:0; border:0; background:none; color:inherit; font-size:inherit; transition:none;
  }
  html.ui-beta .side-btn.on { background:var(--beta-soft); box-shadow:var(--beta-inset), 0 0 0 1px var(--beta-line); color:var(--text-white); }
  html.ui-beta .side-btn.on svg { color:var(--accent); }
  html.ui-beta .side-btn[data-side="collapse"] { display:flex; color:var(--text-faint); }
  html.ui-beta .side-btn[data-side="collapse"]:hover { color:var(--text-primary); }

  /* the address bar row and the page, in a frame */
  html.ui-beta .main-nav { grid-area:nav; height:56px; gap:8px; padding:0 10px 0 8px; }
  html.ui-beta .iframe-container { grid-area:frame; margin:0 10px 10px 0; border-radius:14px; box-shadow:0 0 0 1px var(--beta-line), 0 24px 60px -30px rgba(0,0,0,.9); }

  /* collapsed (the compact setting): icons only, bookmarks in one column */
  html.ui-beta.compact-ui { --beta-side:60px; }
  html.ui-beta.compact-ui .side-marks { grid-template-columns:1fr; }
  html.ui-beta.compact-ui .tab, html.ui-beta.compact-ui .new-tab-btn, html.ui-beta.compact-ui .side-btn { justify-content:center; padding:0; }
  html.ui-beta.compact-ui .tab-title, html.ui-beta.compact-ui .tab-close, html.ui-beta.compact-ui .new-tab-btn::after, html.ui-beta.compact-ui .side-btn::after { display:none; }
  html.ui-beta.compact-ui .side-btn[data-side="collapse"] svg { transform:scaleX(-1); }
  html.ui-beta.compact-ui .main-nav { height:50px; }
  html.ui-beta.compact-ui .omnibox input, html.ui-beta.compact-ui .nav-music { height:32px; }
}

/* settings */
html.ui-beta .wisp-settings-modal, html.ui-beta .ui-dialog, html.ui-beta .palette { background:rgba(0,0,0,.72); }
html.ui-beta .settings-card { background:var(--surface-1); border-color:var(--beta-line-2); border-radius:18px; box-shadow:var(--beta-inset), 0 40px 120px -20px rgba(0,0,0,.9); }
html.ui-beta .settings-nav { background:var(--surface-0); border-color:var(--beta-line); }
html.ui-beta .settings-nav-item { border-radius:9px; font-weight:500; }
html.ui-beta .settings-nav-item.active { background:var(--beta-soft); box-shadow:var(--beta-inset), 0 0 0 1px var(--beta-line); color:var(--text-white); }
html.ui-beta .settings-nav-item.active .settings-nav-icon { color:var(--accent); opacity:1; }
html.ui-beta .settings-pane-title { font-size:20px; font-weight:600; letter-spacing:-.01em; }
html.ui-beta .group { margin-top:16px; padding:12px 16px 4px; border:1px solid var(--beta-line); border-radius:14px; background:rgba(255,255,255,.015); }
html.ui-beta .group-title { margin-bottom:4px; font-weight:500; }
html.ui-beta .row-text b { font-weight:600; }
html.ui-beta .btn, html.ui-beta .select-row select, html.ui-beta .custom-input-group input, html.ui-beta .about-links a { border-radius:10px; border-color:var(--beta-line); background:var(--surface-3); font-weight:500; }
html.ui-beta .btn:hover { background:var(--surface-5); border-color:var(--beta-line-2); }
html.ui-beta .btn.primary { border-radius:12px; background:var(--accent); color:var(--bg-body); font-weight:700; box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent); }
html.ui-beta .seg { border-radius:11px; background:var(--surface-2); border-color:var(--beta-line); }
html.ui-beta .seg button { border-radius:8px; font-weight:500; }
html.ui-beta .seg button.active { background:var(--beta-soft); box-shadow:var(--beta-inset), 0 0 0 1px var(--beta-line); }
html.ui-beta .theme-swatch, html.ui-beta .cloak-card, html.ui-beta .block-tile, html.ui-beta .status-hero, html.ui-beta .status-grid div { border-color:var(--beta-line); background:var(--surface-2); }
html.ui-beta .wallpaper-card img { border-radius:10px; }
.beta-tag { padding:2px 8px; border-radius:99px; background:var(--accent-soft); color:var(--accent); font-size:10.5px; }

/* dialogs and the command palette */
html.ui-beta .ui-dialog-card, html.ui-beta .palette-card { background:var(--surface-1); border-color:var(--beta-line-2); box-shadow:var(--beta-inset), 0 40px 100px -20px rgba(0,0,0,.9); }
html.ui-beta .palette-item.active { background:var(--beta-soft); box-shadow:none; }
html.ui-beta .palette-item.active .palette-icon { color:var(--accent); }
html.ui-beta .palette-icon { background:var(--surface-3); border-color:var(--beta-line); }