/* Graph Paper page (2026-10-02): one centred column - settings, Download, the page preview. */

.gp { display:flex; flex-direction:column; align-items:center; gap:18px; margin:6px auto 0; max-width:620px; }

.gp_form {
	display:flex; flex-direction:column; gap:12px; width:100%;
	padding:16px 18px; border:1px solid #d5dee6; border-radius:10px; background:#f7fafc;
}
.gp_form [hidden] { display:none !important; }
.gp_row { display:grid; grid-template-columns:130px 1fr; align-items:center; gap:10px; }
@media (max-width:520px) { .gp_row { grid-template-columns:1fr; gap:6px; } }
.gp_label { font-weight:bold; }

.gp_seg { display:flex; flex-wrap:wrap; gap:6px; }
.gp_seg label { cursor:pointer; }
.gp_seg input { position:absolute; opacity:0; width:1px; height:1px; }
.gp_seg span {
	display:inline-block; padding:6px 12px; border:1px solid #cfd9e3; border-radius:6px;
	background:#fff; color:#2a3a4a; font-size:14px;
}
.gp_seg label:hover span { border-color:var(--primary_blue, #306693); }
.gp_seg input:checked + span { background:var(--primary_blue, #306693); border-color:var(--primary_blue, #306693); color:#fff; }
.gp_seg input:focus-visible + span { outline:2px solid #53b4db; outline-offset:2px; }
.gp_apply { align-self:center; }

.gp_download {
	padding:12px 30px; border-radius:8px;
	background:var(--primary_blue, #306693); color:#fff; font-weight:bold; font-size:17px; text-decoration:none;
}
.gp_download:hover { filter:brightness(1.08); }
.gp_preview {
	width:100%; max-width:520px; background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.08);
	transition:opacity .15s;
}
.gp_preview img { display:block; width:100%; height:auto; }
.gp_preview.gp_busy { opacity:.6; }
.gp_note { color:#667; font-size:14px; margin:0; text-align:center; }