/* The width and height breakpoints for everything declared above. */

@media (max-width: 1100px) {
	/* minmax(0, …) rather than a bare 1fr: a track's floor is otherwise its
	   content's own minimum, which lets one stubborn row push the whole
	   column past the screen. */
	.tj-sched-cols,
	.tj-builder-cols,
	.tj-designer-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, the court would take the whole line and stand twice as tall as
	   it is wide. The pane — tools, court and the hint under it — keeps the
	   width the two columns gave it. */
	.tj-designer-pane {
		max-width: 440px;
	}

	/* Stacked, the picker is something to scroll to, not something to hold
	   in place beside the plan. */
	.tj-builder-side {
		position: static;
	}

	.tj-wt-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.tj-wt-court {
		position: static;
	}
}

@media (max-width: 900px) {
	.tj-side {
		display: none;
	}

	.tj-menu-btn {
		display: flex;
	}

	/* Keep page headings clear of the fixed hamburger. */
	.tj-menu-btn ~ .tj-main {
		padding-top: 72px;
	}

	body.tj-side-open .tj-side-backdrop {
		display: block;
	}

	/* A finger on the backdrop was sliding the page underneath it, so closing
	   the menu left the caller somewhere else on the page than where they
	   opened it. Under the menu, the page holds still. */
	body.tj-side-open {
		overflow: hidden;
	}

	body.tj-side-open .tj-side {
		display: flex;
		position: fixed;
		left: 0;
		top: var(--mimic-banner-h, 0px);
		z-index: 61;
		box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
		animation: tjSlideIn .25s ease both;
	}

	.tj-tabbar {
		display: flex;
	}

	.tj-main {
		padding: 24px 18px 104px;
	}

	.tj-main h1 {
		font-size: 34px;
	}

	/* The roster keeps the player, the progress, the trend and the note; the
	   rest waits for a wider screen. Four cells will not sit on one line at
	   this width — the name alone was down to a few characters — so the row
	   folds: who they are over how far along they are, with the trend and the
	   note controls kept to the end of their own lines. The headings fold with
	   them, one over each cell, since the head and the rows share these
	   tracks. */
	.tj-rosterrow {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"player trend"
			"bar    acts";
		gap: 10px 12px;
		padding: 14px 16px;
	}

	.tj-rosterrow > :nth-child(1) { grid-area: player; }
	.tj-rosterrow > :nth-child(3) { grid-area: bar; }
	.tj-rosterrow > :nth-child(6) { grid-area: trend; }
	.tj-rosterrow > :nth-child(7) { grid-area: acts; }

	.tj-roster-hide {
		display: none;
	}

	.tj-feedback {
		padding: 14px 16px 18px;
	}

	/* A note is worth the whole width to write in; the send button follows
	   under it rather than taking a third of the line. */
	.tj-feedback-row {
		flex-wrap: wrap;
	}

	.tj-feedback-row .tj-input {
		flex-basis: 100%;
	}

	.tj-feedback-row .tj-btn {
		margin-left: auto;
	}

	.tj-cardgrid3 {
		grid-template-columns: 1fr;
	}

	.tj-drillgrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.tj-badgegrid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.tj-upnext {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.tj-upnext-court {
		width: 100%;
		max-width: 260px;
		align-self: center;
	}

	.tj-upnext-go {
		display: none;
	}

	/* The running total leads its own line once the header wraps, so it reads
	   from the left like everything above it. */
	.tj-builder-budget {
		text-align: left;
		min-width: 0;
	}

	.tj-builder-bar {
		margin-left: 0;
	}

	/* A block keeps its minutes and tint beside the name, and drops the move
	   and remove controls onto a second line rather than squeezing the name
	   down to a few characters. */
	.tj-blockrow {
		display: grid;
		grid-template-columns: 58px 4px minmax(0, 1fr);
		grid-template-areas:
			"mins tint body"
			"mins tint acts";
		row-gap: 10px;
		padding: 14px 16px;
	}

	.tj-blockrow-mins { grid-area: mins; }
	.tj-blockrow-tint { grid-area: tint; }
	.tj-blockrow-body { grid-area: body; }
	.tj-blockrow-acts { grid-area: acts; }
}

/* Too short a screen to spend around 500px on the menu: a phone lying down, a
   small one standing up, a desktop window pulled up. Rather than ask to be
   scrolled, the menu draws itself smaller — the wordmark on one line beside a
   smaller ball, and every row and margin tightened. The bound leaves room for
   the mimicking banner, which takes another 40px off the drawer. */
@media (max-height: 560px) {
	.tj-side {
		gap: 4px;
		padding: 14px 14px 12px;
	}

	.tj-logo {
		gap: 8px;
		padding: 0 8px 12px;
	}

	.tj-logo-ball,
	.tj-logo-img {
		width: 28px;
		height: 28px;
	}

	.tj-logo-name {
		font-size: 18px;
	}

	.tj-logo-name span {
		display: inline;
	}

	.tj-nav {
		gap: 2px;
	}

	.tj-nav a, .tj-nav button {
		gap: 10px;
		padding: 7px 12px;
		font-size: 14.5px;
	}

	.tj-side-footer {
		padding-top: 6px;
	}
}

/* On a phone two drill cards side by side leave each too narrow to hold its
   own name: it wraps into the level dots, the meta line breaks and the tags
   run to three rows. One card per line instead, laid out as a row — the court
   beside the details rather than above them, at a size a thumb-width column
   can carry. A card is then something to scan down, not a screen to scroll
   past; the apron behind the court carries whatever height the details need. */
@media (max-width: 560px) {
	/* Three across on a phone leaves each stat a column narrower than its own
	   label, which sets the number in a strip of two or three characters. The
	   first one — the figure the page is really about — takes the line to
	   itself and the two counts share the one under it. */
	.tj-statgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.tj-statgrid > :first-child {
		grid-column: 1 / -1;
	}

	.tj-drillgrid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.tj-drillcard {
		display: grid;
		grid-template-columns: 132px minmax(0, 1fr);
	}

	.tj-drillcard > .tj-court-thumb {
		height: 100%;
		background: var(--apron);
	}

	.tj-drillcard-body {
		padding: 12px 14px;
	}

	.tj-drillcard-name {
		font-size: 18px;
	}

	.tj-drillcard-tags {
		margin-top: 9px;
	}

	/* Stacked one under another, the wizard's stand-ins need far less height
	   to read as three slots waiting for an answer. */
	.tj-suggestion-empty {
		min-height: 120px;
		padding: 20px;
	}

	/* Beside a 96px logo the club's name is left a field a few characters
	   wide, so the logo takes the line above it and the name the whole of
	   its own. Stretched, the slot centres the ball and its upload over the
	   card rather than leaving them hanging off one corner. */
	.tj-settings-identity {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
}

/* The designer's court answers every touch itself — a drag there has to draw,
   not scroll — so on a phone a court running the full width stands taller than
   the screen and leaves a finger nothing to move the page with. It keeps to
   four fifths of the height, measured against the screen a browser has with
   its toolbars out where it can, and never below a width still worth drawing
   on. Centred, so what it gives back reads as margin rather than as a column
   that ran short. A pointer that can scroll without touching the court wants
   none of this: it keeps the full width. */
@media (max-width: 560px) and (pointer: coarse) {
	.tj-designer-pane {
		max-width: clamp(240px, 40vh, 440px);
		max-width: clamp(240px, 40svh, 440px);
		margin: 0 auto;
	}
}

/* Narrower still, the court gives up more of the line to the details, and the
   meta and tags set a size smaller so they pack into fewer lines — a body
   taller than the court beside it only shows as more empty apron. */
@media (max-width: 380px) {
	.tj-drillcard {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.tj-drillcard-meta {
		font-size: 12px;
	}

	.tj-drillcard-tags .tj-pill {
		font-size: 10.5px;
		padding: 2px 8px;
	}

	/* Promote and remove are wider than the name they leave room for, which
	   at this width cut it to a few characters — they take their own line. */
	.tj-staffcard {
		flex-wrap: wrap;
	}

	.tj-staffcard-acts {
		flex-basis: 100%;
		justify-content: flex-end;
	}
}

/* A billing card's head sets its kicker against something on the right — a
   status pill, or the line of fine print above the invoices. The print is the
   wider of the two and squeezes into a ragged column long before a phone is
   truly narrow, so from here it takes the whole line under the kicker. */
@media (max-width: 460px) {
	.tj-cardhead {
		flex-wrap: wrap;
	}

	.tj-cardhead-note {
		flex-basis: 100%;
	}
}

/* On the narrowest phones the invoice lines run out of room: the kicker splits
   its month across two lines, and the invoice number breaks at a hyphen, which
   pulls the pill and the download beside it out of line. The heads set their
   letters tighter and the lines give the number the width the pill and the
   gaps give back, so each stays whole on one line. */
@media (max-width: 400px) {
	.tj-cardhead > .tj-kicker {
		font-size: 11px;
		letter-spacing: .05em;
	}

	.tj-billrow.tj-billgrid {
		column-gap: 8px;
	}

	.tj-billrow-no {
		font-size: 11.5px;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.tj-billrow .tj-billrow-status {
		font-size: 9.5px;
		padding: 3px 8px;
	}
}

@keyframes tjSlideIn {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}