/* The discussion's own pieces (row 62, Team E): the profile sheet and its form, the square photo crop, a photo or GIF in the new-post box,
   the reaction menu, form errors. Posts, comments and the composer's frame are in page.css (Team A). Design: design/Profiles.dc.html. */
.ep-sheet{width:420px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:2px solid var(--q-ink);background:var(--q-white,#fff);color:var(--q-ink);overflow:auto;font-family:var(--font-brand)}
.ep-sheet::backdrop{background:rgba(51,51,51,.45)}
.ep-sheet a{color:var(--q-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--q-sky);text-decoration-thickness:2px;text-underline-offset:4px}
.ep-phd{position:relative;height:150px;display:flex;align-items:flex-end;padding:0 0 18px 22px;box-sizing:border-box;font:700 64px/1 var(--font-head);letter-spacing:-.01em}
.ep-phd.c-anon{background:var(--q-line);color:var(--q-ink)} .ep-phd.has-photo{padding:0}
.ep-pbig{position:absolute;left:22px;bottom:-58px;box-sizing:border-box;width:136px;height:136px;border:3px solid var(--q-ink);box-shadow:6px 6px 0 var(--q-ink);transform:rotate(-3deg);background:var(--q-white,#fff) center/cover no-repeat}
.ep-px{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer}
.ep-px:hover{background:rgba(255,255,255,.2)} .ep-px:focus-visible{outline:3px solid currentColor;outline-offset:-3px}
.ep-pbd{padding:22px 24px 24px;display:flex;flex-direction:column;gap:22px} .ep-pbd.with-photo{padding-top:76px}
.ep-pnm{margin:0;font:700 28px/1.15 var(--font-head)} .ep-psub{display:block;font-size:16px;line-height:1.4;color:var(--q-muted)}
.ep-pgo{margin:0;font:600 16px/1.35 var(--font-head)}
.ep-pblk{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0} .ep-pblk p{margin:0}
.ep-psoc{display:flex;flex-wrap:wrap;gap:8px 18px}
.ep-pft{border-top:1px solid var(--q-line);padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px} .ep-pft .ep-grow{flex:1 1 0;min-width:0}   /* never pushes Hide and Report onto lines of their own */
.ep-sheet .ep-ptb{border:0;background:none;padding:12px 0;min-height:44px;font:600 15px/1.2 var(--font-head);color:var(--q-muted);cursor:pointer}
.ep-sheet .ep-ptb:hover,.ep-sheet .ep-ptb:focus-visible{color:var(--q-ink);text-decoration:underline}
.ep-pmsg:empty{display:none} .ep-pmsg{margin:0;font-size:15px}
.ep-sheet .ep-chips{display:flex;flex-wrap:wrap;gap:8px} .ep-sheet .ep-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:2px solid var(--q-line);font:600 15px/1 var(--font-head)}
.ep-sheet .ep-eb{font:600 13px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--q-muted)}
/* the person's own form */
.ep-pform .ep-label{font:600 16px/1.2 var(--font-head);color:var(--q-ink)} .ep-pform legend{padding:0;margin-bottom:10px}
.ep-pform .ep-field{display:flex;flex-direction:column;gap:6px;font:600 15px/1.2 var(--font-head)}
.ep-pform .qv-input,.ep-pform .qv-textarea,.ep-pform select{width:100%;box-sizing:border-box;min-height:44px;padding:8px 10px;border:2px solid var(--q-ink);background:var(--q-white,#fff);font:400 16px/1.4 var(--font-brand);color:var(--q-ink)}
.ep-pform .ep-nopt{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer} .ep-pform .ep-nopt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--q-ink)}
.ep-pform .ep-psw,.ep-pform .ep-chk{display:flex;align-items:center;gap:10px;min-height:44px;font:400 16px/1.3 var(--font-brand);cursor:pointer}
.ep-pform .ep-psw .qv-box{flex:none}   /* not .ep-sw: that is the share card's 44 px colour swatch (page.css), which squeezed these labels */
.ep-pform .ep-chk{min-height:36px;padding:0 12px;border:2px solid var(--q-line);font:600 15px/1 var(--font-head)} .ep-pform .ep-chk:has(input:checked){border-color:var(--q-ink)}
.ep-pform .ep-psw input,.ep-pform .ep-chk input{width:20px;height:20px;margin:0;accent-color:var(--q-ink)}
.ep-pform .ep-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ep-crop{position:relative;width:240px;height:240px;overflow:hidden;background:var(--q-ink);cursor:move;touch-action:none;border:2px solid var(--q-ink)}
.ep-crop img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.ep-crop .ep-sq{position:absolute;inset:0;box-shadow:inset 0 0 0 2px #fff;pointer-events:none}
.ep-crop:focus-visible{outline:3px solid var(--q-ink);outline-offset:3px}
.ep-zoom{display:flex;align-items:center;gap:10px;max-width:240px;font:600 14px/1 var(--font-head)} .ep-zoom input{flex:1 1 auto;accent-color:var(--q-ink);min-height:44px}
.ep-err:empty{display:none} .ep-err{margin:0;color:var(--q-red-text,#b3261e);font-weight:600}
/* a photo or GIF in the new-post box */
.ep-media-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px} .ep-media-pick img{display:block;max-width:180px;max-height:180px;border:2px solid var(--q-line)}
/* the reaction menu */
.ep-rxw{position:relative;display:inline-flex}
.ep-rxadd{min-width:44px;min-height:36px;border:2px solid var(--q-line);background:var(--q-white,#fff);font:600 18px/1 var(--font-head);color:var(--q-ink);cursor:pointer} .ep-rxadd:hover,.ep-rxadd[aria-expanded="true"]{border-color:var(--q-ink)}
.ep-rxmenu{position:absolute;z-index:5;bottom:calc(100% + 6px);left:0;display:flex;gap:4px;padding:6px;border:2px solid var(--q-ink);background:var(--q-white,#fff);box-shadow:4px 4px 0 var(--q-ink)}
.ep-rxmenu[hidden]{display:none} .ep-rxmenu form{margin:0} .ep-rxmenu .ep-rx{min-width:40px;min-height:40px;font-size:20px}
@media (max-width:600px){
  .ep-sheet{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0}
  .ep-phd{height:120px;font-size:52px} .ep-pbig{width:112px;height:112px;bottom:-48px} .ep-pbd.with-photo{padding-top:64px}
  .ep-rxmenu{position:fixed;left:16px;right:16px;bottom:16px;flex-wrap:wrap;justify-content:space-between;z-index:30}   /* a row at the bottom of the screen: never off the edge */
}
.ep-mention{font-weight:600} a.ep-mention{color:var(--q-ink);text-decoration:underline;text-decoration-color:var(--q-sky);text-decoration-thickness:2px;text-underline-offset:3px}
/* 44 px to tap on phones and touch screens (Team G's row 65 walk-through): the reaction buttons, «+», «Ответить», «Удалить», the sheet's buttons */
@media (pointer:coarse), (max-width:600px){
  .ep-rxadd, .ep-rx, .ep-rep, .ep-cm .ep-link, .ep-post .ep-acts .ep-link, .ep-media-pick .ep-link, .ep-writing .ep-link { min-height:44px; min-width:44px }
  .ep-sheet .qv-btn, .ep-sheet .ep-ptb { min-height:44px }
}
/* Design v5, board 70205bb9 (the feed after the answer): a post's body sits in the column of its name, comments under it; the pin and heart
   icons; a colour mark before a block's label; the viewer's own square before the comment box. Scoped to .ep-posts so it wins over page.css. */
.ep-posts .ep-post{padding:20px 24px;gap:14px}
.ep-posts .ep-pinned{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--font-head)}
.ep-posts .ep-post>.ep-who{gap:14px} .ep-posts .ep-post>.ep-who>div{gap:3px}
.ep-posts .ep-post>.ep-who strong{font:700 18px/1.2 var(--font-head)} .ep-posts .ep-post>.ep-who .ep-muted{font-size:14px}
.ep-pbody{padding-left:58px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ep-ptext{display:flex;flex-direction:column;gap:10px} .ep-ptext .ep-text{margin:0;font-size:16px;line-height:1.5}
.ep-posts .ep-eb{display:block;font:600 13px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.ep-posts .ep-eb .qv-mark{width:19px;height:9px;margin-right:7px}
/* the site's old heading class .dab (site/index.html) gives a sky ::before and a left padding to anything called dab: not to the design system's .qv-mark.dab (Team F's finding: two colours in one mark) */
.ep .qv-mark.dab{padding-left:0} .ep .qv-mark.dab::before{content:none}
.ep-pinb,.ep-hrt{display:inline-flex;align-items:center;justify-content:center;width:44px;height:36px;padding:0;border:0;background:none;color:var(--q-ink);cursor:pointer}
.ep-pinb:hover,.ep-pinb.on,.ep-hrt:hover{background:var(--q-line)}
.ep-hrt svg path{fill:none;stroke:var(--q-ink);transition:fill .15s ease-out} .ep-hrt.on svg path{fill:var(--q-red);stroke:var(--q-red)}
.ep-pbody .ep-acts form{margin:0}
.ep-posts .ep-cmts{margin-left:58px;gap:18px}
.ep-ccount{font:600 14px/1 var(--font-head);color:var(--q-muted)}
.ep-posts .ep-th{display:flex;flex-direction:column;gap:12px}
.ep-posts .ep-cm{gap:8px} .ep-posts .ep-cm>.ep-who{gap:12px}
.ep-posts .ep-cm>.ep-who strong{font:700 16px/1.2 var(--font-head)} .ep-posts .ep-cm>.ep-who .ep-muted{font-size:14px}
.ep-cbody{padding-left:44px;display:flex;flex-direction:column;gap:8px;min-width:0} .ep-cbody p{margin:0;font-size:16px;line-height:1.5}
.ep-posts .ep-kids{margin:0 0 0 44px;gap:12px}
.ep-posts .ep-kids .ep-cm{gap:6px} .ep-posts .ep-kids .ep-cm>.ep-who{gap:10px}
.ep-posts .ep-kids .ep-cm>.ep-who strong{font-size:15px} .ep-posts .ep-kids .ep-cm>.ep-who .ep-muted{font-size:13px}
.ep-posts .ep-kids .ep-cbody{padding-left:38px;gap:6px}
.ep-posts .ep-rx{height:32px;gap:6px;font-size:15px;color:var(--q-ink)}
.ep-posts .ep-reply{display:flex;flex-wrap:nowrap;gap:10px;align-items:center} .ep-posts .ep-reply .qv-input{flex:1 1 auto;min-width:0}
/* Design v5: «Как вас показывать» (boards 70205bb9 and c97b266a screen 6): each choice a bordered row with the square it gives, the chosen one shaded */
.ep-namep{border:2px solid var(--q-ink);padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--q-white,#fff)}
.ep-namep[hidden]{display:none}
.ep-namehd{display:flex;align-items:flex-start;gap:12px} .ep-namehd .ep-h3{flex:1 1 auto;font:700 20px/1.25 var(--font-head)} .ep-namehd .ep-px{display:none;position:static}
.ep-namep .ep-nopt{position:relative;display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:12px 14px;border:2px solid var(--q-line);background:var(--q-white,#fff);color:var(--q-ink);cursor:pointer;font-family:var(--font-brand)}
.ep-namep .ep-nopt:hover{border-color:var(--q-edge)} .ep-namep .ep-nopt.on{border-color:var(--q-ink);background:var(--q-line)}
.ep-namep .ep-nopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .ep-namep .ep-nopt:has(input:focus-visible){outline:3px solid var(--q-ink);outline-offset:2px}
.ep-namep .ep-nopt>span:last-child{display:flex;flex-direction:column;gap:3px} .ep-namep .ep-nopt strong{font:700 16px/1.2 var(--font-head)} .ep-namep .ep-nopt .ep-muted{font-size:14px;line-height:1.35}
.ep-fullbar,.ep-fullwho,.ep-narrow{display:none}
/* Design v5, board 1b6e3cd0 («Ваш профиль»): «Как вас показывать» a plain list of radios; the pronouns menu the form's full width, never cut */
.ep-sheet .ep-pform .ep-nopt{border:0;padding:0;background:none;align-items:center;font:400 16px/1.35 var(--font-brand)} .ep-sheet .ep-pform .ep-nopt strong{font-weight:400}
.ep-sheet .ep-pform select.qv-input,.ep-sheet .ep-pform .ep-field select{width:100%;max-width:none;min-width:0}
@media (max-width:600px){
  /* the feed: text the whole width, replies shifted right under their comment (board c97b266a, screen 3) */
  .ep-posts .ep-post{padding:16px}
  .ep-pbody{padding-left:0} .ep-posts .ep-cmts{margin-left:0} .ep-cbody{padding-left:0} .ep-posts .ep-kids .ep-cbody{padding-left:0} .ep-posts .ep-kids{margin-left:24px}
  /* the new-post box: one line in the page, full screen once tapped (screen 8) */
  #compose:not(.ep-full) .ep-label, #compose:not(.ep-full) .ep-row, #compose:not(.ep-full) [data-block-menu], #compose:not(.ep-full) [data-block-picked], #compose:not(.ep-full) .ep-blast, #compose:not(.ep-full) .ep-gifs{display:none}
  #compose:not(.ep-full) #ep-text{height:48px;min-height:48px;resize:none;overflow:hidden}
  /* the box is the visible screen (100dvh; discussion.js follows the keyboard with --ep-vh), its tools row stays at its bottom edge (a phone's
     toolbar covered it: owner's screenshot, 2026-11-06), and nothing in it shrinks (the GIF grid was squeezed into slices) */
  #compose.ep-full{position:fixed;top:var(--ep-vt,0);left:0;right:0;bottom:auto;height:var(--ep-vh,100dvh);z-index:50;margin:0;padding:0 16px;background:var(--q-white,#fff);display:flex;flex-direction:column;gap:14px;overflow:auto;overscroll-behavior:contain}
  #compose.ep-full>*{flex-shrink:0}
  #compose.ep-full .ep-fullbar{display:flex;align-items:center;gap:12px;margin:0 -16px;padding:10px 16px;border-bottom:1px solid var(--q-line);position:sticky;top:0;background:var(--q-white,#fff);z-index:1}
  #compose.ep-full .ep-fullbar strong{flex:1 1 auto;font:700 17px/1.2 var(--font-head)} #compose.ep-full .ep-fullbar .ep-rep{color:var(--q-ink);font-size:16px;min-height:44px}
  #compose.ep-full .ep-fullwho{display:flex;align-items:center;gap:12px} #compose.ep-full .ep-fullwho>div{display:flex;flex-direction:column;gap:2px}
  #compose.ep-full .ep-fullwho strong{font:700 16px/1.2 var(--font-head)} #compose.ep-full .ep-fullwho .ep-muted{font-size:14px}
  #compose.ep-full .ep-label{display:none} #compose.ep-full #ep-text{border:0;padding:0;min-height:120px;font-size:18px;line-height:1.45;outline:0;resize:none}
  #compose.ep-full .ep-tools{position:sticky;bottom:0;z-index:1;margin:auto -16px 0;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--q-line);background:var(--q-white,#fff);flex-wrap:nowrap}
  #compose.ep-full .ep-tools>.qv-btn:not(.ep-ic){display:none}
  html.ep-noscroll, html.ep-noscroll body{overflow:hidden}
  /* «Как вас показывать»: a sheet from the bottom with a cross (screen 6) */
  .ep-namep:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:92dvh;overflow:auto;border-width:2px 0 0;box-shadow:0 0 0 100vmax rgba(51,51,51,.45)}
  .ep-wide{display:none} .ep-narrow{display:inline}
  .ep-namehd .ep-px{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px -10px 0 0}
}
/* «Команда QARAVAN»: the logo's q (owner) */
.ep-av.ep-av-q{background:#fff;box-shadow:inset 0 0 0 1px var(--q-line);padding:0;overflow:hidden}
.ep-av.ep-av-q svg{display:block;width:100%;height:100%}
.ep-orgq-edit > summary{list-style:none;cursor:pointer;margin-top:4px}.ep-orgq-edit > summary::-webkit-details-marker{display:none}
.ep-orgq-edit .ep-panel{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ep-orgq-edit .ep-field{display:flex;flex-direction:column;gap:4px;font:600 14px/1.2 var(--font-head)}

/* GIFs from GIPHY: a search, a scrolling list of previews, each whole in its own shape (columns, like the GIPHY keyboard: a square crop cut
   faces and words off), "Powered by GIPHY". The scroller is a block with a fixed height; the columns inside it are as tall as they need,
   so they never spill sideways and nothing squeezes the rows (owner's phone screenshot, 2026-11-06). */
.ep-gifs{display:flex;flex-direction:column;gap:10px}
.ep-gif-grid{display:block;height:min(340px,52vh);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ep-gif-cols{columns:3 96px;column-gap:6px}
.ep-gif{display:block;width:100%;margin:0 0 6px;padding:0;border:2px solid transparent;background:var(--q-line);cursor:pointer;break-inside:avoid;line-height:0}
.ep-gif img{display:block;width:100%;height:auto}
.ep-gif:hover,.ep-gif:focus-visible{border-color:var(--q-ink)}
.ep-gif-foot{align-items:center}
.ep-gif-grid > p{margin:0}

/* Messages to guests (organizers' box, render-discussion.mjs blastBox): the groups one under another, the total, the note */
.ep-blast{display:flex;flex-direction:column;gap:10px}
.ep-blast-to{margin:0;padding:12px 14px;border:2px solid var(--q-line);display:flex;flex-direction:column;gap:6px;min-width:0}
.ep-blast-to[hidden]{display:none}
.ep-blast-to legend{padding:0 4px}
.ep-blast-to .ep-row{flex-direction:column;align-items:flex-start;gap:0}
.ep-blast-to .qv-check{min-height:40px}
.ep-blast-to [data-blast-total]{margin:4px 0 0;font-weight:600}
.ep-blast-to p{margin:0}
.ep-blast-line{margin:6px 0 0}
#compose.ep-full.ep-blasting .ep-tools{display:none}   /* on a phone the tools row holds only icons, hidden while sending to guests */

/* The new post and what goes with it in one box (owner, 2026-11-06: «show blocks as attachments to the post, visually make it clear that
   they're attached»): the text on top, each attachment (a photo, a GIF, a block with its fields) a card inside the same frame, with a clip
   and a cross to take it off */
.ep-cbox{display:flex;flex-direction:column;border:2px solid var(--q-edge,#8a857a);background:var(--q-white,#fff)}
.ep-cbox:focus-within{border-color:var(--q-ink)}
.ep-cbox>#ep-text{border:0;outline:0;box-shadow:none;width:100%;box-sizing:border-box;background:transparent}
.ep-cbox>.ep-att:not([hidden]){display:flex;flex-direction:column;gap:12px;margin:0 12px 12px;padding:12px;border:2px solid var(--q-line);border-left-width:2px;background:var(--q-white,#fff)}
.ep-cbox>.ep-att:not([hidden])::before{content:"";display:block;height:0;margin:-12px -12px 0;border-top:0}
.ep-att .ep-box{border:0;padding:0}
.ep-att-hd{display:flex;align-items:center;gap:8px;font:700 15px/1.25 var(--font-head);color:var(--q-ink)}
.ep-att-hd .ep-i{flex:0 0 auto}
.ep-att-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px -10px -10px 0;border:0;background:none;color:var(--q-ink);cursor:pointer}
.ep-att-x:hover{background:var(--q-line)}
.ep-att.ep-media-pick img{max-width:180px;max-height:180px}
@media (max-width:600px){
  #compose:not(.ep-full) .ep-cbox{border:0} #compose:not(.ep-full) .ep-att{display:none}
  #compose.ep-full .ep-cbox{border:0} #compose.ep-full .ep-cbox>.ep-att:not([hidden]){margin:0 0 12px}
}
.ep-att .ep-eb{display:none}   /* the attachment line already names the block */

/* what a block is for, and (blocks with nothing to fill in) a preview of the guests' view, in the attachment card */
.ep-att-about:not([hidden]){display:flex;flex-direction:column;gap:10px}
.ep-att-about p{margin:0}
.ep-att-prev{display:flex;flex-direction:column;gap:6px;pointer-events:none;user-select:none}
.ep-att-prev .ep-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--q-muted,#6b675f)}
.ep-att-card{padding:14px;border:1px dashed var(--q-edge,#a09b91);background:var(--q-white,#fff);display:flex;flex-direction:column;gap:10px;opacity:.92}