.store-under-budget td {
	background-color: #d7f5d7 !important;
}

.store-under-budget a {
	font-weight: 600;
}

.commentModal {
	display: none;

	position: fixed;
	inset: 0;

	width: 100%;
	height: 100%;

	background: rgba(0,0,0,0.45);

	z-index: 9999;

	padding: 16px;

	box-sizing: border-box;

	overflow-y: auto;
}

.commentModalContent {
	background: #fff;

	width: 100%;
	max-width: 420px;

	margin: 60px auto;

	border-radius: 10px;

	padding: 16px;

	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	gap: 14px;
}

.commentModalHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;

	gap: 10px;
}

.commentModalHeader h3 {
	margin: 0;
	font-size: 18px;
}

.commentModalClose {
	cursor: pointer;
	font-size: 18px;
	flex-shrink: 0;
}

.commentTextarea {
	width: 100%;

	min-height: 120px;

	resize: vertical;

	padding: 10px;

	font-size: 14px;

	border: 1px solid #ccc;
	border-radius: 6px;

	box-sizing: border-box;
}

.commentModalFooter {
	display: flex;
	justify-content: flex-end;
}

.commentSaveBtn {
	cursor: pointer;

	padding: 8px 16px;

	border-radius: 6px;

	font-size: 14px;
}

.commentEditor {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.commentTextareaInline {
	width: 100%;
	min-height: 90px;
	resize: vertical;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}

.commentActions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.commentClearBtn {
	cursor: pointer;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 14px;
	border: 1px solid #ccc;
	background: #f5f5f5;
}

@media (max-width: 768px) {

	.commentModal {
		padding: 12px;
	}

	.commentModalContent {
		margin: 30px auto;
		padding: 14px;
		border-radius: 8px;
	}

	.commentModalHeader h3 {
		font-size: 16px;
	}

	.commentTextarea {
		min-height: 100px;
		font-size: 13px;
	}

	.commentSaveBtn {
		width: 100%;
		font-size: 13px;
	}

	.commentClearBtn {
		width: 100%;
		font-size: 13px;
	}

	.commentActions {
		flex-direction: column;
	}

	.commentModalFooter {
		width: 100%;
	}
}

/* #456 — preview and reservation choice for Adapt. */
.modal-input.adapt-box { display: flex; flex-direction: column; width: min(700px, 92vw);
	position: relative;
	max-height: 84vh; box-sizing: border-box; overflow: hidden; padding: 20px; }
.adapt-box #adaptTitle { margin: 2px 36px 7px 0; color: #e0a83a; }
.adapt-box #adaptClose { position: absolute; align-self: flex-end; border: 0;
	background: transparent; padding: 0 4px; }
.adapt-intro { margin: 0 0 13px; line-height: 1.45; font-size: 0.94rem; }
.adapt-options { border: 1px solid #d5dce0; border-radius: 6px; margin: 0;
	padding: 8px 12px; }
.adapt-options legend { font-weight: 700; padding: 0 5px; }
.adapt-options label { display: flex; align-items: flex-start; gap: 9px;
	padding: 6px 0; cursor: pointer; }
.adapt-options input { width: auto; margin: 4px 0 0; flex: none; }
.adapt-options small { display: block; color: #555; line-height: 1.35; }
.adapt-summary { margin: 13px 0 7px; line-height: 1.4; }
.adapt-rows { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.adapt-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
	padding: 8px 2px; border-top: 1px solid #e2e6e8; font-size: 0.9rem; }
.adapt-row strong { min-width: 160px; }
.adapt-row small { color: #666; flex-basis: 100%; }
.adapt-unavailable { color: #765921; }
.adapt-actions { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap;
	gap: 8px; border-top: 1px solid #ddd; padding-top: 11px; margin-top: 9px; }
.adapt-actions button { min-height: 38px; cursor: pointer; }
.adapt-actions #adaptApply { background: #e0a83a; color: #231b0d; font-weight: 700; }
.adapt-actions button[hidden] { display: none; }
@media (max-width: 540px) {
	.modal-input.adapt-box { width: 94vw; padding: 15px; }
	.adapt-row strong { min-width: 0; flex-basis: 100%; }
}

/* #184 — the cheaper-printings picker. Scoped to the panel; styles.css is
   shared by every page and this is one modal on one page. */
.cheapen-summary { font-size: 0.9rem; color: #444; margin: 0 0 10px; line-height: 1.45; }
.cheapen-summary b { color: #1a7f37; }
.cheapen-card { border-top: 1px solid #e2e6e8; padding: 9px 0 7px; }
.cheapen-card:first-child { border-top: 0; }
.cheapen-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
	justify-content: space-between; margin-bottom: 4px; }
.cheapen-name { font-weight: 700; }
.cheapen-now { font-size: 0.82rem; color: #666; }
.cheapen-opt { display: block; font-size: 0.86rem; padding: 3px 0 3px 2px; cursor: pointer; }
.cheapen-opt input { width: auto; margin-right: 7px; }
.cheapen-opt.keep { color: #666; }
.cheapen-price { font-variant-numeric: tabular-nums; }
.cheapen-save { color: #1a7f37; font-weight: 700; margin-left: 6px; }
.cheapen-kind { color: #777; margin-left: 6px; }
/* Only the card list scrolls. This used to be a sticky footer inside the
   modal's own scroller, which let rows show through above and below it. */
.modal-input.cheapen-box { display: flex; flex-direction: column; overflow: hidden; }
#cheapenRows { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.cheapen-footer { background: white; border-top: 1px solid #ccc; flex: none;
	margin-top: 10px; padding: 9px 2px 4px; display: flex; align-items: center;
	justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.cheapen-source { font-size: 0.86rem; margin: 0 0 8px; display: flex; gap: 16px;
	flex-wrap: wrap; align-items: center; }
.cheapen-source label { cursor: pointer; }
.cheapen-source input { width: auto; margin-right: 6px; }
.cheapen-why { border-bottom: 1px dotted #999; cursor: help; }
.cheapen-more { margin: 10px 0 0; font-size: 0.86rem; }
.cheapen-more a { cursor: pointer; text-decoration: underline; }
.cheapen-caveat { font-size: 0.78rem; color: #777; margin: 8px 0 0; line-height: 1.4; }
.cheapen-none { font-size: 0.92rem; line-height: 1.5; }

/* Automatic pricing (#373) on a phone. The site's table rules - table-layout: fixed,
   and from 900px down a 50% width on the first AND the last column of every table -
   left the three columns in between no width at all: "Cond.", "Finish" and "Now" were
   printed on top of each other, and "Proposed" ran past the edge. The table sizes its
   own columns here, a long card name wraps, and anything still too wide scrolls
   sideways. Same override as #modalScanMove's table. */
@media (max-width: 900px) {
	#modalAutoPricing table { table-layout: auto; }
	#modalAutoPricing th, #modalAutoPricing td { width: auto; }
	#modalAutoPricing td:first-child { white-space: normal; }
	#autoPricingBody { overflow-x: auto; }
}

/* Categories (#351) on a phone: the fixed widths of the other four columns
   (74 + 60 + 70 + 120px) took the whole dialog, the Category column was 0px wide and
   every name sat under its card count (in landscape, long names like "Enchantment"
   still ran into it). Here the columns size to their content and the long headings
   wrap. */
@media (max-width: 900px) {
	#modalCategories .versions-table { table-layout: auto; }
	#modalCategories .versions-table th,
	body.home-page #modalCategories .versions-table td { width: auto !important; white-space: normal; }
}

/* #370 — Phone fixes for Home:
   1. 16px font on form fields so iOS Safari does not zoom the page on focus,
      plus finger-friendly heights on the top toolbar and dialog inputs.
   2. Finger-sized (36x34) tap boxes on the list header action icons (arrow,
      reload, folder, pin) and public link icon (30x30), with a two-row header
      layout in portrait (<=600px) so list titles use the full card width.
   3. Finger-sized tap boxes on the tutorial controls, dialog close buttons,
      Filter mana symbols/reset button, checkboxes/radios, Select2/tag remove
      buttons, Categories up/down buttons, open-list search/toggle buttons,
      and footer links.
   4. Full mobile modal sizing (94vw instead of 80%), touch-sized modal action
      buttons, #modalEditVersions input sizing + stacked per-version cards at
      <=700px across Collection/Offering/Deck/Want lists, and touch targets across
      Table View, Grid View, Stacked Grid View, pagination, and list info rows. */
@media (max-width: 900px) {
	body.home-page input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]),
	body.home-page select,
	body.home-page textarea,
	body.home-page .select2-container .select2-search--inline .select2-search__field,
	body.home-page .select2-dropdown .select2-search__field {
		font-size: 16px !important;
	}

	body.home-page .modal .modal-input:not(.adapt-box),
	body.home-page .modal .mymodal-input {
		width: min(94vw, 580px) !important;
		max-width: 94vw !important;
		box-sizing: border-box;
	}

	body.home-page #modalEditVersions .modal-input,
	body.home-page #modalAutoPricing .modal-input,
	body.home-page #modalScanMove .modal-input {
		width: min(94vw, 780px) !important;
		max-width: 94vw !important;
	}

	body.home-page .commentModalContent,
	body.home-page .ebay-dialog {
		width: min(94vw, 560px);
		max-width: 94vw;
		box-sizing: border-box;
	}

	body.home-page .modal input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not(.select2-search__field),
	body.home-page .modal select:not(.select2-hidden-accessible) {
		min-height: 34px;
		box-sizing: border-box;
	}

	body.home-page .modal input[type="button"],
	body.home-page .modal input[type="submit"],
	body.home-page .modal input[type="reset"],
	body.home-page .modal button:not(.close):not([class*="select2"]),
	body.home-page .commentModal button,
	body.home-page .ebay-dialog button,
	body.home-page .import-result button {
		min-height: 36px;
		padding: 6px 12px;
		box-sizing: border-box;
	}

	body.home-page .modal input[type="button"],
	body.home-page .modal input[type="submit"],
	body.home-page .modal input[type="reset"] {
		font-size: 15px;
	}

	body.home-page .select2-container .select2-selection--single,
	body.home-page .select2-container .select2-selection--multiple {
		min-height: 34px;
	}

	body.home-page .select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 32px;
	}

	body.home-page .select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 32px;
	}

	body.home-page .select2-container .select2-search--inline .select2-search__field,
	body.home-page .select2-dropdown .select2-search__field {
		min-height: 28px;
		min-width: 28px;
	}

	body.home-page #modalFilterBy fieldset > span {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}

	body.home-page #liststools .dropdown-btn {
		min-height: 36px;
		padding: 4px 10px !important;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	body.home-page #searchInput {
		height: 28px !important;
		min-height: 28px;
	}

	body.home-page #listSortControl .pill-btn,
	body.home-page #filterControl .pill-btn {
		min-height: 36px;
		height: auto;
		padding: 4px 10px;
		box-sizing: border-box;
	}

	body.home-page #listSortControl label {
		font-size: 13px;
	}

	body.home-page #listSortControl select {
		min-height: 32px;
		font-size: 16px !important;
	}

	body.home-page #liststools button.action {
		min-height: 36px;
		padding: 6px 10px;
	}

	body.home-page #lists summary .linker {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 30px;
		min-height: 30px;
		margin: -4px 0 -4px 2px;
		vertical-align: middle;
	}

	body.home-page #lists summary .linker img {
		margin-top: 0 !important;
		display: block;
	}

	body.home-page #lists summary .summaryEnd > .fold,
	body.home-page #lists summary .summaryEnd > .reloadListBtn,
	body.home-page #lists summary .summaryEnd > .folderListBtn,
	body.home-page #lists summary .summaryEnd > .pinListBtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		min-height: 34px;
		margin: 0 !important;
		padding: 0 4px;
		box-sizing: border-box;
	}

	body.home-page #lists summary .summaryEnd > .pinListBtn {
		padding-left: 6px;
	}

	body.home-page #tutorial img[onclick^="tutorialPrevious"],
	body.home-page #tutorial img[onclick^="tutorialNext"] {
		padding: 10px 10px;
		margin: -10px -4px;
		vertical-align: middle;
		box-sizing: content-box;
		cursor: pointer;
	}

	body.home-page #tutorial .dismiss-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		min-height: 32px;
		padding: 6px;
		margin-top: 0;
	}

	body.home-page .modal .close,
	body.home-page .commentModalClose,
	body.home-page .adapt-box #adaptClose {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		min-height: 36px;
		padding: 4px;
		box-sizing: border-box;
	}

	body.home-page #modalFilterBy .fieldControl > abbr.card-symbol[id^="identity"] {
		width: 32px;
		height: 32px;
		line-height: 32px;
		font-size: 16px;
		margin: 2px 4px;
		display: inline-block;
		text-align: center;
	}

	body.home-page #modalFilterBy .fieldControl > img[onclick*="resetColorFilter"] {
		width: 24px;
		height: 24px !important;
		padding: 6px;
		box-sizing: content-box;
		cursor: pointer;
		display: inline-block !important;
		vertical-align: middle;
	}

	body.home-page #modalFilterBy fieldset a {
		display: inline-flex;
		align-items: center;
		min-height: 28px;
		padding: 2px 4px;
	}

	body.home-page #modalFilterBy label,
	body.home-page #modalExport label,
	body.home-page #modalCompareList label {
		padding: 6px 4px;
	}

	body.home-page .modal input[type="checkbox"],
	body.home-page .modal input[type="radio"] {
		min-width: 24px;
		min-height: 24px;
		vertical-align: middle;
	}

	body.home-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		min-width: 26px;
		min-height: 26px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 4px;
	}

	body.home-page .select2-container--default .select2-selection--single .select2-selection__clear,
	body.home-page .select2-container--default .select2-selection--multiple .select2-selection__clear {
		min-width: 28px;
		min-height: 28px;
		padding: 0 6px;
	}

	body.home-page #filter-list-tag span[onclick],
	body.home-page #list-tag span[onclick],
	body.home-page .list-tag-group span[onclick] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		min-height: 28px;
		padding: 0 4px;
	}

	body.home-page #modalCategories .versions-table button.box {
		min-width: 34px;
		min-height: 34px;
		padding: 4px 8px;
	}

	/* Modal-specific mobile fixes */
	body.home-page #modalRename #suggestNameBtn {
		width: 28px !important;
		height: 28px !important;
		padding: 4px;
		box-sizing: content-box;
		vertical-align: middle;
	}

	body.home-page #modalOperation #createListBtn {
		min-width: 36px;
		min-height: 36px;
		height: 36px !important;
	}

	body.home-page #modalScanMove #scanMoveDestination {
		min-width: 160px;
		max-width: 100%;
	}

	body.home-page #modalScanMove .scanmove-cards {
		overflow-x: auto;
	}

	body.home-page #modalFairValue .modal-row > label {
		white-space: normal;
	}

	body.home-page #modalCheapen .cheapen-footer {
		flex-wrap: wrap;
	}

	body.home-page #modalCheapen #cheapenChosen {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	body.home-page #modalCheapen #cheapenApply {
		margin-left: 0 !important;
	}

	body.home-page #modalStoreOffers .store-offers-row {
		min-height: 36px;
		padding: 6px 8px;
		box-sizing: border-box;
	}

	body.home-page .commentAddBtn,
	body.home-page .commentIconButton {
		min-width: 36px;
		min-height: 36px;
		box-sizing: border-box;
	}

	body.home-page .ebay-dialog input:not([type="checkbox"]):not([type="radio"]),
	body.home-page .ebay-dialog select {
		min-height: 34px;
		font-size: 16px !important;
		box-sizing: border-box;
	}

	body.home-page .ebay-dialog input[type="checkbox"],
	body.home-page .ebay-dialog input[type="radio"] {
		min-width: 24px;
		min-height: 24px;
	}

	body.home-page .ebay-dialog th:last-child,
	body.home-page .ebay-dialog td:last-child {
		width: auto;
	}

	/* #modalEditVersions & Table View .minibox controls (<=900px) */
	body.home-page #modalEditVersions .storage-input {
		min-width: 145px;
		max-width: none !important;
	}

	body.home-page #modalEditVersions .bought-on-input,
	body.home-page #lists .minibox .date-input {
		min-width: 150px;
		max-width: none !important;
	}

	body.home-page #modalEditVersions .bought-input,
	body.home-page #modalEditVersions .budget-input,
	body.home-page #modalEditVersions .sell-input,
	body.home-page #lists .minibox .quantity-input,
	body.home-page #lists .minibox .price-input {
		min-width: 90px;
		max-width: none !important;
	}

	body.home-page #modalEditVersions .storage-input,
	body.home-page #modalEditVersions .bought-on-input,
	body.home-page #modalEditVersions .bought-input,
	body.home-page #modalEditVersions .budget-input,
	body.home-page #modalEditVersions .sell-input,
	body.home-page #modalEditVersions .cond-select,
	body.home-page #modalEditVersions .sell-mode,
	body.home-page #lists .minibox .quantity-input,
	body.home-page #lists .minibox .price-input,
	body.home-page #lists .minibox .date-input {
		min-height: 34px;
		height: 34px !important;
		padding: 4px 6px;
		box-sizing: border-box;
	}

	body.home-page #modalEditVersions .sell-mode {
		min-width: 160px;
		max-width: none !important;
	}

	body.home-page #modalEditVersions .version-select,
	body.home-page #modalEditVersions .commander-input,
	body.home-page #modalEditVersions .allsets-input {
		width: 24px !important;
		height: 24px !important;
		min-width: 24px;
		min-height: 24px;
	}

	body.home-page #modalEditVersions .finish-icon {
		width: 24px !important;
		height: 24px !important;
		padding: 4px;
		box-sizing: content-box;
	}

	body.home-page #modalEditVersions .action-btns button {
		min-width: 36px;
		min-height: 36px;
		width: 36px !important;
		height: 36px !important;
		font-size: 16px;
		padding: 4px;
		box-sizing: border-box;
	}

	body.home-page #modalEditVersions #editVersionsCategoryBlock .select2-container {
		min-width: 0;
		flex: 1 1 150px;
	}

	body.home-page #modalEditVersions #editVersionsCategoryBlock .box,
	body.home-page #modalEditVersions .add-version-btn > button,
	body.home-page #editVersionsUnsavedBar .unsaved-actions > button {
		min-height: 36px;
		padding: 6px 10px !important;
		box-sizing: border-box;
	}

	body.home-page #modalEditVersions .edit-versions-actions,
	body.home-page #priceHistoryRanges,
	body.home-page .list-value-ranges {
		flex-wrap: wrap;
	}

	body.home-page #modalEditVersions #editVersionsDirtyHint {
		flex-basis: 100%;
		margin-right: 0 !important;
	}

	/* Open-list header, info block, view switchers, pagination, Table/Grid/Stacked views */
	body.home-page #lists span.add[onclick] {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 30px;
		min-height: 30px;
		width: 30px !important;
		height: 30px !important;
		padding: 3px;
		box-sizing: border-box;
		vertical-align: middle;
	}

	body.home-page #lists img.closeInfo {
		width: 24px !important;
		height: 24px !important;
		padding: 4px;
		box-sizing: content-box;
		vertical-align: middle;
		cursor: pointer;
	}

	body.home-page .quick-add-buttons .quick-add-btn,
	body.home-page button.quick-add-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 36px !important;
		padding: 6px 12px !important;
		box-sizing: border-box;
	}

	body.home-page .ph-range {
		min-width: 34px;
		min-height: 32px;
		padding: 4px 10px;
		font-size: 0.85em;
		box-sizing: border-box;
	}

	body.home-page .view-toggle button,
	body.home-page button[id^="tableViewBtn-"],
	body.home-page button[id^="gridViewBtn-"],
	body.home-page button[id^="stackedGridViewBtn-"] {
		min-width: 40px;
		min-height: 36px;
		padding: 6px 8px;
		box-sizing: border-box;
	}

	body.home-page img[id^="tableViewImg-"],
	body.home-page img[id^="gridViewImg-"],
	body.home-page img[id^="stackedGridViewImg-"] {
		width: 24px !important;
		height: 24px !important;
	}

	body.home-page .pagination button,
	body.home-page .pagination-controls button {
		min-width: 36px;
		min-height: 36px;
		padding: 4px 10px;
		font-size: 15px;
		box-sizing: border-box;
	}

	body.home-page .pagination select,
	body.home-page .pagination-controls select {
		min-height: 36px;
		width: auto;
		padding: 4px 8px;
		font-size: 16px !important;
		box-sizing: border-box;
	}

	body.home-page .pagination input.currentPageNumber,
	body.home-page .pagination input.currentPageSize,
	body.home-page .pagination-controls input {
		width: 56px !important;
		min-height: 36px;
		height: 36px !important;
		font-size: 16px !important;
		box-sizing: border-box;
	}

	body.home-page .table-header-toggle {
		min-width: 34px;
		min-height: 32px;
		padding: 4px 6px;
	}

	body.home-page .filter-search-box {
		min-height: 34px;
	}

	body.home-page .filter-search-box .input-btn {
		min-width: 30px;
		min-height: 30px;
	}

	body.home-page img[id^="list-table-"][onclick] {
		display: inline-block;
		width: 22px !important;
		height: 22px !important;
		padding: 5px !important;
		box-sizing: content-box;
		vertical-align: middle;
		cursor: pointer !important;
	}

	body.home-page #lists .card-stores-icon {
		width: 22px !important;
		height: 22px !important;
		padding: 5px;
		box-sizing: content-box;
		vertical-align: middle;
		cursor: pointer !important;
	}

	body.home-page #lists td .finish-icon,
	body.home-page #lists .finish-icon[onclick*="toggleFinish"] {
		width: 20px !important;
		height: 20px !important;
		padding: 6px;
		box-sizing: content-box;
		vertical-align: middle;
		cursor: pointer;
	}

	body.home-page #lists .condition-current {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 32px;
		padding: 4px 8px;
		font-size: 12px;
		box-sizing: border-box;
	}

	body.home-page #lists .condition-option-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 34px;
		padding: 6px 12px;
		font-size: 13px;
		box-sizing: border-box;
	}

	body.home-page #lists .inline-action-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		min-height: 32px;
		padding: 4px 6px;
		box-sizing: border-box;
	}

	body.home-page #lists .ebay-row-btn,
	body.home-page #lists .ebay-card-btn {
		min-height: 32px;
		padding: 5px 8px;
	}

	body.home-page #lists div[data-id="movetodiv"] select,
	body.home-page #lists div[data-id="movetodiv"] input[type="button"] {
		min-height: 34px;
		padding: 4px 10px;
		font-size: 15px;
		box-sizing: border-box;
		margin: 2px;
	}

	body.home-page .grid-toolbar {
		height: auto;
		min-height: 50px;
		flex-wrap: wrap;
	}

	body.home-page .grid-toolbar .range {
		height: 32px;
		min-height: 32px;
	}

	body.home-page .grid-toolbar .range::-webkit-slider-thumb {
		width: 24px;
		height: 24px;
		margin-top: -10px;
	}

	body.home-page .grid-toolbar .range::-moz-range-thumb {
		width: 24px;
		height: 24px;
	}

	body.home-page .cards-grid .card-more-toggle,
	body.home-page .stack-header-more {
		width: 32px;
		height: 32px;
		padding: 6px;
		box-sizing: border-box;
	}

	body.home-page .cards-grid .holder-toggler > button[id^="toggle-btn-"],
	body.home-page button[id^="toggle-btn-"] {
		min-width: 36px;
		min-height: 32px;
		padding: 5px 10px !important;
		box-sizing: border-box;
	}

	body.home-page .version-tile {
		min-height: 32px;
		align-items: center;
		padding: 4px 6px;
		box-sizing: border-box;
	}

	body.home-page .version-tile .flag {
		height: 20px !important;
	}

	/* Tap area grows invisibly so the footer keeps index.html's spacing */
	body.home-page .site-footer-links a::before {
		content: '';
		position: absolute;
		inset: -7px -4px;
	}
}

/* Desktop (>700px): hide mobile accordion summary cell and expand/collapse toggle */
body.home-page #modalEditVersions .versions-table tbody td.accordion-summary-cell,
body.home-page #modalEditVersions .versions-table tbody .accordion-toggle {
	display: none;
}

/* Portrait / narrow tablet (<=700px): Option C (Accordion) per-version cards
   so zero horizontal scroll is required across Collection, Offering,
   Commander Deck, and Want lists, with one active expanded copy and compact
   1-line summaries for all other copies. */
@media (max-width: 700px) {
	body.home-page #modalEditVersions .minibox {
		margin-top: 0 !important;
	}

	body.home-page #modalEditVersions #editVersionsTitle {
		text-align: left !important;
		font-size: 1.05em !important;
		line-height: 36px;
		margin: 0 0 8px !important;
		padding-right: 36px;
	}

	body.home-page #modalEditVersions .add-version-btn > button {
		width: 100%;
		min-height: 40px;
	}

	body.home-page #modalEditVersions .edit-versions-actions {
		gap: 8px;
	}

	body.home-page #modalEditVersions .edit-versions-actions > button {
		flex: 1 1 0;
		min-height: 44px;
		margin: 0;
	}

	body.home-page #modalEditVersions .versions-table,
	body.home-page #modalEditVersions .versions-table tbody {
		display: block;
		width: 100% !important;
		table-layout: auto !important;
	}

	body.home-page #modalEditVersions .versions-table thead {
		display: none;
	}

	body.home-page #modalEditVersions .versions-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 8px;
		width: 100%;
		padding: 8px 10px;
		margin: 0 0 8px 0;
		border: 1px solid #ccc;
		border-radius: 8px;
		background: #fff;
		box-sizing: border-box;
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-expanded {
		border-color: #2a6fdb;
		box-shadow: 0 0 0 1px rgba(42, 111, 219, 0.25);
	}

	body.home-page #modalEditVersions .versions-table tbody tr.row-unsaved {
		background: #fff8e1;
		box-shadow: inset 3px 0 0 #e0a800;
	}

	body.home-page #modalEditVersions .versions-table tbody tr.row-unsaved.is-expanded {
		border-color: #2a6fdb;
		box-shadow: inset 3px 0 0 #e0a800, 0 0 0 1px rgba(42, 111, 219, 0.25);
	}

	body.home-page #modalEditVersions .versions-table tbody tr.row-unsaved > td,
	body.home-page #modalEditVersions .versions-table tbody tr.row-unsaved > td:first-child {
		background-color: transparent;
		box-shadow: none;
	}

	body.home-page #modalEditVersions .versions-table tbody input:not([type="checkbox"]):not([type="radio"]),
	body.home-page #modalEditVersions .versions-table tbody select {
		background-color: #fff;
	}

	/* Do not use !important on display: flex so inline style="display:none;" on
	   inapplicable columns (.sell-cell, .budget-cell, .commander-cell, .allsets-cell)
	   continues to hide them. */
	body.home-page #modalEditVersions .versions-table tbody td {
		display: flex;
		align-items: center;
		gap: 6px;
		width: auto !important;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		white-space: normal;
		box-sizing: border-box;
	}

	body.home-page #modalEditVersions .versions-table tbody .finish-icon {
		width: auto !important;
		height: 24px !important;
		padding: 0 2px;
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td:nth-child(2):has(> .finish-icon) {
		flex: 0 0 auto;
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-expanded td:has(> .finish-icon)::after {
		font-size: 13px;
		color: #333;
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-expanded td:has(> .finish-icon[data-finish=""])::after {
		content: "Non-foil";
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-expanded td:has(> .finish-icon[data-finish="F"])::after {
		content: "Foil";
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-expanded td:has(> .finish-icon[data-finish="E"])::after {
		content: "Etched";
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td.accordion-summary-cell {
		display: block;
		order: 0;
		flex: 1 1 0 !important;
		width: 0 !important;
		font-size: 12.5px;
		color: #444;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 4px !important;
		min-height: 0;
		min-width: 0 !important;
		cursor: pointer;
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td.accordion-summary-cell::before {
		content: none !important;
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-expanded > td.accordion-summary-cell {
		display: none !important;
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td.version-actions-cell,
	body.home-page #modalEditVersions .versions-table tbody td:last-child {
		order: 0;
		margin-left: auto;
		flex: 0 0 auto;
	}

	body.home-page #modalEditVersions .versions-table tbody tr .accordion-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 1px solid #bbb !important;
		border-radius: 50% !important;
		background: #f8f8f8 !important;
		color: #333 !important;
		font-size: 13px;
		line-height: 1;
		cursor: pointer;
		padding: 0;
	}

	body.home-page #modalEditVersions .versions-table tbody .action-btns button {
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #bbb !important;
		border-radius: 50% !important;
		color: #444 !important;
		padding: 0;
	}

	body.home-page #modalEditVersions .versions-table tbody tr.is-collapsed > td:nth-child(n+4):not(:last-child):not(.accordion-summary-cell) {
		display: none !important;
	}

	body.home-page #modalEditVersions .versions-table tbody td:nth-child(n+4):not(:last-child):not(.accordion-summary-cell) {
		order: 2;
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	body.home-page #modalEditVersions .versions-table tbody td:nth-child(n+4):not(:last-child):not(.accordion-summary-cell)::before {
		flex: 0 0 60px;
		font-size: 13px;
		font-weight: 600;
		color: #333;
		text-align: left;
	}

	body.home-page #modalEditVersions .versions-table tbody td:has(> .storage-input)::before {
		content: "Storage";
	}

	body.home-page #modalEditVersions .versions-table tbody td:has(> .bought-input)::before {
		content: "Bought";
	}

	body.home-page #modalEditVersions .versions-table tbody td:has(> .bought-on-input)::before {
		content: none;
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td:nth-child(n+4):has(> .bought-input) {
		flex: 1 1 calc(54% - 4px);
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td:nth-child(n+4):has(> .bought-on-input) {
		flex: 1 1 calc(46% - 4px);
	}

	body.home-page #modalEditVersions .versions-table tbody td.sell-cell::before {
		content: none;
	}

	body.home-page #modalEditVersions .versions-table tbody td.budget-cell::before {
		content: "Budget";
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td.budget-cell:nth-child(n+4) {
		flex: 1 1 calc(54% - 4px);
	}

	body.home-page #modalEditVersions .versions-table tbody td.commander-cell::before {
		content: "Commander";
		flex: 0 0 auto;
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td.commander-cell:nth-child(n+4) {
		order: 2;
		flex: 1 1 100%;
	}

	body.home-page #modalEditVersions .versions-table tbody td.allsets-cell::before {
		content: "All sets/lang";
		flex: 0 0 auto;
	}

	body.home-page #modalEditVersions .versions-table tbody tr > td.allsets-cell:nth-child(n+4) {
		flex: 1 1 calc(46% - 4px);
	}

	body.home-page #modalEditVersions .versions-table tbody .storage-input,
	body.home-page #modalEditVersions .versions-table tbody .bought-input,
	body.home-page #modalEditVersions .versions-table tbody .bought-on-input,
	body.home-page #modalEditVersions .versions-table tbody .budget-input {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
		max-width: none !important;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls {
		display: grid;
		grid-template-columns: 60px minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		gap: 6px;
		align-items: center;
		flex: 1 1 100%;
		min-width: 0;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls::before {
		content: "Sale";
		grid-column: 1;
		grid-row: 1;
		font-size: 13px;
		font-weight: 600;
		color: #333;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls::after {
		content: "Pricing";
		grid-column: 1;
		grid-row: 2;
		font-size: 13px;
		font-weight: 600;
		color: #333;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls .sell-input {
		grid-column: 2;
		grid-row: 1;
		width: 100% !important;
		min-width: 0;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls .sell-currency {
		grid-column: 3;
		grid-row: 1;
		margin: 0 !important;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls .sell-mode {
		grid-column: 2 / 4;
		grid-row: 2;
		width: 100% !important;
		min-width: 0;
		margin: 0 !important;
	}

	body.home-page #modalEditVersions .versions-table tbody .sale-price-controls .edit-price-error {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	body.home-page #lists summary.summaryPresenter {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 4px;
		padding: 4px 2px;
	}

	body.home-page #lists summary.summaryPresenter > .summaryLeading {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	body.home-page #lists.selecting details[id^="details-"] > summary::after,
	body.home-page #lists details[id^="details-"].list-selected > summary::after {
		order: 2;
	}

	body.home-page #lists summary.summaryPresenter > .summaryEnd {
		order: 3;
		flex: 1 1 100%;
		width: 100%;
		justify-content: flex-start;
		gap: 2px;
	}

	body.home-page #lists summary .summaryEnd .summaryContentEndLook {
		margin-right: auto !important;
		flex: 1 1 0;
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
		padding: 4px 0;
	}

	body.home-page #modalOrderBy .content {
		flex-wrap: wrap;
		gap: 4px 8px;
	}

	body.home-page #modalOrderBy .content > label {
		flex: 1 1 100% !important;
	}

	body.home-page #modalOrderBy .content > select {
		flex: 1 1 100% !important;
		width: 100%;
	}

	body.home-page #modalFairValue .modal-table,
	body.home-page #modalFairValue .modal-row,
	body.home-page #modalFairValue .modal-row > label,
	body.home-page #modalFairValue .modal-row > div {
		display: block;
		width: 100%;
	}

	body.home-page #modalCompareList .modal-input > span:last-child,
	body.home-page #modalDeckOperation .modal-input > div[style*="row-reverse"] {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	body.home-page #modalCompareList input[type="button"],
	body.home-page #modalDeckOperation input[type="button"] {
		flex: 1 1 84px;
		width: auto;
		margin: 0 !important;
	}

	body.home-page .folder-box[data-depth="4"] {
		margin-left: 30px;
	}
}