/* ==========================================================================
   Peptide Tools — premium dark research aesthetic
   Mobile-first: base styles target 360px, then min-width: 600px and 900px.
   ========================================================================== */

:root{
	--pt-bg:#0F1117;
	--pt-card:#1A1D27;
	--pt-card2:#222536;
	--pt-border:#2E3147;
	--pt-primary:#6EE7B7;
	--pt-primary-dk:#34D399;
	--pt-accent:#818CF8;
	--pt-danger:#F87171;
	--pt-warning:#FCD34D;
	--pt-text:#F1F5F9;
	--pt-muted:#94A3B8;
	--pt-radius:14px;
	--pt-shadow:0 8px 32px rgba(0,0,0,.4);
	--pt-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--pt-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- Reset within tool ---------- */
.pt-tool,.pt-tool *,.pt-tool *::before,.pt-tool *::after{box-sizing:border-box}

/* ---------- Tool wrapper ---------- */
.pt-tool{
	font-family:var(--pt-font);
	color:var(--pt-text);
	background:var(--pt-bg);
	border-radius:var(--pt-radius);
	padding:18px;
	margin:24px 0;
	box-shadow:var(--pt-shadow);
	line-height:1.55;
	max-width:100%;
	overflow:hidden;
}

/* ---------- Header ---------- */
.pt-header{margin-bottom:18px;text-align:left}
.pt-badge{
	display:inline-block;
	font-size:11px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--pt-primary);
	background:rgba(110,231,183,.08);
	border:1px solid rgba(110,231,183,.25);
	padding:4px 10px;
	border-radius:999px;
	margin-bottom:10px;
}
.pt-title{
	font-size:22px;
	font-weight:700;
	margin:0 0 6px;
	color:var(--pt-text);
	line-height:1.2;
	letter-spacing:-.01em;
}
.pt-subtitle{font-size:14px;color:var(--pt-muted);margin:0}

/* ---------- Cards ---------- */
.pt-card{
	background:var(--pt-card);
	border:1px solid var(--pt-border);
	border-radius:var(--pt-radius);
	padding:16px;
	margin-bottom:14px;
}
.pt-card + .pt-card{margin-top:0}

.pt-section-title{
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--pt-muted);
	margin:0 0 12px;
}

/* ---------- Form fields ---------- */
.pt-field{margin-bottom:14px}
.pt-label{
	display:block;
	font-size:13px;
	font-weight:500;
	margin-bottom:6px;
	color:var(--pt-text);
}
.pt-label .pt-hint{color:var(--pt-muted);font-weight:400;margin-left:4px}

.pt-input,.pt-select,.pt-tool textarea{
	width:100%;
	background:var(--pt-card2);
	border:1px solid var(--pt-border);
	border-radius:10px;
	padding:12px 14px;
	font-size:16px; /* >=16px so iOS doesn't zoom */
	font-family:var(--pt-mono);
	color:var(--pt-text);
	min-height:44px; /* tap target */
	transition:border-color .15s,box-shadow .15s;
	-webkit-appearance:none;
	appearance:none;
}
.pt-select{
	font-family:var(--pt-font);
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%2394A3B8' d='M2 4l4 4 4-4'/></svg>");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:12px;
	padding-right:36px;
}
.pt-input:focus,.pt-select:focus,.pt-tool textarea:focus{
	outline:none;
	border-color:var(--pt-primary);
	box-shadow:0 0 0 3px rgba(110,231,183,.18);
}
.pt-input::placeholder{color:var(--pt-muted)}

.pt-input-group{display:flex;align-items:stretch}
.pt-input-group .pt-input{border-top-right-radius:0;border-bottom-right-radius:0}
.pt-unit{
	display:flex;
	align-items:center;
	padding:0 14px;
	background:var(--pt-card2);
	border:1px solid var(--pt-border);
	border-left:0;
	border-radius:0 10px 10px 0;
	color:var(--pt-muted);
	font-family:var(--pt-mono);
	font-size:13px;
	min-width:54px;
	justify-content:center;
}

/* ---------- Grids ---------- */
.pt-grid-2,.pt-grid-3{display:grid;gap:12px;grid-template-columns:1fr}

/* ---------- Buttons ---------- */
.pt-btn,.pt-btn-reset{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:48px;
	font-family:var(--pt-font);
	font-size:15px;
	font-weight:600;
	padding:12px 20px;
	border-radius:10px;
	border:0;
	cursor:pointer;
	transition:transform .08s,box-shadow .15s,background .15s;
	letter-spacing:.01em;
}
.pt-btn{
	background:linear-gradient(135deg,var(--pt-primary) 0%,var(--pt-primary-dk) 100%);
	color:#06281C;
	box-shadow:0 6px 20px rgba(52,211,153,.25);
}
.pt-btn:hover{box-shadow:0 8px 24px rgba(52,211,153,.4)}
.pt-btn:active{transform:translateY(1px)}
.pt-btn-reset{
	background:transparent;
	color:var(--pt-muted);
	border:1px solid var(--pt-border);
}
.pt-btn-reset:hover{color:var(--pt-text);border-color:var(--pt-muted)}

.pt-actions{display:grid;gap:10px;grid-template-columns:1fr;margin-top:4px}

/* ---------- Result ---------- */
.pt-result{
	display:none;
	margin-top:18px;
	padding:18px;
	background:linear-gradient(180deg,rgba(110,231,183,.06) 0%,rgba(129,140,248,.04) 100%);
	border:1px solid rgba(110,231,183,.25);
	border-radius:var(--pt-radius);
}
.pt-result.pt-show{display:block;animation:pt-fade .35s ease-out}
@keyframes pt-fade{
	from{opacity:0;transform:translateY(8px)}
	to{opacity:1;transform:none}
}
.pt-result-header{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:600;
	color:var(--pt-primary);
	text-transform:uppercase;
	letter-spacing:.08em;
	margin-bottom:14px;
}
.pt-result-header::before{
	content:"";
	display:inline-block;
	width:8px;height:8px;
	border-radius:50%;
	background:var(--pt-primary);
	box-shadow:0 0 8px var(--pt-primary);
}

.pt-result-grid{display:grid;gap:10px;grid-template-columns:1fr}
.pt-result-card{
	background:var(--pt-card);
	border:1px solid var(--pt-border);
	border-radius:10px;
	padding:12px 14px;
}
.pt-result-label{
	display:block;
	font-size:11px;
	font-weight:600;
	color:var(--pt-muted);
	text-transform:uppercase;
	letter-spacing:.08em;
	margin-bottom:4px;
}
.pt-result-value{
	display:block;
	font-family:var(--pt-mono);
	font-size:20px;
	font-weight:600;
	color:var(--pt-text);
	line-height:1.2;
	word-break:break-word;
}
.pt-result-unit{font-size:13px;color:var(--pt-muted);margin-left:4px;font-weight:500}

.pt-highlight{
	grid-column:1/-1;
	background:linear-gradient(135deg,rgba(110,231,183,.14),rgba(129,140,248,.10));
	border-color:var(--pt-primary);
}
.pt-highlight .pt-result-value{color:var(--pt-primary);font-size:24px}

/* ---------- Info / warning / error boxes ---------- */
.pt-warning-box,.pt-info-box{
	border-radius:10px;
	padding:14px 16px;
	font-size:13px;
	margin-top:18px;
	line-height:1.55;
	display:flex;
	gap:10px;
	align-items:flex-start;
}
.pt-warning-box{
	background:rgba(248,113,113,.08);
	border:1px solid rgba(248,113,113,.35);
	color:#FCA5A5;
}
.pt-warning-box strong{color:#FECACA;display:block;margin-bottom:2px}
.pt-warning-box::before{content:"⚠";font-size:18px;line-height:1;margin-top:1px;color:var(--pt-danger)}
.pt-info-box{
	background:rgba(129,140,248,.08);
	border:1px solid rgba(129,140,248,.3);
	color:#C7D2FE;
}
.pt-info-box::before{content:"ℹ";font-size:18px;line-height:1;margin-top:1px;color:var(--pt-accent)}

.pt-error{
	display:none;
	margin-top:6px;
	font-size:12px;
	color:var(--pt-danger);
	font-weight:500;
}
.pt-error.pt-show{display:block}

.pt-divider{height:1px;background:var(--pt-border);margin:14px 0;border:0}

/* ---------- Tables ---------- */
.pt-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.pt-table{
	width:100%;
	min-width:480px;
	border-collapse:collapse;
	font-family:var(--pt-mono);
	font-size:13px;
}
.pt-table th,.pt-table td{
	text-align:left;
	padding:10px 12px;
	border-bottom:1px solid var(--pt-border);
}
.pt-table th{
	background:var(--pt-card2);
	color:var(--pt-muted);
	font-family:var(--pt-font);
	font-weight:600;
	text-transform:uppercase;
	font-size:11px;
	letter-spacing:.06em;
}
.pt-table tr:last-child td{border-bottom:0}
.pt-table tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- Row controls (dynamic add/remove) ---------- */
.pt-row{
	background:var(--pt-card2);
	border:1px solid var(--pt-border);
	border-radius:10px;
	padding:12px;
	margin-bottom:10px;
	position:relative;
}
.pt-row-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:12px;
	font-weight:600;
	color:var(--pt-muted);
	text-transform:uppercase;
	letter-spacing:.06em;
	margin-bottom:10px;
}
.pt-row-controls{
	display:flex;
	gap:8px;
	margin-top:10px;
}
.pt-row-controls .pt-btn,.pt-row-controls .pt-btn-reset{width:auto;min-height:40px;padding:8px 14px;font-size:13px}
.pt-remove-row{
	background:transparent;
	color:var(--pt-danger);
	border:1px solid rgba(248,113,113,.4);
	padding:6px 12px;
	font-size:12px;
	font-weight:600;
	border-radius:8px;
	cursor:pointer;
	min-height:32px;
}
.pt-remove-row:hover{background:rgba(248,113,113,.1)}

/* ---------- Toggle (kg/lbs) ---------- */
.pt-toggle{display:inline-flex;background:var(--pt-card2);border:1px solid var(--pt-border);border-radius:10px;padding:3px;gap:2px}
.pt-toggle button{
	background:transparent;
	border:0;
	color:var(--pt-muted);
	padding:8px 14px;
	font-size:13px;
	font-weight:600;
	border-radius:8px;
	cursor:pointer;
	min-height:36px;
}
.pt-toggle button.pt-on{background:var(--pt-primary);color:#06281C}

/* ---------- Syringe diagram ---------- */
.pt-syringe{
	position:relative;
	width:100%;
	max-width:360px;
	height:60px;
	margin:14px auto 6px;
	background:var(--pt-card2);
	border:1px solid var(--pt-border);
	border-radius:30px;
	overflow:hidden;
}
.pt-syringe-fill{
	position:absolute;left:0;top:0;bottom:0;
	background:linear-gradient(90deg,var(--pt-primary),var(--pt-accent));
	border-radius:30px 0 0 30px;
	transition:width .5s cubic-bezier(.2,.7,.3,1);
}
.pt-syringe-label{
	position:absolute;inset:0;
	display:flex;align-items:center;justify-content:center;
	font-family:var(--pt-mono);font-size:13px;font-weight:600;
	color:var(--pt-text);
	text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* Side-by-side syringe comparison */
.pt-syringe-compare{display:grid;gap:14px;grid-template-columns:1fr;margin-top:14px}
.pt-syringe-compare .pt-result-card{padding:14px}
.pt-syringe-compare .pt-syringe{margin-top:8px;height:44px}

/* ---------- Half-life decay bar ---------- */
.pt-decay{
	position:relative;
	width:100%;
	height:32px;
	background:var(--pt-card2);
	border:1px solid var(--pt-border);
	border-radius:8px;
	overflow:hidden;
	margin:8px 0 14px;
}
.pt-decay-fill{
	height:100%;
	background:linear-gradient(90deg,var(--pt-primary),var(--pt-warning),var(--pt-danger));
	transition:width .5s ease;
}
.pt-decay-label{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-family:var(--pt-mono);font-size:13px;font-weight:600;color:var(--pt-text);
	text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* ---------- Schedule grid (Protocol Builder) ---------- */
.pt-schedule-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.pt-schedule{width:100%;min-width:560px;border-collapse:separate;border-spacing:4px;font-size:12px}
.pt-schedule th,.pt-schedule td{padding:8px;text-align:center;border-radius:6px;background:var(--pt-card2);font-family:var(--pt-mono)}
.pt-schedule th{background:var(--pt-card);color:var(--pt-muted);font-family:var(--pt-font);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.pt-schedule td.pt-am{background:rgba(252,211,77,.14);color:var(--pt-warning)}
.pt-schedule td.pt-pm{background:rgba(129,140,248,.14);color:var(--pt-accent)}
.pt-schedule td.pt-night{background:rgba(110,231,183,.14);color:var(--pt-primary)}
.pt-schedule td.pt-empty{opacity:.3}

/* ---------- FAQ accordion ---------- */
.pt-faq{margin:24px 0}
.pt-faq-item{
	background:var(--pt-card);
	border:1px solid var(--pt-border);
	border-radius:10px;
	margin-bottom:10px;
	overflow:hidden;
}
.pt-faq-q{
	width:100%;
	background:transparent;
	border:0;
	color:var(--pt-text);
	font-family:var(--pt-font);
	font-size:15px;
	font-weight:600;
	text-align:left;
	padding:14px 44px 14px 16px;
	cursor:pointer;
	min-height:48px;
	position:relative;
	line-height:1.4;
}
.pt-faq-q::after{
	content:"+";
	position:absolute;
	right:16px;top:50%;
	transform:translateY(-50%);
	font-size:22px;
	color:var(--pt-primary);
	font-weight:400;
	line-height:1;
	transition:transform .2s;
}
.pt-faq-item.pt-open .pt-faq-q::after{content:"−"}
.pt-faq-a{
	padding:0 16px 14px;
	color:var(--pt-muted);
	font-size:14px;
	line-height:1.6;
	display:none;
}
.pt-faq-item.pt-open .pt-faq-a{display:block}

/* ---------- Related tools cards ---------- */
.pt-related{margin:30px 0}
.pt-related h2{font-size:18px;margin:0 0 14px;color:var(--pt-text);font-family:var(--pt-font)}
.pt-related-grid{display:grid;gap:12px;grid-template-columns:1fr}
.pt-related-card{
	display:block;
	background:var(--pt-card);
	border:1px solid var(--pt-border);
	border-radius:10px;
	padding:14px;
	color:var(--pt-text);
	text-decoration:none;
	transition:transform .12s,border-color .15s,box-shadow .15s;
}
.pt-related-card:hover{
	transform:translateY(-2px);
	border-color:var(--pt-primary);
	box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.pt-related-title{font-size:15px;font-weight:600;margin:0 0 4px}
.pt-related-excerpt{font-size:13px;color:var(--pt-muted);margin:0;line-height:1.5}

/* ---------- Copy button mini ---------- */
.pt-copy{
	background:transparent;
	color:var(--pt-muted);
	border:1px solid var(--pt-border);
	padding:6px 12px;
	border-radius:8px;
	font-size:12px;
	font-weight:600;
	cursor:pointer;
	min-height:32px;
}
.pt-copy:hover{color:var(--pt-text);border-color:var(--pt-primary)}
.pt-copy.pt-copied{color:var(--pt-primary);border-color:var(--pt-primary)}

/* ==========================================================================
   Tablet — 600px and up
   ========================================================================== */
@media (min-width:600px){
	.pt-tool{padding:26px}
	.pt-title{font-size:26px}
	.pt-grid-2{grid-template-columns:1fr 1fr}
	.pt-grid-3{grid-template-columns:1fr 1fr}
	.pt-result-grid{grid-template-columns:1fr 1fr}
	.pt-actions{grid-template-columns:2fr 1fr}
	.pt-syringe-compare{grid-template-columns:1fr 1fr 1fr}
	.pt-related-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Desktop — 900px and up
   ========================================================================== */
@media (min-width:900px){
	.pt-tool{padding:32px}
	.pt-title{font-size:30px}
	.pt-grid-3{grid-template-columns:1fr 1fr 1fr}
	.pt-result-grid{grid-template-columns:1fr 1fr 1fr}
	.pt-related-grid{grid-template-columns:1fr 1fr 1fr}
}

@media (prefers-reduced-motion: reduce){
	.pt-result,.pt-syringe-fill,.pt-decay-fill,.pt-related-card{animation:none!important;transition:none!important}
}