/* Reusable UI components */

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo {
  width: auto;
  height: 32px;
}

.brand__logo--small {
  height: 22px;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: -4px;
}

.button:active {
  transform: translateY(0);
}

.button--primary {
  background: var(--black);
  color: var(--white);
}

.button--primary:hover {
  background: var(--black-72);
}

.button--outline {
  border-color: var(--black);
  background: transparent;
  color: var(--black);
}

.button--outline:hover {
  background: var(--black);
  color: var(--white);
}

.button--inverse {
  background: var(--white);
  color: var(--black);
}

.button--inverse:hover {
  background: var(--gray);
}

.button--small {
  min-height: 42px;
  padding: 0 20px;
  font-size: var(--text-sm);
}

.button--block {
  width: 100%;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}

/* Labels */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1.5px solid var(--black);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

.tag--solid {
  background: var(--black);
  color: var(--white);
}

/* Segmented control: a fieldset of native radios */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: calc(var(--radius-sm) + 4px);
  background: var(--black-06);
}

.segmented label {
  position: relative;
}

.segmented input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented span {
  display: block;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.segmented input:checked + span {
  background: var(--black);
  color: var(--white);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/*
 * Device: the iPhone 17 Pro frame from Figma, with the screen cut out.
 * Percentages are the Figma "Screen" and "cntr" layers relative to the 464×956 frame.
 * --device-scale shrinks the app UI with the frame (1 at 360px wide).
 */
.device {
  --device-w: 360px;
  --device-scale: 1;
  position: relative;
  width: var(--device-w);
  aspect-ratio: 464.116 / 956;
  isolation: isolate;
}

/* The phone's shadow, on a shape matching the frame's outline. A drop-shadow
   filter on the whole device painted a grey box around the live feed in Chrome. */
.device::before {
  content: "";
  position: absolute;
  inset: 0 0.7%;
  z-index: -1;
  border-radius: 16% / 7.8%;
  box-shadow: 0 24px 32px rgba(26, 25, 27, 0.2);
}

.device__screen {
  position: absolute;
  top: 1.66%;
  left: 4.06%;
  width: 91.88%;
  height: 96.68%;
  overflow: hidden;
  border-radius: 13.13% / 6.06%;
  background: var(--white);
}

.device__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.device__island {
  position: absolute;
  top: 2.905%;
  left: 36.75%;
  width: 26.5%;
  height: 3.734%;
  border-radius: var(--radius-pill);
  background: var(--black);
}

/* X (Twitter) mobile UI rendered inside the device */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% / var(--device-scale));
  height: calc(100% / var(--device-scale));
  font-family: var(--font-x);
  transform: scale(var(--device-scale));
  transform-origin: top left;
}

.app__status {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 6px 28px 0 38px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.app__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.app__logo {
  width: 24px;
  height: 24px;
}

.app__tabs {
  display: flex;
  flex: none;
  border-bottom: 1px solid var(--black-12);
  font-size: 15px;
}

.app__tabs span {
  display: flex;
  flex: 1;
  justify-content: center;
  padding-top: 10px;
  color: var(--x-muted);
  font-weight: var(--weight-medium);
}

.app__tabs b {
  position: relative;
  padding-bottom: 10px;
  font-weight: inherit;
}

.app__tabs .is-active {
  color: var(--black);
  font-weight: var(--weight-bold);
}

.app__tabs .is-active b::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--black);
}

/* Feed plus the compose button that floats over its lower edge */
.app__main {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* A timeline scrolled to its newest post: posts join at the bottom and
   older ones are pushed up and out of the top */
.app__feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  overflow: hidden;
}

.app__item {
  display: grid;
  flex: none;
  grid-template-rows: 1fr;
  transition: grid-template-rows 650ms var(--ease), opacity 500ms var(--ease);
}

.app__item > * {
  min-height: 0;
  overflow: hidden;
}

.app__item.is-entering {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Hidden post: in its place in the timeline, only the gray "Hidden" card shows until revealed */
.x-post--hidden:not(.is-revealed) {
  padding-block: 8px;
}

.x-post--hidden:not(.is-revealed) > .x-post__avatar,
.x-post--hidden:not(.is-revealed) > .x-post__body {
  display: none;
}

.x-post__hidden {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: 14px;
  background: linear-gradient(var(--black-06), var(--black-06)), var(--white);
  color: var(--x-muted);
  font-size: 13px;
  line-height: 16px;
}

.x-post__hidden > img {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.62;
}

.x-post__hidden span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-post__hidden b {
  color: var(--black);
  font-weight: var(--weight-bold);
}

.x-post__hidden button {
  flex: none;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

/* Revealed: the bar steps aside to a small "Hide" button in the corner */
.x-post--hidden.is-revealed .x-post__hidden {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 0;
  background: none;
}

.x-post--hidden.is-revealed .x-post__hidden > :not(button) {
  display: none;
}

.x-post--hidden.is-revealed .x-post__hidden button {
  background: var(--black-06);
}

.app__nav {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  height: 58px;
  padding-bottom: 6px;
  border-top: 1px solid var(--black-12);
  background: var(--white);
}

.app__compose {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 8px 20px rgba(26, 25, 27, 0.24);
}

/* Post laid out like X: avatar column, name row, text, media, action bar */
.x-post {
  position: relative;
  display: flex;
  gap: 12px;
  width: 300px;
  padding: 12px 16px;
  border: 1px solid var(--black-12);
  border-radius: 16px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-x);
  font-size: 15px;
  line-height: 20px;
  text-align: left;
  box-shadow: var(--shadow-float);
}

.x-post > * {
  transition: filter 400ms var(--ease), opacity 400ms var(--ease);
}

.x-post__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.x-post__avatar--initials {
  background: var(--black);
  color: var(--white);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.x-post__body {
  flex: 1;
  min-width: 0;
}

.x-post__head {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Like X, the handle gives way before the name does */
.x-post__head strong {
  flex: none;
  max-width: 70%;
  overflow: hidden;
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
}

.x-post__head span {
  min-width: 0;
  overflow: hidden;
  color: var(--x-muted);
  text-overflow: ellipsis;
}

.x-post__badge {
  flex: none;
  width: 18px;
  height: 18px;
}

.x-post__more {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  opacity: 0.6;
}

.x-post__text {
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.x-post__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: 12px;
  border: 1px solid var(--black-12);
  border-radius: 16px;
  object-fit: cover;
}

/* A video post: its still with X's play button */
.x-post__video {
  position: relative;
  display: block;
}

.x-post__video::after {
  content: "";
  position: absolute;
  top: calc(50% + 6px);
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1D9BF0 url("../assets/icons/play-white.svg") 55% center / 18px no-repeat;
  translate: -50% -50%;
}

/* X's blue "Show more" after a long post */
.x-post__show-more {
  color: #1D9BF0;
}

/* An ad creative, built in HTML so it needs no stock image */
.x-post__media--ad {
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 16px;
  background: var(--black);
  color: var(--white);
}

.x-post__media--ad strong {
  font-family: var(--font);
  font-size: 24px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}

.x-post__media--ad span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 16px;
}

.x-post__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--x-muted);
  font-size: 13px;
  line-height: 16px;
}

.x-post__actions span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.x-post__actions img {
  width: 18px;
  height: 18px;
  opacity: 0.62;
}

.x-post__actions .x-post__end {
  gap: 12px;
}

.x-post--in-app {
  width: auto;
  border: 0;
  border-bottom: 1px solid var(--black-12);
  border-radius: 0;
  box-shadow: none;
}

/*
 * Tiho's scanner, added by js/hero.js while a post is being judged:
 * corner brackets frame the post, a beam sweeps over it once, a chip names the state.
 */
.scan-frame {
  --corner: linear-gradient(var(--black), var(--black));
  position: absolute;
  inset: -9px;
  background:
    var(--corner) top left / 20px 2px,
    var(--corner) top left / 2px 20px,
    var(--corner) top right / 20px 2px,
    var(--corner) top right / 2px 20px,
    var(--corner) bottom left / 20px 2px,
    var(--corner) bottom left / 2px 20px,
    var(--corner) bottom right / 20px 2px,
    var(--corner) bottom right / 2px 20px;
  background-repeat: no-repeat;
  opacity: 0;
  scale: 1.06;
  pointer-events: none;
  transition: opacity 300ms var(--ease), scale 400ms var(--ease);
}

.scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}

/* The beam is a full-height block whose bottom edge is the line; the gradient above it is the trail */
.scan__beam {
  position: absolute;
  inset: 0;
  border-bottom: 2px solid var(--black);
  background: linear-gradient(to bottom, transparent 55%, rgba(26, 25, 27, 0.1));
  box-shadow: 0 6px 14px -4px rgba(26, 25, 27, 0.35);
  translate: 0 -100%;
}

.x-post.is-scanning .scan-frame {
  opacity: 1;
  scale: 1;
}

.x-post.is-scanning .scan {
  opacity: 1;
}

.x-post.is-scanning .scan__beam {
  /* One pass per post; js/hero.js decides as the beam reaches the bottom */
  animation: scan-sweep 850ms cubic-bezier(0.45, 0, 0.4, 1) forwards;
}

/* Verdict reached: the beam stops, the frame stays on approved posts */
.x-post.is-approved .scan,
.x-post.is-flagged .scan,
.x-post.is-flagged .scan-frame {
  opacity: 0;
}

.x-post__chip {
  position: absolute;
  top: -14px;
  right: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1.5px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  opacity: 0;
  translate: 0 4px;
  transition: opacity 250ms var(--ease), translate 250ms var(--ease), background-color 250ms var(--ease),
    color 250ms var(--ease);
}

.x-post__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 900ms ease-in-out infinite alternate;
}

.x-post.is-scanning .x-post__chip {
  opacity: 1;
  translate: 0 0;
}

.x-post.is-approved .x-post__chip {
  background: var(--black);
  color: var(--white);
}

.x-post.is-approved .x-post__chip::before {
  width: 12px;
  height: 12px;
  background: url("../assets/icons/check-white.svg") center / contain no-repeat;
  animation: none;
}

.x-post__verdict {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  white-space: nowrap;
  /* left: 50% would otherwise cap the pill at half the card and clip its text */
  width: max-content;
  box-shadow: var(--shadow-float);
  opacity: 0;
  translate: -50% -50%;
  scale: 0.8;
  transition: opacity 300ms var(--ease), scale 400ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

.x-post__verdict img {
  width: 16px;
  height: 16px;
}

.x-post.is-flagged > .x-post__avatar,
.x-post.is-flagged > .x-post__body {
  opacity: 0.35;
  filter: blur(3px);
}

.x-post.is-flagged .x-post__verdict {
  opacity: 1;
  scale: 1;
}

@keyframes scan-sweep {
  0% { translate: 0 -100%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { translate: 0 0; opacity: 0; }
}

@keyframes pulse {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* Feed posts that Tiho can fold or remove */
.feed {
  display: flex;
  flex-direction: column;
}

/* Wrapper that folds away; the post inside is an X post (.x-post) */
.post {
  display: grid;
  grid-template-rows: 1fr;
  border-bottom: 1px solid var(--black-12);
  transition: grid-template-rows 360ms var(--ease), opacity 260ms var(--ease), border-color 260ms var(--ease);
}

.post__inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.post .x-post {
  border-bottom: 0;
  background: transparent;
}

.post.is-hidden {
  grid-template-rows: 0fr;
  border-color: transparent;
  opacity: 0;
}

/* Tiho's own mark stays in Tiho's type, inside the X page */
.post-fold {
  font-family: var(--font);
}

.post-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 8px 12px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--black-06);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  animation: fold-in 320ms var(--ease);
}

.post-fold[hidden] {
  display: none;
}

.post-fold__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.post-fold__label img {
  width: 16px;
  height: 16px;
}

.post-fold button {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.post-fold button:hover {
  background: var(--black);
  color: var(--white);
}

@keyframes fold-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/*
 * Browser window frame: a Safari window on macOS, showing X.
 * Apple's own toolbar colours, so it reads as the real thing; nothing else on the page uses them.
 */
.browser {
  --safari-bar: #F6F5F6;
  --safari-field: #E6E5E7;
  --safari-line: #DCDBDD;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--black);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--safari-line);
  background: var(--safari-bar);
  font-family: var(--font-x);
}

.browser__lights {
  display: flex;
  flex: none;
  gap: 8px;
  margin-right: 6px;
}

.browser__lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF5F57;
  box-shadow: inset 0 0 0 0.5px #E0443E;
}

.browser__lights i:nth-child(2) {
  background: #FEBC2E;
  box-shadow: inset 0 0 0 0.5px #DEA123;
}

.browser__lights i:nth-child(3) {
  background: #28C840;
  box-shadow: inset 0 0 0 0.5px #1AAB29;
}

.browser__tool {
  flex: none;
  opacity: 0.6;
}

.browser__tool--off {
  opacity: 0.25;
}

/* Address field runs to the right edge of the toolbar */
.browser__address {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 30px;
  border-radius: 8px;
  background: var(--safari-field);
  color: var(--black);
  font-size: 13px;
}

.browser__page {
  font-family: var(--font-x);
}

/* Small switch, as in the extension popup */
.mini-switch {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mini-switch i {
  position: relative;
  flex: none;
  width: 36px;
  height: 21px;
  border-radius: var(--radius-pill);
  background: var(--black-12);
  transition: background-color var(--duration) var(--ease);
}

.mini-switch[aria-checked="true"] i {
  background: var(--black);
}

.mini-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--white);
  transition: translate var(--duration) var(--ease);
}

.mini-switch[aria-checked="true"] i::after {
  translate: 15px 0;
}

/* Tick list */
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: 7px;
}

.ticks li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--black) url("../assets/icons/check-white.svg") center / 14px no-repeat;
}

.ticks--inverse li::before {
  background: var(--white) url("../assets/icons/check.svg") center / 14px no-repeat;
}