/* Hennepin County Tree Finder Quiz — Stylesheet v3.1.1 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

#htq-quiz {
--htq-green-900 : #0d2617;
	--htq-green-700 : #1a4731;
	--htq-green-500 : #10813a;
	--htq-green-300 : #9FCC3B;
	--htq-green-100 : #e5efcc;
	--htq-green-50  : #f0faf2;
	--htq-lightgray : #eceef0;
	--htq-blue      : #0058A4;
	--htq-blue-dark : #133a66;
	--htq-gold-bg   : #fdf6e3;
	--htq-gold      : #b8922a;
	--htq-text      : #000;
	--htq-muted     : #5a6b5c;
	--htq-border    : #CBDB2A;
	--htq-shadow-sm : 0 1px 4px rgba(0,0,0,.07);
	--htq-shadow    : 0 4px 24px rgba(0,0,0,.10);
	--htq-radius    : 14px;
	--htq-radius-sm : 8px;
	--htq-ease      : cubic-bezier(.4,0,.2,1);
	font-family: "Inter", sans-serif;
	color: var(--htq-text);
	max-width: 1100px;
	margin: 2rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
	line-height: 1.5;
}
#htq-quiz *, #htq-quiz *::before, #htq-quiz *::after { box-sizing: border-box; }
#htq-quiz .htq-hidden { display: none !important; }

/* Progress */
.htq-progress-bar { height:6px; background:#eceef0; border-radius:99px; overflow:hidden; margin-bottom:2rem; }
.htq-progress-fill { height:100%; background:linear-gradient(90deg,var(--htq-green-500),var(--htq-green-300)); border-radius:99px; transition:width .55s var(--htq-ease); }

/* Step card */
.htq-step-inner { background:var(--htq-cream); border:1px solid var(--htq-border); border-radius:var(--htq-radius); padding:2.4rem 2.8rem; box-shadow:var(--htq-shadow); }
@media(max-width:560px){ .htq-step-inner { padding:1.5rem 1.2rem; } }

/* Badge */
.htq-step-badge { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--htq-green-700); background:var(--htq-green-100); padding:.25rem .8rem; border-radius:99px; margin-bottom:1rem; }

/* Question + sub */
.htq-question { font-family: "Inter", sans-serif; font-size:clamp(1.3rem,3.5vw,1.75rem); color:var(--htq-green-900); line-height:1.2; margin:0 0 .45rem; }
.htq-question:focus { outline:none; }
.htq-sub { font-size:.9rem; color:var(--htq-muted); font-style:italic; margin:0 0 1.4rem; line-height:1.5; }

/* Options grid */
.htq-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.85rem; margin-bottom:1.8rem; }
.htq-options--stack { grid-template-columns:1fr; gap:.7rem; }

/* Option card — no icon, text only */
.htq-option { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.3rem; padding:1rem 1.1rem; background:#fff; border:2px solid var(--htq-border); border-radius:var(--htq-radius); cursor:pointer; transition:border-color 200ms var(--htq-ease),background 200ms var(--htq-ease),box-shadow 200ms var(--htq-ease),transform 200ms var(--htq-ease); user-select:none; }
.htq-option:hover { border-color:var(--htq-green-300); background:var(--htq-green-50); transform:translateY(-2px); box-shadow:var(--htq-shadow-sm); }
.htq-option.htq-selected { border-color:var(--htq-green-500); background:var(--htq-green-100); box-shadow:0 0 0 3px rgba(82,183,136,.25); transform:translateY(-2px); }
.htq-option input[type="radio"] { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.htq-option-title { font-weight:600; font-size:.95rem; color:var(--htq-green-900); }
.htq-option-desc  { font-size:.82rem; color:var(--htq-muted); line-height:1.35; }

/* Wide stacked options (Q2/Q3) */
.htq-option--wide { flex-direction:row; align-items:center; gap:1rem; padding:1rem 1.25rem; }
.htq-option-body  { display:flex; flex-direction:column; gap:.15rem; width:100%; }

/* Buttons */
.htq-nav { display:flex; align-items:center; gap:.75rem; margin-top:.25rem; flex-wrap:wrap; }
.htq-nav--right { justify-content:flex-end; }
.htq-btn { display:inline-flex; align-items:center; gap:.35rem; font-family: "Inter", sans-serif; font-size:.95rem; font-weight:600; line-height:1; padding:.72rem 1.5rem; border:none; border-radius:var(--htq-radius-sm); cursor:pointer; text-decoration:none; transition:background 160ms var(--htq-ease),transform 160ms var(--htq-ease),opacity 160ms var(--htq-ease); white-space:nowrap; }
.htq-btn--next,.htq-btn--submit { background:var(--htq-green-500); color:#fff; margin-left:auto; }
.htq-btn--next:hover:not(:disabled),.htq-btn--submit:hover { background:var(--htq-green-700); transform:translateY(-1px); }
.htq-btn--next:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.htq-btn--back { background:transparent; color:var(--htq-muted); border:1px solid var(--htq-border); }
.htq-btn--back:hover { background:var(--htq-green-50); color:var(--htq-green-700); }
.htq-btn--restart { background:#fff; color:var(--htq-muted); border:1px solid var(--htq-border); }
.htq-btn--restart:hover { background:var(--htq-green-50); }
.htq-btn--learn { background:var(--htq-blue); color:#fff!important; }
.htq-btn--learn:hover { background:var(--htq-blue-dark); transform:translateY(-1px); }
.htq-btn-icon { display:inline-flex; align-items:center; margin-left:.35rem; font-size:1.25em; line-height:1; }
.htq-btn-icon svg { width:1em; height:1em; display:block; }

/* Loading */
.htq-loading-inner { text-align:center; padding:3.5rem 2rem; }
.htq-spinner { width:48px; height:48px; border:4px solid var(--htq-green-100); border-top-color:var(--htq-green-500); border-radius:50%; margin:0 auto 1.2rem; animation:htq-spin .85s linear infinite; }
@keyframes htq-spin { to { transform:rotate(360deg); } }
.htq-loading-text { color:var(--htq-muted); font-size:1rem; }

/* Results header */
.htq-results-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.htq-results-title { font-family: "Inter", sans-serif; font-size:clamp(1.4rem,4vw,1.9rem); color:var(--htq-green-900); margin:0 0 .4rem; }
.htq-results-title:focus { outline:none; }
.htq-results-sub { font-size:.88rem; color:var(--htq-muted); margin:0; line-height:1.55; padding:.75rem 1rem; background:var(--htq-gold-bg); border-left:3px solid var(--htq-gold); border-radius:0 6px 6px 0; }

/* Imperfect match notice */
.htq-imperfect-msg { font-size:.92rem; color:#1a4731; background:var(--htq-gold-bg); border-left:3px solid var(--htq-gold); border-radius:0 6px 6px 0; padding:.75rem 1rem; margin-bottom:1.2rem; line-height:1.5; }

/* Card grid */
.htq-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.1rem; margin:1.2rem 0; }

/* Result card */
.htq-card { background:#fff; border:1px solid var(--htq-border); border-radius:var(--htq-radius); padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.8rem; box-shadow:var(--htq-shadow-sm); animation:htq-fadein .4s var(--htq-ease) both; }
@keyframes htq-fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.htq-card-header { display:block; }
.htq-card-name { font-family:'Playfair Display',Georgia,serif; font-size:1.08rem; color:var(--htq-green-900); margin:0 0 .15rem; line-height:1.2; }
.htq-card-sci { font-size:.8rem; color:var(--htq-muted); font-style:italic; }

/* Stats */
.htq-card-stats { list-style:none; margin:0; padding:.65rem .8rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; background:var(--htq-green-50); border:1px solid var(--htq-green-100); border-radius:var(--htq-radius-sm); }
@media(max-width:480px){ .htq-card-stats { grid-template-columns:repeat(3,1fr); } }
.htq-card-stats li { display:flex; flex-direction:column; gap:.1rem; }
.htq-stat-lbl { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--htq-green-500); }
.htq-stat-val { font-size:.85rem; font-weight:500; color:var(--htq-green-900); white-space:nowrap; }

/* Badges */
.htq-card-badges { display:flex; flex-wrap:wrap; gap:.35rem; }
.htq-badge { font-size:.74rem; font-weight:600; padding:.22rem .7rem; border-radius:99px; background:var(--htq-green-100); color:var(--htq-green-700); white-space:nowrap; }

/* Notes */
.htq-card-notes { font-size:.87rem; color:var(--htq-muted); line-height:1.5; margin:0; }

/* Pest details */
.htq-card-details { border-top:1px solid var(--htq-border); padding-top:.6rem; font-size:.82rem; }
.htq-card-details summary { cursor:pointer; color:var(--htq-muted); font-weight:600; list-style:none; user-select:none; }
.htq-card-details summary::before     { content:'+ '; }
.htq-card-details[open] summary::before { content:'− '; }
.htq-card-details p { margin:.5rem 0 0; color:var(--htq-muted); line-height:1.45; }

/* Result / Error actions */
.htq-result-actions { display:flex; gap:.75rem; flex-wrap:wrap; padding-top:.5rem; }
.htq-error-inner { text-align:center; padding:3rem 2rem; }
.htq-error-msg { color:#7f1d1d; background:#fef2f2; border:1px solid #fca5a5; border-radius:var(--htq-radius-sm); padding:1rem 1.2rem; margin:0 0 1.2rem; font-size:.95rem; line-height:1.55; }
.htq-error-actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }