/* Persian adaptation of the original Fernly layout. The base stylesheet and
   its responsive layouts, sizes, colors and animation contracts are retained. */
@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { --font: Vazirmatn, system-ui, -apple-system, 'Segoe UI', sans-serif; }
html { direction: rtl; }
body { text-align: right; }
button, input, select, textarea { font-family: var(--font); }
.brand__name, .nav__label, .board__title, .card__title, .stat__title,
.reminder__what, .dlg__title, .task__title, .cal__label, .cal__eyebrow,
.cal__day, .member__name, .panel__name, .pane__title, .set-label,
.help__q, .help__contact-t, .promo__title, .menu__label,
.cal__dow span { letter-spacing: normal; }
.word { margin-bottom: -.18em; padding-bottom: .18em; }
.skip { left: auto; right: 16px; }
.sidebar__top { padding-right: 26px; padding-left: 22px; }
.nav__link, .profile, .menu__item, .day, .upnext button,
.donut__legend button, .member__load, .hcat, .faq__q { text-align: right; }
.nav__rail { left: auto; right: 0; border-radius: 6px 0 0 6px; }
.nav__badge, .topbar__actions, .col__count, .task__menu, .stack,
.donut__legend b, .panel__tasks small { margin-left: 0; margin-right: auto; }
.search input { padding-right: 50px; padding-left: 64px; }
.search__icon { left: auto; right: 18px; }
.search__kbd { right: auto; left: 12px; direction: ltr; }
.dot { right: auto; left: 14px; }
.profile { padding-right: 2px; padding-left: 6px; }
.profile__mail, input[type='email'], input[type='date'], input[type='time'],
.reminder__when time, .agenda__time,
.tracker__time, .dg, .dg__col, .dg-sep, .keys dt, .faq__a code {
  direction: ltr;
  unicode-bidi: isolate;
}
.profile__mail { text-align: right; }
.field input[type='email'], .field input[type='date'], .field input[type='time'] { text-align: left; }
.agenda__time { text-align: right; }
.agenda__time small { direction: rtl; }
.arrow svg, .cal__nav svg, .nav__link use[href='#i-logout'] { transform: scaleX(-1); transform-origin: center; }
.arrow:hover { transform: rotate(-45deg); }
.stack .avatar + .avatar { margin-left: 0; margin-right: -5px; }
.meter__fill { transform-origin: 100% 50%; }
.agenda li { box-shadow: inset -4px 0 0 var(--c); }
.status { right: auto; left: 2px; }
.tray { right: auto; left: -8px; transform-origin: 10% 0; }
.menu { transform-origin: 0 0; }
.panel { right: auto; left: 12px; box-shadow: 30px 0 80px -30px #131a1573; }
.panel__close { right: auto; left: 16px; }
.field select { background-position: left 14px center; padding-right: 14px; padding-left: 42px; }
.swatch { padding-right: 10px; padding-left: 16px; }
.faq__a { padding-right: 2px; padding-left: 40px; }
.keys dd { text-align: left; }

/* GSAP positions the shared filter pill using offsetLeft and x. Keep that
   coordinate system while reversing the visible order of the RTL buttons. */
.seg { direction: ltr; flex-direction: row-reverse; }
.seg__btn { direction: rtl; }
.seg__pill { direction: ltr; }
.switch { direction: ltr; }

/* Charts and floating tooltips use a physical left-origin coordinate system.
   Their Persian labels retain the surrounding RTL text direction. */
.chart, .chart__svg, .chart__x, .heat { direction: ltr; }
.chart__tip, .chart__x span, .bars__tip { direction: rtl; unicode-bidi: isolate; }
.donut__legend, .legend, .key { direction: rtl; }
.gauge__svg { transform: scaleX(-1); }

@media (width <= 1024px) {
  .sidebar {
    inset: 0 0 0 auto;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    transform: translateX(105%);
    box-shadow: -20px 0 60px -20px #131a1559;
  }
  .sidebar.is-open { transform: none; }
}
@media (width <= 720px) {
  .search input { padding-right: 50px; padding-left: 16px; }
  .dot { left: 11px; }
}

/* The page itself scrolls on the left. The right menu keeps a hairline
   scrollbar so the list can move without a visible bar. */
body:has(#app:not([hidden])) { overflow: hidden; }
#app:not([hidden]) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}
#app:not([hidden]) > .sidebar,
#app:not([hidden]) > .shell { min-height: 0; max-height: 100%; }
#app:not([hidden]) > .shell {
  direction: rtl;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--g-700) 55%, transparent) transparent;
}
#app:not([hidden]) > .shell::-webkit-scrollbar { width: 10px; }
#app:not([hidden]) > .shell::-webkit-scrollbar-track { background: transparent; }
#app:not([hidden]) > .shell::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--g-700) 42%, transparent);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: padding-box;
}
.sidebar, .sidebar__navs { scrollbar-width: none; }
.sidebar::-webkit-scrollbar, .sidebar__navs::-webkit-scrollbar { width: 2px; height: 2px; }
.sidebar::-webkit-scrollbar-track, .sidebar__navs::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, .sidebar__navs::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  border-radius: 99px;
}
[aria-labelledby="nav-space"]:not(:has(a)),
[aria-labelledby="nav-site"]:not(:has(a)) { display: none; }
#nav-talk::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--g-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-600) 16%, transparent);
  vertical-align: 1px;
}
.nav__link.is-lens { color: var(--g-950); font-weight: 700; }
.sf-pulse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 28px);
  margin: 4px 14px 12px;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.sf-pulse span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-pulse strong, .sf-pulse small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-pulse strong { font-size: 12px; font-weight: 700; }
.sf-pulse small { font-size: 10px; color: var(--muted); }
.sf-pulse__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--g-600);
}
.sf-pulse.is-live .sf-pulse__dot { animation: sf-pulse 2.2s ease-out infinite; }
.sf-pulse:hover { border-color: var(--g-400); }
.sf-pulse:focus-visible { outline: 2px solid var(--g-700); outline-offset: 3px; }
@keyframes sf-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-600) 45%, transparent); }
  100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-pulse.is-live .sf-pulse__dot { animation: none; }
}
.sf-startup{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:28px;text-align:center;background:var(--page);color:var(--ink)}
.sf-startup img{border-radius:14px}.sf-startup h1{font-size:22px;margin:0}.sf-startup p,.sf-startup noscript{font-size:13px;line-height:2;color:var(--muted)}
.sf-startup::after{content:"";width:24px;height:24px;border:2px solid var(--hair);border-top-color:var(--g-600);border-radius:50%;animation:sf-startup-spin 1s linear infinite}
@keyframes sf-startup-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sf-startup::after{animation:none}}