/* Fact check (Figma frame 49:3389): five counts, then the essay beside its
   findings. The essay is the design's example until you click it, type or
   paste; then it's a box you can always type in. */

/* the counts */
.fc-summary { display: flex; gap: 12px; }
.fc-count {
  display: flex; flex: 1 0 0; align-items: center; gap: 8px; min-width: 0;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; white-space: nowrap;
}
.fc-count b { font-size: 20px; font-weight: 700; line-height: 24px; }
.fc-count span { color: var(--body); font-size: 13px; font-weight: 500; line-height: 16px; }
.fc-rule { flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }

/* the essay */
.fc-work { display: flex; align-items: flex-start; gap: 20px; }
.fc-editor { flex: 1 0 0; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.fc-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); background: #fbf8f4; }
.fc-bar > img { flex: none; width: 16px; height: 16px; }
.fc-file { flex: 1 0 0; min-width: 0; font-size: 13px; font-weight: 600; line-height: 16px; }
.fc-bar .status { padding: 4px 10px 4px 8px; font-size: 11px; line-height: 13px; }
.fc-text { display: flex; flex-direction: column; gap: 14px; padding: 26px 32px 30px; }
.fc-text:focus-visible { outline-offset: -6px; border-radius: 12px; }
.fc-text h2 { font-size: 21px; font-weight: 700; line-height: 25px; }
.fc-text p { font-size: 15px; line-height: 1.8; letter-spacing: -0.01px; } /* the design's line breaks, with the least drift along the line */
.fc-text p span { text-underline-offset: 0.23em; } /* Figma draws the underline 2 px lower than Chrome's default */
.fc-text .fc-flash { background: #fff0e3; border-radius: 3px; }
#fc-example, #fc-yours { cursor: text; }
/* the box: its text over a layer holding the same text, invisible, with each
   finding underlined. Both must wrap alike, so they share every text rule. */
.fc-box { position: relative; }
.fc-marks, .fc-box textarea {
  font: 400 15px/1.8 Inter, system-ui, sans-serif; letter-spacing: inherit;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.fc-marks { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
.fc-marks span { text-underline-offset: 0.23em; }
.fc-box textarea {
  position: relative; display: block; width: 100%; min-height: 215px; padding: 0; border: 0; outline: 0;
  overflow: hidden; resize: none; background: transparent; color: var(--ink);
}
.fc-box textarea::placeholder { color: var(--faint); opacity: 1; }

/* the findings */
.fc-findings {
  display: flex; flex: none; flex-direction: column; gap: 12px; width: 400px;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.fc-head { display: flex; align-items: center; gap: 8px; }
.fc-head img { flex: none; width: 20px; height: 20px; }
.fc-head h2 { flex: 1 0 0; min-width: 0; font-size: 15px; font-weight: 700; line-height: 18px; }
.fc-tabs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.fc-tabs button {
  display: flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 15px; white-space: nowrap;
  transition: background-color .15s ease;
}
.fc-tabs button span { color: var(--faint); font-weight: 500; }
/* Figma sizes each label to whole pixels and its Inter sets digits wider, so
   the tabs keep the design's widths and the row lines up with it */
.fc-tabs button { justify-content: center; }
.fc-tabs button:nth-child(1) { min-width: 48px; }
.fc-tabs button:nth-child(2) { min-width: 81px; }
.fc-tabs button:nth-child(3) { min-width: 99px; }
.fc-tabs button:nth-child(4) { min-width: 98px; }
.fc-tabs button:hover { background: #fbf8f4; }
.fc-tabs button[aria-pressed="true"] { border: 0; background: rgba(255, 87, 34, .12); color: #c2410c; }
.fc-tabs button[aria-pressed="true"] span { color: inherit; }
.fc-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.fc-quote { font-size: 13px; font-weight: 500; line-height: 20px; }
.fc-why { color: var(--body); font-size: 13px; line-height: 20px; }
.fc-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.fc-fold {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; text-align: left;
  transition: background-color .15s ease;
}
.fc-fold:hover { background: #fbf8f4; }
.fc-fold .bar { height: 30px; }
.fc-fold-text { display: flex; flex: 1 0 0; flex-direction: column; gap: 2px; min-width: 0; }
.fc-fold-text b { font-size: 13px; font-weight: 600; line-height: 16px; }
.fc-fold-text span { overflow: hidden; color: var(--faint); font-size: 12px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.fc-fold img { flex: none; width: 16px; height: 16px; }
.fc-empty { color: var(--faint); font-size: 13px; line-height: 1.5; }

/* a real check (fact-check.js): the findings it drew, and what a card holds */
.fc-list { display: flex; flex-direction: column; gap: 12px; }
.fc-list:empty { display: none; }
.fc-card .kind.k-red { color: var(--red); }
.fc-card .kind.k-blue { color: var(--blue); }
.fc-card .kind.k-amber { color: #a16207; } /* amber's own text is too light to read; its dot keeps the colour */
.fc-fix { color: var(--ink); font-size: 13px; line-height: 20px; }
.fc-fix b { font-weight: 600; }
.fc-sources { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.fc-src-head { padding-top: 8px; color: var(--faint); font-size: 11px; font-weight: 700; line-height: 14px; }
.fc-source { display: flex; flex-direction: column; gap: 3px; }
.fc-source a { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.fc-source a:hover { text-decoration-color: currentColor; }
.fc-source .meta { color: var(--faint); font-size: 12px; line-height: 15px; }
.fc-source .says { color: var(--body); font-size: 13px; line-height: 19px; }
.fc-source .says i { color: var(--faint); font-style: normal; }
.fc-more { align-self: flex-start; }
.fc-could { padding-top: 4px; }
.fc-could summary { color: var(--faint); font-size: 12px; font-weight: 600; line-height: 18px; cursor: pointer; }
.fc-could[open] { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 960px) {
  .fc-summary { flex-wrap: wrap; }
  .fc-count { flex: 1 0 150px; }
  .fc-work { flex-direction: column; align-items: stretch; }
  .fc-editor { flex: none; }
  .fc-findings { width: auto; }
}
@media (max-width: 640px) {
  .fc-text { padding: 20px 18px 22px; }
  .fc-text h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-tabs button, .fc-fold { transition: none; }
}