/* ═══════════════════════════════════════════════════════════════════════
   Dialogs — concepts/Dialogs.svg
   Design px == CSS px. Four types, each in the site's dark and light theme:
     .site-dialog--success  green      .site-dialog--warning  yellow
     .site-dialog--info     blue       .site-dialog--error    red
   (no modifier = info). Markup, as built by js/dialog.js:
     .site-dialog-backdrop > section.site-dialog > h3 (title bar)
                                                  + .site-dialog-body (message or form)
                                                      > .dialog-actions > .dialog-btn
   ═══════════════════════════════════════════════════════════════════════ */

.site-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 12px; overflow-y: auto;
  background: rgba(0, 0, 0, 0.72);
}
.site-dialog-backdrop[hidden] { display: none; }
html[data-theme="light"] .site-dialog-backdrop { background: rgba(0, 0, 0, 0.45); }

/* ── Tokens: type colours (info is the default) ───────────────────────── */
.site-dialog {
  --dlg-glow: #0184f1;  /* dark theme: title-bar edge glow */
  --dlg-tint: #002d3a;  /* dark theme: title-bar gradient end */
  --dlg-top: #0084f0;   /* light theme: title-bar gradient */
  --dlg-bottom: #006c8a;

  /* dark theme */
  --dlg-title-start: #2b2c2c;
  --dlg-body-top: #1e1e1e;
  --dlg-body-bottom: #151515;
  --dlg-body-border: #262626;
  --dlg-body-line: #000;
  --dlg-text: #fff;
  --dlg-btn-top: #3c3c3c;
  --dlg-btn-bottom: #1f1f1f;
  --dlg-btn-top-hover: #4b4b4b;
  --dlg-btn-bottom-hover: #292929;
  --dlg-btn-text: #fff;
  --dlg-focus: var(--dlg-glow);
  --dlg-pad-right: 3px; /* the buttons sit 4 px from the right edge in the dark concept, 6 px in the light one */
  --dlg-field-bg: #0f0f0f;
  --dlg-field-border: #3c3c3c;
  --dlg-field-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8);
  --dlg-field-placeholder: #8a8a8a;
  /* Button chrome, 74 x 29 = the 70 x 25 chamfered button plus the concept's filter margins (2 px sides, 1 px top, 3 px bottom):
     0.5 px stroke, then the concept's own drop shadow (dy 1, blur 1, 25 %) and 1 px inner shadow (49 %) along the bottom edge and chamfer */
  --dlg-btn-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='29' viewBox='0 0 74 29'%3E%3Cdefs%3E%3Cfilter id='f' x='0' y='0' width='74' height='29' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='a'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='a' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0' result='d'/%3E%3CfeOffset in='a' dy='-1'/%3E%3CfeComposite in2='a' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .49 0'/%3E%3CfeBlend in2='d'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M71.75 1.25V17.896L63.9 25.75H2.25V1.25H71.75Z' fill='none' stroke='%23707070' stroke-width='.5'/%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M2 1H72V18L64 26H2V1Z'/%3E%3Cpath d='M71.75 1.25V17.896L63.9 25.75H2.25V1.25H71.75Z' fill='none' stroke='%23000' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");

  position: relative;
  width: min(372px, 100%);
  color: var(--dlg-text);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}
.site-dialog--success { --dlg-glow: #14f001; --dlg-tint: #00380c; --dlg-top: #14f000; --dlg-bottom: #008a1e; }
.site-dialog--info    { --dlg-glow: #0184f1; --dlg-tint: #002d3a; --dlg-top: #0084f0; --dlg-bottom: #006c8a; }
.site-dialog--warning { --dlg-glow: #f0b000; --dlg-tint: #584400; --dlg-top: #f0b000; --dlg-bottom: #8a6a00; }
.site-dialog--error   { --dlg-glow: #f11f1f; --dlg-tint: #460000; --dlg-top: #f00000; --dlg-bottom: #8a0000; }
.site-dialog:focus { outline: none; }

/* light theme */
html[data-theme="light"] .site-dialog {
  --dlg-body-top: #e7e7e7;
  --dlg-body-bottom: #f2f2f2;
  --dlg-body-border: #adadad;
  --dlg-body-line: #fff;
  --dlg-text: #000;
  --dlg-btn-top: #fdfdfd;
  --dlg-btn-bottom: #ccc;
  --dlg-btn-top-hover: #fff;
  --dlg-btn-bottom-hover: #dedede;
  --dlg-btn-text: #000;
  --dlg-focus: var(--dlg-bottom);
  --dlg-pad-right: 5px;
  --dlg-field-bg: #fff;
  --dlg-field-border: #adadad;
  --dlg-field-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  --dlg-field-placeholder: #8a8a8a;
  --dlg-btn-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='29' viewBox='0 0 74 29'%3E%3Cdefs%3E%3Cfilter id='f' x='0' y='0' width='74' height='29' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='a'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='a' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0' result='d'/%3E%3CfeOffset in='a' dy='-1'/%3E%3CfeComposite in2='a' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .49 0'/%3E%3CfeBlend in2='d'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M71.75 1.25V17.896L63.9 25.75H2.25V1.25H71.75Z' fill='none' stroke='%239e9e9e' stroke-width='.5'/%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M2 1H72V18L64 26H2V1Z'/%3E%3Cpath d='M71.75 1.25V17.896L63.9 25.75H2.25V1.25H71.75Z' fill='none' stroke='%23000' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* ── Title bar: 35 px, rounded top-left, 8 px chamfer top-right ───────── */
.site-dialog > h3 {
  position: relative;
  height: 35px; margin: 0; padding: 1px 6px 0;
  font-size: 20px; font-weight: 500; line-height: 35px;
  color: #fff;
  border-top-left-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  /* dark: a tinted gradient with a glowing line along its top and bottom edge */
  background:
    linear-gradient(to right, transparent, var(--dlg-glow) 50%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(to right, transparent, var(--dlg-glow) 50%, transparent) 0 100% / 100% 1px no-repeat,
    linear-gradient(to bottom, color-mix(in srgb, var(--dlg-title-start) 70%, #000), color-mix(in srgb, var(--dlg-tint) 70%, #000));
}
/* light (also used in dark when glow effects are off): a saturated gradient with a white highlight on top and a dark line below */
:is(html[data-theme="light"], html[data-glow="off"]) .site-dialog > h3 {
  background:
    linear-gradient(rgba(255, 255, 255, 0.53), rgba(255, 255, 255, 0.53)) 0 0 / calc(100% - 8px) 1px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.23), rgba(0, 0, 0, 0.23)) 0 100% / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--dlg-top), var(--dlg-bottom));
}

/* ── Body (message or form); buttons sit at its bottom-right ──────────── */
.site-dialog-body {
  position: relative;
  display: flex; flex-direction: column;
  box-sizing: border-box; min-height: 120px; margin: 0; padding: 5px var(--dlg-pad-right) 3px 5px;
  border: 1px solid var(--dlg-body-border);
  background: linear-gradient(to bottom, var(--dlg-body-top), var(--dlg-body-bottom)) border-box;
  box-shadow: inset 0 1px 0 var(--dlg-body-line);
  color: var(--dlg-text);
}
.site-dialog-message {
  margin: 0; padding: 0 10px 0 0;
  font-size: 20px; font-weight: 300; line-height: 24px;
  white-space: pre-line; overflow-wrap: anywhere;
}

/* ── Form fields ──────────────────────────────────────────────────────── */
.site-dialog-body :is(input[type="text"], input[type="search"], input[type="url"], input[type="email"], textarea) {
  display: block; box-sizing: border-box; width: 100%; margin: 0 0 8px; padding: 6px 8px;
  font-size: 15px; font-weight: 300; line-height: 20px;
  color: var(--dlg-text); background: var(--dlg-field-bg);
  border: 1px solid var(--dlg-field-border); border-radius: 0;
  box-shadow: var(--dlg-field-shadow);
}
.site-dialog-body textarea { min-height: 76px; resize: vertical; }
.site-dialog-body :is(input, textarea)::placeholder { color: var(--dlg-field-placeholder); opacity: 1; }
.site-dialog-body :is(input, textarea):focus { outline: 2px solid var(--dlg-focus); outline-offset: -1px; }

/* ── Buttons: 25 px tall, 70 px minimum, 8 px chamfer bottom-right ────── */
.dialog-actions {
  display: flex; justify-content: flex-end; gap: 3px;
  margin-top: auto; padding-top: 8px;
}
.dialog-btn {
  --dlg-ch: 8px;
  position: relative; isolation: isolate; flex: none;
  box-sizing: border-box; min-width: 70px; height: 25px; margin: 0; padding: 0 6px;
  border: 0; border-radius: 0; background: none;
  font-size: 15px; font-weight: 300; line-height: 25px; white-space: nowrap;
  color: var(--dlg-btn-text);
  cursor: pointer;
}
/* fill: the chamfer is clipped here so the shadow in ::after is free to extend past the box */
.dialog-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--dlg-btn-top), var(--dlg-btn-bottom));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--dlg-ch)), calc(100% - var(--dlg-ch)) 100%, 0 100%);
}
/* chrome: 9-slice so corners (incl. the chamfer) keep their size and the edges stretch with longer labels */
.dialog-btn::after {
  content: ""; position: absolute; inset: -1px -2px -3px -2px; z-index: -1; pointer-events: none;
  border: solid transparent; border-width: 4px 14px 12px 6px;
  border-image: var(--dlg-btn-outline) 4 14 12 6 / 4px 14px 12px 6px stretch;
}
.dialog-btn--primary { font-weight: 500; }
.dialog-btn:hover::before { background-image: linear-gradient(to bottom, var(--dlg-btn-top-hover), var(--dlg-btn-bottom-hover)); }
.dialog-btn:active::before { background-image: linear-gradient(to top, var(--dlg-btn-top), var(--dlg-btn-bottom)); }
.dialog-btn:disabled { opacity: 0.5; cursor: default; }
.dialog-btn:focus-visible { outline: 2px solid var(--dlg-focus); outline-offset: 1px; }

/* ── Smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .site-dialog-message { font-size: 18px; line-height: 22px; }
}