/* Brutalist look: thick ink lines, hard offset shadows, one loud accent.
   Light by default, dark when the system asks for it. No inline styles anywhere (CSP). */

:root {
  color-scheme: light dark;

  --bg: #efece4; /* behind the window */
  --paper: #ffffff; /* window, inputs, tables */
  --ink: #111111; /* text, lines, hard shadows */
  --ink-soft: #3d3d3d;
  --muted: #5c5c5c;
  --rule: #d6d3cb; /* thin row separators */
  --hover: #ffe4dc; /* hovered rows and menu items */
  --accent: #ff5a36; /* coral: title bar, current page, highlights */
  --accent-ink: #111111; /* text on the accent */
  --link: #c7361a;
  --link-hover: #8f2510;
  --error: #c7161a;
  --pos: #137a2c;
  --crafted: #c45a00; /* prices worked out from a craft */
  --warn: #8a6100;
  --placeholder: #8c8c8c;

  --line: 2px solid var(--ink);
  --line-thick: 3px solid var(--ink);
  --shadow: 3px 3px 0 var(--ink);
  --shadow-big: 8px 8px 0 var(--ink);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0e;
    --paper: #1a1a1a;
    --ink: #ecebe6;
    --ink-soft: #cfcdc6;
    --muted: #a3a19a;
    --rule: #393835;
    --hover: #3a221b;
    --accent: #ff6b4a;
    --accent-ink: #111111;
    --link: #ff8c70;
    --link-hover: #ffb3a1;
    --error: #ff6b6b;
    --pos: #5fd37a;
    --crafted: #ff9a3c;
    --warn: #f0c050;
    --placeholder: #7d7b75;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Keep the hidden attribute working even on elements we give a display value (e.g. .banner). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
}

/* --- Page frame ------------------------------------------------------------ */

.desktop {
  padding: 2rem 1.25rem 3rem;
}

/* Every page uses the same width. */
.window {
  max-width: 63rem;
  margin: 0 auto;
  border: var(--line-thick);
  background: var(--paper);
  box-shadow: var(--shadow-big);
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-bottom: var(--line-thick);
  background: var(--accent);
  color: var(--accent-ink);
}

.title-bar-text {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.title-bar-close,
button.title-bar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--accent-ink);
  background: #ffffff;
  box-shadow: none;
  color: #111111;
  font: 700 17px/1 var(--font);
  text-decoration: none;
  text-transform: none;
}

.title-bar-close:hover,
button.title-bar-close:hover {
  background: #111111;
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

/* Menu bar */

.menu-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: var(--line-thick);
}

.menu-bar a,
.menu-bar-user {
  padding: 9px 10px;
  border-right: var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-bar a:hover,
.menu-bar a:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}

.menu-bar a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.menu-bar-user {
  margin-left: auto;
  border-right: 0;
  border-left: var(--line);
  color: var(--muted);
  text-transform: none;
}

/* Body */

.window-body {
  padding: 22px 20px 28px;
}

main {
  min-height: 6rem;
}

h1,
h2,
h3,
legend {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.05;
}

h2,
h3 {
  margin: 26px 0 10px;
  font-size: 16px;
}

/* A short accent bar under section headings. */
h2::after {
  display: block;
  width: 36px;
  height: 4px;
  margin-top: 4px;
  background: var(--accent);
  content: "";
}

p {
  margin: 0 0 10px;
}

a {
  color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

.muted {
  color: var(--muted);
}

hr {
  margin: 14px 0;
  border: 0;
  border-top: var(--line);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- Forms ----------------------------------------------------------------- */

form {
  margin: 14px 0 0;
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  padding: 6px 8px;
  border: var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]):focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--accent);
}

input::placeholder {
  color: var(--placeholder);
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

/* "Remember me": checkbox and its label on one line. */
form p:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

form p:has(> input[type="checkbox"]) label {
  display: inline;
  margin: 0;
}

.helptext,
form p > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.errorlist {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  color: var(--error);
  font-weight: 700;
}

.errorlist.nonfield {
  margin-bottom: 12px;
  padding: 8px 10px;
  border: var(--line);
  border-left: 8px solid var(--error);
}

/* --- Buttons --------------------------------------------------------------- */

button,
input[type="submit"],
details.menu summary {
  display: inline-block;
  min-height: 34px;
  padding: 6px 14px;
  border: var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}

button:hover,
input[type="submit"]:hover,
details.menu summary:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

button:active,
input[type="submit"]:active,
details.menu[open] summary {
  box-shadow: none;
  transform: translate(3px, 3px);
}

@media (prefers-reduced-motion: reduce) {
  button,
  input[type="submit"],
  details.menu summary {
    transition: none;
  }
}

/* --- Banners (flash messages, htmx errors) ---------------------------------- */

.messages {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.banner {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: var(--line);
  border-left: 8px solid var(--ink);
  background: var(--paper);
}

.banner::before {
  flex: none;
  font-weight: 700;
  content: "\2139"; /* info */
}

.banner-success {
  border-left-color: var(--pos);
}

.banner-success::before {
  content: "\2714";
  color: var(--pos);
}

.banner-warning {
  border-left-color: var(--warn);
}

.banner-warning::before {
  content: "\26A0";
  color: var(--warn);
}

.banner-error {
  border-left-color: var(--error);
}

.banner-error::before {
  content: "\2716";
  color: var(--error);
}

/* Temporary announcements fading out (see static/js/app.js). */
.fading {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Side window: a second window docked top-right (browser popover) --------- */

.side-window {
  position: fixed;
  inset: 2rem 1rem auto auto;
  width: min(20rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 4rem);
  margin: 0;
  overflow: auto;
  color: var(--ink);
}

.side-window .title-bar-text {
  font-size: 13px;
}

.side-window .window-body {
  padding: 14px 16px 18px;
}

.side-window:popover-open {
  animation: slide-in 0.15s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(calc(100% + 1rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-window:popover-open {
    animation: none;
  }
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.price-item label {
  margin: 0;
  font-weight: 400;
}

.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Input + its "*" override marker. The marker sits left of the input and takes no space,
   so inputs line up with the column's right edge like every other number. */
.price-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.price-list .price-field input {
  width: 8rem;
  text-align: right;
}

.override-mark {
  position: absolute;
  right: 100%;
  margin-right: 4px;
  color: var(--accent);
  font-weight: 900;
}

.override-mark.off {
  visibility: hidden;
}

/* --- Toolbar with dropdown menus -------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
}

/* Buttons right under a table get some air. */
.list-view + .toolbar,
section + .toolbar,
.craft-columns + .toolbar {
  margin-top: 18px;
}

details.menu {
  position: relative;
}

details.menu summary {
  list-style: none;
}

details.menu summary::-webkit-details-marker {
  display: none;
}

details.menu summary::after {
  content: " \25BE";
}

.menu-popup {
  position: absolute;
  z-index: 5;
  min-width: 15rem;
  max-height: 20rem;
  overflow: auto;
  margin-top: 6px;
  padding: 4px;
  border: var(--line);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}

.menu-popup label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 4px 8px;
  font-weight: 400;
  white-space: nowrap;
}

.menu-popup label:hover {
  background: var(--hover);
}

/* --- Tables ------------------------------------------------------------------ */

.list-view {
  overflow-x: auto;
  border: var(--line);
  background: var(--paper);
}

.list-view table {
  width: 100%;
  border-collapse: collapse;
}

.list-view th {
  padding: 7px 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.list-view td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  vertical-align: middle;
}

.list-view tbody tr:last-child td {
  border-bottom: 0;
}

.list-view .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.list-view tbody tr:hover {
  background: var(--hover);
}

.list-view tfoot td {
  border-top: var(--line);
  border-bottom: 0;
}

.cell-input:not([type="checkbox"]) {
  display: inline-block;
  width: 6rem;
  padding: 2px 5px;
  border-width: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Remove/hide buttons: first column, same size as the resource tree's +/- toggles. */
.list-view .row-hide-cell {
  width: 17px;
  padding-right: 0;
  padding-left: 6px;
}

button.row-hide,
button.tree-toggle,
.tree-toggle-space {
  display: block;
  flex: none;
  width: 17px;
  height: 17px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-width: 2px;
  box-shadow: none;
  font: 700 13px/13px var(--font);
  text-align: center;
  text-transform: none;
}

.tree-toggle-space {
  border: 0;
}

button.row-hide:hover {
  background: var(--error);
  border-color: var(--error);
  color: #ffffff;
}

button.tree-toggle:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

button.row-hide:active,
button.tree-toggle:active {
  transform: none;
}

.pos {
  color: var(--pos);
  font-weight: 700;
}

.neg {
  color: var(--error);
}

/* --- Items (craft calculator and friends) ----------------------------------- */

.item-icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* A plain table cell (not flex), so its row line runs the full width. */
.item-cell > * {
  vertical-align: middle;
}

.item-cell .item-icon {
  margin-right: 8px;
}

.grade {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: var(--line);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.craft-search {
  position: relative;
  margin-bottom: 4px;
}

.search-results {
  position: absolute;
  z-index: 6;
  width: min(28rem, 100%);
  max-height: 22rem;
  overflow: auto;
  margin: 6px 0 0;
  padding: 4px;
  list-style: none;
  border: var(--line);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}

.search-results:empty {
  display: none;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  color: var(--ink);
  text-decoration: none;
}

.search-result:hover,
.search-result:focus-visible {
  background: var(--hover);
  color: var(--ink);
  outline: none;
}

/* Resource tree and materials side by side, so expanding the tree doesn't push the
   materials down the page. They stack on narrow screens. */
.craft-columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0 20px;
  align-items: start;
}

/* Long material names wrap (next to the icon) instead of widening the table. */
.craft-columns #craft-totals .item-cell {
  white-space: normal;
}

.item-line {
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .craft-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Resource tree */
.tree-view {
  padding: 6px 6px;
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--rule);
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.tree-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tree-link:hover {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* "?" next to a craftable item: its unit craft cost in a popover. */
button.unit-cost-button {
  width: 17px;
  height: 17px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--muted);
  border-radius: 50%;
  box-shadow: none;
  color: var(--muted);
  font: 700 11px/13px var(--font);
  text-transform: none;
}

button.unit-cost-button:hover,
button.unit-cost-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

button.unit-cost-button:active {
  transform: none;
}

/* In the middle of the window; taller content scrolls inside. */
.unit-cost-pop {
  position: fixed;
  inset: 0;
  width: min(22rem, calc(100vw - 16px));
  height: fit-content;
  max-height: calc(100vh - 32px);
  margin: auto;
  overflow: auto;
  padding: 10px 12px;
  border: var(--line);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--ink);
  font-size: 13px;
}

.unit-cost-pop p {
  margin: 6px 0 0;
}

.unit-cost-pop .unit-cost-head {
  margin: 0 0 6px;
}

.unit-cost-pop table {
  width: 100%;
  border-collapse: collapse;
}

.unit-cost-pop td {
  padding: 2px 4px;
  border-bottom: 1px solid var(--rule);
}

.unit-cost-pop td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tree-qty {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.share-box {
  display: block;
  margin-top: 12px;
  border-left-color: var(--accent);
}

.share-box::before {
  content: none;
}

.share-box input {
  max-width: none;
  margin: 6px 0 4px;
}

/* --- Craft profits ---------------------------------------------------------------- */

.profit-filters {
  align-items: center;
}

.profit-filters input[type="search"] {
  width: 16rem;
}

.profit-filters select {
  width: auto;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 400;
}

.profit-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

button.missing-warn {
  min-width: 0;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--warn);
  font-size: 13px;
  letter-spacing: 0;
}

button.missing-warn:hover {
  background: var(--warn);
  color: var(--paper);
}

button.missing-warn:active {
  transform: none;
}

.profit-count {
  margin: 0 0 6px;
}

/* Server-sorted headers: links that look like the other tables' headers. */
.list-view th .sort-link {
  color: inherit;
  text-decoration: none;
}

.list-view th .sort-link:hover {
  text-decoration: underline;
}

.list-view th[aria-sort] .sort-link {
  color: var(--accent);
}

.list-view th[aria-sort="ascending"] .sort-link::after {
  content: " \25B2";
  font-size: 0.75em;
}

.list-view th[aria-sort="descending"] .sort-link::after {
  content: " \25BC";
  font-size: 0.75em;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 12px;
}

.pager a,
.pager span {
  min-width: 32px;
  padding: 4px 8px;
  border: var(--line);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.pager a:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.pager .pager-current {
  background: var(--ink);
  color: var(--paper);
}

.pager .pager-off,
.pager .pager-gap {
  border-color: transparent;
  color: var(--muted);
}

/* The ? / ⚠ popup on Craft profits: materials with editable prices. */
.profit-pop {
  width: min(38rem, calc(100vw - 16px));
}

.bd-total {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.bd-legend {
  margin: 0 0 4px;
  font-size: 12px;
}

.profit-pop form {
  margin: 0;
}

.profit-pop .cell-input {
  width: 7rem;
}

/* Zooming out of the ? that opened it (transform-origin set by app.js), and back into it. */
[data-zoom-popover] {
  transition:
    scale 0.2s ease,
    opacity 0.2s ease,
    overlay 0.2s ease allow-discrete,
    display 0.2s ease allow-discrete;
}

[data-zoom-popover]:not(:popover-open),
[data-zoom-popover].zoom-start {
  scale: 0.05;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-zoom-popover] {
    transition: none;
  }
}

.bd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-children {
  margin-left: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
}

.bd-line {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto auto 7.5rem;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  border-bottom: 1px solid var(--rule);
}

/* Items with no price at all (not even a crafted one) stand out. */
.bd-line:has(.bd-info.is-missing),
.bd-line:has(.bd-info.is-incomplete) {
  background: var(--hover);
}

.incomplete-warn {
  color: var(--warn);
  font-weight: 700;
  cursor: help;
}

.bd-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.bd-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bd-info {
  font-size: 12px;
  white-space: nowrap;
}

.bd-sub {
  margin: 4px 0 2px;
  font-size: 12px;
}

.crafted-tag {
  color: var(--crafted);
  font-weight: 700;
}

button.crafted-mark {
  min-width: 0;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--crafted);
  font-size: 13px;
  letter-spacing: 0;
}

button.crafted-mark:hover {
  background: var(--crafted);
  color: var(--paper);
}

button.crafted-mark:active {
  transform: none;
}

.filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: center;
  margin: 0;
  padding: 2px 10px 4px;
  border: var(--line);
}

.filter-group legend {
  padding: 0 4px;
  font-size: 11px;
}

#profit-table .item-line {
  gap: 8px;
}

#profit-table .item-line a {
  color: inherit;
  text-decoration: none;
}

#profit-table .item-line a:hover {
  color: var(--link);
  text-decoration: underline;
}

#profit-table .item-line .item-icon {
  margin-right: 0;
}

/* Staff: recipes switched off (hidden from everyone else). */
.recipe-admin {
  align-items: center;
  margin: 0 0 8px;
}

.recipe-disabled td {
  opacity: 0.5;
}

.disabled-tag {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

/* --- Market prices ------------------------------------------------------------------ */

.used-in {
  white-space: normal;
}

.used-chip {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 0 5px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.used-chip:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.market-updated {
  font-size: 12px;
  white-space: nowrap;
}

.market-updated.stale {
  color: var(--warn);
  font-weight: 700;
}

/* --- Enchant calculator --------------------------------------------------------------- */

.enchant-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0 10px;
  font-size: 16px;
}

.enchant-levels {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}

.enchant-levels label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.enchant-levels select {
  width: auto;
}

.rate-input.cell-input {
  width: 5rem;
}

/* Prices and rates side by side, equal width; long scroll names wrap instead of scrolling. */
.craft-columns.enchant-inputs {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.enchant-inputs td {
  white-space: normal;
}

.enchant-inputs td.num {
  white-space: nowrap;
}

#market-table .item-line {
  gap: 8px;
}

/* The cost spelled out: bought lines, recouped lines (green), the total (accent). */
.receipt {
  border: var(--line);
  background: var(--paper);
}

.receipt-line {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto 13rem;
  gap: 4px 12px;
  align-items: baseline;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.receipt-line .r-sign {
  font-weight: 900;
  text-align: center;
}

.receipt-line .r-unit {
  color: var(--ink-soft);
  font-size: 13px;
  white-space: nowrap;
}

.receipt-line .r-amount {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.receipt-line .r-short {
  display: inline-block;
  min-width: 4.5rem;
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.receipt-line.back,
.receipt-line.back .r-amount {
  color: var(--pos);
}

.receipt-line.total {
  border-top: var(--line);
  border-bottom: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
}

.receipt-line.total .r-short {
  color: var(--accent-ink);
}

@media (max-width: 600px) {
  .receipt-line {
    grid-template-columns: 1.2rem minmax(0, 1fr);
  }

  .receipt-line .r-unit,
  .receipt-line .r-amount {
    grid-column: 2;
    text-align: left;
  }
}

.scroll-tag {
  padding: 0 5px;
  border: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.scroll-tag.blessed {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.list-view td.chosen {
  font-weight: 700;
}

.plan-best td {
  font-weight: 700;
}

/* --- MCrit calculator ----------------------------------------------------------- */

.formula {
  padding: 6px 14px;
  border: var(--line);
  border-left: 8px solid var(--accent);
}

.formula p {
  margin: 6px 0;
}

.cell-input.name-input {
  width: 12rem;
  text-align: left;
}

.wit-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 12px;
  padding: 8px 14px 12px;
  border: var(--line);
}

.wit-bonuses legend {
  padding: 0 6px;
  font-size: 13px;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 400;
}

.dye-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dye-field label {
  margin: 0;
}

.dye-field .cell-input {
  width: 4.5rem;
}

/* --- Sortable tables ------------------------------------------------------------ */

table[data-sortable] th[data-sort] {
  cursor: pointer;
  user-select: none;
}

table[data-sortable] th[data-sort]:hover {
  background: var(--ink-soft);
}

table[data-sortable] th[data-sort]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

table[data-sortable] th[aria-sort] {
  color: var(--accent);
}

table[data-sortable] th[aria-sort="ascending"]::after {
  content: " \25B2";
  font-size: 0.75em;
}

table[data-sortable] th[aria-sort="descending"]::after {
  content: " \25BC";
  font-size: 0.75em;
}

/* --- Olympiad: adena per NGP colour scale (red = worst, green = best) ---------- */

.ngp-value {
  display: inline-block;
  min-width: 6rem;
  padding: 1px 6px;
}

.ngp-value[class*="grad-"] {
  color: #111111;
  font-weight: 700;
}

.grad-0 { background: #f4a6a6; }
.grad-1 { background: #f6b8a2; }
.grad-2 { background: #f8caa0; }
.grad-3 { background: #f9dc9f; }
.grad-4 { background: #f7ea9f; }
.grad-5 { background: #e8ef9f; }
.grad-6 { background: #d3eba0; }
.grad-7 { background: #bde5a2; }
.grad-8 { background: #a6dea5; }
.grad-9 { background: #8fd6a8; }

/* --- Small screens ----------------------------------------------------------------- */

@media (max-width: 600px) {
  .desktop {
    padding: 0;
  }

  .window {
    border-width: 0 0 3px;
    box-shadow: none;
  }

  .window-body {
    padding: 16px 16px 22px;
  }

  h1 {
    font-size: 26px;
  }

  /* One row that scrolls sideways instead of three wrapped rows. */
  .menu-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu-bar a,
  .menu-bar-user {
    padding: 8px 10px;
  }
}