/* One frame for every pop-up window (Dylan, 2026-10-28: "部分的需要左右拖拽看窗口里的内容").
   With 字号 110-135% the page is zoomed, and 100vw / 100vh inside the zoom are wider and taller than the screen,
   so wide windows ran off the right edge and their buttons off the bottom. Every dialog is held inside the
   visible screen here, scrolls up and down only, and keeps its title and buttons in view. */
:root{--dk-vw:calc(100vw / var(--wh-zoom,1));--dk-vh:calc(100dvh / var(--wh-zoom,1))}
dialog:not(#wh-dk),.crm-modal form:not(#wh-dk),.bug-dialog-box:not(#wh-dk){box-sizing:border-box;max-height:calc(var(--dk-vh) - 24px)!important;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
/* The screen cap must not replace a window's own narrower max-width (that stretched 560px windows to the full
   screen, 22 / 01 2026-10-29): with no max-width of its own a window gets the cap here; one that has its own gets
   min(its own, the cap) from dialog_kit.js when it opens. The two non-dialog frames keep the plain cap. */
:where(dialog){max-width:calc(var(--dk-vw) - 24px)}
:is(.crm-modal form,.bug-dialog-box):not(#wh-dk){max-width:calc(var(--dk-vw) - 24px)!important}
dialog:not(#wh-dk).tr-dialog-side{max-width:calc(var(--dk-vw) - 32px)!important;max-height:calc(var(--dk-vh) - 88px)!important}
.modal.mail-compose:not(#wh-dk){width:min(1040px,calc(var(--dk-vw) - 24px));height:min(calc(var(--dk-vh) - 24px),1100px)}
:is(.og-drawer,.fs-drawer,.freight-drawer,.admin-drawer,.work-mailbox-drawer>aside):not(#wh-dk){max-width:var(--dk-vw)}
/* Nothing inside a window is wider than the window: tables wrap their text instead of pushing a side scroll. */
dialog :is(.tr-table-wrap table,.ra-table,.pc-table-wrap table){min-width:0!important}
dialog :is(.tr-form-grid,.ra-form-grid,.pty-grid)>*{min-width:0}
dialog :is(input,select,textarea){max-width:100%}

/* Title stays at the top and the buttons at the bottom while the middle scrolls (trade and rental forms). */
dialog.tr-dialog>form>header{position:sticky;top:-24px;z-index:3;margin:-24px -24px 18px;padding:18px 24px 14px;background:var(--panel2,var(--panel));border-bottom:1px solid var(--line)}
dialog.tr-dialog>form>footer{position:sticky;bottom:-24px;z-index:3;margin:16px -24px -24px;padding:12px 24px;background:var(--panel2,var(--panel));border-top:1px solid var(--line)}
dialog.ra-dialog>form>footer{position:sticky;bottom:-16px;z-index:3;margin:12px -16px -16px;padding:10px 16px;background:var(--panel2,var(--a-bg,var(--panel)));border-top:1px solid var(--a-line,var(--line))}

/* A create window with a reference column: the form on the left, what is known about the picked party on the right.
   Narrow windows put the column under the form. */
dialog:has(form.dk-split){width:min(1040px,calc(var(--dk-vw) - 24px))}
form.dk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,290px);column-gap:22px;align-items:start;container-type:inline-size}
form.dk-split>*{grid-column:1/-1}
form.dk-split>:is(.tr-form-grid,.ra-form-grid,.pc-form-grid){grid-column:1;grid-row:2}
form.dk-split>.dk-context{grid-column:2;grid-row:2;position:sticky;top:48px}
@media(max-width:860px){form.dk-split{grid-template-columns:minmax(0,1fr)}form.dk-split>.dk-context{grid-column:1;grid-row:auto;position:static}}
.dk-context{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface0,var(--panel));font-size:13px;line-height:1.55;min-height:120px}
.dk-context:empty::before{content:attr(data-dk-empty);color:var(--dim)}
.dk-context h4{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:13px;font-weight:650;color:var(--txt)}
.dk-context h4 small{font-weight:400;color:var(--dim);font-size:12px}
.dk-context dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.dk-context dt{color:var(--dim);white-space:nowrap}
.dk-context dd{margin:0;text-align:end;overflow-wrap:anywhere}
.dk-context ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dk-context li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.dk-context li small{grid-column:1/-1;color:var(--dim);font-size:12px}
.dk-context li b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-context .dk-warn{padding:8px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--danger,#dc5265) 35%,var(--line));background:color-mix(in srgb,var(--danger,#dc5265) 6%,var(--panel));color:var(--danger,#dc5265)}
.dk-context .dk-hint{color:var(--dim);font-size:12px}
.dk-context button{justify-self:start}
/* A value the window filled in by itself carries a small tag, so it is clear it can be changed. */
.dk-auto{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:500;line-height:18px;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);vertical-align:1px}
/* What happens after the button: the chain of steps this record starts, on one line. */
.dk-next{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 0;padding:0;list-style:none;font-size:12px;color:var(--dim)}
.dk-next li{display:inline-flex;align-items:center;gap:6px}
.dk-next li+li::before{content:'→';color:var(--line)}
.dk-next li:first-child{color:var(--acc);font-weight:600}
/* An explanation that used to take a paragraph: an ⓘ with the text on hover / focus. */
.dk-tip{display:inline-grid;place-items:center;width:16px;height:16px;margin-inline-start:4px;border-radius:50%;border:1px solid var(--line);font-size:11px;font-style:normal;font-weight:600;color:var(--dim);cursor:help;vertical-align:1px}
.dk-tip:hover,.dk-tip:focus-visible{color:var(--acc);border-color:var(--acc);outline:none}
/* The tag sits on the field name's line, not a row of its own. */
dialog label:has(>.dk-auto){grid-template-columns:auto minmax(0,1fr);align-items:center}
dialog label:has(>.dk-auto)>:not(.dk-auto){grid-column:1/-1}
dialog label>.dk-auto{justify-self:start;margin:0}
/* A heads-up that is not a problem (a job that may be the same work): calm accent, not red. */
.dk-context .dk-note{padding:8px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line));background:color-mix(in srgb,var(--acc) 7%,var(--panel));color:var(--txt)}
.dk-context p{margin:0}

/* WorkHub's own confirm / alert / prompt, in place of the browser's grey box (dialog_kit.js WorkHubDialog). */
dialog.dk-ask{width:min(440px,calc(var(--dk-vw) - 32px));padding:22px 22px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel2,var(--panel,#fff));color:var(--txt,#1c2e48);box-shadow:0 24px 70px rgba(6,10,20,.35)}
dialog.dk-ask::backdrop{background:rgba(6,10,20,.45);backdrop-filter:blur(2px)}
dialog.dk-ask h3{margin:0 0 8px;font-size:16px;font-weight:650}
dialog.dk-ask .dk-ask-text{display:grid;gap:6px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
dialog.dk-ask .dk-ask-text p{margin:0}
dialog.dk-ask .dk-ask-text p+p{color:var(--dim,#728298);font-size:13px}
dialog.dk-ask .dk-ask-input{display:block;width:100%;box-sizing:border-box;margin-top:12px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface1,var(--panel));color:var(--txt);font:inherit;font-size:14px}
dialog.dk-ask .dk-ask-input:focus{outline:2px solid color-mix(in srgb,var(--acc) 45%,transparent);border-color:var(--acc)}
dialog.dk-ask footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
dialog.dk-ask footer button{min-height:36px;padding:0 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel,#fff);color:var(--txt);font:inherit;font-size:14px;cursor:pointer}
dialog.dk-ask footer button:hover{border-color:var(--acc);color:var(--acc)}
dialog.dk-ask footer .dk-ask-ok{background:var(--acc,#2869b3);border-color:var(--acc,#2869b3);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
dialog.dk-ask footer .dk-ask-ok:hover{color:#fff;filter:brightness(1.08)}
dialog.dk-ask.dk-ask-danger footer .dk-ask-ok{background:var(--danger,#dc5265);border-color:var(--danger,#dc5265);box-shadow:none}
dialog.dk-ask footer button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
dialog.dk-ask form{margin:0}