/* Android / ChromeOS ("Material 3 Expressive") look for the whole desktop. Loaded last, so it refines the shapes, surfaces,
   type and motion of everything above without touching how any of it works. Colours come from the tokens in index.html. */
:root{
  --md-elev1:0 1px 2px rgba(15,25,60,.14),0 1px 3px 1px rgba(15,25,60,.08);
  --md-elev2:0 1px 2px rgba(15,25,60,.14),0 2px 6px 2px rgba(15,25,60,.09);
  --md-elev3:0 4px 10px 3px rgba(15,25,60,.10),0 1px 3px rgba(15,25,60,.16);
  --md-emph:cubic-bezier(.2,0,0,1);
  --md-spring:cubic-bezier(.34,1.3,.5,1);
  --tonal:color-mix(in srgb,var(--primary) 12%,var(--surface));
  --tonal-hi:color-mix(in srgb,var(--primary) 20%,var(--surface));
  --state:color-mix(in srgb,var(--primary) 9%,transparent);
}
html{-webkit-tap-highlight-color:transparent}
body{font-feature-settings:"ss01";letter-spacing:.005em}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink2) 35%,transparent) transparent}
::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 75%,transparent);outline-offset:2px}
/* writing surfaces never get an outline: the caret is the focus indicator. Containers show a soft ring instead. */
input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible,[contenteditable] *:focus-visible,.rb-e:focus-visible,.rb-cell:focus-visible{outline:0!important;outline-offset:0}
input:focus,textarea:focus,[contenteditable]:focus{outline:0}
.kn-search:focus-within,.dx-search:focus-within,.gm-field:focus-within,.spot-in:focus-within,.search:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 70%,transparent)}
.kn-compose-card:focus-within,.kn-edit:focus-within{box-shadow:var(--md-elev3),0 0 0 1.5px color-mix(in srgb,var(--primary) 45%,transparent)}
button,a,[role=button]{-webkit-tap-highlight-color:transparent;transition:background-color .18s var(--md-emph),box-shadow .18s var(--md-emph),transform .18s var(--md-emph),opacity .18s}
button:active:not(:disabled),.btn:active{transform:scale(.97)}

/* wallpaper: a soft Material-You wash */
#desk{background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--w1) 60%,var(--bg)),var(--bg) 60%),var(--bg)}

/* status bar */
.topbar{padding:10px 16px}
.pill{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);padding:8px 16px;font-weight:600;box-shadow:none;border:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tb-ic{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%}
.tb-ic:hover{background:var(--tonal)}
.tb-dot{background:#D93025!important}

/* windows */
.win{border-radius:28px;box-shadow:var(--md-elev3),0 24px 60px rgba(15,25,60,.20);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:var(--surface)}
.win:not(.top){box-shadow:var(--md-elev1),0 10px 30px rgba(15,25,60,.12)}
.win .bar{background:color-mix(in srgb,var(--surface2) 70%,var(--surface));padding:8px 10px 8px 16px;min-height:56px;gap:12px}
.win:not(.top) .bar{background:color-mix(in srgb,var(--surface2) 40%,var(--surface))}
.win .bar .ttl{font-size:15.5px;font-weight:600;letter-spacing:.01em}
.wb{width:36px;height:36px;background:transparent;color:var(--ink)}
.wb:hover{background:var(--state)}
.wb.x:hover{background:#D93025;color:#fff}
.win.max{border-radius:0}

/* shelf (the dock) */
.shelf{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--md-elev3),0 12px 36px rgba(15,25,60,.16);border:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.shelf .launch,.shelf [data-launch]{background:var(--primary)!important;color:var(--on-primary)!important}

/* launcher: the ChromeOS app drawer */
.launcher{border-radius:32px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);box-shadow:var(--md-elev3),0 20px 60px rgba(15,25,60,.22);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.launcher .search,.launcher input[type=search]{border-radius:99px;background:var(--surface2);border:0}

/* buttons: filled, tonal, outlined */
.btn{min-height:40px;padding:0 24px;font-weight:600;letter-spacing:.01em;box-shadow:none}
.btn:hover{box-shadow:var(--md-elev1);filter:brightness(1.06)}
.btn.tonal{background:var(--tonal-hi);color:var(--ink)}
.btn.tonal:hover{background:color-mix(in srgb,var(--primary) 26%,var(--surface));filter:none}
.btn.outline,.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--primary)}

/* segmented controls */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:transparent;padding:0;gap:0}
.seg button{border:0;background:transparent;padding:8px 18px;font-weight:600;border-right:1px solid var(--line);border-radius:0}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--tonal-hi);color:var(--ink)}
.seg button:hover:not(.on){background:var(--state)}

/* text fields */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{accent-color:var(--primary)}
.ow-f input,.ow-f textarea,.ow-f select{border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.ow-f input:focus,.ow-f textarea:focus,.ow-f select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.dx-title:focus,.kn-ti:focus,.kn-ta:focus,.jed-title:focus,.jed-excerpt:focus{box-shadow:none}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}

/* quick settings, popups, dialogs */
.qs{border-radius:32px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);box-shadow:var(--md-elev3),0 20px 60px rgba(15,25,60,.22)}
.own-card,.dx-card{border-radius:28px;box-shadow:var(--md-elev3),0 20px 60px rgba(15,25,60,.28)}
.ctx{border-radius:18px;box-shadow:var(--md-elev3)}

/* widgets */
.wcard{border-radius:28px;box-shadow:var(--md-elev2);border:1px solid color-mix(in srgb,var(--line) 50%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px)}

/* desktop icons: label chips like Android's launcher */
.icons .dicon .lb,.dicon .lb{font-weight:600;text-shadow:none}
.dicon:hover .ico{transform:translateY(-2px) scale(1.04)}

/* chips and pills used inside the apps */
.chip,.tag,.pj-chip{border-radius:10px}

/* lock screen */
.lock .lk-time,.lock .time{font-weight:500;letter-spacing:-.02em}

/* phones: Android gesture bar, bigger touch targets */
@media (max-width:760px){
  .topbar{padding:8px 12px}
  .win{border-radius:28px 28px 0 0}
  .win .bar{min-height:60px}
  .wb{width:40px;height:40px}
  .shelf{border-radius:999px}
}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}