popup.css

/* Same palette as theme.css. The popup previously used cool navy (#1a1a2e), which
   read as a different product sitting on top of a warm site. */
:root {
  --nwd-canvas: #1a1817;
  --nwd-surface: #272320;
  --nwd-raised: #302b27;
  --nwd-line: #46403b;
  --nwd-line-soft: #383330;
  --nwd-text: #ede8e3;
  --nwd-body: #cfc7c0;
  --nwd-muted: #9c928a;
  --nwd-accent: #d9a54a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 292px;
  padding: 18px 20px 16px;
  font: 13px/1.45 "FK Grotesk Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--nwd-canvas);
  color: var(--nwd-body);
}

.title {
  display: flex;
  align-items: center;
  gap: 9px;
  /* NextWork sets its display type in a serif; matching it is most of what makes
     the popup read as part of the same product. */
  font-family: "Rockwell", "Georgia", ui-serif, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nwd-text);
  padding-bottom: 14px;
}

.mark {
  flex: none;
  display: block;
  opacity: 0.92;
}

.rows { list-style: none; }

.row {
  border-top: 1px solid var(--nwd-line-soft);
}

.switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  cursor: pointer;
  border-radius: 8px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
}

.switch:hover { background-color: var(--nwd-surface); }

.switch__text { flex: 1 1 auto; }

.switch__name {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nwd-text);
}

.switch__hint {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--nwd-muted);
}

.switch__control {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
}

/* Full-size and topmost so a real click lands on the control itself. Never
   width:0/height:0/display:none -- a zero-size input is what made the original
   tutorial's switch unhittable. No border-radius either: a radius on a
   transparent inset:0 input makes the corner hit-test fall through. */
.switch__input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.switch__track {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: #3d3733;
  border: 1px solid var(--nwd-line);
  -webkit-transition: background-color 0.22s ease, border-color 0.22s ease;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

/* A sibling span rather than a pseudo-element on the input: older WebKit does
   not reliably render ::before on form controls. */
.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cfc7c0;
  -webkit-transition: -webkit-transform 0.22s ease, background-color 0.22s ease;
  transition: transform 0.22s ease, background-color 0.22s ease;
}

/* Amber rather than blue: it is one of the site's own accents, and blue was the
   single most out-of-place colour in the old popup. */
.switch__input:checked + .switch__track {
  background: var(--nwd-accent);
  border-color: #e0b464;
}

.switch__input:checked + .switch__track .switch__thumb {
  background: #1a1817;
  -webkit-transform: translateX(18px);
  transform: translateX(18px);
}

/* :focus is duplicated because older WebKit lacks :focus-visible, which would
   otherwise leave the control with no visible focus ring. */
.switch__input:focus + .switch__track,
.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--nwd-accent);
  outline-offset: 2px;
}

.row.disabled .switch { cursor: default; }
.row.disabled .switch:hover { background-color: transparent; }
.row.disabled .switch__text { opacity: 0.4; }
.row.disabled .switch__control { opacity: 0.4; }

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--nwd-line);
  border-radius: 9px;
  background: var(--nwd-surface);
  color: var(--nwd-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.action:hover {
  background: var(--nwd-raised);
  border-color: #554e48;
}

.action:focus-visible,
.action:focus {
  outline: 2px solid var(--nwd-accent);
  outline-offset: 2px;
}

.action__arrow {
  flex: none;
  opacity: 0.65;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
}

.action:hover .action__arrow {
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}

/* When the tab is already NextWork the button becomes a no-op, so it reads as
   inert rather than inviting a pointless click. */
.action.is-current {
  cursor: default;
  color: var(--nwd-muted);
  background: transparent;
  border-color: var(--nwd-line-soft);
}

.action.is-current:hover {
  background: transparent;
  border-color: var(--nwd-line-soft);
}

.action.is-current .action__arrow { display: none; }

.status {
  /* <output> is inline by default; the divider rule and centring below both
     assume the full-width box the <p> this replaced gave for free. */
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--nwd-line-soft);
  font-size: 11px;
  color: var(--nwd-muted);
  text-align: center;
}