/* ANKLE96 OS icon + control chrome
 * Injected site-wide. Hard edges, silver panels, raised bevels.
 * No emoji chrome. No blue outlines. No rounded SaaS pills.
 */

/* ── Icon wells (widgets, cards, marketplace, previews) ── */
img.ankle96-icon,
.ankle96-icon,
.wm-icon,
.add-card__preview img,
[data-ankle96-icon="1"],
.widget-icon,
.pkg-icon {
  box-sizing: border-box !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  background: #c0c0c0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  image-rendering: pixelated;
  object-fit: contain;
}

/* empty icon placeholder */
.ankle96-icon-empty {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  background: #c0c0c0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Raised control face (buttons that act as icon chips) ── */
.ankle96-face,
button.ankle96-face {
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Courier New", Courier, monospace !important;
}

.ankle96-face:active,
button.ankle96-face:active {
  border-color: #808080 #fff #fff #808080 !important;
}

/* ── Theme FAB (replaces gear emoji aesthetic) ── */
#ankle-theme-fab {
  width: 28px !important;
  height: 22px !important;
  min-width: 28px !important;
  padding: 0 4px !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: bold 11px "Courier New", Courier, monospace !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#ankle-theme-fab:active {
  border-color: #808080 #fff #fff #808080 !important;
}

/* ── Global context menu forced Ankle96 when present ── */
.ankle-ctx {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px solid !important;
  border-color: #fff #000 #000 #fff !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 0 !important;
  font-family: "Courier New", Courier, monospace !important;
}

.ankle-ctx-item,
.ankle-ctx button.ankle-ctx-item,
.ankle-ctx a.ankle-ctx-item,
.ankle-ctx .item {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ankle-ctx-item:hover,
.ankle-ctx .item:hover {
  background: #d4d4d0 !important;
  border-color: #fff #808080 #808080 #fff !important;
  color: #000 !important;
}

.ankle-ctx-item .glyph,
.ankle-ctx .item .glyph {
  width: 22px !important;
  height: 18px !important;
  min-height: 18px !important;
  border: 2px solid !important;
  border-color: #808080 #fff #fff #808080 !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
}

.ankle-ctx-item .txt,
.ankle-ctx .item .txt {
  color: #000 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
}

.ankle-ctx-item.danger,
.ankle-ctx .item.danger,
.ankle-ctx-item.danger .glyph,
.ankle-ctx-item.danger .txt {
  color: #800000 !important;
}

/* ── Image action bar under media ── */
.ankle-action-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  font-family: "Courier New", Courier, monospace !important;
}

.ankle-action-bar button,
.ankle-action-bar a.btn,
.ankle-img-actions button {
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 11px "Courier New", Courier, monospace !important;
}

/* ── Kill soft modern icon treatments on common chrome ── */
.icon-btn,
.icon-button,
.btn-icon,
[class*="icon-btn"] {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Prefer no blue focus rings on icon controls */
.ankle-ctx-item:focus,
#ankle-theme-fab:focus,
.ankle96-face:focus {
  outline: 1px solid #000 !important;
  outline-offset: 0 !important;
}