/* Snowboard Travel Guide — tool pages only. */

.stg-tool { margin: 1.5rem 0 2.5rem; padding: clamp(1.1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--white); box-shadow: var(--shadow); }
.stg-tool__form { display: grid; gap: 1rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .stg-tool__form { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stg-tool__form { grid-template-columns: repeat(3, 1fr); } }
.stg-tool__form .stg-field--wide, .stg-tool__actions { grid-column: 1 / -1; }
.stg-tool__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.stg-tool__result:not(:empty) { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.stg-tool__result:focus { outline: none; }
.stg-tool__disclaimer { display: flex; gap: .5rem; align-items: flex-start; margin: 1.5rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--grey); font-size: .84rem; line-height: 1.5; color: var(--muted); }
.stg-tool__disclaimer .stg-icon { margin-top: .15rem; color: var(--alpine); }
.stg-tool__error { padding: .85rem 1rem; border-radius: var(--radius-sm); background: #fdecec; color: #8a1c1c; font-weight: 600; }
.stg-field--pair > div { display: flex; gap: .5rem; }
.stg-field--pair > div > * { flex: 1; min-width: 0; }
.stg-segmented { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.stg-segmented legend { width: 100%; margin-bottom: .35rem; }
.stg-segmented label { display: inline-flex; gap: .45rem; align-items: center; font-weight: 500; cursor: pointer; }
.stg-segmented input { width: 18px; height: 18px; min-height: 0; accent-color: var(--alpine); }
.stg-linkbtn { border: 0; background: none; padding: 0; color: var(--alpine-dark); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Trip planner */
.stg-plan__summary { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-radius: var(--radius); background: var(--navy); color: #d3e0ec; }
.stg-plan__title { margin: 0 0 .5rem; color: var(--white); font-size: 1.6rem; width: 100%; }
.stg-plan__facts { display: grid; gap: .35rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
@media (min-width: 700px) { .stg-plan__facts { grid-template-columns: 1fr 1fr; } }
.stg-plan__facts strong { display: inline-block; min-width: 4.5em; color: var(--orange); font-weight: 700; }
.stg-plan__summary .stg-btn--ghost { border-color: var(--ice); color: var(--ice); }
.stg-plan__h { margin: 2rem 0 1rem; font-size: 1.35rem; }
.stg-plan__resorts { display: grid; gap: 1rem; }
@media (min-width: 900px) { .stg-plan__resorts { grid-template-columns: repeat(3, 1fr); } }
.stg-plan__resort { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; line-height: 1.5; }
.stg-plan__resort.is-offseason { background: #fff8f2; border-color: #f6d6bd; }
.stg-plan__resort h4 { margin: 0; font-size: 1.25rem; }
.stg-plan__resort h4 a { color: var(--navy); }
.stg-plan__where { margin: .2rem 0 .6rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.stg-plan__why, .stg-plan__warn { list-style: none; margin: 0 0 .6rem; padding: 0; }
.stg-plan__why li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.stg-plan__warn li::before { content: "! "; color: var(--warn); font-weight: 800; }
.stg-plan__air, .stg-plan__cost, .stg-plan__links { margin: .4rem 0 0; }
.stg-plan__steps { padding-left: 1.3rem; }
.stg-plan__steps li + li { margin-top: .55rem; }

/* Size calculator */
.stg-sizer { display: grid; gap: 1rem; }
@media (min-width: 800px) { .stg-sizer { grid-template-columns: 1fr 1fr; } .stg-sizer__notes { grid-column: 1 / -1; } }
.stg-sizer__big { padding: 1.25rem; border-radius: var(--radius); background: var(--ice-2); border: 1px solid #c9e3f4; }
.stg-sizer__label { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--alpine-dark); }
.stg-sizer__value { margin: .25rem 0; font: 800 clamp(2.2rem, 6vw, 3.2rem)/1 var(--font-head); font-stretch: 82%; color: var(--navy); }
.stg-sizer__value span { font-size: .45em; }
.stg-sizer__value--sm { font-size: clamp(1.5rem, 4vw, 2rem); }
.stg-sizer__sub { margin: 0; font-size: .9rem; color: var(--charcoal); }
.stg-sizer__notes h3 { font-size: 1.15rem; }
.stg-sizer__notes ul { padding-left: 1.2rem; font-size: .93rem; }
.stg-sizer__notes li + li { margin-top: .35rem; }

/* Packing checklist */
.stg-checklist__bar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: -.25rem 0 1.25rem; padding: .75rem; border-radius: var(--radius); background: rgba(255, 255, 255, .96); box-shadow: var(--shadow); }
.stg-progress { flex: 1 1 200px; height: 12px; border-radius: 999px; background: var(--grey); overflow: hidden; }
.stg-progress__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--alpine), var(--orange)); transition: width .25s ease; }
.stg-checklist__count { margin: 0; font-weight: 600; font-size: .9rem; color: var(--navy); }
.stg-checklist__buttons { display: flex; gap: .5rem; }
.stg-checklist__groups { display: grid; gap: 1rem; }
@media (min-width: 900px) { .stg-checklist__groups { grid-template-columns: 1fr 1fr; } }
.stg-checklist__group { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.stg-checklist__group legend { padding: 0 .4rem; font: 800 1.1rem/1.2 var(--font-head); color: var(--navy); }
.stg-checklist__group legend span { margin-left: .35rem; font: 600 .8rem var(--font-body); color: var(--muted); }
.stg-checklist__group ul { list-style: none; margin: 0; padding: 0; }
.stg-checklist__group li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--line); }
.stg-checklist__group li:last-child { border-bottom: 0; }
.stg-checklist__group label { display: flex; gap: .65rem; align-items: center; flex: 1; padding: .55rem 0; cursor: pointer; font-size: .95rem; line-height: 1.4; }
.stg-checklist__group input { width: 20px; height: 20px; flex: none; accent-color: var(--alpine); }
.stg-checklist__group input:checked + span { color: var(--muted); text-decoration: line-through; }
.stg-checklist__remove { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.stg-checklist__remove:hover { background: var(--grey); color: #b42318; }
.stg-checklist__add { margin-top: 1.25rem; }
.stg-checklist__add label { display: block; margin-bottom: .35rem; font-weight: 600; color: var(--navy); }
.stg-checklist__add div { display: flex; flex-wrap: wrap; gap: .5rem; }
.stg-checklist__add input, .stg-checklist__add select { min-height: 44px; padding: .5rem .8rem; border: 1.5px solid #c9d5df; border-radius: 10px; background: var(--white); }
.stg-checklist__add input { flex: 2 1 200px; }
.stg-checklist__add select { flex: 1 1 160px; }

/* Gear quiz */
.stg-quiz__progress { height: 6px; margin-bottom: 1.5rem; border-radius: 999px; background: var(--grey); overflow: hidden; }
.stg-quiz__progress span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .25s ease; }
.stg-quiz__stage:focus { outline: none; }
.stg-quiz__q { border: 0; margin: 0; padding: 0; }
.stg-quiz__q legend { margin-bottom: 1.1rem; font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--font-head); font-stretch: 86%; color: var(--navy); }
.stg-quiz__n { display: block; margin-bottom: .4rem; font: 700 .76rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--alpine); }
.stg-quiz__options { display: grid; gap: .65rem; }
@media (min-width: 640px) { .stg-quiz__options { grid-template-columns: 1fr 1fr; } }
.stg-quiz__opt { min-height: 60px; padding: .9rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: left; font-weight: 600; color: var(--navy); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.stg-quiz__opt:hover, .stg-quiz__opt.is-selected { border-color: var(--alpine); background: var(--ice-2); }
.stg-quiz__back { margin-top: 1rem; border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; }
.stg-quiz__result h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
.stg-quiz__recs { padding-left: 1.2rem; }
.stg-quiz__recs li + li { margin-top: .45rem; }
.stg-quiz__shop { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }

/* Budget calculator */
.stg-budget__lines { display: grid; gap: .9rem 1.25rem; }
@media (min-width: 640px) { .stg-budget__lines { grid-template-columns: 1fr 1fr; } }
.stg-money { display: flex; align-items: stretch; border: 1.5px solid #c9d5df; border-radius: 10px; overflow: hidden; background: var(--white); }
.stg-money:focus-within { border-color: var(--alpine); box-shadow: 0 0 0 3px rgba(36, 120, 185, .2); }
.stg-money__cur { display: grid; place-items: center; padding: 0 .7rem; background: var(--grey); font-size: .8rem; font-weight: 700; color: var(--muted); }
.stg-field .stg-money input { border: 0; border-radius: 0; box-shadow: none; }
.stg-budget__totals { display: grid; gap: .75rem; }
@media (min-width: 700px) { .stg-budget__totals { grid-template-columns: 1.3fr 1fr 1fr; } }
.stg-budget__totals > div { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--ice-2); }
.stg-budget__totals > div:first-child { background: var(--navy); color: var(--ice); }
.stg-budget__totals p { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stg-budget__totals strong { display: block; margin-top: .2rem; font: 800 clamp(1.5rem, 4vw, 2.2rem)/1.1 var(--font-head); font-stretch: 85%; color: var(--navy); }
.stg-budget__totals > div:first-child strong { color: var(--white); }
.stg-budget__bars { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.stg-budget__bars li { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; font-size: .9rem; }
.stg-budget__name small { display: block; color: var(--muted); font-size: .78rem; }
.stg-budget__track { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 999px; background: var(--grey); overflow: hidden; }
.stg-budget__track span { display: block; height: 100%; background: var(--alpine); border-radius: inherit; }
.stg-budget__amt { font-weight: 700; color: var(--navy); }
.stg-budget__note, .stg-budget__empty { margin: 1.25rem 0 0; font-size: .88rem; color: var(--muted); }

/* Resort comparison */
.stg-compare__filters { display: grid; gap: .9rem 1rem; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
@media (min-width: 900px) { .stg-compare__filters { grid-template-columns: repeat(5, 1fr); } }
.stg-compare__hint { margin: 0 0 1rem; font-weight: 600; color: var(--navy); }
.stg-compare__list { display: grid; gap: .9rem; }
@media (min-width: 700px) { .stg-compare__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .stg-compare__list { grid-template-columns: repeat(3, 1fr); } }
.stg-cmp-card { padding: 1rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius); font-size: .9rem; line-height: 1.5; transition: border-color .15s ease; }
.stg-cmp-card.is-picked { border-color: var(--alpine); background: var(--ice-2); }
.stg-cmp-card p { margin: 0 0 .5rem; }
.stg-cmp-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.stg-cmp-card__top h3 { margin: 0; font-size: 1.15rem; }
.stg-cmp-card__top h3 a { color: var(--navy); }
.stg-cmp-card__pick { display: inline-flex; gap: .35rem; align-items: center; flex: none; padding: .3rem .6rem; border-radius: 999px; background: var(--grey); font-size: .8rem; font-weight: 700; cursor: pointer; }
.stg-cmp-card__pick input { width: 16px; height: 16px; accent-color: var(--alpine); }
.stg-cmp-card__where { color: var(--muted); font-weight: 600; font-size: .82rem; }
.stg-cmp-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.stg-cmp-card__tags span { padding: .15rem .5rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .74rem; font-weight: 600; color: var(--alpine-dark); }
.stg-compare__table:focus { outline: none; }
.stg-compare__title { margin: 2rem 0 1rem; font-size: 1.5rem; }
.stg-compare__grid { min-width: 640px; }
.stg-compare__grid tbody th { width: 150px; background: var(--grey); color: var(--navy); font-size: .85rem; }

/* Printing a tool prints just the tool. */
@media print {
	.stg-hub__header, .stg-breadcrumbs, .stg-tool__form, .stg-checklist__add, .stg-checklist__buttons, .stg-quiz__shop, .stg-sizer__shop, .stg-tool__disclaimer, .stg-compare__filters, .stg-compare__list, .stg-prose > :not(.stg-tool) { display: none !important; }
	.stg-tool { border: 0; box-shadow: none; padding: 0; }
	.stg-checklist__bar { position: static; box-shadow: none; }
	.stg-checklist__groups { grid-template-columns: 1fr 1fr; }
	.stg-checklist__group { break-inside: avoid; }
	.stg-plan__summary { background: none; color: #000; border: 1px solid #999; }
	.stg-plan__title, .stg-plan__facts strong { color: #000; }
}