/* ── SETTINGS WINDOWS ───────────────────────────────────────────────────
   Preferences and Project settings open as windows over the app rather
   than as full-screen pages. The panel element (#prefs-panel,
   #doc-settings-panel) becomes the layer the window floats on; its inner
   element is the window; its existing header is the title bar, which drags
   the window (windows.js).

   Preferences apply as they are changed, so that window is non-modal: the
   layer lets clicks through and the app behind stays usable, as a Settings
   window does. Project settings is a Cancel/Apply form, so it dims what is
   behind it and holds focus, as a sheet does.

   Web and Windows take the theme's own surfaces and colours. The Mac app
   (html.is-darwin, set by its bridge) gets the system's window chrome: a
   centred title, a close button where the red traffic light sits, and the
   system window shadow.

   Kept in its own file so it can be read, and removed, as one piece. */

/* The ids are doubled to outrank the theme rules that paint these panels
   as full-screen surfaces (Daylight's :root:where(...) #prefs-panel); the
   look those rules gave the panel moves to the window below. */
#prefs-panel#prefs-panel,
#doc-settings-panel#doc-settings-panel{
  position:fixed;inset:0;
  overflow:hidden;
  background:transparent;
  border:none;border-radius:0;box-shadow:none;
  z-index:200;
}
#prefs-panel#prefs-panel{pointer-events:none;}
#doc-settings-panel#doc-settings-panel{background:color-mix(in srgb,var(--tx) 22%,transparent);}

#prefs-inner,
#doc-settings-inner{
  position:absolute;
  /* centred until dragged; windows.js sets --win-x/--win-y from then on */
  left:var(--win-x,50%);top:var(--win-y,50%);
  transform:var(--win-centre,translate(-50%,-50%));
  width:min(960px,calc(100vw - 48px));
  height:min(760px,calc(100vh - 56px));
  max-width:none;margin:0;
  box-sizing:border-box;
  display:flex;flex-direction:column;
  padding:0;
  overflow:hidden;
  pointer-events:auto;
  background:var(--bg);
  color:var(--tx);
  border:1px solid var(--br);
  border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.22),0 6px 18px rgba(0,0,0,.12);
}
#doc-settings-inner{width:min(1040px,calc(100vw - 48px));}
/* Daylight: the window takes the look the theme gives its panels and
   modal boxes -- white surface, its panel shadow, a hairline edge */
:root:where(:not([data-theme="ember"]):not([data-theme="lavender"])) #prefs-inner,
:root:where(:not([data-theme="ember"]):not([data-theme="lavender"])) #doc-settings-inner{
  background:var(--sur);
  border:1px solid color-mix(in srgb,var(--tx) 12%,transparent);
  box-shadow:var(--panel-shadow),0 24px 64px rgba(0,0,0,.16);
}

/* the title bar: the header the panels already have, now a window's top */
#prefs-inner > .prefs-hdr,
#doc-settings-inner > .prefs-hdr{
  flex:0 0 auto;
  margin:0;
  padding:12px 16px 12px 22px;
  background:var(--bg2);
  border-bottom:1px solid var(--br);
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
#prefs-inner > .prefs-hdr .prefs-title,
#doc-settings-inner > .prefs-hdr .prefs-title{font-size:calc(1.05rem * var(--fs-heading,1) * var(--fso-heading,1));}

/* everything under the title bar scrolls; the bar stays put */
#prefs-inner > :not(.prefs-hdr),
#doc-settings-inner > :not(.prefs-hdr){flex-shrink:0;}
#prefs-inner > .prefs-tab-nav{padding:0 22px;}
/* Both panels build a sidebar shell (.ps-shell) at runtime and move their
   content into it; that shell is the scrolling body. Preferences' original
   body is left empty below it, so it takes no room. */
#prefs-inner > .prefs-body,
#prefs-inner > .ps-shell,
#doc-settings-inner > .ps-shell{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  padding:18px 22px 28px;
}
#prefs-inner > .ps-shell ~ .prefs-body{flex:0 0 auto;padding:0;overflow:visible;}
#doc-settings-inner > #ps-owner-notice{margin:12px 22px 0;}

/* a window being dragged: no text selection, no transition lag */
.ch-win-dragging,
.ch-win-dragging *{user-select:none!important;-webkit-user-select:none!important;}

/* ── macOS window chrome ──────────────────────────────────────────────── */
html.is-darwin #prefs-inner#prefs-inner,
html.is-darwin #doc-settings-inner#doc-settings-inner{
  border:none;
  border-radius:10px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 22px 70px rgba(0,0,0,.28),0 8px 22px rgba(0,0,0,.14);
}
html.is-darwin #prefs-inner > .prefs-hdr,
html.is-darwin #doc-settings-inner > .prefs-hdr{
  position:relative;
  justify-content:center;
  min-height:52px;box-sizing:border-box;
  padding:10px 16px 10px 84px;
  background:var(--bg2);
}
html.is-darwin #prefs-inner > .prefs-hdr .prefs-title,
html.is-darwin #doc-settings-inner > .prefs-hdr .prefs-title{
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--tx);
}
/* Preferences: the close control becomes the red traffic light */
html.is-darwin #prefs-inner > .prefs-hdr #prefs-version{position:absolute;right:16px;margin:0;}
html.is-darwin #prefs-inner > .prefs-hdr .prefs-close{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;min-width:0;padding:0;
  border-radius:50%;
  border:.5px solid rgba(0,0,0,.18);
  background:#ff5f57;
  color:transparent;font-size:0;line-height:0;
}
html.is-darwin #prefs-inner > .prefs-hdr .prefs-close svg{width:8px;height:8px;opacity:0;color:#4d0000;stroke:#4d0000;}
html.is-darwin #prefs-inner > .prefs-hdr .prefs-close:hover svg{opacity:.75;}
html.is-darwin #prefs-inner > .prefs-hdr .prefs-close:hover{border-color:rgba(0,0,0,.25);}
/* Project settings is a sheet: its Cancel/Apply stay at the right, the
   title stays centred over the window */
html.is-darwin #doc-settings-inner > .prefs-hdr{padding-left:22px;}
html.is-darwin #doc-settings-inner > .prefs-hdr > div{position:absolute;right:16px;top:50%;transform:translateY(-50%);}
html.is-darwin #doc-settings-panel#doc-settings-panel{background:rgba(0,0,0,.12);}