/* Trade client portal. Uses the tokens and components from portal.css. */
body.trd { background: var(--bg); }
.t-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.t-card { width: 100%; max-width: 440px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.t-logo { max-width: 240px; height: auto; }
.t-tabs { display: flex; gap: 4px; padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--chrome); overflow-x: auto; }
.t-tabs button { border: 0; background: transparent; font-size: 14px; padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; color: var(--text); font-family: inherit; }
.t-tabs button[aria-current="page"] { background: var(--track); font-weight: 500; }
.t-page { max-width: 1100px; margin: 0 auto; }
.t-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.t-stat { padding: 16px 18px; }
.t-num { font-size: 28px; font-weight: 300; margin-top: 4px; }
.t-grid { grid-template-columns: 150px minmax(0, 1fr) 140px 120px 70px; }
.t-pod { grid-template-columns: 150px minmax(0, 1fr) auto; }
.t-inv { grid-template-columns: 150px minmax(0, 1fr) 130px 110px 270px; align-items: center; }
/* Status and Download sit side by side with room between them (owner, 9 Oct 2026). */
.t-inv > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.t-inv.head > span:last-child { display: block; }
.t-inv > span:last-child > * { flex-shrink: 0; white-space: nowrap; }
.t-team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.trd .field input, .trd .field select, .trd .field textarea { font-size: 16px; }
@media (max-width: 720px) {
	.main { padding: 18px 16px 40px; }
	.t-tabs { padding: 8px 12px; }
	.t-grid { grid-template-columns: 110px minmax(0, 1fr) 96px; }
	.t-inv { grid-template-columns: 104px minmax(0, 1fr) 72px 112px; }
	.t-inv > span:last-child { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
	.t-pod { grid-template-columns: 1fr; }
	.t-team { grid-template-columns: 1fr auto; }
	.t-team > span:nth-child(2) { display: none; }
	.form-grid { grid-template-columns: 1fr; }
}

/* Book several jobs */
.t-bulk { grid-template-columns: 60px minmax(0, 1fr) 170px minmax(0, 1.3fr); }
@media (max-width: 760px) { .t-bulk { grid-template-columns: 40px minmax(0, 1fr); } .t-bulk > span:nth-child(3) { display: none; } .t-bulk > span:nth-child(4) { grid-column: 2; } }
.linkish { background: none; border: 0; padding: 0; color: var(--accent-hover); cursor: pointer; font: inherit; text-decoration: underline; }

/* Waste collection request */
.w-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 130px minmax(0, 1fr) minmax(0, .9fr) 40px; gap: 8px; align-items: end; padding: 8px 0; border-top: 1px solid var(--divider); }
.w-row:first-of-type { border-top: 0; }
.w-row .w-x { height: 40px; padding: 0; }
.w-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.t-waste { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 130px 190px; }
@media (max-width: 760px) {
	.w-row { grid-template-columns: 1fr 1fr; }
	.w-row > label:first-child { grid-column: 1 / -1; }
	.w-row .w-x { grid-column: auto; width: 100%; }
	.t-waste { grid-template-columns: 1fr; gap: 2px; }
}
/* iPhone date/time boxes must not run past their card (owner, 18 Oct 2026). */
input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; box-sizing: border-box }