/* ============================================
   Font selection study (Interactions board, frame 02)
   Deliberately its own look (a tool UI), not the portfolio design system.
   ============================================ */

.board-frame.board-frame--editor {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  cursor: default;
}

.fontsel {
  --fs-bg: #2C2C2C;
  --fs-bg-2: #383838;
  --fs-bg-3: #444444;
  --fs-line: #4A4A4A;
  --fs-text: #FFFFFF;
  --fs-dim: #A6A6A6;
  --fs-blue: #0D99FF;
  --fs-blue-2: #0C8CE9;
  --fs-ease: cubic-bezier(0.32, 0.72, 0.2, 1);
  --fs-spring: cubic-bezier(0.3, 1.4, 0.5, 1);

  position: relative;
  width: 100%;
  height: 100%;
  font-family: Inter, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fs-text);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

.fontsel button,
.fontsel input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.fontsel button { cursor: pointer; }

.fontsel svg { display: block; flex: none; }

.fontsel :focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 1px; }

/* --- Canvas with the selected text --- */
.fs-canvas {
  position: absolute;
  inset: 0 340px 0 0;
  background: #FFFFFF;
}

.fs-textwrap {
  position: absolute;
  left: 56px;
  width: 364px;
  top: 50%;
  transform: translateY(-50%);
  transition: top 0.5s var(--fs-ease), transform 0.5s var(--fs-ease);
}

.fs-textwrap[data-valign="top"] { top: 26%; }
.fs-textwrap[data-valign="bottom"] { top: 74%; }

.fs-sel {
  position: relative;
  padding: 6px 8px;
  border: 1.5px solid var(--fs-blue);
}

.fs-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #FFFFFF;
  border: 1.5px solid var(--fs-blue);
}
.fs-handle--tl { top: -5px; left: -5px; }
.fs-handle--tr { top: -5px; right: -5px; }
.fs-handle--bl { bottom: -5px; left: -5px; }
.fs-handle--br { bottom: -5px; right: -5px; }

.fs-text {
  margin: 0;
  color: #000000;
  line-height: 1.12;
  overflow-wrap: break-word;
  transition: font-size 0.3s var(--fs-ease), color 0.3s var(--fs-ease), text-align 0s;
}

.is-fill-off .fs-text { color: transparent; }

.fs-text.is-pop { animation: fs-pop 0.34s var(--fs-spring); }

@keyframes fs-pop {
  0% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.fs-dims {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  background: var(--fs-blue);
  color: #FFFFFF;
  font-size: 11px;
  white-space: nowrap;
}

/* --- Panels --- */
.fs-type,
.fs-fonts {
  background: var(--fs-bg);
  color: var(--fs-text);
}

.fs-type {
  position: absolute;
  inset: 0 0 0 auto;
  width: 340px;
  border-left: 1px solid #1E1E1E;
}

.fs-type__head,
.fs-fonts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
}

.fs-title { font-weight: 600; font-size: 14px; }

.fs-type__grid { color: var(--fs-dim); display: flex; }

.fs-type__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
}

.fs-row { display: flex; gap: 10px; }
.fs-row > * { flex: 1 1 0; min-width: 0; }
.fs-row .fs-size { flex: 0 0 96px; }
.fs-row .fs-select--style { flex: 1 1 0; }

.fs-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: var(--fs-bg-2);
  border-radius: 6px;
  font-size: 13.5px;
  transition: background-color 0.2s var(--fs-ease), border-color 0.2s var(--fs-ease);
}

.fs-field--select { width: 100%; justify-content: space-between; text-align: left; }
.fs-field--select svg { color: var(--fs-dim); transition: transform 0.3s var(--fs-ease); }
.fs-field--select:hover { background: var(--fs-bg-3); }
.fs-field--select[aria-expanded="true"] { border-color: var(--fs-blue); }
.fs-field--select[aria-expanded="true"] svg { transform: rotate(180deg); }
.fs-field--family.is-active { border-color: var(--fs-blue); }
.fs-field--family.is-active svg { transform: none; }

.fs-field--static { color: #E2E2E2; cursor: default; }
.fs-field__ico { display: flex; color: var(--fs-dim); }

.fs-size { padding: 0 6px 0 12px; }
.fs-size__input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.fs-size:focus-within { border-color: var(--fs-blue); }
.fs-size__input::-webkit-inner-spin-button,
.fs-size__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.fs-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--fs-bg-2);
  border-radius: 6px;
}

.fs-tool {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--fs-dim);
  transition: background-color 0.25s var(--fs-ease), color 0.25s var(--fs-ease);
}

.fs-tool:hover { color: var(--fs-text); }
.fs-tool.is-on { background: var(--fs-bg-3); color: var(--fs-text); }

.fs-block { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--fs-line); display: flex; flex-direction: column; gap: 10px; }
.fs-block--line { margin-top: 0; padding-top: 12px; padding-bottom: 2px; }
.fs-block__head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13.5px; }
.fs-block__ico { display: flex; color: var(--fs-dim); }

.fs-fill { display: flex; align-items: center; gap: 10px; color: #E2E2E2; font-size: 13px; }
.fs-fill__swatch { width: 18px; height: 18px; background: #000000; border: 1px solid var(--fs-line); }
.fs-fill__hex { flex: 1; }
.fs-fill__op { color: var(--fs-dim); }

.fs-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fs-dim);
  transition: background-color 0.2s var(--fs-ease), color 0.2s var(--fs-ease);
}
.fs-iconbtn:hover { background: var(--fs-bg-3); color: var(--fs-text); }
.fs-iconbtn--eye { color: #E2E2E2; }
.fs-iconbtn--eye:not(.is-on) { color: var(--fs-dim); opacity: 0.6; }

/* --- Fonts panel --- */
.fs-fonts {
  position: absolute;
  left: 476px;
  top: 52px;
  width: 372px;
  height: 616px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 18px 48px rgba(0, 0, 0, 0.35);
  transform-origin: 100% 0;
  transition: transform 0.5s var(--fs-spring), opacity 0.28s var(--fs-ease), visibility 0s;
}

.fs-fonts[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  transform: translate(18px, -6px) scale(0.94);
  transition: transform 0.36s var(--fs-ease), opacity 0.24s var(--fs-ease), visibility 0s 0.36s;
}

.fs-search {
  position: relative;
  display: block;
  margin: 0 14px 10px;
}

.fs-search__icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--fs-dim);
  pointer-events: none;
}

.fs-search__input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1.5px solid var(--fs-line);
  border-radius: 6px;
  background: var(--fs-bg-2);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  transition: border-color 0.25s var(--fs-ease), background-color 0.25s var(--fs-ease);
}

.fs-search__input::placeholder { color: var(--fs-dim); }
.fs-search__input:focus { border-color: var(--fs-blue); }

.fs-select { position: relative; }

.fs-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: 8px;
  background: #1E1E1E;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 36px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  transition: transform 0.3s var(--fs-spring), opacity 0.18s var(--fs-ease), visibility 0s 0.3s;
}

.fs-select[data-open="true"] .fs-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 0.34s var(--fs-spring), opacity 0.2s var(--fs-ease), visibility 0s;
}

.fs-menu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  font-size: 13.5px;
  transition: background-color 0.12s linear;
}

.fs-menu__item:hover,
.fs-menu__item:focus-visible { background: var(--fs-blue-2); outline: none; }

.fs-menu__check {
  display: flex;
  width: 16px;
  margin-top: -1px;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s var(--fs-ease), transform 0.3s var(--fs-spring);
}
.fs-menu__item.is-on .fs-menu__check { opacity: 1; transform: none; }

.fs-menu__sep { height: 1px; margin: 6px -6px; background: rgba(255, 255, 255, 0.12); }

/* --- Body: category tiles on top, the fonts of the chosen category (or search results) below --- */
.fs-body {
  --grid-h: 196px;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 14px 14px;
}

.fs-body[data-mode="search"] { --grid-h: 0px; }

.fs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: var(--grid-h);
  overflow: hidden;
  transition: height 0.55s var(--fs-ease), opacity 0.35s var(--fs-ease);
}

.fs-body[data-mode="search"] .fs-grid { opacity: 0; pointer-events: none; }

.fs-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: var(--fs-bg-2);
  transition: transform 0.35s var(--fs-spring), background-color 0.2s var(--fs-ease), border-color 0.25s var(--fs-ease), opacity 0.3s var(--fs-ease);
}

.fs-tile:hover { background: var(--fs-bg-3); }
.fs-tile:active { transform: scale(0.97); }
.fs-tile.is-on { border-color: var(--fs-blue); }
.fs-body[data-has-cat="true"] .fs-tile:not(.is-on) { opacity: 0.6; }
.fs-body[data-has-cat="true"] .fs-tile:not(.is-on):hover { opacity: 1; }

.fs-tile__aa { font-size: 20px; line-height: 1; height: 24px; display: flex; align-items: center; }
.fs-tile__name { font-size: 13px; font-weight: 600; white-space: nowrap; }

.fs-list {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  top: calc(var(--grid-h) + 12px);
  display: flex;
  flex-direction: column;
  transition: top 0.55s var(--fs-ease);
}

.fs-body[data-mode="search"] .fs-list { top: 0; }

.fs-list.is-in > * { animation: fs-in 0.45s var(--fs-ease) both; }
.fs-list.is-in > .fs-scroll { animation-delay: 0.05s; }

@keyframes fs-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

.fs-label { padding: 2px 2px 8px; font-size: 12px; color: var(--fs-dim); }

.fs-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

.fs-empty { padding: 28px 8px; text-align: center; color: var(--fs-dim); font-size: 13px; }

/* font rows */
.fs-fam {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 12px 0 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  transition: background-color 0.2s var(--fs-ease);
}

.fs-fam + .fs-fam { margin-top: 3px; }
.fs-fam:hover { background: rgba(255, 255, 255, 0.07); }
.fs-fam.is-current { background: rgba(255, 255, 255, 0.1); }

.fs-fam__name { flex: 1; font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Centre the capital letters in the row whatever font the name is set in (where supported) */
@supports (text-box: trim-both cap alphabetic) {
  .fs-fam__name { text-box: trim-both cap alphabetic; }
}

.fs-fam__check {
  position: absolute;
  left: 11px;
  top: 50%;
  display: flex;
  margin-top: -6.5px;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s var(--fs-ease), transform 0.4s var(--fs-spring);
}
.fs-fam.is-current .fs-fam__check { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fontsel *, .fontsel *::before { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ============================================
   Collaborator cursor: the site's own pointer, in a colour with a name tag.
   ============================================ */
.fs-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  pointer-events: none;
  display: none;
  will-change: transform;
  font-family: Inter, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.fs-cursor.is-on { display: block; }

.fs-cursor__svg {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 40px;
  height: 40px;
  max-width: none;
  overflow: visible;
}

.fs-cursor__shape {
  fill: var(--color-cursor, #2A211C);
  stroke: var(--color-cursor-stroke, #FFFCFA);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
  transition: fill 0.18s ease, stroke 0.18s ease;
}

.fs-cursor.is-figma .fs-cursor__shape { fill: var(--fs-cursor); stroke: #FFFFFF; }

.fs-cursor__tag {
  position: absolute;
  top: 15px;
  left: 9px;
  padding: 3px 8px 4px;
  border-radius: 4px;
  background: var(--fs-cursor);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 0 0;
  transition: transform 0.14s ease, opacity 0.1s ease;
}

.fs-cursor.is-figma .fs-cursor__tag {
  opacity: 1;
  transform: none;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.16s ease;
}

.fs-cursor.is-down .fs-cursor__shape { fill: var(--fs-cursor); }

/* the site's own cursor steps aside while this one is on */
body.fs-cursor-on .site-cursor { opacity: 0 !important; }
body.fs-cursor-on,
body.fs-cursor-on * { cursor: none !important; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .fs-cursor { display: none !important; }
}