/* ==========================================================================
   KiaraHub Blueprints — prompt-specific styles
   Loaded after assets/css/theme.css, reusing its --kh-navy / --kh-saffron /
   --kh-teal / --kh-surface / --kh-border / --kh-radius / --font-* tokens so
   this always looks like a natural extension of the main KiaraHub theme,
   never a separate visual system. A few extension-only tokens are added
   locally (code block colors, a larger card radius) since the parent theme
   never needed them.
   ========================================================================== */

:root {
	--kh-code-bg: var(--kh-navy);
	--kh-code-text: #E7ECFB;
	--kh-radius-lg: 20px;
}

.kh-page { padding-bottom: 80px; }
.kh-page-lead { color: var(--kh-muted); max-width: 620px; margin: 24px 0 32px; font-size: 15px; line-height: 1.6; }
.kh-banner-sub { color: rgba(255,255,255,0.75); margin: 6px 0 0; }

.kiara-logo a { display: flex; align-items: center; gap: 8px; }
.kh-logo-suffix {
	font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--kh-muted);
	padding-left: 8px; border-left: 1px solid var(--kh-border);
}

/* ---------- Homepage hero override (no car illustration → single column) ---------- */
.kh-hero-inner-single { grid-template-columns: 1fr; max-width: 720px; }
.kh-hero-stats-line { margin-bottom: 8px; }
.kh-hero-stats-line .kh-stats { font-family: var(--font-mono); color: #C9D1E3; font-size: 13.5px; }
.kh-section-alt { background: #fff; }

/* ---------- Card grid ---------- */
.kh-blueprint-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kh-blueprint-card {
	border: 1px solid var(--kh-border); border-radius: var(--kh-radius-lg);
	background: var(--kh-surface); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kh-blueprint-card:hover { border-color: var(--kh-saffron); transform: translateY(-2px); box-shadow: var(--kh-shadow-hover); }
.kh-blueprint-card a { display: block; padding: 22px; height: 100%; text-decoration: none; }
.kh-blueprint-card h3 { font-family: var(--font-display); color: var(--kh-navy); font-size: 17px; margin: 14px 0 8px; letter-spacing: -.01em; }
.kh-blueprint-excerpt { color: var(--kh-muted); font-size: 14px; margin: 0 0 18px; line-height: 1.55; }
.kh-blueprint-meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 12.5px; color: var(--kh-muted); }
.kh-pill-tool { font-family: var(--font-mono); font-size: 11.5px; }
.kh-byline { font-style: italic; }
.kh-date { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }

.kh-pill {
	display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
	background: #FFF4EC; color: var(--kh-saffron-dark); font-family: var(--font-display);
}
.kh-pill-customizable { background: #EAF7F3; color: var(--kh-teal); margin-left: 6px; padding: 2px 9px; }

.kh-empty-state { color: var(--kh-muted); padding: 60px 0; text-align: center; }
.kh-archive-wrap { padding: 40px 0 80px; }

/* ---------- Single Blueprint view ---------- */
.kh-blueprint-single { max-width: 800px; padding: 30px 20px 96px; }
.kh-breadcrumb { font-size: 13px; color: var(--kh-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.kh-breadcrumb a { text-decoration: none; }
.kh-breadcrumb a:hover { color: var(--kh-saffron); }
.kh-blueprint-header { padding: 20px 0 8px; }
.kh-blueprint-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; margin: 16px 0 8px; color: var(--kh-navy); }
.kh-blueprint-byline { color: var(--kh-muted); font-size: 13.5px; margin: 0 0 10px; }
.kh-blueprint-description { color: var(--kh-muted); font-size: 16px; max-width: 640px; }

.kh-blueprint-panel {
	margin-top: 28px; border-radius: var(--kh-radius-lg); overflow: hidden;
	border: 1px solid var(--kh-border); box-shadow: var(--kh-shadow);
}
.kh-blueprint-panel-header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 14px 18px; background: var(--kh-surface); border-bottom: 1px solid var(--kh-border);
}
.kh-blueprint-panel-label { font-size: 12.5px; font-weight: 600; color: var(--kh-muted); }
.kh-blueprint-wordcount { font-weight: 400; }

.kh-blueprint-raw {
	margin: 0; padding: 24px; background: var(--kh-code-bg); color: var(--kh-code-text);
	font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
	white-space: pre-wrap; word-break: break-word; max-height: 560px; overflow-y: auto;
}

/* ---------- Personalize panel ---------- */
.kh-personalize-panel {
	margin-top: 28px; padding: 18px 20px; border-radius: var(--kh-radius-lg);
	border: 1px solid var(--kh-border); background: #FFFBF8;
}
.kh-personalize-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.kh-personalize-label { font-weight: 700; font-size: 14.5px; color: var(--kh-navy); }
.kh-personalize-hint { font-size: 12.5px; color: var(--kh-muted); }
.kh-personalize-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kh-personalize-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--kh-muted); }
.kh-personalize-input {
	font-family: var(--font-body); font-size: 14px; padding: 9px 12px; border-radius: 8px;
	border: 1px solid var(--kh-border); background: #fff; color: var(--kh-ink);
}
.kh-personalize-input:focus { outline: none; border-color: var(--kh-saffron); }

.kh-copy-btn { position: relative; }
.kh-copy-btn.is-copied .kh-icon-copy { display: none; }
.kh-copy-btn.is-copied .kh-icon-check { display: inline-block !important; }

.kh-blueprint-footer {
	margin-top: 24px; padding: 16px 18px; border: 1px dashed var(--kh-border); border-radius: var(--kh-radius);
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.kh-share-label { font-size: 12px; color: var(--kh-muted); text-transform: uppercase; letter-spacing: .04em; }
.kh-share-row { display: flex; align-items: center; gap: 10px; }
.kh-share-url { font-family: var(--font-mono); font-size: 13px; color: var(--kh-saffron-dark); }

.kh-related { margin-top: 64px; }
.kh-related h2 { font-family: var(--font-display); color: var(--kh-navy); font-size: 20px; margin: 0 0 20px; }
.kh-related .kh-blueprint-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- Toast ---------- */
.kh-toast {
	position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 16px);
	background: var(--kh-navy); color: #fff;
	padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
	opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
	box-shadow: var(--kh-shadow-hover); z-index: 100;
}
.kh-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Submission form ---------- */
.kh-guest-notice {
	background: #FFF4EC; border: 1px solid #FFD9BB; border-radius: var(--kh-radius);
	padding: 14px 16px; margin-bottom: 22px; font-size: 13.5px; color: var(--kh-saffron-dark);
}
.kh-guest-notice .kiara-link-btn { color: var(--kh-saffron-dark); text-decoration: underline; }
.kh-submit-form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.kh-form-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kh-muted); }
.kh-form-field em { color: var(--kh-saffron); font-style: normal; }
.kh-form-field input,
.kh-form-field select,
.kh-form-field textarea {
	font-family: var(--font-body); font-size: 15px; color: var(--kh-ink); background: #fff;
	border: 1px solid var(--kh-border); border-radius: 10px; padding: 12px 14px; resize: vertical;
}
.kh-form-field input:focus, .kh-form-field select:focus, .kh-form-field textarea:focus { outline: none; border-color: var(--kh-saffron); }
.kh-mono-textarea { font-family: var(--font-mono) !important; font-size: 13.5px !important; line-height: 1.6; }
.kh-form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kh-form-toggle { padding: 14px 16px; border: 1px dashed var(--kh-border); border-radius: var(--kh-radius); }
.kh-form-toggle label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--kh-ink); }
.kh-form-toggle .kh-help { margin: 8px 0 0 24px; }
.kh-help { font-size: 12.5px; color: var(--kh-muted); font-weight: 400; }
.kh-form-error, .kh-form-success {
	padding: 16px 18px; border-radius: var(--kh-radius); margin-bottom: 24px; font-size: 14.5px;
}
.kh-form-error { background: #FDEAE8; border: 1px solid #F5C6C0; color: #B3261E; }
.kh-form-success { background: #EAF7F3; border: 1px solid #BFE8DB; }
.kh-form-success h2 { margin-top: 0; font-family: var(--font-display); color: var(--kh-navy); }
.kh-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .kh-form-row-split { grid-template-columns: 1fr; } }

/* ---------- My Prompts dashboard ---------- */
.kh-dashboard-login-prompt { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kh-dashboard-empty {
	padding: 48px 24px; text-align: center; border: 1px dashed var(--kh-border); border-radius: var(--kh-radius-lg);
	display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.kh-dashboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kh-dashboard-item {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	padding: 18px 20px; border: 1px solid var(--kh-border); border-radius: var(--kh-radius); background: var(--kh-surface);
}
.kh-dashboard-item-main { flex: 1 1 320px; min-width: 0; }
.kh-dashboard-item-title { margin: 8px 0 4px; font-size: 17px; font-family: var(--font-display); }
.kh-dashboard-item-title a { color: var(--kh-navy); text-decoration: none; }
.kh-dashboard-item-title a:hover { color: var(--kh-saffron); }
.kh-dashboard-item-excerpt { margin: 0; color: var(--kh-muted); font-size: 13.5px; }
.kh-dashboard-item-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.kh-status-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }
.kh-status-live    { background: #EAF7F3; color: var(--kh-teal); }
.kh-status-pending { background: #FFF4EC; color: var(--kh-saffron-dark); }
.kh-status-draft   { background: var(--kh-bg); color: var(--kh-muted); border: 1px solid var(--kh-border); }
.kh-status-anon    { background: var(--kh-navy); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.kh-blueprint-grid, .kh-related .kh-blueprint-grid { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.kh-blueprint-grid, .kh-related .kh-blueprint-grid { grid-template-columns: repeat(2, 1fr); }
}