/* Shared top-layer shell replaces Cyborg's offscreen positioning and sprite controls. */
body.dusty-modal-open { overflow: hidden; }
body dialog.dusty-drawer.cyborg { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; box-sizing: border-box; padding: 28px; overflow: auto; border: 0; border-radius: 18px 0 0 18px; background: #fff; color: #263747; box-shadow: -12px 0 40px #172c3924; opacity: 1; }
body dialog.dusty-drawer:not([open]) { display: none; }
body dialog.dusty-drawer::backdrop { background: #172c3966; }
body dialog.dusty-drawer .cyborg-title { margin: 0 0 10px; font-size: 25px; line-height: 1.3; height: auto; float: none; }
body dialog.dusty-drawer p { margin: 12px 0 20px; line-height: 1.55; }
body dialog.dusty-drawer form { display: block; width: auto; height: auto; margin: 0; }
body dialog.dusty-drawer form > label { display: block; float: none; width: auto; height: auto; margin: 20px 0 7px; font-weight: 600; text-align: left; }
body dialog.dusty-drawer :is(input[type=text], input[type=password], input[type=email], select, textarea) { display: block; box-sizing: border-box; float: none; width: 100%; max-width: 100%; margin: 0; padding: 11px 13px; min-height: 44px; height: auto; border: 1px solid #b9c7d4; border-radius: 8px; background: #fff; color: #263747; font: inherit; }
body dialog.dusty-drawer fieldset { margin: 24px 0; padding: 18px; border: 1px solid #dce4ea; border-radius: 10px; }
body dialog.dusty-drawer legend { padding: 0 6px; font-weight: 600; }
body dialog.dusty-drawer .file-user { display: block; padding: 9px 0; margin: 0; font-weight: normal; overflow-wrap: anywhere; }
body dialog.dusty-drawer .file-user input { margin-right: 7px; }
body dialog.dusty-drawer .file-user small { display: block; margin-left: 26px; color: #617185; }
body dialog.dusty-drawer .cyborg-controls { position: sticky; inset: auto; bottom: -28px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; box-sizing: border-box; width: auto; height: auto; margin: 24px -28px -28px; padding: 18px 28px; border-top: 1px solid #dce4ea; background: #fff; z-index: 1; }
body dialog.dusty-drawer .cyborg-controls :is(.save,.close,button) { display: inline-flex; float: none; align-items: center; justify-content: center; width: auto; height: auto; min-height: 44px; margin: 0; padding: 11px 17px; border: 1px solid #b9c7d4; border-radius: 8px; background: #edf2f6; background-image: none; color: #344b60; font: inherit; font-weight: 600; cursor: pointer; }
body dialog.dusty-drawer .cyborg-controls .save { background: var(--dusty-brand,#005433); border-color: var(--dusty-brand,#005433); color: var(--dusty-brand-text,#fff); }
body dialog.dusty-drawer .cyborg-controls .dusty-button-danger { color: #a02532; background: #fff0f0; border-color: #efc2c6; margin-left: auto; }
body dialog.dusty-drawer :is(#file-errors,#error):empty { display: none; }
body dialog.dusty-drawer :is(#file-errors,#error) { margin: 18px 0; color: #a02532; }
body dialog.dusty-drawer .file-picker { padding: 24px; margin: 20px 0; border: 1px dashed #97aab9; border-radius: 12px; background: #f5f8fa; }
body dialog.dusty-drawer .file-picker label { display: block; font-weight: 600; margin-bottom: 12px; }
body dialog.dusty-drawer .file-picker input { display: block; box-sizing: border-box; width: 100%; max-width: 100%; font: inherit; }
body dialog.dusty-drawer input[type=file]::file-selector-button { padding: 10px 12px; margin-right: 12px; border: 1px solid #bdcbd5; border-radius: 7px; background: #fff; color: #344b60; font: inherit; cursor: pointer; }
body dialog.dusty-drawer small { line-height: 1.5; }
@media(max-width:600px) { body dialog.dusty-drawer.cyborg { border-radius: 0; padding: 22px; } body dialog.dusty-drawer .cyborg-controls { bottom: -22px; margin: 22px -22px -22px; padding: 16px 22px; } }
@media(prefers-reduced-motion:no-preference) { body dialog.dusty-drawer[open] { animation: dusty-drawer-in .18s ease-out; } @keyframes dusty-drawer-in { from { transform: translateX(25px); opacity: .6; } to { transform: translateX(0); opacity: 1; } } }

/* Compact field help opens beside its icon without changing the form's layout. */
body .dusty-field-with-help { display: grid; grid-template-columns: minmax(0,max-content) minmax(18px,1fr); column-gap: 7px; align-items: baseline; min-width: 0; }
body .dusty-field-with-help > label { display: contents; }
body .dusty-field-with-help > label > .dusty-field-title { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
body .dusty-field-with-help > .dusty-field-help { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; }
body .dusty-field-with-help > label > :is(input,select,textarea) { grid-column: 1 / -1; grid-row: 2; }
body .dusty-field-with-help:has(> label[hidden]) { display: none !important; }
body .dusty-field-label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
body .dusty-field-label-row > label { display: inline; float: none; width: auto; height: auto; margin: 0; text-align: left; }
body .dusty-field-help { display: inline-flex; margin: 0; vertical-align: middle; }
body .dusty-field-help .dusty-field-help-trigger { display: inline-flex; align-items: center; justify-content: center; float: none; width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; border: 1px solid #9ca7b0; border-radius: 50%; background: transparent; color: #62717d; font: 650 11px/1 system-ui,sans-serif; cursor: pointer; }
body .dusty-field-help .dusty-field-help-trigger:hover, body .dusty-field-help .dusty-field-help-trigger[aria-expanded=true] { background: #eef1f4; color: #30414f; border-color: #71818e; }
body .dusty-field-help .dusty-field-help-trigger:focus-visible { outline: 2px solid #8294a3; outline-offset: 3px; }
body .dusty-field-help-bubble { position: fixed; inset: auto; box-sizing: border-box; margin: 0; width: min(320px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 15px 17px; overflow: visible; border: 1px solid #bfcfc6; border-radius: 12px; background: #fff; color: #344a40; box-shadow: 0 8px 28px #183f2526; font: 14px/1.5 system-ui,sans-serif; z-index: 10000; overflow-wrap: anywhere; }
body .dusty-field-help-bubble[hidden] { display: none !important; }
body .dusty-field-help-bubble strong { display: block; font-size: 14px; color: #203a2d; }
body .dusty-field-help-bubble p { margin: 6px 0 0; max-height: calc(100dvh - 100px); overflow: auto; font-size: 13px; line-height: 1.5; }
body .dusty-field-help-bubble::before { content: ''; position: absolute; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }
body .dusty-field-help-bubble[data-side=right]::before { left: -6px; top: calc(var(--help-arrow-y) - 5px); border-left: 1px solid #bfcfc6; border-bottom: 1px solid #bfcfc6; }
body .dusty-field-help-bubble[data-side=left]::before { right: -6px; top: calc(var(--help-arrow-y) - 5px); border-right: 1px solid #bfcfc6; border-top: 1px solid #bfcfc6; }
body .dusty-field-help-bubble[data-side=bottom]::before { top: -6px; left: calc(var(--help-arrow-x) - 5px); border-left: 1px solid #bfcfc6; border-top: 1px solid #bfcfc6; }
body dialog.context-help-drawer h2 { margin: 0 0 20px; font-size: 25px; line-height: 1.3; }

body .help-standalone [data-drawer-close] { display: none; }