/* =========================================================
   fs3-overrides.css
   - Mobile FS3 UI layout fixes
   - Share modal (desktop + mobile)
   - Delete/Reset modal (desktop + mobile)
   ========================================================= */

/* =========================================================
   Mobile (<= 768px) — main FS3 UI layout
   ========================================================= */
@media (max-width: 768px){

  /* plugin shell full width */
  .fs3-shell{
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  /* core paddings */
  .fs3-body{
    padding: 24px 16px 24px 16px !important;
  }

  /* header: title on top, controls below */
  .fs3-header{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 0;
  }

  .fs3-header > h3{
    margin-bottom: 24px;
  }

  .fs3-header-right{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
  }

  /* order of header buttons */
  #fs3-copy-btn{ margin-right: 12px; display:inline-flex; }
  #fs3-save-btn{ margin-right: 12px; display:inline-flex; }

  /* ✅ mobile: hide direct share/delete/new-list buttons (moved into 3-dots menu) */
  #fs3-share-btn{ display:none; }
  #fs3-new-list-btn{ display:none; }
  #fs3-reset-btn{ display:none; }

  /* compare link to the right */
  #fs3-compare{
    margin-left: 24px; 
    margin-right: 0;
  }

  /* ✅ enable 3-dots menu on mobile */
  .fs3-header-more{ display:inline-flex !important; }

  /* ✅ place 3-dots right after Save */
  #fs3-header-more{
    order: 3;
    margin-right: 0; /* ✅ was 12px */
  }

  /* Guest list mode: keep only Copy + three-dots above the list.
     Save stays available inside the three-dots menu. */
  body.gf-auth-guest:not(.gf-branch-mode) #fs3-save-btn,
  body.gf-auth-guest:not(.gf-branch-mode) #fs3-new-list-btn{
    display:none !important;
  }

  body.gf-auth-guest:not(.gf-branch-mode) #fs3-header-menu [data-action="edit-single"],
  body.gf-auth-guest:not(.gf-branch-mode) #fs3-header-menu [data-action="share"]{
    display:none;
  }

  body.gf-auth-logged-in #fs3-header-menu [data-action="save"]{
    display:none;
  }

  /* questions layout */
  .fs3-qcol{
    grid-template-columns: minmax(0,1fr) 56px;
  }

  /* compare actions (Back + Stop) — mobile: stacked, full width */
  .fs3-qactions{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }
  .fs3-qactions .fs3-btn{
    width: 100%;
  }

  /* ===== task numbering badge on border ===== */
  .fs3-item-row{
    position: relative;
    margin: 12px 0 0;
  }

  .fs3-item-row::before{ content:none !important; }

  .fs3-item{
    position: relative;
    padding: 14px 16px 14px;
    border-radius: 14px;
    touch-action: pan-y;
  }

  .fs3-item::before{ content:none !important; }

  .fs3-rank{
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #858AA6;
    background: #FFFFFF;
    pointer-events: none;
    z-index: 1;
  }

  /* bottom add row: input full width, buttons below */
  .fs3-add-row{
    margin-top: 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }

  .fs3-add-input{
    order: 0;
    flex: 0 0 100%;
    min-height: 64px;
  }

  #fs3-import-btn{
    order: 1;
    flex: 0 0 56px;
    margin-top: 0;
  }

  #fs3-add-btn{
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 20px;
    margin-top: 0;
  }

  /* mobile modal general */
  .fs3-modal{
    max-width: 90%;
    padding: 32px 20px;
  }

  .fs3-modal-actions{
    flex-direction: column-reverse;
  }

  .fs3-modal-actions .fs3-modal-btn + .fs3-modal-btn{
    margin-left: 0;
    margin-bottom: 12px;
  }

  .fs3-modal-btn{
    width: 100%;
  }

  /* iOS contenteditable zoom fix */
  .fs3-item.fs3-editing .fs3-text{
    font-size:16px;
  }
}

/* =========================================================
   SHARE MODAL (desktop) — scoped to #fs3-share-modal-backdrop
   ========================================================= */

#fs3-share-modal-backdrop .fs3-share-modal{
  background:#FFFFFF;
  border-radius:20px;
  padding:48px 60px 40px;
  box-shadow:0 18px 45px rgba(15,23,42,.35);
  position:relative;
  width:fit-content;
  max-width:calc(100vw - 40px);
  font-family:"Noah", sans-serif;
  box-sizing:border-box;

  /* Share modal sizing baseline:
     JS can set --fs3-share-w to match button row width.
     Fallback keeps current desktop look. */
  --fs3-share-w: 520px;
}

#fs3-share-modal-backdrop .fs3-share-close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:28px;
  line-height:1;
  color:#3F52B3;
}

#fs3-share-modal-backdrop .fs3-share-title{
  margin:0 0 28px 0;
  font-size:32px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#0C0F1C;
}

/* rows */
#fs3-share-modal-backdrop .fs3-share-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;

  width:var(--fs3-share-w);
  max-width:100%;
}

#fs3-share-modal-backdrop .fs3-share-label{
  display:block;
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#0C0F1C;
}

#fs3-share-modal-backdrop .fs3-share-input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  height:56px;
  padding:0 18px;
  border:1px solid #CECFD9;
  border-radius:0;
  font:inherit;
  font-size:16px;
  background:#FFFFFF;
  color:#0C0F1C;
  outline:none;
}

#fs3-share-modal-backdrop .fs3-share-value{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-height:32px;
  padding:0;
  border:none;
  font:inherit;
  font-size:16px;
  line-height:1.2;
  background:transparent;
  color:#0C0F1C;
  word-break:break-word;
}

#fs3-share-modal-backdrop .fs3-share-input:focus{
  border-color:#3F52B3;
  box-shadow:0 0 0 3px rgba(63,82,179,.14);
}

/* actions */
#fs3-share-modal-backdrop .fs3-share-actions{
  display:flex;
  gap:16px;
  margin-top:28px;
  width:var(--fs3-share-w);
  max-width:100%;
}

/* button base (share) */
#fs3-share-modal-backdrop .fs3-modal-btn{
  height:56px;
  padding:0 28px;
  border-radius:12px;
  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;

  /* override global mobile rule .fs3-modal-btn{ width:100% } on <=768px */
  width:auto;
}

/* copy (primary) */
#fs3-share-modal-backdrop #fs3-share-copy{
  background:#3F52B3;
  color:#FFFFFF;
  border:1px solid #3F52B3;
  flex:0 0 auto;
  min-width:220px;
}

/* cancel (secondary) */
#fs3-share-modal-backdrop #fs3-share-cancel{
  background:#FFFFFF;
  color:#3F52B3;
  border:1px solid #3F52B3;
  flex:0 0 auto;
  min-width:180px;
}

/* =========================================================
   SHARE MODAL (tablet/mobile) — breakpoint 700px for this modal
   ========================================================= */
@media (max-width:700px){
  #fs3-share-modal-backdrop .fs3-share-modal{
    padding:32px 20px 28px;
    width:calc(100vw - 32px);
    max-width:calc(100vw - 32px);
    border-radius:20px;

    /* On <=700px, fields should stretch to modal container width */
    --fs3-share-w: 100%;
  }

  #fs3-share-modal-backdrop .fs3-share-title{
    font-size:32px; /* ✅ was 26px */
    margin-bottom:22px;
  }

  #fs3-share-modal-backdrop .fs3-share-row{
    width:100%;
    max-width:100%;
  }

  #fs3-share-modal-backdrop .fs3-share-input{
    width:100%;
  }

  #fs3-share-modal-backdrop .fs3-share-value{
    width:100%;
    font-size:16px;
  }

  #fs3-share-modal-backdrop .fs3-share-actions{
    width:100%;
    gap:12px;
    flex-direction:column;
    align-items:stretch;
  }

  #fs3-share-modal-backdrop #fs3-share-copy,
  #fs3-share-modal-backdrop #fs3-share-cancel{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   COPY MODAL (Copy list) — scoped to #fs3-copy-modal-backdrop
   ========================================================= */

#fs3-copy-modal-backdrop .fs3-modal{
  border-radius:18px;
  padding:64px 60px 48px;
  position:relative;

  /* Bind modal content width to actions width.
     Total modal = actions width + left/right padding (60 + 60). */
  width:var(--fs3-copy-actions-w, 520px) !important;
  min-width:0 !important;

  max-width:calc(100vw - 40px);
}

/* close (X) button */
#fs3-copy-modal-backdrop .fs3-modal-x{
  position:absolute;
  top:12px;
  right:12px;
  width:56px;
  height:56px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  color:#3F52B3;
  line-height:56px;
  font-size:34px;
}

#fs3-copy-modal-backdrop .fs3-modal-x::before{
  content:"×";
  display:block;
  text-align:center;
}

/* title spacing + width cap aligned to actions width */
#fs3-copy-modal-backdrop .fs3-modal-title{
  margin:0 0 32px 0;
  display:inline-block;
  max-width:var(--fs3-copy-actions-w, 100%);
}

/* actions width drives the title width (JS sets --fs3-copy-actions-w) */
#fs3-copy-modal-backdrop .fs3-modal-actions{
  width:var(--fs3-copy-actions-w, auto);
  max-width:100%;
  gap:12px;
}

/* =========================================================
   COPY MODAL (mobile) — uses the global 768px breakpoint
   ========================================================= */
@media (max-width:768px){
  /* 12px from screen edges */
  #fs3-copy-modal-backdrop .fs3-modal{
    width:auto;
    max-width:calc(100% - 24px);
    margin-left:12px;
    margin-right:12px;
    padding:64px 30px 48px;
  }

  #fs3-copy-modal-backdrop .fs3-modal-x{
    top:8px;
    right:8px;
  }

  #fs3-copy-modal-backdrop .fs3-modal-actions{
    width:100%;
    max-width:100%;
    flex-direction:column;
    gap:12px;
  }

  /* neutralize global stacked buttons margins for this modal */
  #fs3-copy-modal-backdrop .fs3-modal-actions .fs3-modal-btn + .fs3-modal-btn{
    margin-left:0;
    margin-bottom:0;
  }

  #fs3-copy-modal-backdrop .fs3-modal-title{
    max-width:100%;
  }
}

/* =========================================================
   DELETE / RESET MODAL — scoped to #fs3-modal-backdrop
   ========================================================= */

#fs3-modal-backdrop .fs3-modal{
  background:#FFFFFF;
  border-radius:20px;
  padding:48px 60px;
  box-shadow:0 18px 45px rgba(15,23,42,.35);
  box-sizing:border-box;
  font-family:"Noah", sans-serif;
  text-align:center;
  width:fit-content;
  max-width:calc(100vw - 40px);
}

#fs3-modal-backdrop .fs3-modal-title{
  margin:0 0 28px 0;
  font-size:32px !important;
  line-height:1.1 !important;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#0C0F1C;
}

#fs3-modal-backdrop .fs3-modal-text{
  margin:0 0 24px 0;
  font-size:16px;
  line-height:1.35;
  color:rgba(12,15,28,.85);
}

/* actions — desktop: stretch only when container is wider (e.g. title wider) */
#fs3-modal-backdrop .fs3-modal-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  width:100%;
}

/* buttons — 16px text */
#fs3-modal-backdrop .fs3-modal-btn{
  height:56px;
  padding:0 28px;
  border-radius:12px;
  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  background-clip:padding-box;
  transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;

  /* desktop: keep "standard" min size, but allow growth when container is wider */
  flex:1 1 0;
  min-width:max-content;
}

/* cancel (primary fill) */
#fs3-modal-backdrop #fs3-modal-cancel{
  background:#3F52B3;
  color:#FFFFFF;
  border:1px solid #3F52B3;
}

/* primary hover like other primary buttons */
#fs3-modal-backdrop #fs3-modal-cancel:hover{
  box-shadow:0 12px 28px rgba(15,23,42,.18);
  transform:translateY(-1px);
}

#fs3-modal-backdrop #fs3-modal-cancel:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(15,23,42,.14);
}

/* confirm (secondary outline) */
#fs3-modal-backdrop #fs3-modal-confirm{
  background:#FFFFFF;
  color:#3F52B3;
  border:1px solid #3F52B3;
  box-shadow:none;
}

/* secondary hover like other outline buttons */
#fs3-modal-backdrop #fs3-modal-confirm:hover{
  background:#FFFFFF;
  box-shadow:0 4px 10px rgba(56,46,44,.20);
  transform:translateY(-1px);
}

#fs3-modal-backdrop #fs3-modal-confirm:active{
  background:#F9FAFB;
  box-shadow:0 2px 6px rgba(56,46,44,.25);
  transform:translateY(0);
}

/* =========================================================
   DELETE / RESET MODAL (mobile) — scoped to #fs3-modal-backdrop
   ========================================================= */
@media (max-width:768px){
  #fs3-modal-backdrop .fs3-modal{
    padding:48px 60px;
    max-width:calc(100vw - 32px);
  }

  /* mobile: Delete on top, Cancel bottom */
  #fs3-modal-backdrop .fs3-modal-actions{
    flex-direction:column;
    gap:12px;
  }

  #fs3-modal-backdrop .fs3-modal-actions .fs3-modal-btn + .fs3-modal-btn{
    margin-left:0;
    margin-bottom:0;
  }

  #fs3-modal-backdrop .fs3-modal-btn{
    width:100%;
    flex:0 0 auto;
    min-width:0;
  }
}

/* =========================================================
   SHARE SAVE (overwrite/keep) MODAL — scoped to #gf-share-save-backdrop
   ========================================================= */

#gf-share-save-backdrop .gf-share-save-modal{
  background:#FFFFFF;
  border-radius:18px;
  padding:60px;
  box-shadow:0 18px 45px rgba(15,23,42,.35);
  position:relative;
  width:100%;
  max-width:980px;
  box-sizing:border-box;
  font-family:"Noah", sans-serif !important;
  color:#0C0F1C;
}

#gf-share-save-backdrop .gf-share-save-modal *{
  font-family:"Noah", sans-serif !important;
}

#gf-share-save-backdrop .gf-share-save-close{
  position:absolute;
  top:18px;
  right:18px;
  width:56px;
  height:56px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:34px;
  line-height:56px;
  color:#3F52B3;
  padding:0;
}

#gf-share-save-backdrop .gf-share-save-title{
  margin:0;
  font-size:32px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#0C0F1C;
  padding:0;
}

#gf-share-save-backdrop .gf-share-save-subtitle{
  margin-top:16px;
  margin-bottom:32px;
  font-size:18px;
  font-weight:400;
  line-height:1.35;
  color:#0C0F1C;
}

#gf-share-save-backdrop .gf-share-save-choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* card = flex-column so action can stick to bottom-right */
#gf-share-save-backdrop .gf-share-save-card{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  text-align:left;
  background:#FFFFFF;
  border:1px solid rgba(12,15,28,.18);
  border-radius:12px;
  padding:22px;
  box-sizing:border-box;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}

#gf-share-save-backdrop .gf-share-save-card:hover{
  border-color:#3F52B3;
}

#gf-share-save-backdrop .gf-share-save-card:focus-visible{
  outline:none;
  border-color:#3F52B3;
  box-shadow:0 0 0 3px rgba(63,82,179,.14);
}

/* title pinned to top-left */
#gf-share-save-backdrop .gf-share-save-card-title{
  margin:0 0 12px 0;
  font-weight:800;
  font-size:18px;
  line-height:1.15;
  color:#0C0F1C;
}

/* ordered list with numbering (CSS counters) + fixed preview window */
#gf-share-save-backdrop .gf-share-save-card-list{
  margin:0;
  padding:0;
  list-style:none !important;
  counter-reset: gfShareItem;

  font-size:18px;
  font-weight:400;
  line-height:24px;
  color:#858AA6;

  /* desktop: height = 5 lines (items window) */
  min-height:120px;
  max-height:120px;
  overflow:hidden;
}

#gf-share-save-backdrop .gf-share-save-card-list li{
  display:block !important;
  position:relative;
  padding-left:28px;
  counter-increment: gfShareItem;

  font-size:18px;
  font-weight:400;
  line-height:24px;
  color:#858AA6;

  /* keep user line breaks + wrap long words */
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#gf-share-save-backdrop .gf-share-save-card-list li::before{
  content: counter(gfShareItem) ".";
  position:absolute;
  left:0;
  top:0;

  font-size:18px;
  font-weight:400;
  line-height:24px;
  color:#858AA6;
}

/* trailing "..." line (fixed line, always reserves space via visibility in JS) */
#gf-share-save-backdrop .gf-share-save-card-ellipsis{
  margin:0;
  padding-left:28px;

  height:24px;
  line-height:24px;

  font-size:18px;
  font-weight:400;
  color:#858AA6;
}

/* action pinned to bottom-right; typography like "Compare" (no underline) */
#gf-share-save-backdrop .gf-share-save-card-action{
  margin-top:auto;            /* push to bottom */
  align-self:flex-end;        /* right side */
  text-align:right;

  font-size:16px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;

  color:#3F52B3;
  text-decoration:none;

  /* a bit of breathing room from the list */
  padding-top:18px;
}

/* Mobile (breakpoint 700px for this modal only) */
@media (max-width:700px){
  #gf-share-save-backdrop .gf-share-save-modal{
    padding:48px 20px;
    width:calc(100vw - 32px);
    max-width:calc(100vw - 32px);
    border-radius:18px;
  }

  #gf-share-save-backdrop .gf-share-save-choices{
    grid-template-columns:1fr;
  }

  #gf-share-save-backdrop .gf-share-save-title{
    font-size:32px;
  }

  /* mobile: height = 3 lines (items window) */
  #gf-share-save-backdrop .gf-share-save-card-list{
    min-height:72px;
    max-height:72px;
  }
}

/* =========================================================
   HOVER SHADOWS — restore for Login and Share buttons
   (mouse/trackpad only, no sticky hover on touch devices)
   ========================================================= */

#gf-login-modal-backdrop .gf-login-btn,
#fs3-share-modal-backdrop #fs3-share-copy,
#fs3-share-modal-backdrop #fs3-share-cancel{
  transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

@media (hover:hover) and (pointer:fine){
  #gf-login-modal-backdrop .gf-login-btn:hover,
  #fs3-share-modal-backdrop #fs3-share-copy:hover,
  #fs3-share-modal-backdrop #fs3-share-cancel:hover{
    box-shadow:0 12px 28px rgba(15,23,42,.18);
    transform:translateY(-1px);
  }
}

#gf-login-modal-backdrop .gf-login-btn:active,
#fs3-share-modal-backdrop #fs3-share-copy:active,
#fs3-share-modal-backdrop #fs3-share-cancel:active{
  box-shadow:0 8px 18px rgba(15,23,42,.14);
  transform:translateY(0);
}

/* =========================================================
   NESTED TASK DELETE CONFIRMATION — scoped modal
   ========================================================= */
#fs3-nested-delete-modal-backdrop .fs3-modal{
  background:#FFFFFF;
  border-radius:20px;
  padding:48px 60px;
  box-shadow:0 18px 45px rgba(15,23,42,.35);
  box-sizing:border-box;
  font-family:"Noah", sans-serif;
  text-align:center;
  width:fit-content;
  max-width:calc(100vw - 40px);
}

#fs3-nested-delete-modal-backdrop .fs3-modal-title{
  margin:0 0 16px 0;
  font-size:32px !important;
  line-height:1.1 !important;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#0C0F1C;
}

#fs3-nested-delete-modal-backdrop .fs3-modal-text{
  max-width:420px;
  margin:0 0 28px 0;
  font-size:18px;
  line-height:1.35;
  color:rgba(12,15,28,.85);
}

#fs3-nested-delete-modal-backdrop .fs3-modal-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  width:100%;
}

#fs3-nested-delete-modal-backdrop .fs3-modal-btn{
  height:56px;
  padding:0 28px;
  border-radius:12px;
  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  background-clip:padding-box;
  transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  flex:1 1 0;
  min-width:max-content;
}

#fs3-nested-delete-modal-backdrop #fs3-nested-delete-cancel{
  background:#3F52B3;
  color:#FFFFFF;
  border:1px solid #3F52B3;
}

#fs3-nested-delete-modal-backdrop #fs3-nested-delete-cancel:hover{
  box-shadow:0 12px 28px rgba(15,23,42,.18);
  transform:translateY(-1px);
}

#fs3-nested-delete-modal-backdrop #fs3-nested-delete-cancel:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(15,23,42,.14);
}

#fs3-nested-delete-modal-backdrop #fs3-nested-delete-confirm{
  background:#FFFFFF;
  color:#3F52B3;
  border:1px solid #3F52B3;
  box-shadow:none;
}

#fs3-nested-delete-modal-backdrop #fs3-nested-delete-confirm:hover{
  background:#FFFFFF;
  box-shadow:0 4px 10px rgba(56,46,44,.20);
  transform:translateY(-1px);
}

#fs3-nested-delete-modal-backdrop #fs3-nested-delete-confirm:active{
  background:#F9FAFB;
  box-shadow:0 2px 6px rgba(56,46,44,.25);
  transform:translateY(0);
}

@media (max-width:768px){
  #fs3-nested-delete-modal-backdrop .fs3-modal{
    padding:48px 30px;
    max-width:calc(100vw - 32px);
  }

  #fs3-nested-delete-modal-backdrop .fs3-modal-actions{
    flex-direction:column;
    gap:12px;
  }

  #fs3-nested-delete-modal-backdrop .fs3-modal-btn{
    width:100%;
    flex:0 0 auto;
    min-width:0;
  }
}

/* Keep the branch compare question panel aligned with the responsive topbar gutters. */
@media (max-width:1030px){
  body.gf-branch-mode .fs3-qcard .fs3-body{
    padding-left:32px !important;
    padding-right:32px !important;
  }
}

@media (max-width:768px){
  body.gf-branch-mode .fs3-qcard .fs3-body{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}