/* Hub launcher: a plain vertical list of buttons, same gray sprite as every other modal
   button (see modal.css's .modal-footer button) rather than a new look just for this list. */
.hub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 200px;
}

.hub-item {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
  border: 0;
  box-shadow: none;
  outline: none;
  filter: none;
  height: 28px;
  font-size: 12px;
  color: #ddd;
}

.hub-item:hover {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
}

.hub-item:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100%;
}

/* House Info modal: tab strip mirrors #spellbook-modal .spellbook-tab (same flat
   button_gray.png look), just wrapping since House has up to 6 tabs. 340px matches
   #death-modal's own width (modal.css) -- the standard small-utility-modal size, also used by
   #hub-modal and #bed-sleep-modal now so the Hub's own windows stop feeling randomly sized
   next to one another (Douglas 2026-09-18). */
#house-info-modal {
  width: 340px;
}

#hub-modal {
  width: 340px;
}

#guild-modal {
  width: 340px;
}

#guild-body {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 11px;
  color: #ccc;
}

/* "Make Leader" gets its own thin row right under a member (see GuildModal.__renderGuild) --
   the rank select + Kick button already crowd the member's own row at this modal's width, so
   a third control there would overflow instead of just wrapping badly. */
.guild-leader-row {
  justify-content: flex-end !important;
  padding: 0 0 4px 0 !important;
  border-bottom: none !important;
}

/* Nickname editor: its own thin row too, same reasoning -- an input plus a Set button next
   to the rank select/Kick button on the member's own row would overflow this modal's width. */
.guild-nick-row {
  gap: 4px;
  padding: 0 0 6px 0 !important;
  border-bottom: none !important;
}

.guild-nick-row .guild-nick-input {
  flex: 1 1 auto;
  min-width: 0;
}

#house-info-modal .house-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 8px;
}

#house-info-modal .house-tab {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  height: 24px;
  font-size: 10px;
  color: #ddd !important;
  flex: 1 1 auto;
  padding: 2px;
  white-space: nowrap;
}

#house-info-modal .house-tab:hover {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100% !important;
}

#house-info-modal .house-tab.active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100% !important;
}

/* A fixed height (not max-height) so the modal itself no longer visibly grows or shrinks
   switching between a short tab (Leave) and a long one (Invite) -- the content inside still
   scrolls if it runs long, the outer box just never moves (Douglas 2026-09-18). */
.house-tab-content {
  font-size: 11px;
  color: #ccc;
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Overview / Protection: short label-value rows, label column sized to its widest label */
.house-stat-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 0 0 8px 0;
}

.house-stat-list dt {
  color: #999;
}

.house-stat-list dd {
  margin: 0;
  color: #eee;
}

.house-note,
.house-hint {
  color: #bbb;
  margin: 4px 0;
  line-height: 1.4;
}

.house-hint-small {
  color: #999;
  font-size: 10px;
  margin: 4px 0;
}

.house-hint code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0 3px;
  border-radius: 2px;
}

.house-empty {
  color: #888;
  font-style: italic;
  margin: 6px 0;
}

/* Name lists: guests, sub-owners, per-door access */
.house-name-list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
}

.house-name-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* The name is the only flexible piece of the row -- it absorbs whatever space is left, and a
   long name truncates instead of pushing the row wider. The role select (fixed 96px, see
   .house-role-select) and the Remove button next to it then land at the same fixed spot on
   every row, whatever the name's length -- fixing a report (Douglas 2026-09-18) that
   justify-content: space-between let a short name pull the select back toward the middle of
   the row instead of keeping it flush against Remove. */
.house-guest-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.house-entry-rule {
  color: #e0c060;
}

.house-remove-btn,
.house-add-btn {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
  border: 0;
  box-shadow: none;
  outline: none;
  filter: none;
  height: 20px;
  font-size: 10px;
  color: #ddd;
  padding: 0 6px;
  flex: 0 0 auto;
}

.house-remove-btn:active,
.house-add-btn:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100%;
}

.house-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
  position: relative;
}

.house-add-input {
  flex: 1 1 auto;
  min-width: 0;
  color: white;
  border: 1px solid black;
  box-sizing: border-box;
}

/* Invite tab's own add-form carries a role select on top of the name input -- the select's
   native width (especially "Sub-owner") was crowding the name field down to almost nothing
   and forcing the whole row wider than the modal, which is what put an unwanted horizontal
   scrollbar at the bottom (Douglas 2026-09-18 bug report). The name input now always takes
   the full first line by itself (flex-basis 100% forces the wrap); the role select and the
   Invite button share a second line underneath, each sized to a fixed, modest width instead
   of the select's own intrinsic size. */
.house-add-form-role .house-add-input {
  flex: 1 1 100%;
}

/* Invite tab: each row's role select (owner/sub-owner view) or plain label (read-only view) */
.house-role-select {
  flex: 0 0 auto;
  width: 96px;
  box-sizing: border-box;
  color: white;
  background: #222;
  border: 1px solid black;
  font-size: 10px;
  height: 20px;
}

.house-add-form-role .house-invite-btn {
  flex: 1 1 auto;
}

.house-role-label {
  flex: 0 0 auto;
  color: #aab;
  font-size: 10px;
}

/* Invite tab redesign (Douglas 2026-09-18): the Everyone/Guild blanket switches and the "add
   a guest" form sit up top in the normal modal tone; the already-added guest list sits below
   in its own visibly-recessed subwindow, so the two "add" vs "already here" concerns read as
   separate things at a glance instead of one flat block. */
.house-group-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.house-group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.house-group-toggle input {
  margin: 0;
}

.house-guest-subwindow {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  padding: 6px 8px;
  margin-top: 8px;
}

.house-guest-subwindow-label {
  color: #999;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 4px 0;
}

/* Doors sub-tab (guildhall-only): one block per door, name field on top, per-door access list
   and add-form below -- same subwindow tone as the Invite tab's guest list, for the same
   already-added/being-added distinction. */
.house-door-block {
  margin-bottom: 10px;
}

.house-door-block:last-child {
  margin-bottom: 0;
}

.house-door-rename {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.house-door-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.house-door-label {
  color: #ddd;
  font-size: 11px;
  font-weight: bold;
}

/* Transfer tab: incoming offer and the owner's sell form */
.house-sell {
  display: flex;
  flex-direction: column;
}

.house-sell-breakdown {
  min-height: 26px;
}

#house-buy-btn,
#house-leave-btn,
#house-protection-buy {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
  border: 0;
  box-shadow: none;
  outline: none;
  filter: none;
  height: 26px;
  font-size: 11px;
  color: #ddd;
  margin-top: 4px;
}

#house-buy-btn:active,
#house-leave-btn:active,
#house-protection-buy:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100%;
}

#house-buy-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#house-exit-btn {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
  border: 0;
  box-shadow: none;
  outline: none;
  filter: none;
  height: 26px;
  font-size: 11px;
  color: #ddd;
}

#house-exit-btn:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100%;
}