/* Arch installer: styles specific to this tool. Shared shell rules live in ../shared/shell.css.
   Every rule is scoped under .tool. Colours come from the site tokens only, so both themes work. */

/* ---- layout ------------------------------------------------------------ */

.tool .arch-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.tool .arch-modebar {
	flex: none;
	padding: 0 0.75rem;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

/* The fstab table needs more room than the install form, so its input pane is wider. */
.tool .arch-fstab-ws {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.tool .arch-presets,
.tool .arch-quick {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.tool .arch-presets-label {
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.tool .arch-form {
	gap: 0.75rem;
}

/* ---- fieldsets --------------------------------------------------------- */

.tool fieldset.arch-group {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
	margin: 0;
	padding: 0.55rem 0.7rem 0.7rem;
	border: 1px solid var(--line);
	background: var(--surface);
}

.tool fieldset.arch-group--inner {
	background: var(--canvas);
}

.tool .arch-group legend {
	padding: 0 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ink);
}

.tool .arch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.6rem 0.75rem;
	align-items: start;
}

.tool .arch-grid > .tool-field {
	min-width: 0;
}

.tool .arch-check {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	font-size: 0.85rem;
	color: var(--text);
}

.tool .arch-check input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--accent);
}

.tool .tool-input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- subvolume editor -------------------------------------------------- */

.tool .arch-subhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.35rem;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

.tool .arch-subvols {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.tool .arch-subvol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.tool .arch-subvol > .tool-input {
	flex: 1 1 8rem;
}

/* ---- warnings and alerts ---------------------------------------------- */

.tool .arch-danger {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.8rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--ink);
	background: var(--accent-soft);
	border: 1px solid var(--accent);
	border-left-width: 4px;
}

.tool .arch-danger strong {
	margin-right: 0.3rem;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

.tool .arch-errors {
	margin-top: 0.1rem;
}

.tool .arch-errors ul {
	margin: 0.3rem 0 0;
}

.tool .arch-offer {
	margin: 0;
}

.tool .arch-offer p {
	margin: 0 0 0.45rem;
}

.tool .arch-list {
	margin: 0.3rem 0 0;
	padding-left: 1.1rem;
}

/* ---- fstab table ------------------------------------------------------- */

.tool .arch-fstab-table {
	min-width: 56rem;
}

.tool .arch-fstab-table td {
	padding: 0.3rem 0.4rem;
}

.tool .arch-cell {
	width: 100%;
	min-width: 6rem;
	min-height: 1.8rem;
	padding: 0.2rem 0.4rem;
	font-family: var(--mono);
	font-size: 0.76rem;
}

.tool .arch-cell--num {
	min-width: 3.5rem;
	width: 4.2rem;
}

.tool .arch-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	white-space: nowrap;
}

/* ---- output: problems, explanation, file viewer ------------------------ */

.tool .arch-problems {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.84rem;
}

.tool .arch-problem-item + .arch-problem-item {
	margin-top: 0.35rem;
}

.tool .arch-problem {
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	color: var(--ink);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.tool .arch-explain {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0.35rem 0.85rem;
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
}

.tool .arch-explain dt {
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.tool .arch-explain dd {
	margin: 0;
	color: var(--text);
}

.tool .arch-viewer {
	min-width: 0;
	margin-top: 0.4rem;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--canvas);
}

.tool .arch-viewer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 0.35rem 0.6rem;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

.tool .arch-path {
	min-width: 0;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.tool .arch-viewer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.tool .arch-pre {
	margin: 0;
	max-width: 100%;
	max-height: 60vh;
	min-width: 0;
	padding: 0.6rem;
	overflow: auto;
	white-space: pre;
	tab-size: 2;
	font-family: var(--mono);
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--text);
	background: var(--canvas);
	overflow-wrap: normal;
}

.tool .arch-viewer .arch-pre {
	max-height: 50vh;
	border: 0;
}

.tool #fstab-output {
	border: 1px solid var(--line);
}

/* ---- phones: the subvolume labels and fstab table stay usable ---------- */

@media (max-width: 480px) {
	.tool .arch-subhead {
		display: none;
	}

	.tool .arch-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}