/* NP Nilsson Beräkningshjälpen v3 — ljus BYGG-HUD / blueprint */
.npnc3 {
	--bg:    #eef3fb;
	--bg2:   #f7faff;
	--cyan:  #0a8bd6;
	--blue:  #2f6bff;
	--amber: #e07a1f;
	--ink:   #16223c;
	--dim:   #5b6b8c;
	--line:  rgba(47,107,255,.14);
	--card:  #ffffff;
	--mono:  ui-monospace, "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

	position: relative;
	color: var(--ink);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: 18px;
	overflow: hidden;
	font-family: var(--mono);
	background:
		radial-gradient(1100px 460px at 12% -10%, rgba(47,107,255,.08), transparent 60%),
		radial-gradient(820px 460px at 112% 8%, rgba(10,139,214,.07), transparent 55%),
		linear-gradient(180deg, var(--bg2), var(--bg));
}
.npnc3 *, .npnc3 *::before, .npnc3 *::after { box-sizing: border-box; }

/* Tunt blueprint-rutnät */
.npnc3::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 38px 38px;
	mask-image: radial-gradient(130% 120% at 50% 0%, #000 60%, transparent 100%);
}
.npnc3 > * { position: relative; z-index: 1; }

/* Header — tonar in en gång */
.npnc3__head {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	opacity: 0; transform: translateY(-8px); animation: npnc3fade .7s ease .05s forwards;
}
.npnc3__sys { font-size: .72rem; letter-spacing: .26em; color: var(--cyan); }
.npnc3__sys--r { margin-left: auto; color: var(--amber); }
.npnc3__title {
	margin: 0; font-family: var(--mono); font-weight: 700; letter-spacing: .03em;
	font-size: clamp(1.45rem, 4vw, 2.3rem); color: var(--ink); text-transform: uppercase;
}

/* Kort — vita med mjuk skugga; glider in vid scroll */
.npnc3-card {
	position: relative; margin: 0 0 clamp(1.25rem, 3vw, 1.85rem);
	background: var(--card);
	border: 1px solid rgba(47,107,255,.16);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(30,50,100,.08), 0 1px 0 rgba(255,255,255,.8) inset;
	padding: clamp(1.15rem, 3vw, 1.85rem);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.npnc3.is-ready .npnc3-card { opacity: 0; transform: translateY(20px); }
.npnc3.is-ready .npnc3-card.is-in { opacity: 1; transform: none; }

.npnc3-card__cnr { position: absolute; width: 15px; height: 15px; border: 2px solid var(--blue); opacity: .7; }
.npnc3-card__cnr--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.npnc3-card__cnr--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.npnc3-card__cnr--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.npnc3-card__cnr--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

/* Rubriker — tvinga HUD-font (temat gör annars headings annorlunda) */
.npnc3 h2.npnc3__title,
.npnc3 h3.npnc3-card__title { font-family: var(--mono); }
.npnc3-card__title {
	margin: 0 0 1.15rem; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
	color: var(--ink); font-weight: 700;
}
.npnc3-card__title span { color: var(--cyan); }

/* HUD-flikar */
.npnc3-tablist { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.npnc3-tab {
	border: 1px solid rgba(47,107,255,.22); background: #f1f5fd; color: var(--dim);
	font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
	padding: .55rem 1.05rem; cursor: pointer; border-radius: 5px;
	clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 8px) 100%, 0 100%);
	transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.npnc3-tab:hover { color: var(--blue); border-color: rgba(47,107,255,.5); background: #e9f0fe; }
.npnc3-tab.is-active {
	color: #fff; border-color: transparent;
	background: linear-gradient(135deg, var(--cyan), var(--blue));
	box-shadow: 0 4px 14px rgba(47,107,255,.28);
	font-weight: 700;
}

.npnc3-panel { display: none; }
.npnc3-panel.is-active { display: block; animation: npnc3panel .4s cubic-bezier(.2,.7,.2,1); }
@keyframes npnc3panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes npnc3fade { to { opacity: 1; transform: none; } }

.npnc3-form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,3vw,2.5rem); align-items: start; margin: 0; }

/* Ritning på ljust rutnät (ej inverterad) */
.npnc3-blueprint {
	border: 1px solid rgba(47,107,255,.16); border-radius: 10px; padding: .9rem;
	background:
		repeating-linear-gradient(0deg, rgba(47,107,255,.06) 0 1px, transparent 1px 20px),
		repeating-linear-gradient(90deg, rgba(47,107,255,.06) 0 1px, transparent 1px 20px),
		#fbfdff;
	margin-bottom: 1rem;
}
.npnc3-blueprint img { width: 100%; max-width: 320px; height: auto; display: block; mix-blend-mode: multiply; }
.npnc3-help { margin: 0; color: var(--dim); font-size: .92rem; line-height: 1.65; }

.npnc3-fields { display: flex; flex-direction: column; gap: 1rem; }
.npnc3-field { display: flex; flex-direction: column; gap: .35rem; }
.npnc3-field span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.npnc3-field input {
	background: #fff; border: 1px solid #cdd8ee; color: var(--ink);
	font-family: var(--mono); font-size: 1.1rem; padding: .7rem .85rem; border-radius: 7px; width: 100%;
	transition: border-color .18s, box-shadow .18s;
}
.npnc3-field input::placeholder { color: #aab6d0; }
.npnc3-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.14); }

.npnc3-btn {
	align-self: flex-start; margin-top: .25rem; cursor: pointer; position: relative; overflow: hidden;
	border: 0; border-radius: 7px; color: #fff;
	background: linear-gradient(135deg, var(--cyan), var(--blue));
	font-family: var(--mono); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem;
	padding: .78rem 1.9rem; box-shadow: 0 6px 16px rgba(47,107,255,.28);
	transition: box-shadow .18s, transform .05s;
}
.npnc3-btn:hover { box-shadow: 0 8px 24px rgba(47,107,255,.4); }
.npnc3-btn:active { transform: translateY(1px); }
.npnc3-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.npnc3-btn:hover::after { left: 135%; }

/* Readout */
.npnc3-readout {
	margin-top: .5rem; border: 1px solid rgba(47,107,255,.28); border-radius: 9px;
	background: linear-gradient(180deg, rgba(47,107,255,.07), #f6f9ff);
	padding: .95rem 1.15rem;
}
.npnc3-readout.show { animation: npnc3pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes npnc3pop { from { opacity: 0; transform: scale(.97) translateY(4px); } to { opacity: 1; transform: none; } }
.npnc3-readout__label { display: block; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); margin-bottom: .3rem; }
.npnc3-readout__val { display: block; font-size: clamp(1.35rem, 3vw, 1.95rem); font-weight: 700; color: var(--blue); line-height: 1.2; }
.npnc3-readout.is-error { border-color: rgba(210,70,70,.4); background: linear-gradient(180deg, rgba(210,70,70,.07), #fff6f6); }
.npnc3-readout.is-error .npnc3-readout__val { color: #c23838; font-size: 1rem; font-weight: 500; }

/* Materialtabeller */
.npnc3-table { overflow-x: auto; }
.npnc3-table table { border-collapse: collapse; width: 100%; font-size: .86rem; font-family: var(--mono); color: var(--ink); }
.npnc3-table td, .npnc3-table th { border: 1px solid rgba(47,107,255,.14); padding: .5rem .7rem; text-align: left; }
.npnc3-table tr:nth-child(even) td { background: rgba(47,107,255,.04); }
.npnc3-table b { color: var(--blue); }
.npnc3-table font { font-size: inherit !important; color: inherit !important; }

@media (prefers-reduced-motion: reduce) {
	.npnc3-card, .npnc3__head { opacity: 1 !important; transform: none !important; animation: none !important; }
	.npnc3-panel.is-active, .npnc3-readout.show { animation: none !important; }
}
@media (max-width: 680px) { .npnc3-form { grid-template-columns: 1fr; } }