/* Weather wardrobe, weather-matched layering and the weather fit inside the Layering Lab. Loaded last.
   The --wx-* colours below describe the weather itself. They are set once on :root and no theme or
   appearance setting redefines them, so "Rain" is always blue and "Hot" is always orange. */
:root {
  /* Mid-tones that read on both light and dark cards */
  --wx-hot: #e8590c; --wx-warm: #e08a00; --wx-mild: #2f9e6e; --wx-cool: #2f8fd8; --wx-cold: #3b6fe0;
  --wx-humid: #12a594; --wx-dry: #c9892b; --wx-steady: #7a8ba1;
  --wx-clear: #e8a100; --wx-night: #6d7cf2; --wx-cloud: #7a8ba1; --wx-fog: #8394a8;
  --wx-rain: #3b82f6; --wx-storm: #8b5cf6; --wx-snow: #1f9cc4; --wx-manual: #8a8f98;
  /* Brighter tones for text over the dark weather photograph */
  --wxl-hot: #ff9a5c; --wxl-warm: #ffc24d; --wxl-mild: #6ee7b0; --wxl-cool: #7cc4ff; --wxl-cold: #8fb0ff;
  --wxl-humid: #5eead4; --wxl-dry: #f5c978; --wxl-steady: #c3cfdd;
  --wxl-clear: #ffd75e; --wxl-night: #a9b4ff; --wxl-cloud: #cbd5e1; --wxl-fog: #d3dce6;
  --wxl-rain: #7db4ff; --wxl-storm: #c4a8ff; --wxl-snow: #9be7ff; --wxl-manual: #d5d9e0;
}
.wx-word, .weather-orb[data-wx] { font-weight: 700; color: var(--wx-manual); }
.weather-scene .wx-word, .weather-scene .weather-orb[data-wx] { color: var(--wxl-manual); }
.wx-word[data-wx=hot], .weather-orb[data-wx=hot] { color: var(--wx-hot); } .wx-word[data-wx=warm] { color: var(--wx-warm); }
.wx-word[data-wx=mild] { color: var(--wx-mild); } .wx-word[data-wx=cool] { color: var(--wx-cool); } .wx-word[data-wx=cold] { color: var(--wx-cold); }
.wx-word[data-wx=humid] { color: var(--wx-humid); } .wx-word[data-wx=dry] { color: var(--wx-dry); } .wx-word[data-wx=steady] { color: var(--wx-steady); }
.wx-word[data-wx=clear], .weather-orb[data-wx=clear] { color: var(--wx-clear); } .wx-word[data-wx=night], .weather-orb[data-wx=night] { color: var(--wx-night); }
.wx-word[data-wx=cloud], .weather-orb[data-wx=cloud] { color: var(--wx-cloud); } .wx-word[data-wx=fog], .weather-orb[data-wx=fog] { color: var(--wx-fog); }
.wx-word[data-wx=rain], .weather-orb[data-wx=rain] { color: var(--wx-rain); } .wx-word[data-wx=storm], .weather-orb[data-wx=storm] { color: var(--wx-storm); }
.wx-word[data-wx=snow], .weather-orb[data-wx=snow] { color: var(--wx-snow); } .wx-word[data-wx=manual] { color: var(--wx-manual); }
.weather-scene .wx-word[data-wx=hot] { color: var(--wxl-hot); } .weather-scene .wx-word[data-wx=warm] { color: var(--wxl-warm); }
.weather-scene .wx-word[data-wx=mild] { color: var(--wxl-mild); } .weather-scene .wx-word[data-wx=cool] { color: var(--wxl-cool); } .weather-scene .wx-word[data-wx=cold] { color: var(--wxl-cold); }
.weather-scene .wx-word[data-wx=clear], .weather-scene .weather-orb[data-wx=clear] { color: var(--wxl-clear); }
.weather-scene .wx-word[data-wx=night], .weather-scene .weather-orb[data-wx=night] { color: var(--wxl-night); }
.weather-scene .wx-word[data-wx=cloud], .weather-scene .weather-orb[data-wx=cloud] { color: var(--wxl-cloud); }
.weather-scene .wx-word[data-wx=fog], .weather-scene .weather-orb[data-wx=fog] { color: var(--wxl-fog); }
.weather-scene .wx-word[data-wx=rain], .weather-scene .weather-orb[data-wx=rain] { color: var(--wxl-rain); }
.weather-scene .wx-word[data-wx=storm], .weather-scene .weather-orb[data-wx=storm] { color: var(--wxl-storm); }
.weather-scene .wx-word[data-wx=snow], .weather-scene .weather-orb[data-wx=snow] { color: var(--wxl-snow); }
.weather-scene .weather-big-temp .wx-word { display: block; margin-top: 4px; font: 650 18px/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
/* Fit meters, rings and bars use a fit-driven hue that is also theme independent */
#panel-wardrobe, #panel-layering { --fit-lo: #e5484d; --fit-mid: #e8a100; --fit-hi: #2fa66c; }

/* ---------- Controls ---------- */
#panel-wardrobe .weather-controls-card { padding: 22px 24px; border-radius: 22px; }
#panel-wardrobe .weather-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
#panel-wardrobe .weather-search label { flex: 1 1 280px; display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
#panel-wardrobe .weather-controls-card :is(input:not([type=range]):not([type=radio]), select) { width: 100%; min-height: 46px; box-sizing: border-box; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--control-line) 22%, var(--line)); border-radius: 12px; background-color: color-mix(in srgb, var(--ink) 2.5%, var(--bg-card)); color: var(--ink); font: inherit; font-size: 14px; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); outline: none; transition: border-color .15s, box-shadow .15s; }
#panel-wardrobe .weather-controls-card select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
#panel-wardrobe .weather-controls-card :is(input:not([type=range]):not([type=radio]), select):focus { border-color: var(--accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 16%, transparent); }
#panel-wardrobe .weather-search .secondary { min-height: 46px; border-radius: 12px; }
#panel-wardrobe #weather-status { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
#panel-wardrobe .climate-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
#panel-wardrobe .climate-controls label { display: grid; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
#panel-wardrobe .climate-controls output { font: 400 22px/1 var(--studio-serif, Georgia, serif); color: var(--ink); font-variant-numeric: tabular-nums; }
#panel-wardrobe .climate-controls label > span { display: block; }
#panel-wardrobe input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--track, var(--line)); cursor: pointer; box-shadow: none; min-height: 0; }
#panel-wardrobe #wardrobe-temp { --track: linear-gradient(90deg, #3b6fe0, #2f8fd8 28%, #2f9e6e 50%, #e8a100 72%, #e8590c); }
#panel-wardrobe #wardrobe-humidity { --track: linear-gradient(90deg, #c9892b, #b8c2cc 45%, #12a594); }
#panel-wardrobe input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
#panel-wardrobe input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
#panel-wardrobe input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
#panel-wardrobe .weather-unit { margin: 14px 0 0; padding: 0; border: 0; }
#panel-wardrobe .weather-unit legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
#panel-wardrobe .weather-unit-options { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
#panel-wardrobe .weather-unit-options label { position: relative; cursor: pointer; }
#panel-wardrobe .weather-unit-options input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#panel-wardrobe .weather-unit-options span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 14px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 600; }
#panel-wardrobe .weather-unit-options b { font-weight: 500; font-size: 12px; }
#panel-wardrobe .weather-unit-options label:has(input:checked) span { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 3px var(--shadow), 0 0 0 1px var(--line); }
#panel-wardrobe .weather-unit-options label:has(input:focus-visible) span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Picks ---------- */
#panel-wardrobe #wardrobe-sotd { padding: 24px; border-radius: 22px; }
#panel-wardrobe .wardrobe-brief { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
#panel-wardrobe .wardrobe-brief h2 { margin: 6px 0 0; font: 400 clamp(26px, 3vw, 34px)/1.12 var(--studio-serif, Georgia, serif); letter-spacing: -.02em; color: var(--ink); }
#panel-wardrobe .wardrobe-conditions { display: flex; flex-wrap: wrap; gap: 8px; }
#panel-wardrobe .wardrobe-conditions span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); font-size: 12.5px; font-weight: 600; color: var(--ink); }
#panel-wardrobe .wardrobe-explanation { max-width: 80ch; margin: 14px 0 18px; font-size: 14px; line-height: 1.65; color: var(--text); }
#panel-wardrobe .wardrobe-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#panel-wardrobe .wx-pick { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-card); transition: transform .2s, box-shadow .2s; }
#panel-wardrobe .wx-pick:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--shadow); }
#panel-wardrobe .wx-pick .wardrobe-pick-art { position: relative; display: grid; place-items: center; height: 150px; background: radial-gradient(70% 90% at 50% 40%, color-mix(in srgb, var(--accent-color) 14%, var(--bg-card)), var(--soft)); }
#panel-wardrobe .wx-pick .wardrobe-pick-art img { max-height: 124px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .18)); }
#panel-wardrobe .wardrobe-fit { position: absolute; top: 12px; inset-inline-end: 12px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 90%, transparent); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink); backdrop-filter: blur(6px); }
#panel-wardrobe .wx-pick .wardrobe-pick-copy { display: grid; align-content: start; gap: 4px; padding: 16px 18px 18px; }
#panel-wardrobe .wx-pick h3 { margin: 2px 0 0; font: 400 24px/1.15 var(--studio-serif, Georgia, serif); color: var(--ink); }
#panel-wardrobe .wx-reasons { margin: 8px 0 4px; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
#panel-wardrobe .wx-pick .eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .12em; }

/* ---------- Section heads ---------- */
.wx-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.wx-section-head h2 { margin: 6px 0 4px; font: 400 clamp(25px, 3vw, 32px)/1.12 var(--studio-serif, Georgia, serif); letter-spacing: -.02em; color: var(--ink); }
.wx-section-head p { max-width: 64ch; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.wx-section-head .eyebrow { margin: 0; }

/* ---------- Layer for this weather ---------- */
#panel-wardrobe .wx-layers, #panel-wardrobe .wx-guide { padding: 24px; border-radius: 22px; }
.wx-layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wx-layer { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(170deg, color-mix(in srgb, var(--accent-color) 7%, var(--bg-card)), var(--bg-card) 55%); transition: transform .2s, box-shadow .2s, border-color .2s; }
.wx-layer:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-color) 35%, var(--line)); box-shadow: 0 14px 30px var(--shadow); }
.wx-layer-bottles { display: flex; align-items: center; justify-content: center; gap: 4px; height: 112px; padding: 8px; border-radius: 14px; background: var(--soft); }
.wx-layer-bottles > span { display: grid; place-items: center; height: 100%; }
.wx-layer-bottles img { max-height: 92px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .18)); }
.wx-layer-bottles i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-card); box-shadow: 0 0 0 1px var(--line); font-style: normal; font-weight: 700; color: var(--accent-color); }
.wx-layer-body { display: grid; gap: 6px; min-width: 0; }
.wx-layer-rank { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wx-layer h3 { margin: 0; font: 400 21px/1.2 var(--studio-serif, Georgia, serif); color: var(--ink); overflow-wrap: anywhere; }
.wx-layer h3 em { font-style: normal; color: var(--accent-color); }
.wx-layer-body > .muted { margin: 0; font-size: 12px; }
.wx-layer-scores { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.wx-layer-scores span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); font-size: 11.5px; color: var(--muted); }
.wx-layer-scores b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wx-layer-scores .wx-layer-total { border-color: color-mix(in srgb, var(--accent-color) 40%, var(--line)); background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card)); }
.wx-layer-why { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.wx-layer .primary { justify-self: start; margin-top: 6px; border-radius: 11px; }

/* ---------- Context guide ---------- */
.wx-tabs { display: flex; gap: 6px; margin: 0 0 16px; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); scrollbar-width: none; }
.wx-tabs::-webkit-scrollbar { display: none; }
.wx-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.wx-tabs button svg { width: 18px; height: 18px; color: var(--wxc); }
.wx-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--bg-card) 70%, transparent); }
.wx-tabs button[aria-selected=true] { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 4px var(--shadow), 0 0 0 1px var(--line), inset 0 -2px 0 var(--wxc); }
.wx-guide-list { outline-offset: 4px; }
.wx-guide-top { display: grid; gap: 4px; margin-bottom: 12px; }
.wx-guide-summary { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.wx-guide-note { margin: 0; font-size: 13px; color: var(--muted); }
.wx-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wx-row { display: grid; grid-template-columns: 28px minmax(200px, 1.2fr) minmax(150px, .9fr) minmax(0, 1.4fr); align-items: center; gap: 14px; padding: 10px 14px 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); transition: border-color .15s, box-shadow .15s; }
.wx-row:hover { border-color: color-mix(in srgb, var(--wxc) 40%, var(--line)); box-shadow: 0 6px 18px var(--shadow); }
.wx-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-row:first-child .wx-rank { background: var(--wxc); color: #fff; }
.wx-row-scent { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.wx-row-scent img { flex: 0 0 auto; width: 40px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--photo-bg, #f8f7f4); }
.wx-row-scent strong { display: block; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.wx-row-scent small { display: block; font-size: 12px; color: var(--muted); }
.wx-row-fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.wx-row-fit b { font: 400 22px/1 var(--studio-serif, Georgia, serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.wx-row-fit small { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; color: var(--wxc, var(--muted)); }
.wx-meter { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--wxc, var(--accent-color)) 14%, var(--line)); }
.wx-meter i { display: block; width: calc(var(--fit) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--wxc, var(--accent-color)) 55%, #fff), var(--wxc, var(--accent-color))); }
.wx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.wx-chips li { padding: 3px 10px; border-radius: 999px; background: var(--soft); font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.wx-guide-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.wx-guide-foot .text-button { font-size: 12.5px; }

/* ---------- Forecast ---------- */
#panel-wardrobe .weather-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 22px; }
#panel-wardrobe .weather-calendar article { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-card); }
#panel-wardrobe .weather-calendar time { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#panel-wardrobe .wx-day-sky { font-size: 12.5px; }
#panel-wardrobe .weather-calendar strong { font: 400 24px/1.1 var(--studio-serif, Georgia, serif); color: var(--ink); }
#panel-wardrobe .weather-calendar strong small { font: 500 13px Inter, system-ui, sans-serif; color: var(--muted); }
#panel-wardrobe .weather-calendar .text-button { justify-self: start; text-align: start; font-size: 13px; }
#panel-wardrobe .weather-calendar article > small { font-size: 11.5px; color: var(--muted); }

/* ---------- Weather fit inside the Layering Lab ---------- */
.wx-blend { display: grid; gap: 12px; margin: 16px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 7%, var(--bg-card)), var(--bg-card) 60%); }
.wx-blend header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wx-blend h3 { margin: 4px 0 0; font: 400 21px/1.25 var(--studio-serif, Georgia, serif); color: var(--ink); }
.wx-blend .eyebrow { margin: 0; font-size: 10.5px; }
.wx-blend-score { display: flex; align-items: baseline; flex-shrink: 0; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fit-hi) calc(var(--fit) * 1%), var(--fit-lo)); color: #fff; }
.wx-blend-score b { font: 400 28px/1 var(--studio-serif, Georgia, serif); font-variant-numeric: tabular-nums; }
.wx-blend-score small { font-size: 12px; opacity: .85; }
.wx-blend-bars { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.wx-blend-bars li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.wx-blend-bars b { color: var(--ink); text-align: end; font-variant-numeric: tabular-nums; }
.wx-blend-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.wx-blend-foot .text-button { font-size: 12.5px; }
.wx-ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--fit-hi) calc(var(--fit) * 1%), var(--line) 0); }
.wx-ring b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-card); font-size: 13px; color: var(--ink); }

/* ---------- Layering Lab polish: crisper edges, tabular numerals, firmer hierarchy ---------- */
#panel-layering .advanced-card { border-radius: 22px; box-shadow: 0 1px 2px var(--shadow); }
#panel-layering .blend-heading h2 { font: 400 clamp(26px, 3vw, 34px)/1.12 var(--studio-serif, Georgia, serif); letter-spacing: -.02em; }
#panel-layering .blend-score-ring { font-variant-numeric: tabular-nums; }
#panel-layering .blend-accords { display: flex; flex-wrap: wrap; gap: 7px; }
#panel-layering .blend-accords span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); font-size: 12.5px; font-weight: 500; color: var(--ink); }
#panel-layering .blend-accords b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-card)); color: var(--accent-color); font-size: 11px; }
#panel-layering .blend-note-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
#panel-layering .blend-note-heading h3 { margin: 0; font: 650 14px/1.3 Inter, system-ui, sans-serif; color: var(--ink); }
#panel-layering .blend-note-heading span { font-size: 12px; color: var(--muted); }
#panel-layering .recipe-card { border-radius: 20px; transition: transform .2s, box-shadow .2s; }
#panel-layering .recipe-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--shadow); }
#panel-layering #layer-save, #panel-layering .layer-builder .primary { border-radius: 12px; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion=off]) #panel-wardrobe .wx-layer, :root:not([data-motion=off]) #panel-wardrobe .wx-row, :root:not([data-motion=off]) #panel-wardrobe .weather-calendar article, :root:not([data-motion=off]) #panel-wardrobe .wx-pick { animation: wx-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
  :root:not([data-motion=off]) .wx-meter i { animation: wx-fill .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
  :root:not([data-motion=off]) .wx-blend { animation: wx-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes wx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wx-fill { from { transform: scaleX(0); } to { transform: none; } }

@media (max-width: 1000px) {
  #panel-wardrobe .climate-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-wardrobe .wardrobe-picks, .wx-layer-grid { grid-template-columns: minmax(0, 1fr); }
  .wx-row { grid-template-columns: 28px minmax(0, 1fr) minmax(130px, auto); }
  .wx-row .wx-chips { grid-column: 2 / -1; }
}
@media (max-width: 600px) {
  #panel-wardrobe .weather-controls-card, #panel-wardrobe #wardrobe-sotd, #panel-wardrobe .wx-layers, #panel-wardrobe .wx-guide { padding: 16px; border-radius: 20px; }
  #panel-wardrobe .weather-controls-card :is(input:not([type=range]):not([type=radio]), select) { font-size: 16px; }
  #panel-wardrobe .climate-controls { grid-template-columns: minmax(0, 1fr); }
  .wx-row { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .wx-row .wx-row-fit, .wx-row .wx-chips { grid-column: 2; }
  .wx-blend-bars li { grid-template-columns: 92px minmax(0, 1fr) 28px; }
  .wx-blend header { align-items: flex-start; }
}

/* Layout corrections */
#panel-wardrobe .wx-pick .wardrobe-pick-art { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; align-self: stretch; }
#panel-wardrobe .wx-pick .wardrobe-pick-copy { justify-items: start; text-align: start; }
#panel-wardrobe .wx-pick .wardrobe-pick-copy .text-button { justify-self: start; text-align: start; }
.wx-layer-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Weather words keep their weather colour inside chips and cards, whatever the card styles say */
#panel-wardrobe .wx-word[data-wx=hot], #panel-layering .wx-word[data-wx=hot] { color: var(--wx-hot); }
#panel-wardrobe .wx-word[data-wx=warm], #panel-layering .wx-word[data-wx=warm] { color: var(--wx-warm); }
#panel-wardrobe .wx-word[data-wx=mild], #panel-layering .wx-word[data-wx=mild] { color: var(--wx-mild); }
#panel-wardrobe .wx-word[data-wx=cool], #panel-layering .wx-word[data-wx=cool] { color: var(--wx-cool); }
#panel-wardrobe .wx-word[data-wx=cold], #panel-layering .wx-word[data-wx=cold] { color: var(--wx-cold); }
#panel-wardrobe .wx-word[data-wx=humid], #panel-layering .wx-word[data-wx=humid] { color: var(--wx-humid); }
#panel-wardrobe .wx-word[data-wx=dry], #panel-layering .wx-word[data-wx=dry] { color: var(--wx-dry); }
#panel-wardrobe .wx-word[data-wx=steady], #panel-layering .wx-word[data-wx=steady] { color: var(--wx-steady); }
#panel-wardrobe .wx-word[data-wx=clear], #panel-layering .wx-word[data-wx=clear] { color: var(--wx-clear); }
#panel-wardrobe .wx-word[data-wx=night], #panel-layering .wx-word[data-wx=night] { color: var(--wx-night); }
#panel-wardrobe .wx-word[data-wx=cloud], #panel-layering .wx-word[data-wx=cloud] { color: var(--wx-cloud); }
#panel-wardrobe .wx-word[data-wx=fog], #panel-layering .wx-word[data-wx=fog] { color: var(--wx-fog); }
#panel-wardrobe .wx-word[data-wx=rain], #panel-layering .wx-word[data-wx=rain] { color: var(--wx-rain); }
#panel-wardrobe .wx-word[data-wx=storm], #panel-layering .wx-word[data-wx=storm] { color: var(--wx-storm); }
#panel-wardrobe .wx-word[data-wx=snow], #panel-layering .wx-word[data-wx=snow] { color: var(--wx-snow); }
#panel-wardrobe .wx-word[data-wx=manual], #panel-layering .wx-word[data-wx=manual] { color: var(--wx-manual); }
#panel-wardrobe .wardrobe-conditions .wx-word { padding: 0; border: 0; background: none; }