/* Layer: 03-rooms-economy.css
 * warehouse, library, master workshop, weekly work, tickets
 *
 * Split out of app.css, which had grown to 8346 lines. Loaded in
 * order by app.css; do not reorder the @import lines there. Several rules in
 * the later layers override earlier ones by source order alone.
 */
/* —— Warehouse floorplan —— */
.wh-floor-section {
  margin-top: 4px;
  min-height: 140px;
}

.wh-floor-section--empty .wh-floor-empty {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 2px dashed var(--border, #4a2c14);
  border-radius: 8px;
  background: rgba(255, 248, 232, 0.55);
}

.wh-floor-empty__lead {
  margin: 0;
  font-weight: 600;
  color: var(--ink, #2b1a0e);
}

.wh-floor {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 10px 0 14px;
  border: 1px solid var(--border, #5a4a36);
  background: #f3ead8;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  aspect-ratio: 100 / 70;
}

.wh-floor__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.wh-floor__zones {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.wh-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  text-align: center;
  border: 1.5px dashed transparent;
  box-sizing: border-box;
  cursor: default;
  pointer-events: auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wh-zone__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #2b1a0e);
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255, 248, 232, 0.85);
}

.wh-zone__hint {
  font-size: 0.7rem;
  color: var(--ink-soft, #4a3220);
  opacity: 1;
}

.wh-zone--empty {
  background: rgba(90, 74, 54, 0.08);
  border-color: rgba(90, 74, 54, 0.35);
  cursor: pointer;
}

.wh-zone--empty:hover,
.wh-zone--over {
  background: rgba(161, 106, 56, 0.18);
  border-color: var(--accent, #a16a38);
}

.wh-zone--filled {
  background: rgba(250, 236, 200, 0.96);
  border-style: solid;
  border-color: var(--border, #4a2c14);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 232, 0.7);
}

.wh-zone--pending {
  background: rgba(196, 150, 80, 0.32);
  border-style: solid;
  border-color: #a16a38;
  animation: wh-zone-pulse 1.6s ease-in-out infinite;
}

.wh-zone--decor {
  background: rgba(232, 220, 196, 0.55);
  border-style: dashed;
  border-color: rgba(90, 74, 54, 0.25);
  pointer-events: none;
}

.wh-buildings {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink, #2b1a0e);
  font-size: 0.9rem;
}

@keyframes wh-zone-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

.wh-floor__palette-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--accent, #a16a38);
}

.wh-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.wh-palette__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 140px;
  max-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--border, #5a4a36);
  background: var(--panel-soft, #f4ecde);
  font: inherit;
  text-align: left;
  cursor: grab;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
}

.wh-palette__card:active {
  cursor: grabbing;
}

.wh-palette__card.is-selected,
.wh-palette__card.is-dragging {
  border-color: var(--accent, #a16a38);
  background: #fff8ec;
}

.wh-palette__card[data-wh-unaffordable] {
  opacity: 0.55;
  cursor: not-allowed;
}

.region-panel__guild-home {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--accent, #a16a38);
  background: rgba(161, 106, 56, 0.12);
  font-size: 0.9rem;
}

/* —— Library —— */
.lib-room {
  padding: 12px 14px 20px;
  color: var(--ink, #2b1a0e);
}

.lib-room__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lib-room__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--ink, #2b1a0e);
}

.lib-lead {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft, #4a3220);
  opacity: 1;
}

.lib-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
}

.lib-filters label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--ink, #2b1a0e);
}

.lib-filters input {
  min-width: 140px;
  padding: 6px 10px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 4px;
  background: #fff8e8;
  color: var(--ink, #2b1a0e);
  font: inherit;
  box-shadow: var(--bevel-in);
}

.lib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  align-items: start;
}

.lib-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(250, 235, 200, 0.96), rgba(243, 223, 184, 0.94)),
    var(--theme-parchment, var(--parchment, #f5d1a0));
  background-size: auto, cover;
  padding: 12px 14px;
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
}

.lib-card h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--ink, #2b1a0e);
}

.lib-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lib-muted {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft, #4a3220);
  opacity: 1;
}

.lib-empty {
  margin: 0;
  padding: 18px 16px;
  border: 2px dashed rgba(74, 44, 20, 0.35);
  border-radius: 8px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
  text-align: center;
}

.lib-empty__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--ink, #2b1a0e);
}

.lib-empty__hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft, #4a3220);
}

.lib-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border, #5a4a36);
  opacity: 0.8;
  font-weight: 500;
  color: inherit;
  vertical-align: middle;
}

.lib-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border: 2px solid var(--border, #4a2c14);
  border-radius: 8px;
  background: linear-gradient(180deg, #faebc8, #f0d8a0);
  box-shadow: var(--bevel-out);
  color: var(--ink, #2b1a0e);
  max-width: 520px;
}

.lib-editor h3 {
  margin: 0 0 4px;
  color: var(--ink, #2b1a0e);
}

.lib-editor label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--ink, #2b1a0e);
}

.lib-editor input,
.lib-editor select {
  padding: 6px 10px;
  border: 1px solid var(--border, #5a4a36);
  background: #fff8ec;
  color: var(--ink, #2b1a0e);
  font: inherit;
}

.lib-check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}

.lib-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* —— Master workshop —— */
.master-room {
  padding: 10px 12px 20px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.master-room__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.master-room__title {
  margin: 0;
  font-size: 1.25rem;
}

.master-lead {
  margin: 4px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.master-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent, #a16a38);
}

.master-section {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #5a4a36);
}

.master-section:last-child {
  border-bottom: 0;
}

.master-section h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--accent, #a16a38);
}

.master-muted {
  margin: 0 0 10px;
  font-size: 0.82rem;
  opacity: 0.75;
}

.master-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.master-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  min-width: 180px;
}

.master-form input,
.master-roles-table select {
  padding: 6px 10px;
  border: 1px solid var(--border, #5a4a36);
  background: var(--panel-soft, #f4ecde);
  font: inherit;
}

.master-section__actions,
.master-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.master-roles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.master-roles-table th,
.master-roles-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(90, 74, 54, 0.25);
  vertical-align: middle;
}

.master-uid {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  word-break: break-all;
  opacity: 0.85;
}

.master-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border, #5a4a36);
  opacity: 0.8;
}

.master-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(90, 74, 54, 0.25);
  font-size: 0.85rem;
}

.master-toc a {
  color: var(--accent, #a16a38);
  text-decoration: none;
}

.master-toc a:hover {
  text-decoration: underline;
}

.master-form__wide {
  flex: 1 1 100%;
  min-width: 220px;
}

.master-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.master-catalog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(90, 74, 54, 0.25);
  background: var(--panel-soft, #f4ecde);
}

.master-form--editor {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(90, 74, 54, 0.3);
}

/* —— Weekly work —— */
.invest-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 4px 0 8px;
}

.invest-tile {
  text-align: left;
  padding: 8px 10px;
  border: 2px solid var(--border, #5a4a36);
  background: #f4ecde;
  color: var(--ink, #2b1a0e);
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.invest-tile--on {
  background: #fff8e8;
  box-shadow: inset 0 0 0 1px #8b5a2b;
  font-weight: 600;
}

.work-lead {
  margin: 4px 0 14px;
  font-size: 0.85rem;
  opacity: 0.8;
}

.work-section {
  margin-bottom: 18px;
}

.work-section h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  /* Ink, not accent. `--accent` resolves to a mid-orange (#d87a24) that only
   * reaches ~2.7:1 against the light parchment these sections sit on, well
   * under the 4.5:1 AA floor. The heading still reads as a heading through
   * size and weight, so readability wins over the accent colour. */
  color: var(--ink, #2b1a0e);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.work-card {
  padding: 10px 12px;
  border: 1px solid var(--border, #5a4a36);
  background: var(--panel-soft, #f4ecde);
}

.work-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.work-muted {
  margin: 0 0 8px;
  font-size: 0.82rem;
  opacity: 0.75;
}

.work-status {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #8a3a2a;
  background: #f6e4de;
  font-size: 0.9rem;
}

.work-form {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.work-form label {
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
}

.work-form select {
  padding: 6px 8px;
  border: 1px solid var(--border, #5a4a36);
  background: #fffaf2;
  color: var(--ink, #2b1a0e);
  font: inherit;
}

.work-badge {
  border: 1px solid var(--border, #5a4a36);
  background: #f3ead8;
  /* Light panel, so the ink colour must be stated explicitly: inheriting from
   * the dark shell produced dark-on-dark text that players could not read. */
  color: var(--ink, #2b1a0e);
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.work-badge__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.work-badge__status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.work-badge__sub,
.work-badge__stats,
.work-badge__tools,
.work-badge__langs {
  margin: 4px 0 0;
}

.work-preview {
  margin: 0;
  font-size: 0.9rem;
}

.work-result {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #5a4a36);
  background: #fffaf2;
  /* Light panel: state the ink explicitly, or it inherits the dark shell. */
  color: var(--ink, #2b1a0e);
}

.work-result h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.work-result--fail {
  border-color: #8a5a3a;
  background: #f5ebe0;
}

.work-result--ok {
  border-color: #5a7a4a;
  background: #eef5e8;
}

.work-result--great {
  border-color: #a16a38;
  background: #f7efe4;
}

.work-rumors,
.work-npc-flags,
.master-work-npc-list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
}

.work-rumors li,
.work-npc-flags li,
.master-work-npc-list li {
  margin-bottom: 6px;
}

.work-log {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
}

.work-log li {
  margin-bottom: 4px;
}

.npc-card__work-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  /* Accent reads at ~3:1 on the pale card. Keep the accent border for the
   * chip look, but use ink for the label so it is legible. */
  border: 1px solid var(--accent, #a16a38);
  color: var(--ink, #2b1a0e);
  vertical-align: middle;
}

.npc-card__can-work {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn--danger {
  border-color: #8a3a2a;
  color: #6e2a1e;
  background: #f6e4de;
}

.btn--danger:hover {
  background: #efd2c8;
}

/* —— Tickets —— */
.tickets-room {
  padding: 12px 14px 28px;
  max-width: 960px;
}

.tickets-lead {
  margin: 4px 0 14px;
  font-size: 0.85rem;
  opacity: 0.8;
}

.tickets-status {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, #5a4a36);
  background: var(--panel-soft, #f4ecde);
  font-size: 0.9rem;
}

.tickets-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 720px) {
  .tickets-layout {
    grid-template-columns: 1fr;
  }
}

.tickets-queue__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.tickets-queue__bar h3,
.tickets-thread__head h3,
.tickets-create h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent, #a16a38);
}

.tickets-queue__bar select,
.tickets-create select,
.tickets-create input,
.tickets-create textarea,
.tickets-status-ctrl select,
.tickets-reply textarea {
  padding: 6px 8px;
  border: 1px solid var(--border, #5a4a36);
  background: #fffaf2;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}

.tickets-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.tickets-list__item {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border, #5a4a36);
  background: var(--panel-soft, #f4ecde);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.tickets-list__item.is-active {
  border-color: var(--accent, #a16a38);
  background: #fffaf2;
}

.tickets-list__subject {
  font-weight: 600;
  font-size: 0.95rem;
}

.tickets-list__meta {
  font-size: 0.75rem;
  opacity: 0.75;
}

.tickets-badge {
  display: inline-block;
  width: fit-content;
  padding: 1px 7px;
  font-size: 0.72rem;
  border: 1px solid var(--border, #5a4a36);
}

.tickets-badge--open {
  border-color: #5a7a4a;
  color: #3d5a32;
}

.tickets-badge--needs_clarification {
  border-color: #a16a38;
  color: #7a4a20;
}

.tickets-badge--closed {
  border-color: #6a5a4a;
  color: #5a4a36;
  opacity: 0.85;
}

.tickets-muted {
  margin: 0 0 8px;
  font-size: 0.82rem;
  opacity: 0.75;
}

.tickets-create {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(90, 74, 54, 0.35);
}

.tickets-create label,
.tickets-status-ctrl {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
}

.tickets-thread {
  padding: 10px 12px;
  border: 1px solid var(--border, #5a4a36);
  background: #fffaf2;
  color: var(--ink, #2b1a0e);
  min-height: 200px;
}

.tickets-thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.tickets-status-ctrl {
  margin: 8px 0 12px;
  max-width: 280px;
}

.tickets-messages {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tickets-msg {
  padding: 8px 10px;
  border: 1px solid rgba(90, 74, 54, 0.25);
  background: var(--panel-soft, #f4ecde);
}

.tickets-msg--master {
  border-color: rgba(161, 106, 56, 0.45);
  background: #f7efe4;
}

.tickets-msg__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.78rem;
  margin-bottom: 4px;
  opacity: 0.85;
}

.tickets-msg__text {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.92rem;
}

.tickets-reply {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(90, 74, 54, 0.35);
}

/* —— Viswall downtime panel —— */
.viswall-panel {
  max-width: none;
  padding-top: 0;
}

.viswall-panel__title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  color: var(--ink, #2b1a0e);
}

.viswall-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.viswall-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.viswall-filter.viswall-filter--on {
  background: #fff8e8;
  box-shadow: inset 0 0 0 1px #8b5a2b;
  font-weight: 600;
}

.viswall-search,
.viswall-char {
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
  min-width: 160px;
}

.viswall-search input,
.viswall-char select {
  padding: 6px 8px;
  border: 1px solid var(--border, #5a4a36);
  background: #fffaf2;
  color: var(--ink, #2b1a0e);
  font: inherit;
}

.viswall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.95fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 720px) {
  .viswall-layout {
    grid-template-columns: 1fr;
  }
}

.viswall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.viswall-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 10px 11px;
  border: 2px solid var(--border, #5a4a36);
  background: #f4ecde;
  color: var(--ink, #2b1a0e);
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.viswall-card:hover {
  background: #fff8e8;
}

.viswall-card--active {
  background: #fff8e8;
  box-shadow: inset 0 0 0 1px #8b5a2b;
}

.viswall-card__side {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

.viswall-card__side--south {
  color: #7a2e2e;
}

.viswall-card__side--north {
  color: #2e4a6e;
}

.viswall-card__npc {
  font-size: 0.98rem;
}

.viswall-card__work {
  font-size: 0.86rem;
  opacity: 0.9;
}

.viswall-card__prof,
.viswall-card__check {
  font-size: 0.78rem;
  opacity: 0.78;
  line-height: 1.3;
}

.viswall-card__pay {
  font-size: 0.88rem;
  margin-top: 2px;
}

.viswall-detail__card {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #5a4a36);
  background: #f3ead8;
}

.viswall-detail__card p {
  margin: 0 0 6px;
}

.viswall-career {
  margin-bottom: 14px;
}

.viswall-career__ranks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.viswall-rank {
  padding: 3px 8px;
  border: 1px solid rgba(90, 74, 54, 0.45);
  background: #e8dcc8;
  font-size: 0.8rem;
  opacity: 0.65;
}

.viswall-rank--on {
  opacity: 1;
  background: #fff8e8;
  border-color: #8b5a2b;
  font-weight: 600;
}

.viswall-career__arrow {
  opacity: 0.5;
}

.viswall-career__label {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.viswall-career__bar {
  height: 8px;
  border: 1px solid var(--border, #5a4a36);
  background: #e8dcc8;
  margin-bottom: 6px;
  overflow: hidden;
}

.viswall-career__bar > span {
  display: block;
  height: 100%;
  background: #a16a38;
}

.viswall-perks {
  margin: 8px 0 0;
  padding-left: 1.1em;
  font-size: 0.85rem;
}

.viswall-perk-preview {
  margin: 8px 0 0;
  font-size: 0.82rem;
  opacity: 0.8;
}

.viswall-perk-preview span {
  font-weight: 600;
}

.viswall-sim__form {
  display: grid;
  gap: 8px;
  max-width: 320px;
}

.viswall-sim__form label {
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
}

.viswall-sim__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.viswall-sim-result {
  margin-top: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border, #5a4a36);
  background: #fff8e8;
}

.viswall-sim-result--critFail {
  border-color: #8a3a2a;
  background: #f6e4de;
}

.viswall-sim-result--fail {
  border-color: #8a5a2a;
  background: #f6ecde;
}

.viswall-sim-result--ok {
  border-color: #4a6a3a;
}

.viswall-sim-result--good,
.viswall-sim-result--crit {
  border-color: #2e6e4a;
  background: #e8f2e8;
}

.viswall-sim-result__title {
  margin: 0 0 6px;
}

.viswall-sim-result__gold {
  margin: 6px 0;
  font-size: 1.05rem;
}

.viswall-consequences {
  margin: 6px 0 10px;
  padding-left: 1.1em;
  font-size: 0.88rem;
}