/* App tokens are generated by bun run design:sync. Keep only extension layout here. */
@import url("fonts.css");
@import url("tokens.css");

/* ── shared chrome ────────────────────────────────────────────────────── */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-app);
  -webkit-font-smoothing: antialiased;
}

/* The card. In the mockup this floats on a desk with a shadow; in a real
   popup the browser draws the frame, so the card IS the window. */
.view {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 18px;
}

body.popup {
  width: 372px;
}

/* header: the mark, then the three-line identity of what is being filed.
   The mark is ON the text axis, not floating beside it — its slot is inset
   the same 13px that the note well's padding uses, so the left edge of the
   logo, of the note text and of the chip text are one line. The slot is the
   width of the mark itself (a 44px slot would centre it off the axis), and
   the 18px gap is then what holds the text column at x=80.
       22 (card) + 13 = 35 mark ─ 27 wide ─ 18 gap → 80 text */
.head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-left: 13px;
}

.cube-slot {
  width: 27px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  perspective: 200px;
}

.head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-faint);
  transition: color var(--dur-slow) var(--ease);
}
/* landed — the line the whole popup exists to show */
.eyebrow.is-done {
  color: var(--text-note);
}
/* the one failure colour. There is no --danger in this system; accent-5 is
   the palette's own attention hue and is defined in every theme. */
.eyebrow.is-failed {
  color: var(--accent-5);
}

.title {
  font: var(--type-chip);
  letter-spacing: -0.012em;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta {
  font: var(--type-meta);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the note well — 13px of padding is what puts note text on the x=35 axis */
textarea.note {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: none;
  background: var(--well);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  font: var(--type-body);
  font-family: var(--font-app);
  color: var(--text-strong);
  min-height: 84px;
}
textarea.note:focus {
  outline: none;
}
::placeholder {
  color: var(--text-muted);
}

/* footer — inset 4px on the left so the chip's own 9px lands text at x=35,
   and 13px on the right to match the well's right-hand padding */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  padding: 0 13px 0 4px;
}

/* The chip is revealed as the mark comes to rest, so it fades up rather than
   appearing — the two land as one gesture instead of one popping in over the
   other. `both` holds the from-state, so there is no flash before the frame. */
@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.chip {
  animation: chip-in var(--dur-slow) var(--ease) both;
  flex: none;
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--type-meta);
  letter-spacing: normal;
  color: var(--text-note);
  background: var(--surface);
  padding: 6px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.chip:hover {
  background: var(--rule);
  color: var(--text-strong);
}
.chip:active {
  background: var(--dash);
}

@media (prefers-reduced-motion: reduce) {
  .chip {
    animation: none;
  }
}

.chip-keys {
  font: var(--type-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.hints {
  margin-left: auto;
  display: flex;
  gap: var(--sp-7);
  font: var(--type-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color var(--dur-slow) var(--ease);
}
.hints span {
  white-space: nowrap;
}
.hints.is-done {
  color: var(--text-note);
}
.hints.is-failed {
  color: var(--accent-5);
}

/* the one primary action, in the well's slot so it keeps the card's width */
.cta {
  appearance: none;
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  font: var(--type-chip);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.cta:hover {
  opacity: 0.86;
}
.cta:disabled {
  opacity: 0.4;
  cursor: default;
}

/* a quieter second action, for the options page's disconnect */
.cta.is-quiet {
  background: var(--well);
  color: var(--text-note);
}

/* ── the pairing form (options page, #486) ───────────────────────────── */
/* Two fields in the note well's clothes — same 13px inset, same radius — so
   typed text sits on the x=35 axis like everything else on the card. */
.pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.pair[hidden] {
  display: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  background: var(--well);
}
.field:focus-within {
  box-shadow: inset 0 0 0 1px var(--dash, var(--text-muted));
}
.field .label {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-muted);
}
.field input {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  outline: none;
}
.field input::placeholder {
  color: var(--text-muted);
}
#code {
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── the logo mark ────────────────────────────────────────────────────── */
/* A cube split into a slab and a block. cube.js sizes and colours every face;
   these rules only establish the 3D context and the mark's rest angle. */
.cube-stage {
  /* the rest angle — what the mark looks like when nothing is happening.
     --nudge is written by cube.js to seat the drawn shape in its slot; it
     never changes the angle. */
  --rest: rotateX(-30deg) rotateY(-45deg);
  --nudge: translate(0px, 0px);
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: var(--nudge) var(--rest);
}
.cube-stage [data-box] {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.cube-stage [data-face] {
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}

/* ── options page ─────────────────────────────────────────────────────── */
/* The mockup's own framing: the card sits on the desk rather than filling a
   tab, so the two surfaces read as one product. */
body.options {
  background: var(--paper-desk);
  min-height: 100vh;
  padding: 56px 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

body.options .view {
  width: 372px;
  background: var(--bg);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-device);
}

/* prose on the options page, which has room to say more than a popup. The
   13px inset is the note well's, so this text sits on the same axis as the
   mark above it rather than on the card's padding edge. */
.copy {
  font: var(--type-body);
  color: var(--text-note);
  margin: 0;
  padding: 0 13px;
}

.copy a {
  color: var(--accent-1);
  text-decoration: none;
}
.copy a:hover {
  color: var(--text-strong);
}

/* the status line, in the footer slot so it keeps the x=35 axis */
.line {
  font: var(--type-meta);
  color: var(--text-muted);
  margin: 0;
  padding: 0 13px;
  overflow-wrap: anywhere;
}
.line.is-done {
  color: var(--text-note);
}
.line.is-failed {
  color: var(--accent-5);
}

button:focus-visible, textarea.note:focus-visible, input:focus-visible {
  outline: 2px solid var(--activity);
  outline-offset: 2px;
}