/* UI fixes, loaded last. One file so each fix is easy to find and to remove. */

/* My RV: the player card is one column on phones and small tablets (a later rule had put the two columns back, which squeezed the module list) */
@media (max-width: 760px) {
  .mr-hero { grid-template-columns: 1fr !important; }
  .mr-hero-r { margin-top: 2px; }
}

/* Planner settings sheet on tablets: centred and never wider than the screen (it was shifted 47px to the right at about 850px) */
@media (min-width: 650px) and (max-width: 1180px) {
  html.aniiland-phone .planner-sidebar.mobile-settings-open {
    left: 0 !important; right: 0 !important;
    width: min(760px, 100%) !important; margin-inline: auto !important;
  }
}

/* My RV: fields and buttons in one row have one height */
.myrv-dialog .mr-field input, .myrv-dialog .mr-field select { min-height: 46px; box-sizing: border-box; }
.mr-form .mr-go { height: 46px; min-height: 46px; }

/* My RV question / review windows: buttons of one size, side by side, the same style family */
.mr-ask-btns { align-items: center; }
.mr-ask-btns .primary, .mr-ask-btns .secondary {
  height: 44px; min-height: 0; padding: 0 20px; flex: 0 0 auto; font-size: 14px; font-weight: 700; line-height: 1;
}
.mr-ask-btns .secondary { background: transparent; border: 1px solid #3b5166; color: #d6e4f0; box-shadow: none; }
.mr-ask-btns .secondary:hover { background: #1a2a38; }
@media (max-width: 520px) { .mr-ask-btns .primary, .mr-ask-btns .secondary { flex: 1 1 100%; } }

/* review window: five tiles fit in one row */
.mr-ask-tiles { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.mr-ask-tile { padding: 8px 10px; }

/* My RV and its question windows: every button has the same height, padding and shape; the primary one is filled, the others are outlined */
.mr-foot { justify-content: flex-end; }
.myrv-dialog button.primary, .myrv-dialog button.secondary, .myrv-ask button.primary, .myrv-ask button.secondary {
  box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; text-align: center; width: auto; flex: 0 0 auto; white-space: normal;
}
.myrv-dialog button.secondary, .myrv-ask button.secondary { background: transparent; border: 1px solid #3b5166; color: #d6e4f0; box-shadow: none; }
.myrv-dialog button.secondary:hover:not(:disabled), .myrv-ask button.secondary:hover:not(:disabled) { background: #1a2a38; }
.myrv-dialog button.danger-soft { border-color: #6a3a3a; color: #f0b4b4; }
.myrv-dialog button.danger-soft:hover:not(:disabled) { background: #2a1a1c; }
.myrv-dialog .mr-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.myrv-dialog .mr-cta-btn { flex: 0 0 auto; align-self: center; }
.myrv-dialog .mr-prof-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.myrv-dialog .mr-prof-btns button { height: 38px; min-height: 38px; padding: 0 14px; font-size: 13px; }
@media (max-width: 520px) { .myrv-dialog .mr-actions button { flex: 1 1 100%; } .myrv-dialog .mr-prof-btns button { flex: 1 1 calc(50% - 8px); } }

/* Header on a zoomed-in or small desktop window (just above the phone layout): the tabs used to spill to the left over the event and help buttons.
   The event name is hidden (its icon and counter stay, the name is in the tooltip), the tabs and buttons get tighter, and nothing is allowed to shrink below its content. */
@media (min-width: 1181px) and (max-width: 1480px) {
  html:not(.aniiland-phone) body > header { gap: 6px; }
  html:not(.aniiland-phone) body > header .event-center-btn > span { display: none; }
  html:not(.aniiland-phone) body > header nav { flex: 0 1 auto; min-width: 0; }
  html:not(.aniiland-phone) body > header nav > button { padding-inline: 10px; font-size: 13px; }
}
@media (min-width: 1481px) and (max-width: 1620px) {
  html:not(.aniiland-phone) body > header nav > button { padding-inline: 12px; }
}

/* Order Overrides: many orders used to squeeze the name, the seed note and the two buttons into one row, so they overlapped.
   Each card now has two rows (icon + name + note, then the buttons), the seed note is a normal box instead of a pill that bulges when its text wraps,
   and the cards wrap onto as many rows as needed. */
html:not(.aniiland-phone) .override-order-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
  gap: 10px;
}
html:not(.aniiland-phone) .override-order-card {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon info" "actions actions";
  align-items: start;
  gap: 8px 10px;
  min-width: 0;
}
html:not(.aniiland-phone) .override-order-card > img { grid-area: icon; align-self: center; }
html:not(.aniiland-phone) .override-order-card > div:not(.override-order-actions) { grid-area: info; min-width: 0; }
html:not(.aniiland-phone) .override-order-card .order-title-line {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
html:not(.aniiland-phone) .override-order-card .order-title-line > b {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.3;
}
html:not(.aniiland-phone) .override-order-card .order-seed-summary {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.3;
}
html:not(.aniiland-phone) .override-order-card > .override-order-actions,
html:not(.aniiland-phone) .override-order-card > button {
  grid-area: actions;
  grid-column: 1 / -1;
}
html:not(.aniiland-phone) .override-order-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
}
html:not(.aniiland-phone) .override-order-actions > button { min-width: 0; white-space: normal; line-height: 1.2; }

/* Order Solver panel with many orders: compact cards in as many columns as fit, instead of one tall column.
   The "Optional event reward" box is not used by any calculation, so it is not shown in the cards; the "Buy N x Seed" line repeats the seed note
   next to the name, so on a computer only the note is shown (a phone keeps both). */
html:not(.aniiland-phone) .order-panel .order-list {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  align-items: start;
  gap: 10px;
}
html:not(.aniiland-phone) .order-panel .order-card { padding: 10px 12px; }
html:not(.aniiland-phone) .order-panel .order-card-main { grid-template-columns: 44px minmax(0, 1fr) 66px; }
html:not(.aniiland-phone) .order-panel .order-card-main > img { width: 44px; height: 44px; }
html:not(.aniiland-phone) .order-panel .order-card .order-title-line { flex-direction: column; align-items: flex-start; gap: 4px; }
html:not(.aniiland-phone) .order-panel .order-card .order-seed-summary { display: block; border-radius: 8px; max-width: 100%; white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
html:not(.aniiland-phone) .order-panel .order-card .order-card-reward,
html:not(.aniiland-phone) .order-panel .order-card .order-seed-warning { display: none; }
html:not(.aniiland-phone) .order-panel .order-card-actions { flex-wrap: wrap; gap: 6px; margin-top: 6px; }