/* 2.6.10: mobile usability fixes (audit 2026-11-05). Loaded after core.css and the calculator styles. */

/* 1. Wide tables in the article and in calculators scroll sideways instead of being cut off */
.cc-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; max-width: 100%; border-radius: 10px;
	background: linear-gradient(to right, var(--bg, #0e1014) 30%, transparent), linear-gradient(to left, var(--bg, #0e1014) 30%, transparent) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) 100% 0;
	background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; }
.cc-tscroll > table { margin: 0; }
@media (max-width: 600px) {
	.cc-tscroll > table { min-width: 100%; width: max-content; max-width: none; }
	.cc-tscroll > table td, .cc-tscroll > table th { white-space: nowrap; }
	.cc-tscroll > table td:first-child, .cc-tscroll > table th:first-child { white-space: normal; min-width: 96px; max-width: 160px; }
}
.cc-tscroll-hint { display: none; font-size: 12px; color: var(--muted, #8b93a3); margin: -10px 0 14px; }
.cc-tscroll.is-wide + .cc-tscroll-hint { display: block; }

@media (max-width: 600px) {
	/* 2. Fields: label + help on top and a full-width control when the row would be cramped (class set by mobile.js) */
	.ccc .cc-field.cc-field--stack { flex-direction: column; align-items: stretch; gap: 8px; }
	.ccc .cc-field.cc-field--stack .cc-field__body label { margin-bottom: 2px; }
	.ccc .cc-field.cc-field--stack select { width: 100%; max-width: none; min-width: 0; text-align: left; padding-left: 12px; }
	.ccc .cc-field.cc-field--stack > .cc-field__icon, .ccc .cc-field.cc-field--stack > [class*="icon"] { display: none; }
	.ccc .cc-field.cc-field--stack .cc-help { margin: 2px 0 0; line-height: 1.4; }
	.ccc .cc-field .cc-help { line-height: 1.4; }

	/* 3. Compact selection rows (bet engine and other .cc-row repeaters with an odds field) */
	.ccc .cc-row.cc-row--compact { padding: 8px 42px 8px 10px; gap: 8px; align-items: center; }
	.ccc .cc-row--compact .cc-row__fields { display: grid; grid-template-columns: minmax(68px, .6fr) minmax(0, 1.4fr); column-gap: 8px; row-gap: 2px; align-items: end; }
	.ccc .cc-row--compact .cc-row__fields > .cc-field { min-width: 0; padding: 0; }
	.ccc .cc-row--compact .cc-row__fields > .cc-field--hint { display: contents; }
	.ccc .cc-row--compact .cc-field--hint > .cc-field__body { grid-column: 1; grid-row: 1; }
	.ccc .cc-row--compact .cc-field--hint > input { grid-column: 1; grid-row: 2; width: 100%; padding-left: 4px; padding-right: 4px; }
	.ccc .cc-row--compact .cc-field--hint > .cc-oddshint { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ccc .cc-row--compact .cc-row__fields > .cc-field:not(.cc-field--hint) { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; }
	.ccc .cc-row--compact .cc-field label { margin-bottom: 4px; }
	.ccc .cc-row--compact select { -webkit-appearance: none; appearance: none; padding-left: 8px; padding-right: 22px; text-align: left; text-overflow: ellipsis;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 7px center; background-size: 12px; }
	.ccc .cc-row--compact:not(:first-child) .cc-field__body label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ccc .cc-row--compact:not(:first-child) .cc-row__fields { row-gap: 0; }
	.ccc .cc-row--compact .cc-row__out { display: none; }

	@media (max-width: 380px) {
		.ccc .cc-row.cc-row--compact { padding-left: 16px; }
		.ccc .cc-row--compact .cc-row__n { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; font-size: 11px; background: var(--surface-2, #1c212a); border: 1px solid var(--c-line, #262c37); }
	}

	/* 4. Shorter intro above the calculator: two lines, tap "More" for the rest (the text stays in the HTML) */
	.calc-page__head .hero__sub.cc-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 0; font-size: 15px; line-height: 1.5; }
	.calc-page__head .hero__sub.cc-clamp.is-open { display: block; -webkit-line-clamp: unset; }
	.cc-more { appearance: none; background: none; border: 0; padding: 4px 0 8px; min-height: 36px; color: var(--accent, #a3e635); font: 600 14px var(--font, sans-serif); cursor: pointer; }
	.calc-page__head h1 { margin-bottom: 10px; }

	/* 7. 13×13 hand charts use the full card width */
	.ccc .pfc-grid, .ccc .pf-grid, .ccc .uth-grid { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); max-width: none; }
	.ccc .pfc-grid { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 1px; }
	.ccc table.pf-grid { table-layout: fixed; }
	.ccc table.pf-grid td { width: auto; }
	.ccc .pf-c, .ccc .pfc-c { width: 100%; min-width: 0; }
}

/* 6. Bigger touch targets on phones and touch screens */
@media (max-width: 820px), (pointer: coarse) {
	.ccc .icm-del { font-size: 18px; }
	.ccc .po-stepper button { min-width: 40px; min-height: 40px; font-size: 18px; }
	.ccc .cc-tab__del { width: 32px; height: 32px; font-size: 16px; }
	.ccc input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent, #a3e635); flex: none; }
	.ccc .cc-share__btn { min-height: 44px; }
	.ccc button[class$="-small"], .ccc button[class*="-small "], .ccc .ph-print { min-height: 40px; }
	.ccc button[class$="-link"], .ccc button[class*="-link "], .ccc .bjc-clear { min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
	.ccc button.golf-x, .ccc button.nrr-x, .ccc button[class$="-del"] { min-width: 40px; min-height: 40px; }
	.ccc .cc-calc button:not([class]) { min-height: 40px; }
}

/* 8. Floating buttons: room at the end of the page, and the back button slides away while you scroll down */
@media (max-width: 820px) {
	body.cc-has-float .site-footer { padding-bottom: 84px; }
	.cc-back { transition: transform .22s ease, opacity .22s ease; }
	.cc-back.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
	.cc-okeys-on .cc-back { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .cc-back { transition: none; } }

/* 2.6.66: 44px tap targets on phones (More, Reset, filter buttons) */
@media (max-width: 760px), (pointer: coarse) {
	.cc-more { min-height: 44px; padding: 10px 12px 10px 0; }
	.ccc .cc-actions :is([data-reset], [type="reset"]).cc-btn--ghost,
	.ccc[data-ds="2"] .is-ab .cc-panel:not(.is-ds-out) .cc-actions :is([data-reset], [type="reset"]).cc-btn--ghost { min-height: 44px !important; min-width: 44px; padding: 0 10px !important; }
	.ccc .bc-seg button { min-width: 44px; }
}