/* The footer ladybug and the bug report dialog (both hosts; the dialog has its own colors so it reads on any page). */
.bug-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; min-width: 32px; justify-content: center; padding: 0 6px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; opacity: .8; vertical-align: middle; }
.bug-button:hover, .bug-button:focus-visible { opacity: 1; color: #e2402c; }
.bug-button svg { width: 20px; height: 20px; }
.bug-button[aria-busy="true"] { cursor: progress; opacity: .5; }
.bug-dialog { width: min(36rem, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 0; border-radius: 16px; padding: 18px 22px 20px;
  background: #fff; color: #171a22; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); font: 400 15px/1.5 Inter, system-ui, sans-serif; }
.bug-dialog::backdrop { background: rgb(5 7 15 / .55); }
.bug-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bug-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 760 20px/1.2 Bricolage, Inter, sans-serif; color: #0e1a33; }
.bug-head__icon { color: #e2402c; display: inline-flex; } .bug-head__icon svg { width: 24px; height: 24px; }
.bug-x { border: 0; background: transparent; font-size: 18px; color: #565c6b; cursor: pointer; min-width: 32px; min-height: 32px; border-radius: 8px; }
.bug-x:hover { background: #f1eee8; }
.bug-hint { margin: 2px 0 8px; color: #565c6b; font-size: 13px; }
.bug-dialog label[for] { display: block; font-weight: 650; margin: 10px 0 4px; font-size: 14px; }
.bug-req, .bug-opt { font-weight: 500; font-size: 12px; color: #8a5a00; margin-left: 4px; } .bug-opt { color: #6b7080; }
.bug-dialog input[type=text], .bug-dialog textarea, .bug-dialog select { width: 100%; padding: 8px 10px; border: 1.5px solid #d9d2c4; border-radius: 10px;
  font: inherit; color: inherit; background: #fff; box-sizing: border-box; }
.bug-dialog input[type=file] { font-size: 13px; max-width: 100%; }
.bug-dialog :focus-visible { outline: 2px solid #ff6720; outline-offset: 2px; }
.bug-shot { margin-top: 12px; }
.bug-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.bug-shot img { display: block; margin-top: 6px; max-width: 100%; max-height: 160px; border: 1px solid #d9d2c4; border-radius: 8px; }
.bug-auto { margin-top: 12px; font-size: 12.5px; color: #3d4250; }
.bug-auto summary { cursor: pointer; font-weight: 650; font-size: 13px; }
.bug-auto dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 8px 0; }
.bug-auto dt { font-weight: 650; } .bug-auto dd { margin: 0; overflow-wrap: anywhere; }
.bug-auto ol { margin: 0; padding-left: 18px; font-family: ui-monospace, monospace; font-size: 11.5px; }
.bug-status { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: #17683a; }
.bug-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.bug-actions button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #d9d2c4; background: #fff; color: #171a22; font: 650 14px/1 Inter, sans-serif; cursor: pointer; }
.bug-actions .cta { background: #ffc226; border-color: #ffc226; }
.bug-actions button:disabled { opacity: .6; cursor: progress; }
@media print { .bug-button { display: none; } }

/* The dialog follows the page's light or dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bug-dialog { background: #1c1d21; color: #ecebe8; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .9); border: 1px solid #2e3036; }
  :root:not([data-theme="light"]) .bug-head h2 { color: #f4f3f0; }
  :root:not([data-theme="light"]) .bug-hint, :root:not([data-theme="light"]) .bug-x { color: #aeaba4; }
  :root:not([data-theme="light"]) .bug-x:hover { background: #2a2c31; }
  :root:not([data-theme="light"]) .bug-opt { color: #a19e97; } :root:not([data-theme="light"]) .bug-req { color: #f0c060; }
  :root:not([data-theme="light"]) .bug-dialog input[type=text], :root:not([data-theme="light"]) .bug-dialog textarea,
  :root:not([data-theme="light"]) .bug-dialog select { background: #16171a; border-color: #41444c; color: #ecebe8; }
  :root:not([data-theme="light"]) .bug-auto { color: #c7c4bd; }
  :root:not([data-theme="light"]) .bug-shot img { border-color: #41444c; }
  :root:not([data-theme="light"]) .bug-status { color: #6bd193; }
  :root:not([data-theme="light"]) .bug-actions button { background: #23252a; border-color: #41444c; color: #ecebe8; }
  :root:not([data-theme="light"]) .bug-actions .cta { background: #ffc226; border-color: #ffc226; color: #121315; }
}
:root[data-theme="dark"] .bug-dialog { background: #1c1d21; color: #ecebe8; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .9); border: 1px solid #2e3036; }
:root[data-theme="dark"] .bug-head h2 { color: #f4f3f0; }
:root[data-theme="dark"] .bug-hint, :root[data-theme="dark"] .bug-x { color: #aeaba4; }
:root[data-theme="dark"] .bug-x:hover { background: #2a2c31; }
:root[data-theme="dark"] .bug-opt { color: #a19e97; } :root[data-theme="dark"] .bug-req { color: #f0c060; }
:root[data-theme="dark"] .bug-dialog input[type=text], :root[data-theme="dark"] .bug-dialog textarea,
:root[data-theme="dark"] .bug-dialog select { background: #16171a; border-color: #41444c; color: #ecebe8; }
:root[data-theme="dark"] .bug-auto { color: #c7c4bd; }
:root[data-theme="dark"] .bug-shot img { border-color: #41444c; }
:root[data-theme="dark"] .bug-status { color: #6bd193; }
:root[data-theme="dark"] .bug-actions button { background: #23252a; border-color: #41444c; color: #ecebe8; }
:root[data-theme="dark"] .bug-actions .cta { background: #ffc226; border-color: #ffc226; color: #121315; }