/*
 * 页面专属样式：工具 · 画幅计算器
 *
 * .tool-* 是工具页共用的骨架（标题区 / 分节 / FAQ / 相关链接），
 * 下一个工具页照抄这一段即可；.ar-* 只属于这个计算器。
 */

#nys-main .tool-page {
	max-width:var(--wrap-mid);
	margin:0 auto;
	padding:40px 28px 90px;
}

/* ---------- 标题区 ---------- */
.tool-head { margin-bottom:26px; }
.tool-crumb {
	display:inline-block;
	font-size:13px;
	color:var(--ink-soft);
	text-decoration:none;
	margin-bottom:10px;
}
.tool-crumb:hover { color:var(--ink); }
.tool-head h1 {
	font-size:38px;
	line-height:1.12;
	margin:0 0 12px;
	text-wrap:balance;
}
.tool-lead {
	font-size:16px;
	line-height:1.6;
	color:var(--ink-body, #4B4B52);
	margin:0;
	max-width:640px;
}

/* ---------- 两张计算卡 ---------- */
.ar-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}
.ar-card {
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	padding:22px;
	background:var(--bg);
	box-shadow:var(--shadow);
	min-width:0;
}
.ar-card h2 { font-size:17px; margin:0 0 16px; font-family:'Inter',sans-serif; font-weight:600; }

.ar-inputs {
	display:flex;
	align-items:flex-end;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:12px;
}
.ar-inputs label {
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:12.5px;
	color:var(--ink-soft);
	min-width:0;
}
.ar-inputs input,
.ar-inputs select {
	height:44px;
	border:1px solid var(--border);
	border-radius:var(--radius-sm);
	padding:0 12px;
	font-size:16px;              /* ≥16px：iOS 不会在聚焦时自动放大整页 */
	font-family:inherit;
	color:var(--ink);
	background:var(--bg);
	width:120px;
	max-width:100%;
}
.ar-inputs select { width:auto; padding-right:8px; }
.ar-inputs input:focus,
.ar-inputs select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.ar-x, .ar-unit { color:var(--ink-soft); padding-bottom:12px; font-size:14px; }
.ar-ratio-in { display:flex; align-items:center; gap:6px; color:var(--ink-soft); }
.ar-ratio-in input { width:76px; }

.ar-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ar-chip {
	min-height:34px;
	padding:0 12px;
	border:1px solid var(--border);
	border-radius:999px;
	background:var(--bg);
	font:inherit;
	font-size:13px;
	color:var(--ink);
	cursor:pointer;
	transition:background var(--dur), border-color var(--dur);
}
.ar-chip:hover { border-color:var(--ink-soft); }
.ar-chip.on { background:var(--ink); border-color:var(--ink); color:#fff; }

.ar-result { border-top:1px solid var(--border); padding-top:16px; margin-top:4px; }
.ar-big {
	font-family:'Fraunces',serif;
	font-size:40px;
	font-weight:600;
	line-height:1.1;
	margin-bottom:12px;
	overflow-wrap:anywhere;
}
.ar-facts { margin:0 0 14px; display:grid; gap:6px; }
.ar-facts div { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.ar-facts dt { color:var(--ink-soft); }
.ar-facts dd { margin:0; text-align:right; }
.ar-note { font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; line-height:1.5; }

.ar-preview-wrap {
	height:150px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--bg-soft);
	border-radius:var(--radius);
}
.ar-preview {
	max-width:86%;
	max-height:80%;
	height:80%;
	background:var(--accent-soft);
	border:1.5px solid var(--accent);
	border-radius:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:aspect-ratio var(--dur);
}
.ar-preview span { font-size:12px; color:var(--accent); white-space:nowrap; }

/* ---------- 生成入口 ---------- */
.ar-cta {
	margin:18px 0 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:18px 22px;
	border-radius:var(--radius-lg);
	background:var(--bg-soft);
	flex-wrap:wrap;
}
.ar-cta strong { font-size:15px; }
.ar-cta p { margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); max-width:520px; line-height:1.5; }

/* ---------- 分节 ---------- */
.tool-sec { margin-top:48px; }
.tool-sec h2 { font-size:24px; margin:0 0 16px; }

/*
 * ⚠ position:relative 不能省：表头最后一格里有个 .sr-only（position:absolute），
 *   滚动容器不是定位元素时它会相对整页定位，把页面撑出横向滚动条（德、法语 390 宽实测）。
 */
.ar-table-wrap { position:relative; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.ar-table { width:100%; border-collapse:collapse; font-size:14px; }
.ar-table th, .ar-table td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); }
.ar-table th { font-size:12.5px; color:var(--ink-soft); font-weight:500; background:var(--bg-soft); }
.ar-table tr:last-child td { border-bottom:0; }
.ar-table td:nth-child(2), .ar-table td:nth-child(3) { white-space:nowrap; font-variant-numeric:tabular-nums; }
.ar-use { color:var(--accent); text-decoration:none; font-size:13px; white-space:nowrap; }
.ar-use:hover { text-decoration:underline; }

.tool-faq details { border-bottom:1px solid var(--border); }
.tool-faq summary {
	cursor:pointer;
	list-style:none;
	padding:16px 28px 16px 0;
	position:relative;
}
.tool-faq summary::-webkit-details-marker { display:none; }
.tool-faq summary::after {
	content:'';
	position:absolute; right:4px; top:50%;
	width:8px; height:8px;
	border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
	transform:translateY(-70%) rotate(45deg);
	transition:transform var(--dur);
}
.tool-faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.tool-faq summary h3 { display:inline; font-size:15.5px; font-family:'Inter',sans-serif; font-weight:600; margin:0; }
.tool-faq p { margin:0 0 16px; font-size:14.5px; line-height:1.65; color:var(--ink-body, #4B4B52); }

.tool-related { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tool-related a {
	display:block;
	padding:14px 16px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	text-decoration:none;
	color:var(--ink);
	font-size:14px;
	min-height:44px;
	transition:border-color var(--dur);
}
.tool-related a:hover { border-color:var(--ink-soft); }

.sr-only {
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 窄屏 ---------- */
@media (max-width:760px) {
	#nys-main .tool-page { padding:28px 16px 70px; }
	.tool-head h1 { font-size:30px; }
	.ar-grid { grid-template-columns:1fr; }
	.tool-related { grid-template-columns:1fr; }
	.ar-cta .btn { width:100%; justify-content:center; }
}
@media (max-width:560px) {
	.ar-table th, .ar-table td { padding:9px 10px; }
	.ar-table { font-size:13px; }
}
@media (max-width:400px) {
	.ar-inputs input { width:100px; }
	.ar-big { font-size:34px; }
}