/* Fixboard components: status colours, badges, tags, cards, skeletons,
   empty states, banners, toasts, dialogs, the lightbox, the redaction tool,
   screenshot grids and Markdown content. */

/* ------------------------------------------------------------ status colour sets */

.is-open { --c: var(--st-open); --c-bg: var(--st-open-bg); --c-ink: var(--st-open-ink); }
.is-in_progress { --c: var(--st-progress); --c-bg: var(--st-progress-bg); --c-ink: var(--st-progress-ink); }
.is-needs_info { --c: var(--st-needs); --c-bg: var(--st-needs-bg); --c-ink: var(--st-needs-ink); }
.is-resolved { --c: var(--st-fixed); --c-bg: var(--st-fixed-bg); --c-ink: var(--st-fixed-ink); }
.is-partial { --c: var(--st-partial); --c-bg: var(--st-partial-bg); --c-ink: var(--st-partial-ink); }
.is-declined { --c: var(--st-declined); --c-bg: var(--st-declined-bg); --c-ink: var(--st-declined-ink); }

.status-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-bg); color: var(--c);
}
.status-mark--sm { width: 30px; height: 30px; }
.status-mark.is-resolved { background: var(--st-fixed-mark); color: #FFFFFF; }
.status-mark.is-resolved .icon { stroke-width: 3; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill);
  background: var(--c-bg, var(--surface-3)); color: var(--c-ink, var(--text-2));
  font-size: 0.875rem; font-weight: 650; line-height: 1.3; white-space: nowrap;
}
.badge .icon { color: var(--c, currentColor); }
.badge--sm { padding: 2px 8px 2px 6px; font-size: 0.8125rem; gap: 4px; }
.badge--lg { padding: 7px 14px 7px 10px; font-size: 0.9375rem; gap: 8px; }
.badge--lg.is-resolved { background: var(--st-fixed-solid); color: #FFFFFF; }
.badge--lg.is-resolved .icon { color: #FFFFFF; stroke-width: 3; }

/* A chip never grows past its row: a long "Other" project name ends in an
   ellipsis (the full name is in the title and on the issue page). */
.chip {
  display: inline-block; vertical-align: middle; max-width: 100%; min-width: 0;
  padding: 2px 9px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-2);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 650; line-height: 1.5; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.tag--warn { background: var(--urgent-bg); color: var(--urgent-ink); }
.tag--mine { background: var(--brand-wash); color: var(--brand-ink); }
.tag--team { background: var(--brand-wash); color: var(--brand-ink); padding: 1px 7px; }
.tag--hidden { background: var(--surface-3); color: var(--text-2); border: 1px dashed var(--border-mid); }
.urgency-tag.is-blocking { background: var(--urgent-bg); color: var(--urgent-ink); }
.urgency-tag.is-high { background: var(--high-bg); color: var(--high-ink); }

.fact { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 0.875rem; white-space: nowrap; }
.fact .icon { flex-shrink: 0; }
.fact--kind { color: var(--text-2); }
.fact--good { color: var(--st-fixed-ink); font-weight: 600; }
.fact--warn { color: var(--urgent-ink); font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}

/* ------------------------------------------------------------ issue cards */

.issue-list { display: flex; flex-direction: column; gap: 10px; }
.issue-card {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.issue-card::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--c, transparent);
}
@media (hover: hover) {
  a.issue-card:hover { border-color: var(--border-mid); box-shadow: var(--shadow-2); transform: translateY(-1px); }
  a.issue-card:hover .issue-card__title { color: var(--brand-ink); }
}
.issue-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.issue-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 0.875rem; }
.issue-card__status { font-weight: 700; color: var(--c-ink); }
.issue-card__id { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.issue-card__title { font-size: 1.0625rem; line-height: 1.35; font-weight: 650; color: var(--text); overflow-wrap: anywhere; transition: color 0.15s var(--ease); }
/* Byline and time. Each part starts with a --sep wide gap that holds the
   dot; the row is shifted left by --sep and clipped there, so the part
   that starts a line loses its gap and dot. No line ever begins with "·". */
.issue-card__meta {
  --sep: 1.15em;
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin-left: calc(var(--sep) * -1); clip-path: inset(0 0 0 var(--sep));
  color: var(--text-3); font-size: 0.875rem;
}
.issue-card__meta > * { position: relative; min-width: 0; padding-left: var(--sep); }
.issue-card__meta .dot { position: absolute; left: 0; width: var(--sep); text-align: center; }
.issue-card__by { overflow-wrap: anywhere; }
.issue-card__when { white-space: nowrap; }
.issue-card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 2px; }
.fact__short { display: none; }
.issue-card__chevron { display: none; align-self: center; color: var(--text-3); }
.dot { color: var(--text-3); }
@media (min-width: 720px) {
  .issue-card { padding: 18px 20px; gap: 16px; }
  .issue-card__chevron { display: block; }
}

/* Phones and short landscape screens: a denser card, so a phone shows
   several reports at once. The status mark shrinks into the first line,
   the text takes the full width, the kind is one word and counts show as
   icon and number (the word stays for screen readers). */
@media (max-width: 559px), (orientation: landscape) and (max-height: 500px) {
  .issue-list { gap: 8px; }
  .issue-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 8px; padding: 12px 14px; }
  .issue-card::before { top: 12px; bottom: 12px; }
  .issue-card__body { display: contents; }
  .issue-card > .status-mark { grid-area: 1 / 1; width: 22px; height: 22px; margin-top: 1px; }
  .issue-card > .status-mark .icon { width: 14px; height: 14px; }
  .issue-card__top { grid-area: 1 / 2; gap: 4px 8px; }
  .issue-card__title, .issue-card__meta, .issue-card__facts { grid-column: 1 / -1; }
  .issue-card__title { font-size: 1rem; }
  .issue-card__facts { gap: 4px 12px; margin-top: 0; }
  .issue-card .chip, .issue-card .tag { padding-top: 1px; padding-bottom: 1px; line-height: 1.4; }
  /* A very long name or "for" line stops at two lines (the issue page has
     it in full), so one report never fills the screen. */
  .issue-card__by { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .issue-card__chevron { display: none; }
  .fact__long { display: none; }
  .fact__short { display: inline; }
  .fact__word {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .issue-card.is-skeleton { display: flex; gap: 10px; }
  .issue-card.is-skeleton .issue-card__body { display: flex; }
  .issue-card.is-skeleton .skeleton--circle { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------ skeletons */

.skeleton {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 40%, var(--skeleton) 80%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton--circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton--line { height: 12px; }
.skeleton--short { width: 30%; }
.skeleton--mid { width: 55%; }
.skeleton--title { height: 18px; width: 80%; }
.skeleton--heading { height: 28px; width: 70%; }
.skeleton--block { height: 140px; border-radius: var(--radius-lg); }
.is-skeleton { pointer-events: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------ empty and error states */

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 40px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px dashed var(--border-mid);
}
.empty--page { margin-top: 24px; padding: 56px 20px; }
.empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-wash); color: var(--brand-ink);
}
.empty__title { font-size: 1.125rem; font-weight: 700; }
.empty--page .empty__title { font-size: 1.375rem; }
.empty__text { color: var(--text-2); max-width: 44ch; }
.empty .btn { margin-top: 6px; }

/* ------------------------------------------------------------ banners */

.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid transparent;
}
.banner__icon { flex-shrink: 0; margin-top: 1px; }
.banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.banner__title { font-size: 1.0625rem; font-weight: 700; }
.banner__meta { font-size: 0.875rem; }
.banner__close { margin: -8px -8px -8px 0; color: inherit; }
.banner .btn { align-self: flex-start; }
.banner--success { background: var(--st-fixed-bg); color: var(--st-fixed-ink); border-color: rgba(22, 163, 74, 0.3); align-items: center; }
.banner--success .banner__text { display: block; }
.banner--needs { background: var(--st-needs-bg); color: var(--st-needs-ink); border-color: rgba(217, 119, 6, 0.35); }
.banner--needs .banner__question { color: var(--text); font-size: 1.0625rem; }
.banner--hidden { background: var(--surface-3); color: var(--text-2); border: 1px dashed var(--border-mid); align-items: center; }

.form-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--danger-wash); color: var(--danger); border: 1px solid var(--danger-border);
  font-weight: 600;
}
.form-alert .icon { flex-shrink: 0; margin-top: 1px; }

/* ------------------------------------------------------------ toasts */

.toasts {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90;
  transform: translateX(-50%); width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border-radius: var(--radius);
  background: #111827; color: #F8FAFC; box-shadow: var(--shadow-3);
  pointer-events: auto; animation: toast-in 0.22s var(--ease);
}
.toast__text { flex: 1; font-weight: 600; font-size: 0.9375rem; }
.toast__icon { flex-shrink: 0; }
.toast--success .toast__icon { color: #4ADE80; }
.toast--error .toast__icon { color: #FF8A80; }
.toast--info .toast__icon { color: #93B1FF; }
.toast__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: #CBD5E1; }
@media (hover: hover) { .toast__close:hover { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; } }
.toast--leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ dialog */

.dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 24px; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
}
.dialog::backdrop { background: var(--backdrop); }
.dialog[open] { animation: pop-in 0.18s var(--ease); }
.dialog__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 12px;
  background: var(--st-needs-bg); color: var(--st-needs);
}
.dialog__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.dialog__body { display: flex; flex-direction: column; gap: 10px; color: var(--text-2); }
.dialog__list { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; }
.dialog__match { color: var(--text); font-family: var(--font-mono); font-size: 0.9375em; overflow-wrap: anywhere; }
.dialog__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (max-width: 480px) { .dialog__actions .btn { flex: 1 1 140px; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ lightbox */

.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #05070D; color: #F8FAFC;
}
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox::backdrop { background: #05070D; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px 16px;
}
.lightbox__bar-actions { display: flex; align-items: center; gap: 8px; }
.lightbox__count { font-weight: 700; font-variant-numeric: tabular-nums; color: #E2E8F0; }
.lightbox__open {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border-radius: 999px; color: #E2E8F0; font-weight: 600; font-size: 0.875rem; text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
}
@media (hover: hover) { .lightbox__open:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; } }
.lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 8px; touch-action: pan-y; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; }
.lightbox__prev, .lightbox__next { position: fixed; top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 10px; }
.lightbox__next { right: 10px; }
.lightbox__footer { padding: 10px 16px max(14px, env(safe-area-inset-bottom)); text-align: center; min-height: 44px; }
.lightbox__caption { color: #E2E8F0; max-width: 70ch; margin: 0 auto; }
.lightbox__close { background: rgba(255, 255, 255, 0.12); }
@media (hover: hover) { .lightbox__close:hover { background: rgba(255, 255, 255, 0.24); } }
/* Previous and next sit on top of the screenshot, which may be white or
   black, so they carry their own dark disc and a light ring. */
.lightbox__prev, .lightbox__next { background: rgba(8, 12, 22, 0.82); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4); }
@media (hover: hover) { .lightbox__prev:hover, .lightbox__next:hover { background: rgba(8, 12, 22, 0.95); } }

/* ------------------------------------------------------------ redaction tool */

.redactor {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #0B0F19; color: #F1F5F9;
}
.redactor[open] { display: grid; grid-template-rows: auto 1fr auto auto; }
.redactor::backdrop { background: #0B0F19; }
.redactor__head { padding: max(12px, env(safe-area-inset-top)) 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.redactor__title { font-size: 1.125rem; font-weight: 700; }
.redactor__help { color: #CBD5E1; font-size: 0.9375rem; }
.redactor__note { color: #FCD34D; font-size: 0.875rem; font-weight: 600; }
.redactor__stage { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.redactor__canvas { touch-action: none; cursor: crosshair; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); background: #FFFFFF; }
.redactor__error { margin: 0 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(240, 68, 56, 0.2); color: #FFB4AB; font-weight: 600; }
.redactor__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.redactor__tools, .redactor__actions { display: flex; gap: 8px; }
.redactor__actions { margin-left: auto; }
.redactor .btn--secondary { background: rgba(255, 255, 255, 0.08); color: #F1F5F9; border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
@media (hover: hover) { .redactor .btn--secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); } }
.redactor .btn--ghost { color: #E2E8F0; }
@media (hover: hover) { .redactor .btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; } }

/* ------------------------------------------------------------ screenshot grid */

.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.shot-grid--sm { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.shot-grid--lg { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.shot { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shot__open {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.shot__open img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.25s var(--ease); }
.shot-grid--lg .shot__open img { object-fit: contain; object-position: center; }
@media (hover: hover) {
  .shot__open:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
  .shot__open:hover img { transform: scale(1.02); }
}
.shot__missing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; padding: 8px; color: var(--text-3); font-size: 0.8125rem; font-weight: 600; text-align: center;
}
.shot__caption { font-size: 0.875rem; color: var(--text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shot__hidden { position: absolute; top: 8px; left: 8px; background: var(--surface); }
.shot.is-hidden .shot__open img { opacity: 0.45; filter: grayscale(1); }
.shot__toggle { align-self: flex-start; margin-top: auto; }

/* ------------------------------------------------------------ text content */

.plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.md { display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.md h3 { font-size: 1.125rem; font-weight: 700; margin-top: 4px; }
.md h4 { font-size: 1.0625rem; font-weight: 700; margin-top: 2px; }
.md h5 { font-size: 1rem; font-weight: 700; }
.md ul, .md ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; }
.md li > ul, .md li > ol { margin-top: 4px; }
.md code { padding: 1px 5px; border-radius: 5px; background: var(--code-bg); }
.md pre { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--code-bg); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md blockquote { padding: 2px 0 2px 14px; border-left: 3px solid var(--border-mid); color: var(--text-2); display: flex; flex-direction: column; gap: 8px; }
.md a, .plain a { overflow-wrap: anywhere; }