/* ── PixelDev · the one status indicator ────────────────────────────────────
   Styles #status-chip, built by js/status-ui.js, which replaces the pair of
   indicators that used to sit here — #save-dot and #cloud-pill.

   A separate stylesheet rather than additions to style.css, for the same
   reason share.css is one: pixelforge/ is merged down from the upstream
   PixelForge repo and style.css conflicts on every merge. A new file never
   does. The originals keep their old rules over there; they are hidden from
   JS, so nothing here needs to fight them. */

#status-chip {
  /* Pill, like the cloud one it succeeds — the shape people already read as
     "status, not a button you press by accident". It is a <button> because in
     two of its six states it genuinely is one. */
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  /* The topbar is a single flex row that has run out of width (topbar-ui.js).
     Flex items shrink by default, and a squeezed label wraps to two lines and
     takes the height of the whole bar with it — the exact bug the topbar work
     is removing. So: never shrink, never wrap, and a hard ceiling well inside
     the ~180px the two old indicators occupied between them, so no state can
     ever push the bar around. */
  flex: none;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  transition: color .2s, border-color .2s, background .2s;
}

#status-chip:hover { border-color: var(--accent); }
#status-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#status-chip .sc-icon {
  font-size: 11px;
  line-height: 1;
  flex: none;
}
#status-chip .sc-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── the states ───────────────────────────────────────────────────────────
   Colour is never the only carrier: each state has its own glyph, its own
   words, and a sentence in the tooltip. */

/* Saved to your account. The quiet, good, ordinary state — it should not
   demand anything, because there is nothing to do. */
#status-chip[data-state='cloud'] { color: #4caf50; }

/* Saved on this device, signed out. NOT an error, and styled as the plain
   statement of fact it is: no warning colour, no border tint, nothing that
   invites a child with no account to think something has gone wrong. */
#status-chip[data-state='device'] { color: var(--dim); }

/* Saved on this device, signed in, cloud out of reach. Same words, because
   they are equally true — but this one is transient and worth noticing, so it
   takes the amber the old pill used for offline and sync-failed. */
#status-chip[data-state='stranded'] {
  color: #c9a227;
  border-color: #c9a227;
}

/* In flight. Deliberately understated: status-ui.js already delays entering
   this state so it cannot strobe, and a spinner that shouts would undo that. */
#status-chip[data-state='saving'] { color: var(--accent2); }
#status-chip[data-state='saving'] .sc-icon {
  display: inline-block;
  animation: sc-spin 1s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* A decision is waiting. This one is a call to action, so it is allowed to
   look like a control rather than a label — filled, bordered in danger, and
   with a hover that confirms it is pressable. */
#status-chip[data-state='conflict'] {
  color: #ffd2d2;
  border-color: var(--danger);
  background: #3a1f2b;
  font-weight: 600;
}
#status-chip[data-state='conflict']:hover {
  border-color: var(--danger);
  background: #4a2534;
  color: #fff;
}

/* The browser refused to store the project: the one state where closing the
   tab destroys work. It gets the same unmistakable treatment the old save dot
   used — solid red, heavy, and a slow pulse — because everything else on this
   bar is calm and this must not be mistaken for part of it. */
#status-chip[data-state='failed'] {
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
  font-weight: 800;
  animation: sc-alarm 1.1s ease-in-out infinite;
}
#status-chip[data-state='failed']:hover {
  background: #d0422f;
  border-color: #d0422f;
  color: #fff;
}
@keyframes sc-alarm { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* Motion is decoration here — the glyph and the colour already carry both
   states — so it is the first thing to go when it is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  #status-chip[data-state='saving'] .sc-icon,
  #status-chip[data-state='failed'] { animation: none; }
}