/* =========================================================
   FS3 CORE
   Base + layout skeleton + header + common buttons
   (no list, no qcard, no modals, no toast, no mobile)
   ========================================================= */

.fs3-shell{
  max-width: 900px;
  margin: 0 auto;
}

body.gf-branch-mode .fs3-shell{
  max-width: 100%;
}

@media (min-width: 769px){
  /* Keep the global header pinned to the first viewport while the branch canvas scrolls horizontally. */
  body.gf-branch-mode .gf-topbar{
    position:sticky;
    left:0;
    width:100vw;
    max-width:100vw;
  }
}

body.gf-branch-mode .fs3-body{
  padding-top: 0;
  padding-left: 60px;
  padding-right: 24px;
}

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

/* чтобы элементы со width:100% не выпирали из контейнера из-за padding/border */
.fs3,
.fs3 *,
.fs3 *::before,
.fs3 *::after{
  box-sizing: border-box;
}

.fs3,
.fs3 button,
.fs3 textarea,
.fs3 input{
  line-height: 1.45;
  font-family: "Noah", sans-serif;
}

.fs3 h3{
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0C0F1C;
  letter-spacing: 0.01em;
}

/* muted text */
.fs3-muted{
  color:#6b7280;
  font-size:13px;
}

/* card / body */
.fs3-card{
  background:#ffffff;
  border:none;
  border-radius:0;
  box-shadow:none;
  margin-bottom:18px;
}

/* общий левый край для всего контента */
.fs3-body{
  padding:32px 120px 28px 120px; /* top right bottom left */
}

.fs3-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* =========================================================
   Header + Title
   ========================================================= */

.fs3-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:24px;
}

/* блок кнопок всегда остаётся справа и не сжимается */
.fs3-header-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative; /* якорь для выпадающего меню */
}

/* ===== List title layout rules ===== */
#fs3-list-title{
  flex:1 1 auto;
  min-width:0;

  /* ограничение на 2 строки */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  overflow:hidden;
  white-space:normal;

  /* страховка для всех браузеров */
  line-height:1.35;
  max-height: calc(1.35em * 2);

  overflow-wrap:anywhere;
  word-break:break-word;

  cursor:text;
}

/* ===== Title hover hint (desktop only) ===== */
@media (hover:hover) and (pointer:fine){
  #fs3-list-title{
    transition: text-decoration-thickness .15s ease;
  }

  #fs3-list-title:hover{
    cursor:text;
    text-decoration: underline;
    text-underline-offset:4px;
    text-decoration-thickness:2px;
    text-decoration-color: currentColor;
  }

  /* во время редактирования — без подсказки */
  #fs3-list-title.fs3-title-editing{
    text-decoration: none;
  }
}

/* ===== Title editing: no blue outline, no gray background ===== */
.fs3-list-title:focus,
.fs3-list-title[contenteditable="true"]:focus{
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* when editing */
.fs3-list-title.fs3-title-editing{
  outline:none;
  padding:0;
  background:transparent;
}

/* =========================================================
   Buttons (common)
   ========================================================= */

/* PRIMARY */
.fs3-btn{
  min-height:56px;
  padding:0 32px;
  border-radius:9px;
  border:none;
  background:#3F52B3;
  color:#FFFFFF;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.fs3-btn:hover{
  background:#3F52B3;
  box-shadow:0 6px 16px rgba(56,46,44,.35);
  transform:translateY(-1px);
}
.fs3-btn[disabled],
.fs3-btn[disabled]:hover{
  background:#CECFD9;
  color:#FFFFFF;
  box-shadow:none;
  transform:none;
  cursor:default;
  opacity:.7;
}

/* SECONDARY */
.fs3-btn.secondary{
  background:#FFFFFF;
  color:#3F52B3;
  border:1px solid #3F52B3;
  box-shadow:none;
}
.fs3-btn.secondary:hover{
  background:#FFFFFF;
  color:#3F52B3;
  box-shadow:0 4px 10px rgba(56,46,44,.20);
}
.fs3-btn.secondary[disabled],
.fs3-btn.secondary[disabled]:hover{
  background:#FFFFFF;
  color:#CECFD9;
  border:1px solid #CECFD9;
  box-shadow:none;
  cursor:default;
}

/* icon buttons (copy/share/reset/clip/dots) */
.fs3-icon-btn{
  border-radius:18px;
  border:1px solid #CECFD9;
  background:#FFFFFF;
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:22px;
  color:#0C0F1C;
  transition:
    background .18s.ease,
    box-shadow .18s.ease,
    transform .18s.ease,
    border-color .18s.ease;
}
.fs3-icon-btn:hover{
  background:#FFFFFF;
  border-color:#3F52B3;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  transform:translateY(-1px);
}
.fs3-icon-btn img{
  max-width:22px;
  max-height:22px;
  pointer-events:none;
}
#fs3-import-btn img{
  max-width:15px;
  max-height:15px;
}
#fs3-import-btn:hover{
  background:#FFFFFF;
  border-color:#3F52B3;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  transform:translateY(-1px);
}
.fs3-icon-btn[disabled]{
  opacity:.4;
  cursor:default;
  pointer-events:none;
}

/* Compare link-style button */
#fs3-compare{
  min-height:auto;
  padding:0;
  margin-right:24px;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  font-family:"Noah", sans-serif;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#3F52B3;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  cursor:pointer;
}
#fs3-compare:hover{
  background:transparent;
  color:#3F52B3;
}
#fs3-compare[disabled]{
  opacity:.3;
  cursor:default;
  pointer-events:none;
}

/* pressed states (common) */
.fs3-btn:active:not([disabled]){
  background:#3F52B3;
  box-shadow:0 2px 6px rgba(56,46,44,.35);
  transform:translateY(0);
}

.fs3-btn.secondary:active:not([disabled]){
  background:#F9FAFB;
  border-color:#3F52B3;
  box-shadow:0 2px 6px rgba(56,46,44,.25);
  transform:translateY(0);
}

.fs3-icon-btn:active:not([disabled]){
  background:#F9FAFB;
  border-color:#3F52B3;
  box-shadow:0 2px 6px rgba(15,23,42,.18);
  transform:translateY(0);
}

#fs3-compare{
  transition: color .18s ease, transform .12s.ease, text-decoration-thickness .12s.ease;
}
#fs3-compare:active:not([disabled]){
  color:#3F52B3;
  text-decoration-thickness:2px;
  transform:translateY(1px);
}