/**
 * MA Steelfixing: components
 * Schedules and registers (tables), general notes, values, contact card.
 */

/* ---------- Tables: schedule of work, drawing register, values ---------- */
.ms-schedule,
.ms-register,
.ms-values {
	margin: 2rem 0 0;
	overflow-x: visible;
}

.ms-schedule table,
.ms-register table,
.ms-values table {
	width: 100%;
	border-collapse: collapse;
	border-top: var(--ms-line) solid var(--ms-ink);
	font-size: 1rem;
}

.ms-schedule th,
.ms-schedule td,
.ms-register th,
.ms-register td,
.ms-values td {
	border: 0;
	border-bottom: 1px solid var(--ms-hair);
	padding: 1.1rem 1.25rem 1.1rem 0;
	text-align: left;
	vertical-align: top;
}

.ms-schedule th,
.ms-register th {
	font-family: var(--ms-annot);
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--ms-pencil);
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	border-bottom: var(--ms-line) solid var(--ms-ink);
}

.ms-schedule td:first-child,
.ms-register td:first-child {
	font-family: var(--ms-annot);
	font-size: 0.85rem;
	color: var(--ms-pencil);
	white-space: nowrap;
	width: 5.5rem;
}

.ms-schedule td:nth-child(2) {
	width: 32%;
}

.ms-schedule td strong,
.ms-register td strong,
.ms-values td strong {
	font-weight: 650;
	font-size: 1.1rem;
	font-stretch: 110%;
}

.ms-schedule td:last-child {
	color: var(--ms-pencil);
}

.ms-register td:nth-child(5) {
	font-family: var(--ms-annot);
	white-space: nowrap;
}

.ms-register td:last-child {
	white-space: nowrap;
}

.ms-register tbody tr:first-child td:last-child::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--ms-orange);
	margin-right: 0.45rem;
	vertical-align: 0.05em;
}

.ms-values td:first-child {
	width: 30%;
}

.ms-values td:last-child {
	color: var(--ms-pencil);
}

.ms-also {
	margin-top: 1.5rem;
	color: var(--ms-pencil);
	max-width: 52rem;
}

.ms-also-lg {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.4;
	font-stretch: 108%;
	max-width: 46rem;
	margin-top: 1.5rem;
}

.ms-more {
	margin-top: 1.5rem;
}

.ms-more a {
	font-weight: 600;
	text-decoration-thickness: var(--ms-line);
}

/* On phones, each table row becomes a stacked entry */
@media (max-width: 720px) {
	.ms-schedule thead,
	.ms-register thead {
		display: none;
	}

	.ms-schedule tr,
	.ms-register tr,
	.ms-values tr {
		display: block;
		padding: 1rem 0;
		border-bottom: 1px solid var(--ms-hair);
	}

	.ms-schedule td,
	.ms-register td,
	.ms-values td {
		display: block;
		width: auto !important;
		border: 0;
		padding: 0.1rem 0;
	}

	.ms-register td:nth-child(n + 3)::before {
		content: attr(data-label) ": ";
		font-family: var(--ms-annot);
		font-size: 0.8rem;
		color: var(--ms-pencil);
	}
}

/* ---------- General notes (as on a drawing) ---------- */
.ms-notes-box {
	background: var(--ms-white);
	border: var(--ms-line) solid var(--ms-ink);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ms-notes-box h3 {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	text-decoration: underline;
	text-decoration-thickness: var(--ms-line);
	text-underline-offset: 0.3em;
}

ol.ms-notes {
	margin: 0;
	padding-left: 1.6rem;
	font-size: 0.98rem;
}

ol.ms-notes li {
	margin-bottom: 0.6rem;
	padding-left: 0.3rem;
}

ol.ms-notes li::marker {
	font-family: var(--ms-annot);
	font-size: 0.85rem;
}

/* ---------- Contact card ---------- */
.ms-contact-card {
	border: var(--ms-line) solid var(--ms-ink);
	background: var(--ms-white);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ms-contact-card h3 {
	margin: 0 0 1.5rem;
}

.ms-contact-card .ms-detail {
	margin: 0 0 1.1rem;
	line-height: 1.4;
}

.ms-contact-card .ms-detail strong {
	display: block;
	font-family: var(--ms-annot);
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--ms-pencil);
}

/* ---------- Schedule of work: a small detail drawing for each item ---------- */
.ms-schedule td:first-child {
	width: 8.5rem;
	padding-right: 1.5rem;
}

.ms-schedule td:first-child::before {
	content: "";
	display: block;
	width: 96px;
	height: 72px;
	margin: 0.15rem 0 0.5rem;
	background: no-repeat left center / contain;
}

.ms-schedule tbody tr:nth-child(1) td:first-child::before { background-image: url("../img/schedule-s1.svg"); }
.ms-schedule tbody tr:nth-child(2) td:first-child::before { background-image: url("../img/schedule-s2.svg"); }
.ms-schedule tbody tr:nth-child(3) td:first-child::before { background-image: url("../img/schedule-s3.svg"); }
.ms-schedule tbody tr:nth-child(4) td:first-child::before { background-image: url("../img/schedule-s4.svg"); }
.ms-schedule tbody tr:nth-child(5) td:first-child::before { background-image: url("../img/schedule-s5.svg"); }
.ms-schedule tbody tr:nth-child(6) td:first-child::before { background-image: url("../img/schedule-s6.svg"); }

.ms-schedule tbody td {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.ms-schedule tbody td:nth-child(2),
.ms-schedule tbody td:nth-child(3) {
	padding-top: 2.2rem;
}

.ms-schedule tbody tr {
	transition: background-color 0.15s ease;
}

.ms-schedule tbody tr:hover {
	background: var(--ms-white);
}

.ms-schedule tbody td:last-child {
	font-size: 1.02rem;
	line-height: 1.55;
	max-width: 34rem;
}

@media (max-width: 720px) {
	.ms-schedule tbody tr {
		display: grid;
		grid-template-columns: 76px 1fr;
		column-gap: 1rem;
		padding: 1.25rem 0;
	}

	.ms-schedule tbody td:first-child {
		grid-row: span 2;
		padding: 0 !important;
		font-size: 0.75rem;
	}

	.ms-schedule td:first-child::before {
		width: 76px;
		height: 57px;
		margin: 0 0 0.25rem;
	}

	.ms-schedule tbody td:nth-child(2),
	.ms-schedule tbody td:nth-child(3) {
		padding: 0 !important;
	}

	.ms-schedule tbody td:nth-child(2) {
		margin-bottom: 0.3rem;
	}

	.ms-schedule tbody td:last-child {
		font-size: 0.95rem;
	}

	.ms-schedule tbody tr:hover {
		background: none;
	}
}