/* digotech/similar: the "make a website like this" dialog — a centred modal, the pick (screenshot, name, what happens
   next) beside the kit form; on phones a sheet rising from the bottom, the pick shrunk to a row. The form field holding
   the pick (.dg-sr__ctl) is filled by view.js and hidden. */
.dg-sr{
  --dg-sr-w:calc(var(--s-9) * 7.2);
  --dg-sr-side:calc(var(--s-9) * 2.6);
  --dg-sr-thumb:calc(var(--s-9) * 1.1);
  --dg-sr-sheet-h:92dvh;
  --dg-sr-lift:0 30px 80px var(--shadow);
  --dg-sr-chk:14px;
  --dg-sr-chk-i:9px;
  width:min(var(--dg-sr-w), calc(100vw - var(--s-6)));
  max-width:none;
  max-height:calc(100dvh - var(--s-6));
  padding:0;
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--dg-sr-lift);
}
.dg-sr[open]{display:flex;flex-direction:column;animation:dg-sr-in var(--dur-m) var(--ease-out)}
.dg-sr::backdrop{background:var(--scrim);animation:dg-sr-fade var(--dur-m) var(--ease-out)}
html:has(.dg-sr[open]){overflow:hidden}
.dg-sr :where(h2,h3,p,ul,figure){margin:0}
@keyframes dg-sr-in{from{opacity:0;transform:translateY(var(--s-4)) scale(.98)}}
@keyframes dg-sr-up{from{transform:translateY(100%)}}
@keyframes dg-sr-fade{from{opacity:0}}

.dg-sr__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule)}
.dg-sr__ttl{display:grid;gap:var(--s-1)}
.dg-sr__ttl .mono{font-size:var(--t-2xs)}
.dg-sr__ttl h2{font-size:var(--t-xl)}
.dg-sr__body{flex:1;display:grid;grid-template-columns:var(--dg-sr-side) minmax(0,1fr);min-height:0;overflow:auto}

/* the pick */
.dg-sr__pick{display:grid;gap:var(--s-4);align-content:start;padding:var(--s-5);border-right:1px solid var(--rule);background:var(--paper-2)}
.dg-sr__shot{aspect-ratio:16 / 10;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)} /* ds-ok: screen proportion of the screenshots (a project shot is 16:10; a long template capture shows its top) */
.dg-sr__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dg-sr__shot:has(img[hidden]){display:none} /* a pick without a screenshot */
.dg-sr__who{display:grid;gap:var(--s-1);min-width:0}
.dg-sr__who .mono{font-size:var(--t-2xs);color:var(--ink-3)}
.dg-sr__who h3{font-size:var(--t-l);overflow-wrap:anywhere}
.dg-sr__get{list-style:none;padding:var(--s-4) 0 0;border-top:1px solid var(--rule);display:grid;gap:var(--s-2);font-size:var(--t-xs);color:var(--ink-2)}
.dg-sr__get li{display:flex;align-items:flex-start;gap:var(--s-2)}
.dg-sr__chk{display:inline-grid;place-items:center;flex:none;width:var(--dg-sr-chk);height:var(--dg-sr-chk);margin-top:calc((1lh - var(--dg-sr-chk)) / 2);border-radius:50%;background:var(--accent-fill);color:var(--on-accent)}
.dg-sr__chk svg{width:var(--dg-sr-chk-i);height:var(--dg-sr-chk-i)}

/* the form */
.dg-sr__main{display:grid;gap:var(--s-4);align-content:start;min-width:0;padding:var(--s-5)}
.dg-sr__sub{font-size:var(--t-s);color:var(--ink-2)}
.dg-sr .dg-sr__ctl{display:none}
/* a compact form: name and phone share a row, smaller labels, closer fields, light edges on a card-white field */
.dg-sr .dn-kit-form{gap:var(--s-3)}
.dg-sr .dn-kit-form > .dn-kit-form__field--half{flex-basis:calc(50% - var(--s-3))}
.dg-sr .dn-kit-form__field{gap:var(--s-1)}
.dg-sr .dn-kit-form label{font-size:var(--t-s);line-height:1.3}
.dg-sr .dn-kit-form :is(input,textarea){border-color:var(--rule);background:var(--card)}
.dg-sr .dn-kit-form :is(input,textarea):focus{border-color:var(--accent-fill)}
.dg-sr .dn-kit-form textarea{min-height:calc(var(--ctl) * 2)}

@media (max-width: 767px){
  .dg-sr{width:100%;max-height:var(--dg-sr-sheet-h);margin:auto 0 0;border-inline:0;border-bottom:0;border-radius:var(--r-card) var(--r-card) 0 0}
  .dg-sr[open]{animation:dg-sr-up var(--dur-morph) var(--ease-out)}
  .dg-sr__body{grid-template-columns:minmax(0,1fr)}
  .dg-sr__pick{grid-template-columns:var(--dg-sr-thumb) minmax(0,1fr);align-items:center;gap:var(--s-3);padding:var(--s-4);border-right:0;border-bottom:1px solid var(--rule)}
  .dg-sr__get{display:none}
  .dg-sr__main{padding:var(--s-4)}
  .dg-sr .dn-kit-form > .dn-kit-form__field--half{flex-basis:100%}
}
@media (prefers-reduced-motion: reduce){
  .dg-sr[open],.dg-sr::backdrop{animation:none}
}