/* Crafting feature: station window (refining / crafting / cooking / alchemy), recipe book, repair. */

/* Albion-style split (06): a tall narrow recipe list at the left edge and a centred recipe card. */
.panel-crafting {
  height: calc(100vh - 110px);
}

/* The body never clips: when the window is short (1280x720, UI scale, low screens: ui.js caps it
   between the HUD bands) it scrolls as a whole instead (pt12 c0-AkFirst-03), see @container cr-body. */
.panel-crafting .panel-body.cr-body {
  container: cr-body / size;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.panel-craftcard .panel-body.cr-card-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.cr-side-note {
  padding: 10px 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-dim);
  background: var(--well);
  border-radius: 6px;
}

/* ------------------------------------------------------------------ header */

.cr-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0 6px;
}

/* The keeper's painted face beside the speech bubble. */
.cr-head-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1a120a, 0 0 0 3.5px var(--brass), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cr-head-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cr-head-name {
  display: none !important;
}

.cr-head-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-dim);
}

.cr-head-icon-unused {
  display: flex;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 50% 40%, #3a2c18, #120e0a 75%);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: inset 0 0 10px #000, 0 0 12px rgba(217, 180, 90, 0.15);
}

.cr-head-text {
  flex: 1;
  min-width: 0;
}

.cr-head-name {
  font-family: var(--font-title);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(217, 180, 90, 0.25);
}

/* Greeting bubble of the station keeper (a speech bubble pointing at the face). */
.cr-head-sub {
  position: relative;
  display: block;
  max-width: 100%;
  margin-left: 4px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-dim);
  background: #fffaf0;
  border: 1px solid rgba(110, 72, 34, 0.45);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(90, 56, 20, 0.2);
}

.cr-head-sub::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 12px;
  width: 12px;
  height: 12px;
  background: #fffaf0;
  border-left: 1px solid rgba(110, 72, 34, 0.45);
  border-bottom: 1px solid rgba(110, 72, 34, 0.45);
  transform: rotate(45deg);
}

.cr-head-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cr-badge {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #f3e2bb;
  white-space: nowrap;
  background: linear-gradient(180deg, #5b636e, #2c3139);
  border: 1px solid #0e1013;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(160, 166, 174, 0.6);
}

#ui .cr-badge {
  text-shadow: 0 1px 1px #000;
}

.cr-badge.good {
  color: #c8f0a8;
}

/* City specialisation (phase 4): station badge, list star, bonus return rate */
.cr-bonus-badge.on {
  color: #a8f0e6;
}

.cr-book-select {
  max-width: 210px;
}

.cr-tabs {
  margin-bottom: 0;
}

.cr-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* ------------------------------------------------------------------ toolbar */

.cr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cr-tiers {
  display: flex;
  gap: 2px;
}

.cr-tier {
  min-width: 34px;
  padding: 2px 8px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: bold;
  color: #f3e2bb;
  cursor: pointer;
  background: linear-gradient(180deg, #5b636e, #2c3139);
  border: 1px solid #0e1013;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(160, 166, 174, 0.55);
}

#ui .cr-tier {
  text-shadow: 0 1px 1px #000;
}

.cr-tier:hover {
  filter: brightness(1.2);
}

.cr-tier.active {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc, #d7a84a) 70%, #fff 10%), color-mix(in srgb, var(--tc, #d7a84a) 60%, #000 40%));
  box-shadow: 0 0 0 1.5px #f0d48a, 0 0 6px rgba(240, 200, 110, 0.6);
}

.cr-search {
  flex: 1;
  min-width: 140px;
}

.cr-only {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
}

.cr-only input {
  accent-color: var(--gold);
}

/* ------------------------------------------------------------------ list */

.cr-craft {
  flex: 1 1 auto;
}

.cr-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 160px;
}

.cr-main > .cr-list {
  flex: 1 1 auto;
  min-height: 0;
}

.cr-list {
  padding: 4px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.cr-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 4px 10px;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: #f3e2bb;
  text-align: left;
  cursor: pointer;
  background: var(--wood-grain), linear-gradient(180deg, #5a4029, #33231a);
  border: 1px solid #1a0f06;
  border-radius: 7px;
}

#ui .cr-group,
#ui .cr-group * {
  text-shadow: 0 1px 2px #000;
}

.cr-group:first-child {
  margin-top: 0;
}

.cr-group:hover {
  border-color: var(--border);
}

.cr-caret::before {
  content: "\25BE";
  display: inline-block;
  width: 10px;
  color: #d9c49a;
  transition: transform 0.12s;
}

.cr-group.collapsed .cr-caret::before {
  transform: rotate(-90deg);
}

.cr-group-label {
  flex: 1;
}

.cr-group-count {
  font-family: var(--font);
  font-size: 12px;
  font-weight: normal;
  color: #c9b58a;
}

.cr-group-count.has {
  color: #b8ec8a;
}

.cr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0;
  padding: 3px 6px 3px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 3px;
  outline: none;
}

.cr-row:hover,
.cr-row:focus-visible {
  background: var(--bg-hover);
}

.cr-row.selected {
  background: linear-gradient(90deg, rgba(255, 250, 236, 0.9), rgba(255, 250, 236, 0.35));
  border-color: rgba(110, 72, 34, 0.5);
  box-shadow: inset 3px 0 0 #b8322a;
}

/* Names in ink (the tier shows on the tile); tier colours set inline are for dark ground. */
.cr-row-name[style],
.cr-out-name[style],
.cr-ing-name[style],
.cr-ench-name[style] {
  color: var(--ink) !important;
}

.cr-row-name {
  font-weight: 600;
}

.cr-row.locked .cr-row-name {
  color: var(--text-faint);
}

.cr-row.locked .cr-row-icon {
  filter: grayscale(0.6) brightness(0.75);
}

.cr-row-icon {
  --slot: 40px;
}

.cr-row-text {
  flex: 1;
  min-width: 0;
}

.cr-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-row-sub {
  overflow: hidden;
  font-size: 11px;
  color: var(--text-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-row-bonus {
  font-size: 12px;
  line-height: 1;
  color: #1f7a70;
}

.cr-row-tier {
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: bold;
}

#ui .cr-row-tier {
  text-shadow: 0 0 1px #1a0f06, 0 0 2px rgba(26, 15, 6, 0.85);
}

.cr-mark {
  display: inline-flex;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.cr-mark.ok::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--good);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--good);
}

.cr-mark.mats::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--text-faint);
  border-radius: 50%;
}

.cr-mark canvas {
  width: 14px !important;
  height: 14px !important;
}

/* ------------------------------------------------------------------ detail */

.cr-detail {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-craftcard .cr-repair-view,
.panel-craftcard .cr-enchant-view {
  padding: 12px;
  overflow-y: auto;
}

/* Quantity: slider + round stepper, the red Craft button on its own line (Albion 06). */
.cr-range {
  flex: 1 1 auto;
  min-width: 60px;
}

.cr-craft-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-craft-line > .cr-reason {
  flex: 1 1 auto;
}

.cr-craft-row {
  display: flex;
  flex: none;
  justify-content: flex-end;
}

.cr-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px;
  overflow-y: auto;
}

.cr-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 8px;
  background: linear-gradient(180deg, rgba(150, 100, 50, 0.18), rgba(150, 100, 50, 0.3));
  border-top: 1px solid var(--border-dim);
}

.cr-out {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cr-out-slot {
  --slot: 72px;
}

.cr-out-slot.locked {
  filter: grayscale(0.7) brightness(0.7);
}

.cr-out-slot.cr-flash {
  animation: cr-glow 0.8s ease-out;
}

.cr-out-info {
  min-width: 0;
}

.cr-out-name {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 700;
}

.cr-out-sub,
.cr-ip {
  font-size: 12px;
  color: var(--text-dim);
}

.cr-ip b {
  color: #7a2a0c;
}

.cr-req {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
}

.cr-req canvas {
  border-radius: 3px;
}

.cr-req.ok {
  color: var(--good);
}

.cr-req.bad {
  color: var(--error);
}

.cr-req-you {
  color: var(--text-faint);
}

.cr-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.cr-chain-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.cr-chain-cell {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 7px;
}

.cr-chain-cell canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.cr-chain-cell:hover {
  filter: brightness(1.12);
}

.cr-chain-cell.current {
  box-shadow: 0 0 0 2px #b8322a, 0 0 8px rgba(184, 50, 42, 0.5);
}

.cr-chain-cell.locked {
  opacity: 0.45;
}

.cr-chain-t {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 9px;
  font-weight: bold;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.cr-chain-arrow {
  font-size: 16px;
  color: var(--text-faint);
}

.cr-ings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cr-ing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 250, 236, 0.4);
  border: 1px solid var(--border-dim);
  border-left: 3px solid var(--border-dim);
  border-radius: 8px;
}

.cr-ing.ok {
  border-left-color: var(--good);
}

.cr-ing.bad {
  border-left-color: var(--error);
}

.cr-ing-slot {
  --slot: 42px;
}

.cr-ing-text {
  flex: 1;
  min-width: 0;
}

.cr-ing-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-src {
  font-size: 11px;
  color: var(--text-faint);
}

.cr-link {
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #2a5f9a;
  cursor: pointer;
  background: none;
  border: none;
}

.cr-link:hover {
  text-decoration: underline;
}

.cr-ing-count {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.cr-ing.ok .cr-have {
  color: var(--good);
}

.cr-ing.bad .cr-have {
  color: var(--error);
}

.cr-back {
  font-size: 11px;
  color: var(--text-faint);
}

.cr-chances {
  display: flex;
  gap: 6px;
}

.cr-chance {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.cr-chance-bar {
  display: flex;
  align-items: flex-end;
  width: 12px;
  height: 36px;
  overflow: hidden;
  background: linear-gradient(90deg, #1d2127, #3c434c);
  border: 1px solid #0d0f12;
  border-radius: 6px;
}

.cr-chance-fill {
  width: 100%;
}

/* Quality colours show in the bar; the number itself reads as ink. */
.cr-chance-pct[style] {
  color: var(--ink) !important;
}

.cr-chance-pct {
  font-size: 12px;
  font-weight: bold;
}

.cr-chance-name {
  font-size: 10px;
  color: var(--text-faint);
}

.cr-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cr-sum {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}

.cr-sum-val {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: bold;
  color: var(--text);
}

.cr-sum-val.bad {
  color: var(--error);
}

.cr-sum-val.bonus {
  color: #1f7a70;
}

.cr-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cr-qty-input {
  width: 64px;
  text-align: center;
}

/* -/+ as round steel buttons. */
.cr-qty-btn {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  border-radius: 50%;
}

.cr-craft-btn {
  min-width: 150px;
  min-height: 36px;
  margin-left: auto;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cr-craft-btn.ready:not(:disabled) {
  box-shadow: 0 0 0 1.5px #9aa1aa, 0 0 0 2.5px #2a2d32, 0 0 14px rgba(255, 90, 60, 0.45);
}

.cr-reason {
  min-height: 15px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
}

.cr-reason.bad {
  color: var(--warn);
}

.cr-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(120, 160, 50, 0.25), rgba(120, 160, 50, 0.06));
  border: 1px solid rgba(90, 130, 40, 0.55);
  border-radius: 8px;
}

.cr-result.fail {
  background: rgba(176, 38, 28, 0.1);
  border-color: rgba(176, 38, 28, 0.5);
}

.cr-result.flash {
  animation: cr-flash 0.7s ease-out;
}

.cr-result-text {
  flex: 1;
  min-width: 0;
}

.cr-result-title {
  font-weight: bold;
  color: #3a6a12;
}

.cr-result-title.bad {
  margin: 0;
  color: var(--error);
}

.cr-result-items,
.cr-result-back {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cr-result-back .cr-label {
  margin-right: 4px;
}

.cr-res-slot {
  --slot: 42px;
}

.cr-back-slot {
  --slot: 32px;
}

.cr-result-meta {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-dim);
}

.cr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 10px;
  color: var(--text-faint);
  text-align: center;
}

.cr-empty.big {
  justify-content: center;
  height: 100%;
}

/* ------------------------------------------------------------------ repair */

.cr-repair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: min(580px, calc(100vh - 210px));
  min-height: 280px;
}

.cr-repair.busy {
  opacity: 0.8;
}

.cr-rep-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.cr-rep-title {
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.cr-rep-sub {
  font-size: 12px;
  color: var(--text-dim);
}

.cr-rep-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.cr-rep-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  background: rgba(255, 250, 236, 0.4);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}

.cr-rep-row.broken {
  border-color: rgba(224, 69, 58, 0.55);
  box-shadow: inset 3px 0 0 var(--error);
}

.cr-rep-icon {
  --slot: 46px;
}

.cr-rep-info {
  flex: 1;
  min-width: 0;
}

.cr-rep-where {
  font-size: 11px;
  color: var(--text-faint);
}

.cr-dur {
  position: relative;
  max-width: 320px;
  height: 13px;
  margin-top: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, #1d2127, #3c434c);
  border: 1px solid #0d0f12;
  border-radius: 7px;
}

.cr-dur-fill {
  height: 100%;
  background: var(--good);
}

.cr-dur.mid .cr-dur-fill {
  background: var(--gold);
}

.cr-dur.low .cr-dur-fill {
  background: var(--warn);
}

.cr-dur.broken .cr-dur-fill {
  background: var(--error);
}

.cr-dur-text {
  position: absolute;
  inset: 0;
  font-size: 9.5px;
  line-height: 11px;
  color: #fff;
  text-align: center;
}

#ui .cr-dur-text {
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.cr-rep-cost {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 70px;
  font-weight: bold;
}

.cr-rep-cost.bad {
  color: var(--error);
}

.cr-rep-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--border-dim);
}

.cr-rep-total {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  color: var(--text-dim);
}

.cr-rep-total-val {
  font-size: 16px;
  color: var(--ink);
}

.cr-rep-total-val.bad {
  color: var(--error);
}

.cr-rep-status {
  flex: 1;
  font-size: 12px;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ enchantment (.1 / .2 / .3) */

/* Enchantment selector of an enchantable recipe (detail view). */
.cr-ench-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cr-ench-opts {
  display: flex;
  gap: 2px;
}

.cr-ench-opt {
  min-width: 36px;
  padding: 2px 9px;
  font-size: 12.5px;
  font-weight: bold;
  color: var(--ec, #f3e2bb);
  cursor: pointer;
  background: linear-gradient(180deg, #5b636e, #2c3139);
  border: 1px solid #0e1013;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(160, 166, 174, 0.55);
}

#ui .cr-ench-opt {
  text-shadow: 0 1px 1px #000;
}

.cr-ench-opt:hover {
  filter: brightness(1.2);
}

.cr-ench-opt.active {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ec, #d7a84a) 70%, #fff 10%), color-mix(in srgb, var(--ec, #d7a84a) 55%, #000 45%));
  box-shadow: 0 0 0 1.5px #f0d48a, 0 0 8px color-mix(in srgb, var(--ec, var(--gold)) 60%, transparent);
}

.cr-ench-note {
  font-size: 11px;
  color: var(--text-faint);
}

.cr-ench-tag {
  margin-left: 4px;
  font-weight: bold;
  color: var(--ec, var(--gold));
}

#ui .cr-ench-tag {
  text-shadow: 0 0 1px #1a0f06, 0 0 3px color-mix(in srgb, var(--ec, var(--gold)) 70%, transparent), 0 1px 1px #1a0f06;
}

/* Enchant tab: upgrade gear with runes / souls / relics. */
.cr-enchant {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: min(580px, calc(100vh - 210px));
  min-height: 280px;
}

.cr-ench-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.cr-ench-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  background: rgba(255, 250, 236, 0.4);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}

.cr-ench-row.flash {
  animation: cr-glow 0.9s ease-out;
}

.cr-ench-info {
  flex: 1;
  min-width: 0;
}

.cr-ench-name {
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-ench-sub {
  font-size: 11px;
  color: var(--text-faint);
}

.cr-ench-pips {
  display: flex;
  gap: 3px;
}

.cr-ench-pip {
  width: 10px;
  height: 10px;
  background: rgba(90, 58, 26, 0.25);
  border: 1px solid rgba(60, 36, 12, 0.6);
  transform: rotate(45deg);
}

.cr-ench-pip.on {
  border-color: #1a0f06;
  box-shadow: 0 0 6px currentColor;
}

.cr-ench-mat {
  --slot: 38px;
}

.cr-ench-cost {
  min-width: 70px;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
}

.cr-ench-cost .ok {
  color: var(--good);
}

.cr-ench-cost .bad,
.cr-ench-fee.bad {
  color: var(--error);
}

.cr-ench-fee {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  color: var(--text-dim);
}

.cr-ench-row .btn.primary {
  min-width: 112px;
  border-color: var(--ench, var(--gold));
}

.cr-ench-max {
  min-width: 112px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
}

.cr-ench-status {
  min-height: 18px;
  padding-top: 6px;
  font-size: 12px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-dim);
}

/* ------------------------------------------------------------------ animation & small screens */

@keyframes cr-flash {
  from {
    box-shadow: 0 0 18px rgba(240, 212, 138, 0.7);
  }

  to {
    box-shadow: none;
  }
}

@keyframes cr-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 212, 138, 0.9);
  }

  40% {
    box-shadow: 0 0 22px 6px rgba(240, 212, 138, 0.6);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(240, 212, 138, 0);
  }
}

@media (max-width: 940px) {
  .cr-main {
    grid-template-columns: 230px 1fr;
  }

  .cr-head-badges {
    display: none;
  }
}

/* Short station window (pt12 c0-AkFirst-03: at 1280x720 the greeting, badges, tabs and toolbar
   left the 160 px list below the clipped body edge). Below this height the keeper's greeting is
   dropped (his face stays in the title medallion), the recipe list flows in the body, which
   scrolls as a whole, and the tier filter / search bar stays pinned at the top while it does. */
@container cr-body (max-height: 480px) {
  .cr-head {
    display: none;
  }

  .cr-craft,
  .cr-main,
  .cr-main > .cr-list {
    flex: none;
    min-height: 0;
  }

  .cr-main > .cr-list {
    overflow: visible;
  }

  .cr-toolbar {
    position: sticky;
    top: -10px;
    z-index: 2;
    padding: 4px 0;
    background: var(--parch);
    box-shadow: 0 6px 6px -6px rgba(60, 36, 12, 0.45);
  }

  /* Slightly smaller rows: five fit below the pinned toolbar at 1280x720. */
  .cr-row-icon {
    --slot: 34px;
  }

  /* A row scrolled into view (search, "craft it here" links) is not hidden under the toolbar. */
  .cr-row,
  .cr-group {
    scroll-margin-top: 72px;
  }
}