/* TEMVIO v1.3.3 — Mobile UX Final Polish */

/* 1) Guide / employer CTA: keep all content inside its surface. */
.temvio-guide-role{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  padding:18px!important;
  margin:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
}
.temvio-guide-role>div{
  min-width:0!important;
  gap:6px!important;
}
.temvio-guide-role>div b,
.temvio-guide-role>div span{
  overflow-wrap:anywhere!important;
}
.temvio-guide-role .btn{
  box-sizing:border-box!important;
  width:auto!important;
  max-width:100%!important;
  min-width:160px!important;
  margin:0!important;
  white-space:nowrap!important;
}
@media(max-width:620px){
  .temvio-guide-role{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:16px!important;
  }
  .temvio-guide-role .btn{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    align-items:center!important;
    min-height:52px!important;
  }
}

/* 2) Keyboard / form visibility.
   Actual bottom reserve makes the last textarea/password scrollable ABOVE the IME. */
html.temvio-keyboard-open.temvio-form-composing .modal-wrap:not(.hidden){
  overflow:hidden!important;
}
html.temvio-keyboard-open.temvio-form-composing .modal-wrap:not(.hidden) .modal{
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding-bottom:var(--temvio-form-keyboard-reserve,220px)!important;
  scroll-padding-top:24px!important;
  scroll-padding-bottom:var(--temvio-form-keyboard-reserve,220px)!important;
}
html.temvio-keyboard-open.temvio-form-composing .modal .field:has(input:focus),
html.temvio-keyboard-open.temvio-form-composing .modal .field:has(textarea:focus),
html.temvio-keyboard-open.temvio-form-composing .modal .field:has(select:focus){
  scroll-margin-top:20px!important;
  scroll-margin-bottom:100px!important;
}
html.temvio-keyboard-open #postDescription:focus,
html.temvio-keyboard-open #bidCover:focus,
html.temvio-keyboard-open #inviteNote:focus{
  min-height:138px!important;
  max-height:168px!important;
  overflow-y:auto!important;
}
html.temvio-keyboard-open #authPassword:focus,
html.temvio-keyboard-open #authEmail:focus{
  scroll-margin-bottom:150px!important;
}
@media(max-height:720px){
  html.temvio-keyboard-open.temvio-form-composing .modal-wrap:not(.hidden) .modal{
    padding-bottom:190px!important;
  }
  html.temvio-keyboard-open #postDescription:focus{
    min-height:112px!important;
    max-height:138px!important;
  }
}

/* 3) Stronger and consistent More-page iconography. */
.more-grid{
  gap:12px!important;
}
.more-card{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:154px!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:14px!important;
  overflow:hidden!important;
}
html[dir="rtl"] .more-card{align-items:flex-end!important}
.temvio-more-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  flex:0 0 46px;
  color:#5657dd;
  background:
    radial-gradient(circle at 82% 18%,rgba(43,212,178,.25),transparent 42%),
    linear-gradient(145deg,#f1efff,#eef9f7);
  border:1px solid rgba(91,92,226,.12);
  box-shadow:0 8px 22px rgba(60,62,130,.08);
}
.temvio-more-icon svg{
  width:24px;
  height:24px;
  display:block;
}
.more-card-copy{
  display:grid;
  gap:7px;
  min-width:0;
}
.more-card-copy b{
  margin:0!important;
  font-size:15px!important;
  line-height:1.55!important;
}
.more-card-copy .caption{
  line-height:1.85!important;
}
@media(max-width:390px){
  .more-grid{gap:9px!important}
  .more-card{padding:14px!important;min-height:144px!important;gap:11px!important}
  .temvio-more-icon{width:42px;height:42px;border-radius:13px;flex-basis:42px}
  .temvio-more-icon svg{width:22px;height:22px}
}

/* 4) Workspace card spacing: progress bar, metrics, badge and CTA are separate rows. */
.workspace-card{
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:18px!important;
}
.workspace-card .caption{
  margin-top:14px!important;
  line-height:1.8!important;
}
.workspace-card .healthbar{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:8px!important;
  margin:18px 0 16px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  flex:none!important;
}
.workspace-card .healthbar i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
}
.workspace-card .pc-metrics{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
}
.workspace-card .pc-metric{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:108px!important;
  padding:16px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.workspace-card .pc-metric strong{
  line-height:1!important;
}
.workspace-card-actions{
  box-sizing:border-box!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:16px!important;
  padding-top:16px!important;
  border-top:1px solid var(--line)!important;
}
.workspace-card-actions .workspace-badge{
  margin:0!important;
  white-space:nowrap!important;
}
.workspace-card-actions .btn{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  min-height:46px!important;
  white-space:normal!important;
}
@media(max-width:430px){
  .workspace-card{padding:15px!important}
  .workspace-card .pc-metrics{gap:9px!important}
  .workspace-card .pc-metric{padding:13px!important;min-height:98px!important}
  .workspace-card-actions{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .workspace-card-actions .workspace-badge{
    justify-self:start!important;
  }
}

/* Keep floating + button clear of important card actions. */
@media(max-width:680px){
  .workspace-list{
    padding-bottom:96px!important;
  }
}