/* gdl.css: owner lane GDL. The Generate dialog (GDL-SPEC §5, DR-85 after fix round 1, DR-77..80, DR-110 add. 4).
   Own parts only, scoped to #gen and #dlg-big: the DS-1 classes (.x-btn, .sel-t, .gd-seg) arrive with A-core, so the dialog carries
   its own copies under dialog-local tokens and swaps them for the shared ones at the merge (gdl.md «After M7»).
   p1.css loads later, so every rule here is prefixed with #gen to win without !important. */
#gen, #dlg-big {
  --gd-s:36px; --gd-m:44px;                 /* DS-1 heights: S segment, M select / segment / menu (DR-64) */
  --gd-r:var(--pill, 999px);
  --gd-fill:var(--bg); --gd-fill-hover:var(--raised); --gd-rim:var(--line-strong);
  --gd-press:scale(.97);
}

/* head: the title is the only large text; Close is the circular icon button of the system */
#gen .m-head { padding:var(--s-4) var(--s-5) var(--s-3) var(--s-6) }

/* source switch: the DS-1 .seg S (Catalogue / Text / Screenshots) */
#gen .g-main > .seg { margin:var(--s-4) var(--s-6) var(--s-3); width:max-content; align-self:flex-start; max-width:calc(100% - 48px) }
#gen .g-main > .seg button .i { width:var(--icon-md); height:var(--icon-md) }

/* request column: counter S 20, Clear in red outline, rows, and the total with the one balance line at the bottom (DR-79) */
#gen .req-head { padding:var(--s-4) var(--s-5) var(--s-2) }
#gen .req-head .total.sm { display:inline-grid; place-items:center; height:20px; min-width:20px; padding:0 6px; box-sizing:border-box; border-radius:var(--gd-r); background:var(--accent-soft-2); color:var(--accent); font:600 var(--fs-1)/20px var(--font) }
#gen .req-head .total.sm .w { display:none }
#gen .req-head h3 { margin-right:0 }
#gen .req-head { gap:var(--s-2) }
#gen .g-side { display:flex; flex-direction:column }
#gen .g-side > .sel { flex:1 1 auto; min-height:0; overflow-y:auto }
#gen .g-side > .g-opts { flex:none }
#gen .g-side > .g-cost { flex:none; display:grid; gap:2px; margin:0; padding:var(--s-3) var(--s-5) 14px; justify-items:end; text-align:right; border-top:1px solid var(--line); background:linear-gradient(180deg, rgb(var(--p-mist) / .03), transparent) }
#gen .g-side > .g-cost .ob-sub { justify-content:flex-end; max-width:100% }
#gen .g-side > .g-cost .ob-sub > span:first-child { white-space:normal; overflow:visible; text-wrap:balance }
#gen .g-side > .g-cost .ob-sub > span.warn { color:var(--amber) }   /* DR-112: amber only where a person must act */

/* footer: one 44 row: model, Pays with, Effort, Mode on the left, Cancel and the paid button on the right */
#gen .g-foot { height:76px; padding:0 var(--s-5) 0 var(--s-6); gap:var(--s-3); justify-content:space-between }
#gen .ob-sels { flex:1 1 auto; gap:var(--s-2); flex-wrap:nowrap }
#gen .ob-sels .sel-t { max-width:240px }
#gen .ob-sels > div { flex:none }
#gen .ob-sels > #g-acct-box { flex:0 1 auto; min-width:0 }   /* the one pill that gives way when the row is tight */
#gen .ob-sels > #g-acct-box .sel-t { max-width:100% }
#gen .ob-sels .sel-t > .truncate { min-width:0 }
#gen #g-acct-box.short .sel-t { border-color:color-mix(in oklab,var(--amber) 55%,transparent) }
#gen #g-effort-btn .truncate::before { content:"Effort \00b7  "; color:var(--text-3); font-weight:400 }   /* DR-78: «Effort · Standard» */
#gen .g-foot > .btn { height:var(--gd-m); padding:0 var(--s-4); border-radius:var(--gd-r); flex:none }
#gen #g-start { min-width:176px }
#gen #g-start:active:not([aria-disabled=true]) { transform:var(--gd-press) }
#gen #g-start[aria-disabled=true] { cursor:not-allowed }

/* Mode: an M segment in the footer (auto.js mounts it); the hint stays for readers and the (i) tip */
#gen #g-mode .seg.md button { padding:0 var(--s-3) }
#gen #g-mode.g-mode-f { position:relative; display:flex; align-items:center; gap:6px; margin-left:0 }
#gen #g-mode .g-label { order:2; margin:0; font-size:0; line-height:0 }
#gen #g-mode .g-label .g-q { font-size:var(--fs-1) }
#gen #g-mode .g-hint { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* the unconfirmed press (money guard): the button says why it waits, never «not charged» */
#gen #g-cost-l.warn { color:var(--amber) }

/* covered games at the end of the list (DR-80): «With a cover · N», closed until opened */
#gen .gd-covered { margin:var(--s-2) 0 0; border-top:1px solid var(--line) }
#gen .gd-covered > summary { display:flex; align-items:center; gap:var(--s-2); height:var(--gd-m); padding:0 var(--s-6); cursor:pointer; color:var(--text-2); font:500 var(--fs-2)/18px var(--font); list-style:none }
#gen .gd-covered > summary::-webkit-details-marker { display:none }
#gen .gd-covered > summary::after { content:""; width:8px; height:8px; margin-left:auto; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-2px); transition:transform var(--dur-2) var(--ease) }
#gen .gd-covered[open] > summary::after { transform:rotate(-135deg) translateY(-2px) }
#gen .gd-covered > summary:hover { color:var(--text) }
#gen .gd-covered .crow { opacity:.72 }

/* the big-order confirm (shared with the Catalogue's To draw; call signature in gdl.md) */
#dlg-big.gconf { border:1px solid var(--line-strong); border-radius:var(--r-5); background:var(--surface) }
#dlg-big .gc-foot { gap:var(--s-2) }
#dlg-big .gc-foot .btn { height:var(--gd-m); padding:0 var(--s-5); border-radius:var(--gd-r) }

@media (prefers-reduced-motion: reduce) {
  #gen .gd-covered > summary::after { transition:none }
}

/* Pays with: the account pill reads «Pays with <name>» (the service pill stays beside it while NezhaGate is on) */
#gen #g-acct .truncate::before { content:"Pays with "; color:var(--text-3); font-weight:400 }