/* Golden Gate 27 finishing layer.
   Loaded last on purpose: older WebGL fallbacks made every nested surface clear. */

:root {
  /* --gg-matte-alpha is written per window by WindowManager; see css/matte.css. */
  --gg-matte-dark-rgb: 50, 54, 64;
  --gg-control-fill: rgba(255, 255, 255, .16);
  --gg-control-edge: rgba(255, 255, 255, .32);
}

/* Frost the application edge, then settle into the app's opaque body. */
html.gg-liq-live #desktop .window:not([data-opaque-body]) .window-toolbar,
html:not(.gg-liq-live) #desktop .window:not([data-opaque-body]) .window-toolbar {
  background:
    linear-gradient(180deg,
      rgba(var(--gg-matte-rgb), var(--gg-matte-alpha)) 0%,
      rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) + .16)) 58%,
      rgba(var(--gg-matte-rgb), .90) 100%) !important;
  border-bottom-color: rgba(70, 78, 92, .12) !important;
}

html[data-theme="dark"].gg-liq-live #desktop .window:not([data-opaque-body]) .window-toolbar,
html[data-theme="dark"]:not(.gg-liq-live) #desktop .window:not([data-opaque-body]) .window-toolbar {
  background:
    linear-gradient(180deg,
      rgba(var(--gg-matte-dark-rgb), var(--gg-matte-alpha)) 0%,
      rgba(var(--gg-matte-dark-rgb), calc(var(--gg-matte-alpha) + .18)) 58%,
      rgba(30, 32, 38, .93) 100%) !important;
}

html.gg-liq-live #desktop .window:not([data-opaque-body]) :is(.window-sidebar,.finder-sidebar,.settings-sidebar,.gg-sidebar),
html:not(.gg-liq-live) #desktop .window:not([data-opaque-body]) :is(.window-sidebar,.finder-sidebar,.settings-sidebar,.gg-sidebar) {
  background:
    linear-gradient(90deg,
      rgba(var(--gg-matte-rgb), var(--gg-matte-alpha)) 0%,
      rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) + .20)) 62%,
      rgba(var(--gg-matte-rgb), .86) 100%) !important;
}

html[data-theme="dark"].gg-liq-live #desktop .window:not([data-opaque-body]) :is(.window-sidebar,.finder-sidebar,.settings-sidebar,.gg-sidebar) {
  background: linear-gradient(90deg,
    rgba(var(--gg-matte-dark-rgb), var(--gg-matte-alpha)),
    rgba(31, 33, 40, .90)) !important;
}

/* A pressed toolbar item cuts a clear aperture through the surrounding frost. */
html #desktop .window .window-toolbar :is(button,[role="button"]):active,
html #desktop .window .window-toolbar :is(button,[role="button"])[aria-pressed="true"],
html #desktop .window .window-toolbar :is(button,[role="button"]).active {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30) !important;
}

/* ---------------- macOS 27 Control Center ---------------- */
/* Control Centre is owned entirely by css/control-center.css. */

/* Switch geometry and material now live in css/switch.css. */

/* Finder and desktop share one file-icon set — see js/file-icons.js. */
#desktop-icons.free-layout { inset:0 !important; display:block !important; pointer-events:none; }
#desktop-icons.free-layout .desk-icon { position:absolute !important; pointer-events:auto; touch-action:none; user-select:none; }
#desktop-icons.free-layout .desk-icon.dragging { z-index:300; transform:scale(1.055); filter:drop-shadow(0 10px 13px rgba(13,22,40,.32)); cursor:grabbing; transition:none; }

/* Folders are wider than they are tall; documents are taller than wide. */
.gg-file-icon { object-fit:contain; }
.desk-icon .gg-file-icon.is-folder { width:64px; height:64px; }
.desk-icon .gg-file-icon.is-doc { width:52px; height:64px; }

/* Documents are portrait; never crop or letterbox them into a square well. */
.gg-finder-icon .thumb .gg-file-icon {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.16)) !important;
}
.gg-finder-icon .thumb .gg-file-icon.is-preview {
  object-fit:cover !important;
  border-radius:6px !important;
  filter:none !important;
}
.gg-finder-row .gg-file-icon,
.gg-finder-list .gg-file-icon { width:auto; height:18px; }
.gg-finder-bigicon { display:grid; place-items:center; }
.gg-finder-bigicon .gg-file-icon { width:auto; height:72px; }

/* Long file names get two lines rather than a broken word. */
.desk-icon { width:96px; }
.desk-icon span { max-width:92px; word-break:normal; overflow-wrap:break-word; }