.workspace.single {
  grid-template-columns: 1fr;
  max-width: 980px;
}

a.task-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.toolbar {
  flex-wrap: wrap;
}

.toolbar .path {
  min-width: 0;
  flex: 1 1 140px;
}

.toolbar .spacer { flex: 1 1 8px; min-width: 0; }

.toolbar .btn {
  min-width: 0;
  flex: 0 0 auto;
  padding: 2px 8px;
  height: 20px;
  line-height: 14px;
  font-size: 11px;
  white-space: nowrap;
}

.wallet-chip {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  padding: 1px 6px;
  background: var(--white);
  user-select: text;
  max-width: 9.5em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

.chain-pill {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  background: var(--maroon);
  color: var(--white);
}

.chain-pill.ok {
  background: var(--green);
}

.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px 6px;
  align-content: start;
  padding: 10px 8px 12px;
  min-height: 360px;
}

.nft-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px 6px;
  border: 1px dotted transparent;
  background: none;
  cursor: pointer;
  color: var(--navy);
}

.nft-card:hover,
.nft-card:focus-visible,
.nft-card.selected {
  background: var(--navy);
  color: var(--white);
  outline: none;
  border-color: var(--yellow);
}

.nft-card .shot {
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  object-fit: cover;
  object-position: top;
  background: #111;
  border: 1px solid #000;
  display: block;
}

.nft-card .shot.missing {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #808080;
  font-size: 10px;
  background: var(--face);
}

.nft-card .name {
  text-align: center;
  line-height: 1.2;
  font-size: 11px;
  width: 100%;
  height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  word-break: break-word;
}

.bay-msg {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 20px 16px;
  color: var(--black);
}

.bay-msg p {
  margin: 0;
  max-width: 36em;
  line-height: 1.35;
}

.bay-msg .hint {
  color: var(--dark);
  font-size: 11px;
}

.provider-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}

.provider-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  background: var(--face);
  border-top: 2px solid var(--white);
  border-left: 2px solid var(--white);
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.provider-list button:hover { background: var(--light); }

.provider-list img {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  flex: 0 0 16px;
}

.dialog.nft-dialog { width: min(560px, 100%); }

.nft-head {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: start;
}

.nft-head img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  object-position: top;
  background: #000;
  border: 1px solid #000;
}

.nft-head .meta {
  grid-template-columns: 92px 1fr;
  max-height: 220px;
  overflow: auto;
}

@media (max-width: 560px) {
  .nft-head { grid-template-columns: 1fr; justify-items: center; }
  .nft-head .dialog-copy { width: 100%; }

  .toolbar .path {
    flex: 1 1 100%;
  }

  .toolbar .spacer { display: none; }

  .wallet-chip { max-width: 7.5em; }

  #connect-btn {
    padding: 2px 6px;
    max-width: 7.5em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mail-launch .mail-new,
  .mail-tray .mail-new { width: 72px; height: 14px; }

  .letter-headers {
    grid-template-columns: 48px 1fr;
  }
}

.mail-launch,
.mail-tray {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  cursor: pointer;
  padding: 0 4px;
  border: 1px solid transparent;
  height: 22px;
}

.mail-launch {
  height: auto;
  min-height: 24px;
  padding: 2px 4px;
  background: var(--face);
  border-top: 2px solid var(--white);
  border-left: 2px solid var(--white);
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  flex: 0 0 auto;
}

.mail-launch img,
.mail-tray img {
  display: block;
  image-rendering: pixelated;
}

.mail-launch .envelope,
.mail-tray .envelope {
  width: 32px;
  height: 24px;
}

.mail-launch .mail-new,
.mail-tray .mail-new {
  width: 92px;
  height: 18px;
}

.mail-new[hidden] { display: none !important; }

.mail-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  padding: 16px;
  background: rgba(0, 0, 128, 0.12);
}

.mail-root[hidden] { display: none !important; }

.mail-app {
  width: min(560px, 100%);
  max-height: min(80vh, 560px);
  z-index: 71;
}

.mail-letter {
  width: min(520px, 100%);
  max-height: min(80vh, 560px);
  z-index: 72;
}

.mail-tab[aria-pressed="true"] {
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  font-weight: bold;
}

.mail-list {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background: var(--white);
}

.mail-row {
  display: grid;
  grid-template-columns: 18px 1fr 92px;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--light);
  background: var(--white);
  cursor: pointer;
  font: inherit;
}

.mail-row:hover,
.mail-row.selected {
  background: var(--navy);
  color: var(--white);
}

.mail-row.unread {
  font-weight: bold;
}

.mail-row .dot {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  background: var(--maroon);
  border-radius: 50%;
}

.mail-row:not(.unread) .dot { background: var(--shadow); }

.mail-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--dark);
}

.letter-body {
  background: var(--face);
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.letter-headers {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 2px 8px;
  margin: 0 0 10px;
  padding: 6px;
  background: var(--white);
  user-select: text;
}

.letter-headers dt { color: var(--dark); }
.letter-headers dd {
  margin: 0;
  font-weight: bold;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.letter-text {
  min-height: 80px;
  padding: 8px;
  background: var(--white);
  border-top: 2px solid var(--shadow);
  border-left: 2px solid var(--shadow);
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  white-space: pre-wrap;
  user-select: text;
  line-height: 1.4;
  margin-bottom: 10px;
}

.letter-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}

.letter-actions {
  padding: 4px 6px;
  justify-content: flex-end;
}

#inbox-task.sunken-thin { font-weight: bold; }

.mail-codes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}

.code-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}

.code-label {
  grid-column: 1 / -1;
  font-weight: bold;
}

.code-value {
  width: 100%;
  padding: 4px 6px;
  background: var(--white);
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  user-select: text;
}

.office-body {
  background: var(--face);
  min-height: 420px;
  padding: 12px;
}

.office-form {
  margin: 0 0 16px;
  padding: 8px;
  background: var(--face);
}

.office-form h2,
.office-body h2 {
  margin: 8px 0 6px;
  font-size: 13px;
}

.office-form p,
.office-body > p {
  margin: 0 0 8px;
  line-height: 1.35;
  max-width: 46em;
}

.field {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 6px;
  align-items: center;
  margin: 6px 0;
}

.field.check { align-items: start; }

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field textarea {
  width: 100%;
  padding: 3px 6px;
  border-top: 2px solid var(--shadow);
  border-left: 2px solid var(--shadow);
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  background: var(--white);
  font: inherit;
}

.hint { color: var(--dark); font-size: 11px; min-height: 1.2em; }

.pane[hidden] { display: none !important; }

.campaign-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0 0 4px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  font: inherit;
}

.campaign-row:hover { background: var(--navy); color: var(--white); }

.table-wrap {
  overflow: auto;
  max-height: 360px;
  background: var(--white);
  margin: 8px 0;
}

.winners tr.selected,
.winners tr.selected td {
  background: var(--navy);
  color: var(--white);
}

.letter-preview {
  margin: 10px 0;
  padding: 8px;
  background: var(--white);
}

.letter-preview textarea {
  width: 100%;
  min-height: 10em;
  margin: 6px 0;
  padding: 6px;
  border-top: 2px solid var(--shadow);
  border-left: 2px solid var(--shadow);
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  background: var(--white);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  user-select: text;
}

.letter-preview h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

.campaign {
  margin: 8px 0;
  padding: 8px;
  background: var(--white);
}

.campaign h3 {
  margin: 0 0 4px;
  font-size: 12px;
}

.campaign .recall-all {
  margin-top: 8px;
}

.winners .btn {
  min-width: 0;
  padding: 1px 6px;
  font-size: 10px;
}

.winners {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.winners th,
.winners td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--light);
  user-select: text;
}

.winners .code-cell {
  font-family: "Courier New", Courier, monospace;
}

.preview {
  margin: 8px 0 0;
  padding: 8px;
  background: var(--white);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  user-select: text;
}

fieldset.field {
  border: 0;
  margin: 6px 0;
  padding: 0;
}

.mail-msg {
  grid-column: 1 / -1;
  margin: 0;
  user-select: text;
  line-height: 1.35;
}

.dialog-copy p {
  user-select: text;
}