/* Editorial Oriel refinement — neutral typography, wine/dark contrast, comfortable cards and simulator. */
/* Light mode deliberately preserves the existing olive/cream/burgundy palette. */
html,html body,html button,html input,html select,html textarea,html .card,html .tab,html .chip,html .badge,html .simCol{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
html body{font-size:15px}
html .brand h1{font-weight:700;letter-spacing:-.025em}
html .card,html .placement,html .settingsCard,html .map-card{border-radius:18px}
html .btn,html select,html input,html textarea{border-radius:11px}
html .btn{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
html button:focus-visible,html input:focus-visible,html select:focus-visible,html a:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
html .eyebrow,html .fitLabel{font-size:11px;font-weight:750;letter-spacing:.09em}
html .badge{font-size:12px}
html .logo,html[data-theme="light"] .logo,html[data-theme="dark"] .logo{
  background:none!important;color:var(--ink)!important;box-shadow:none!important;border:0!important;
  width:43px;height:48px;border-radius:0;display:flex;align-items:center;justify-content:center;
}
html .logo svg{display:block;width:40px;height:40px;color:inherit;stroke-width:1.4}
html[data-theme="dark"] .logo svg{color:#f1dfe0}
/* Main page zoom; affects layout and controls, unlike a font-only adjustment. */
:root{--ux-page-zoom:1}
html .shell{zoom:var(--ux-page-zoom)}
.uxGlobalZoom{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);background:var(--panel);border-radius:13px}
.uxGlobalZoom .btn{min-height:31px;height:31px;min-width:28px;padding:2px 7px;border:0;background:transparent;box-shadow:none;font-size:18px;font-weight:600}
.uxGlobalZoom output{min-width:34px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--mut);font-weight:700}
.uxGlobalZoom .btn:hover{background:var(--soft)}
html[data-theme="dark"] .uxGlobalZoom .btn{background:transparent;color:var(--ink)}
html[data-theme="dark"] .uxGlobalZoom .btn:hover{background:var(--soft)}
/* Default night version of the olive/cream theme: wine/burgundy rather than dark-green. */
html[data-theme="dark"][data-palette="forest"]{
 --bg:#1d161b;--panel:#30242b;--soft:#3d3038;--line:#66535d;
 --ink:#f8f0ec;--mut:#e1cfd3;--dark:#130e11;
 --ux-accent:#e6b4b9;--ux-accent-ink:#ffe0e1;
 --ux-accent-soft:#583840;--ux-accent-border:#9e757b;
 --ux-pick:#edd1c4;--ux-pick-soft:#4d343b;--ux-pick-border:#a0737d;
 --green:#f5d3d4;--blue:#f0bcc3;
}
html[data-theme="dark"][data-palette="forest"] .productIntro{background:linear-gradient(120deg,#30212c,#403038)}
html[data-theme="dark"][data-palette="forest"] .tabs{background:#35272e;border-color:#5b4953}
html[data-theme="dark"][data-palette="forest"] .tab.active{background:#58404d;color:#fff0e9}
html[data-theme="dark"][data-palette="forest"] .tab{color:#e6d3d5}
html[data-theme="dark"][data-palette="forest"] .chip.on{background:#d0a5ad;color:#24171b;border-color:#d0a5ad}
html[data-theme="dark"][data-palette="forest"] .btn.primary{background:#d6aeb4;color:#271a1f;border-color:#d6aeb4}
html[data-theme="dark"][data-palette="forest"] .btn.primary:hover{background:#e6c0c4}
html[data-theme="dark"][data-palette="forest"] .uxPaletteOption[aria-pressed="true"]{background:#49333c;color:#fff1f0}
html[data-theme="dark"] .notice,html[data-theme="dark"] .recoWarn,html[data-theme="dark"] .miniFit,
html[data-theme="dark"] .fitColumn,html[data-theme="dark"] .fitColumn.positive,html[data-theme="dark"] .fitColumn.caution{
 color:var(--ink)!important;border-color:var(--line)!important;background:var(--soft)!important;
}
html[data-theme="dark"] .fitLabel,html[data-theme="dark"] .fitColumn.caution .fitLabel{
 color:var(--ink)!important;
}
html[data-theme="dark"] .fitPoint{color:var(--ink)!important}
html[data-theme="dark"] .score b,html[data-theme="dark"] .score small,html[data-theme="dark"] .score span,html[data-theme="dark"] .score em{color:inherit!important}
html[data-theme="dark"] .badge{font-weight:600}
html[data-theme="dark"] .outcomeInfo,html[data-theme="dark"] .uxAppearanceSettings{border-color:var(--line)}
html[data-theme="dark"] #placementMap .leaflet-tile-pane{filter:saturate(.7) brightness(.82) contrast(.94)!important}
html[data-theme="dark"] .uxMiniMap .leaflet-tile-pane{filter:saturate(.65) brightness(.8) contrast(.93)!important}
html[data-theme="dark"] #sectorMapLegend{background:var(--panel)!important;color:var(--ink)!important}
/* Personal fit enlarged; explanation columns compact and centred; location retains its useful width. */
.placement .fit.fitExpanded.uxFitWithLocation{
 display:grid;grid-template-columns:minmax(158px,190px) minmax(230px,1fr) minmax(220px,310px);
 gap:13px;align-items:start;justify-content:space-between;
}
.placement .fit.fitExpanded.uxFitWithLocation .score{min-height:160px;padding:18px 17px;border:1px solid #0001;border-radius:16px;justify-content:center;align-items:center;text-align:center}
.placement .score span{font-size:12px;letter-spacing:.06em}
.placement .score b{font-size:42px;line-height:1.2;letter-spacing:-.02em}
.placement .score small{font-size:16px;font-weight:650}
.placement .score em{font-size:11px;line-height:1.35}
.placement .fit.fitExpanded.uxFitWithLocation .fitBreakdown{
 display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;
 min-width:0;align-self:center;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn{
 align-self:center;justify-self:center;width:max-content;min-width:min(205px,100%);max-width:min(100%,330px);
 padding:11px 15px;border-radius:14px;height:auto;text-align:center;box-shadow:none;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn .fitLabel{font-size:12px;font-weight:800;margin-bottom:7px;line-height:1.3}
.placement .fit.fitExpanded.uxFitWithLocation .fitPoint{font-size:13px;line-height:1.5;font-weight:500;color:var(--ink);margin:2px auto;max-width:29ch}
.placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{width:100%;max-width:310px;justify-self:end}
.placement .score[data-fit-tone="poor"]{background:#f3dfe1!important;color:#713d45!important;border-color:#e3bdc2!important}
.placement .score[data-fit-tone="mixed"]{background:#faebdd!important;color:#80502b!important;border-color:#e9ceb5!important}
.placement .score[data-fit-tone="good"]{background:#f2efcf!important;color:#626032!important;border-color:#dfdaa7!important}
.placement .score[data-fit-tone="excellent"]{background:#e5eee0!important;color:#345a42!important;border-color:#cbdcc5!important}
.placement .score[data-fit-tone] span,.placement .score[data-fit-tone] small,.placement .score[data-fit-tone] em{color:inherit!important}
html[data-theme="dark"] .placement .score[data-fit-tone="poor"]{background:#5b303a!important;color:#ffe4e4!important;border-color:#925967!important}
html[data-theme="dark"] .placement .score[data-fit-tone="mixed"]{background:#55402f!important;color:#ffe7ca!important;border-color:#826448!important}
html[data-theme="dark"] .placement .score[data-fit-tone="good"]{background:#4b4c32!important;color:#fbf2c9!important;border-color:#7a7852!important}
html[data-theme="dark"] .placement .score[data-fit-tone="excellent"]{background:#294b3a!important;color:#d9f7e0!important;border-color:#577562!important}
/* Small explanatory boxes can shrink to their content; avoid empty stretched slabs. */
html[data-theme="light"] .fitColumn.positive{background:#f1f3eb!important;border-color:#dfe5d4!important}
html[data-theme="light"] .fitColumn.caution{background:#f5efea!important;border-color:#e8dbcf!important}
html[data-layout="grid"] .placement.uxExpanded .fit.fitExpanded.uxFitWithLocation{grid-template-columns:minmax(0,1fr)}
html[data-layout="grid"] .placement.uxExpanded .fit.fitExpanded.uxFitWithLocation .fitBreakdown{display:flex;flex-direction:row;flex-wrap:wrap}
html[data-layout="grid"] .placement.uxExpanded .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{max-width:100%}
@media(max-width:1100px){
 .placement .fit.fitExpanded.uxFitWithLocation{grid-template-columns:minmax(150px,185px) minmax(210px,1fr) minmax(210px,285px);gap:9px}
 .placement .fit.fitExpanded.uxFitWithLocation .fitColumn{max-width:100%}
}
@media(max-width:850px){
 .placement .fit.fitExpanded.uxFitWithLocation{grid-template-columns:minmax(145px,180px) minmax(230px,1fr)}
 .placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{grid-column:1/-1;max-width:100%;justify-self:stretch}
}
@media(max-width:610px){
 .placement .fit.fitExpanded.uxFitWithLocation{grid-template-columns:1fr}
 .placement .fit.fitExpanded.uxFitWithLocation .fitBreakdown{display:flex;flex-direction:column}
 .placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{grid-column:auto}
 .placement .fit.fitExpanded.uxFitWithLocation .score{min-height:0}
}
/* Decision selector: editorial rounded popover instead of default system grey/blue. */
html .decisionPicker{position:relative}
html .decisionPicker summary{background:var(--panel)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none;border-radius:13px;padding:10px 12px;font-size:14px}
html .decisionPicker summary:hover,html .decisionPicker[open] summary{background:var(--soft)!important;border-color:var(--ux-accent-border)!important}
html .decisionChoices{background:var(--panel)!important;border:1px solid var(--line)!important;box-shadow:0 14px 33px #0003;border-radius:18px;padding:7px;width:235px;z-index:200}
html .decisionChoice{color:var(--ink);font-size:14px;font-weight:550;border-radius:12px;gap:9px;transition:background-color .14s ease}
html .decisionChoice>span:first-child{font-size:19px;width:25px;text-align:center;color:var(--ux-pick)}
html .decisionChoice:hover,html .decisionChoice[aria-pressed="true"]{background:var(--ux-pick-soft)!important;border:1px solid var(--ux-pick-border);color:var(--ink)!important}
html .decisionChoice[aria-pressed="true"]{font-weight:700}
html .decisionTick{color:var(--ux-pick)}
html[data-theme="dark"] .decisionChoices{background:var(--panel)!important}
html[data-theme="dark"] .decisionChoice{color:var(--ink)}
/* The map's greenery remains visible; its legend is a quiet integrated footer. */
html #sectorMapLegend{border-radius:12px!important}
html .map-caption{background:var(--panel);border-color:var(--line)}
/* Whole-site palettes next to map palette, with round swatches. */
#prefs .settings .uxAppearanceSettings{grid-column:auto;align-self:start}
#prefs .settings .uxAppearanceSettings+.settingsCard{align-self:start}
.uxPaletteOptions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.uxPaletteOption{border-radius:17px;min-height:103px;padding:12px;transition:background-color .15s,border-color .15s,transform .12s}
.uxPaletteOption:hover{transform:translateY(-1px);border-color:var(--ux-accent-border)}
.uxPaletteSwatches{gap:0;align-items:center}
.uxPaletteSwatches i{width:28px;height:28px;border-radius:50%;margin-left:-4px;border:2px solid var(--panel);box-shadow:0 2px 5px #0002}
.uxPaletteSwatches i:first-child{margin-left:0}
.uxPaletteOption b{font-size:14px}
.uxPaletteOption small{font-size:12px}
#prefs .settings .colourChoice{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--soft);border-radius:13px;padding:9px 12px;margin:6px 0;color:var(--ink);font-size:14px;font-weight:650}
#prefs .settings input[type="color"]{appearance:none;-webkit-appearance:none;width:30px;height:30px;flex:0 0 30px;border:0;background:transparent;padding:0;cursor:pointer}
#prefs .settings input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
#prefs .settings input[type="color"]::-webkit-color-swatch{border:2px solid var(--panel);border-radius:50%;box-shadow:0 2px 5px #0002}
#prefs .settings input[type="color"]::-moz-color-swatch{border-radius:50%;border:2px solid var(--panel)}
@media(max-width:980px){#prefs .settings .uxAppearanceSettings{grid-column:1/-1}}
@media(max-width:650px){.uxPaletteOptions{grid-template-columns:1fr 1fr}}
/* Collapsible filters, persistent optional floating quick controls. */
.uxFilterHeadActions{display:flex;align-items:center;gap:5px}
.uxIconControl{border:1px solid var(--line);background:var(--panel);color:var(--ink);height:32px;width:32px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.uxIconControl:hover{background:var(--soft);border-color:var(--ux-accent-border)}
#explore.uxFiltersCollapsed .layout{grid-template-columns:minmax(0,1fr)}
#explore.uxFiltersCollapsed #uxFilterSidebar{display:none}
.uxFloatingTools{position:fixed;right:17px;bottom:146px;z-index:650;display:flex;align-items:flex-end;gap:7px;flex-direction:column;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(10px);transition:opacity .17s,transform .17s}
.uxFloatingTools.uxFloatVisible{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.uxFloatHandle{display:grid;place-items:center;width:41px;height:41px;border-radius:50%;border:1px solid var(--ux-accent-border);color:var(--ux-accent-ink);background:var(--panel);box-shadow:0 5px 15px #0002;cursor:pointer}
.uxFloatInner{min-width:220px;width:240px;padding:11px;border-radius:17px;border:1px solid var(--line);box-shadow:0 12px 35px #0003;background:var(--panel);display:grid;gap:9px}
.uxFloatInner[hidden]{display:none}
.uxFloatRow{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink);font-size:14px;font-weight:600}
button.uxFloatRow{width:100%;border:0;border-radius:10px;padding:8px;background:var(--soft);text-align:left;cursor:pointer}
.uxFloatRow input[type="checkbox"]{accent-color:var(--ux-pick);width:17px;height:17px}
.uxFloatRow select{width:115px;min-height:32px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:10px;padding:4px 7px;font-size:13px}
.uxBackTop{position:fixed;right:18px;bottom:88px;z-index:651;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .16s,transform .16s;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 5px 20px #0002;cursor:pointer}
.uxBackTop.uxTopVisible{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
.uxBackTop span{display:none}
.uxBackTop:hover,.uxFloatHandle:hover{background:var(--soft)}
/* No sudden accordion animation, just a gentle result surface fade. */
#results>.placement,#results>.empty{animation:uxAppear .16s ease-out both}
@keyframes uxAppear{from{opacity:.72;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
#results{overflow-anchor:none;min-width:0}
@media(prefers-reduced-motion:reduce){#results>.placement,#results>.empty{animation:none}.uxFloatingTools,.uxBackTop{transition:none}}
@media(max-width:850px){.uxFloatingTools{bottom:143px;right:12px}.uxBackTop{bottom:88px;right:12px}.uxGlobalZoom{order:1}}
/* Daily work information from the original programme description, without inventing actual shifts. */
.uxWorkSchedule{margin:8px 0 3px;border:1px solid var(--line);border-radius:12px;background:var(--soft);max-width:620px;overflow:hidden}
.uxWorkSchedule summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink);font-size:13px;font-weight:700}
.uxWorkSchedule summary::-webkit-details-marker{display:none}
.uxWorkSchedule summary:after{content:"⌄";font-size:16px;color:var(--mut)}
.uxWorkSchedule[open] summary:after{content:"⌃"}
.uxWorkSchedule .uxWorkDetail{padding:0 12px 12px;color:var(--mut);font-size:13px;line-height:1.5}
.uxWorkDays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:8px 0}
.uxWorkDays>div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 3px;text-align:center;font-size:11px}
.uxWorkDays b{display:block;font-size:11px;color:var(--ink)}
.uxWorkDays span{display:block;font-size:9px;color:var(--mut)}
html[data-layout="grid"] .placement:not(.uxExpanded) .uxWorkSchedule{display:none}
/* Simulator columns: compact, rounded and designed for keyboard and drag/drop usage. */
#simulator{min-width:0}
.simHero{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px}
.simHero h2{font-size:30px;margin:5px 0 8px}
.simHero p{max-width:800px;line-height:1.6;color:var(--mut)}
.simSummary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:13px 0;padding:17px 20px;background:var(--soft)}
.simSummaryBig{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;color:var(--ink)}
.simSummaryBig strong:first-child{color:var(--ux-pick)}
.simSummaryBig span{color:var(--mut);font-size:19px}
.simSummary p{margin:5px 0 0;color:var(--mut);font-size:13px}
.simTools{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.simTools>.btn{font-size:12px;padding:9px}
.simZoom{display:flex;gap:4px;align-items:center;background:var(--panel);padding:4px;border:1px solid var(--line);border-radius:12px}
.simZoom .btn{min-height:31px;min-width:29px;padding:4px;border:0;background:transparent;font-size:16px}
.simZoom output{min-width:40px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--mut)}
.simHint{font-size:14px;line-height:1.6;color:var(--mut);margin:12px 0}
.simViewport{overflow-x:auto;padding-bottom:10px;border-radius:18px}
.simColumns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px;min-width:790px}
.simCol{background:var(--panel);border:1px solid var(--line);border-radius:19px;min-width:0;overflow:hidden}
.simCol[data-sim-col="preferred"]{border-top:4px solid var(--ux-pick)}
.simCol[data-sim-col="neutral"]{border-top:4px solid var(--ux-accent)}
.simCol[data-sim-col="unwanted"]{border-top:4px solid #a27b79}
.simCol>header{padding:15px 12px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.simColHeading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.simColHeading h3{font-size:22px;font-weight:700;margin:3px 0 13px;color:var(--ink)}
.simColHeading h3 small{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--mut);vertical-align:middle}
.simColHeading>span{font-size:22px;color:var(--ux-pick)}
.simCol label{display:block;color:var(--ink);font-size:13px;margin:4px 0 5px}
.simCol input[type="search"]{width:100%;padding:10px 12px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;font-size:14px}
.simResults{max-height:210px;overflow-y:auto;display:grid;gap:4px}
.simResult{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px;text-align:left;cursor:pointer}
.simResult:hover{background:var(--ux-accent-soft);border-color:var(--ux-accent-border)}
.simResultCode{font-size:13px;color:var(--ux-pick);font-weight:750}
.simResultName{font-size:12px;line-height:1.3}
.simResultStatus{font-size:10px;color:var(--mut)}
.simList{padding:11px;min-height:190px;display:grid;align-content:start;gap:7px}
.simEmpty{padding:22px 8px;text-align:center;font-size:13px;color:var(--mut)}
.simMore{padding:0 11px 14px;text-align:center}
.simItem{border:1px solid var(--line);border-radius:13px;padding:8px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;background:var(--soft);cursor:grab;transition:border-color .13s,background-color .13s}
.simItem:hover,.simItem.simHover{border-color:var(--ux-accent-border);background:var(--ux-accent-soft)}
.simItem.simDragging{opacity:.55}
.simRank{display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ux-pick);font-size:14px;font-weight:750;height:32px;width:30px;padding:0;cursor:pointer;font-variant-numeric:tabular-nums}
.simItemMain{min-width:0}
.simItemName{font-size:13px;line-height:1.35;display:block;overflow-wrap:anywhere}
.simItemMeta{font-size:11px;line-height:1.4;color:var(--mut);display:block;margin-top:3px}
.simItemActions{grid-column:2;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.simIcon{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;min-width:29px;height:29px;display:grid;place-items:center;cursor:pointer;font-size:13px}
.simIcon.simCopied{background:var(--ux-accent-soft);color:var(--ux-accent-ink)}
.simMove{min-width:0;flex:1;padding:5px;font-size:11px;min-height:29px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px}
.simFoot{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px;margin-top:10px}
.simFoot p{font-size:13px;color:var(--mut)}
.simFoot .btn{flex-shrink:0}
@media(max-width:1020px){.simColumns{min-width:770px}.simHero{flex-direction:column;align-items:flex-start}}
@media(max-width:610px){.simSummary,.simTools,.simFoot{flex-direction:column;align-items:stretch}.simTools>.btn{width:100%}.uxWorkDays{grid-template-columns:repeat(4,minmax(0,1fr))}.uxGlobalZoom output{min-width:30px}}

/* Curated map colours: pill-shaped pastel swatches instead of the rectangular native picker. */
#prefs .uxMapColourSettings{align-self:start}
#prefs .uxMapColourSettings .colourChoice{padding:6px 7px;border:none;background:none;display:flex;margin:10px 0 2px;font-size:14px}
#prefs .uxMapColourSettings .uxNativeColourInput{
 position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;
 padding:0!important;border:0!important;overflow:hidden!important;
}
.uxMapSwatchOptions{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:2px 0 6px 4px}
.uxMapSwatch{background:var(--ux-map-choice);width:27px;height:27px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 2px 7px #0002;cursor:pointer;transition:transform .12s,outline-color .12s}
.uxMapSwatch:hover{transform:scale(1.12)}
.uxMapSwatch[aria-pressed="true"]{outline:2px solid var(--ux-accent);outline-offset:2px}
.uxMapCustom{border:1px solid var(--line);background:var(--soft);color:var(--mut);border-radius:999px;padding:5px 10px;font-size:11px;cursor:pointer}
.uxMapCustom:hover{color:var(--ink);border-color:var(--ux-accent-border)}
html[data-theme="dark"][data-palette="forest"] .uxMapCustom{background:#4e3842;color:#f1dbe0}
#prefs .uxMapColourSettings .btn{margin-top:14px}

/* Simulator copy icon stays on the far right; secondary ordering tools sit quietly below. */
.simItem{grid-template-columns:30px minmax(0,1fr) 30px}
.simItem .simRank{grid-column:1;grid-row:1}
.simItem .simItemMain{grid-column:2;grid-row:1}
.simItem .simCopy{grid-column:3;grid-row:1;justify-self:end}
.simItem .simItemActions{grid-column:2/4;grid-row:2;justify-content:flex-end;gap:5px}
.simItem .simMove{max-width:150px;flex:0 1 140px}
.simItem .simCopy:hover{background:var(--ux-pick-soft);color:var(--ux-pick);border-color:var(--ux-pick-border)}

/* Dark mode: improve legibility of the forest theme LABEL ONLY.
   Deliberately do not change the selected palette card's background. */
html[data-theme="dark"] .uxPaletteOption[data-ux-palette="forest"] b{
 color:#fff8f1!important;
}
html[data-theme="dark"] .uxPaletteOption[data-ux-palette="forest"] small{
 color:#e3e5da!important;
}

/* Mauveine (pink) interface: every decorative accent follows this palette.
   Green survives only when semantically meaningful (good-fit score) or on the actual map. */
html[data-theme="light"][data-palette="mauve"]{
  --green:#754969;--blue:#754969;
  --ux-accent:#885d79;--ux-accent-ink:#70405f;--ux-accent-soft:#f2e3ed;--ux-accent-border:#d8bace;
  --ux-pick:#854a63;--ux-pick-soft:#f5e6ed;--ux-pick-border:#d9bac9;
  --bg:#faf5f8;--panel:#fffbfd;--soft:#f4e9f0;--line:#e6d5e0;--ink:#342630;--mut:#755e6d;
}
html[data-theme="dark"][data-palette="mauve"]{
  --green:#efd0e6;--blue:#efd0e6;
  --ux-accent:#dfadc9;--ux-accent-ink:#ffe0f0;--ux-accent-soft:#58374e;--ux-accent-border:#996c88;
  --ux-pick:#efbed5;--ux-pick-soft:#563547;--ux-pick-border:#9a6e84;
  --bg:#201721;--panel:#302432;--soft:#423043;--line:#654f65;
  --dark:#170f19;--ink:#faf0f6;--mut:#e5d0df;
}
html[data-palette="mauve"] .productIntro{
  background:linear-gradient(123deg,var(--panel),var(--ux-accent-soft))!important;border-color:var(--ux-accent-border);
}
html[data-palette="mauve"] .productPrinciples>div,
html[data-palette="mauve"] .fitColumn.positive,
html[data-palette="mauve"] .fitColumn.caution{
  background:var(--soft)!important;border-color:var(--line)!important;color:var(--ink)!important;
}
html[data-palette="mauve"] .productPrinciples span,
html[data-palette="mauve"] .fitLabel,
html[data-palette="mauve"] .fitColumn.caution .fitLabel,
html[data-palette="mauve"] .fitPoint{color:var(--ink)!important}
html[data-palette="mauve"] .badge.good,
html[data-palette="mauve"] .miniFit:not(.warning),
html[data-palette="mauve"] .score:not([data-fit-tone]),
html[data-palette="mauve"] .chip.on,
html[data-palette="mauve"] .notice,
html[data-palette="mauve"] .reason{
  background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;border-color:var(--ux-accent-border)!important;
}
html[data-theme="light"][data-palette="mauve"] .badge.good,
html[data-theme="light"][data-palette="mauve"] .miniFit:not(.warning),
html[data-theme="light"][data-palette="mauve"] .chip.on{
  color:#643954!important;
}
html[data-theme="dark"][data-palette="mauve"] .badge.good,
html[data-theme="dark"][data-palette="mauve"] .miniFit:not(.warning),
html[data-theme="dark"][data-palette="mauve"] .chip.on,
html[data-theme="dark"][data-palette="mauve"] .reason{
  color:#ffe2f1!important;
}
html[data-palette="mauve"] .tab.active,
html[data-palette="mauve"] .uxLayoutControls .btn[aria-pressed="true"]{
  background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;border-color:var(--ux-accent-border)!important;
}
html[data-palette="mauve"] .btn.primary,
html[data-palette="mauve"] .logo{border-color:var(--ux-accent)!important}
html[data-theme="dark"][data-palette="mauve"] .btn.primary{background:#d7a4c2!important;color:#29192a!important}
html[data-theme="light"][data-palette="mauve"] .btn.primary{background:#8c5377!important;color:#fffafa!important}
html[data-palette="mauve"] .uxPaletteOption[aria-pressed="true"]{
  background:var(--ux-accent-soft)!important;
  border-color:var(--ux-accent-border)!important;
  color:var(--ink)!important;
}
html[data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] b,
html[data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] small{color:var(--ink)!important}
/* All intentional good/poor fit signals remain independent of the decorative theme. */

/* Mauveine / editorial balance, second pass: pink is an accent, not the canvas.
   Quiet neutral fields and card surfaces give the eye places to rest. */
html[data-theme="light"][data-palette="mauve"]{
 --bg:#f7f5f3;--panel:#fffdfa;--soft:#f0eeeb;--line:#ded9dc;
 --dark:#29232b;--ink:#302b30;--mut:#686168;
 --ux-accent:#7d536c;--ux-accent-ink:#6c3d59;
 --ux-accent-soft:#f0e5eb;--ux-accent-border:#d8c1ce;
 --ux-pick:#88536e;--ux-pick-soft:#f3e8ed;--ux-pick-border:#d9bdcb;
 --green:#704c64;--blue:#704c64;
}
html[data-theme="dark"][data-palette="mauve"]{
 --bg:#1c1a20;--panel:#29262d;--soft:#363239;--line:#504a53;
 --dark:#151318;--ink:#f5f1ef;--mut:#d0c5cf;
 --ux-accent:#d4a4c2;--ux-accent-ink:#f2cfe3;
 --ux-accent-soft:#4b3948;--ux-accent-border:#8d6a83;
 --ux-pick:#e1b5ce;--ux-pick-soft:#48343f;--ux-pick-border:#89667a;
 --green:#dfbfd2;--blue:#dfbfd2;
}
html[data-palette="mauve"] .productIntro{
 background:linear-gradient(130deg,var(--panel),var(--soft))!important;
 border-color:var(--line)!important;
}
html[data-palette="mauve"] .productPrinciples>div,
html[data-palette="mauve"] .fitColumn.positive,
html[data-palette="mauve"] .fitColumn.caution,
html[data-palette="mauve"] .notice,
html[data-palette="mauve"] .reason,
html[data-palette="mauve"] .miniFit:not(.warning),
html[data-palette="mauve"] .score:not([data-fit-tone]){
 background:var(--soft)!important;border-color:var(--line)!important;color:var(--ink)!important;
}
html[data-palette="mauve"] .productPrinciples span,
html[data-palette="mauve"] .fitLabel,
html[data-palette="mauve"] .fitColumn.caution .fitLabel,
html[data-palette="mauve"] .fitPoint,
html[data-palette="mauve"] .notice b{
 color:var(--ink)!important;
}
/* Pink is deliberately limited to selected elements, small emphasis and action affordances. */
html[data-palette="mauve"] .chip.on,
html[data-palette="mauve"] .uxLayoutControls .btn[aria-pressed="true"],
html[data-palette="mauve"] .uxPaletteOption[aria-pressed="true"]{
 background:var(--ux-accent-soft)!important;
 border-color:var(--ux-accent-border)!important;
 color:var(--ux-accent-ink)!important;
}
html[data-theme="light"][data-palette="mauve"] .chip.on,
html[data-theme="light"][data-palette="mauve"] .uxLayoutControls .btn[aria-pressed="true"]{
 color:#653c58!important;
}
html[data-palette="mauve"] .tab.active{
 background:var(--panel)!important;border-color:var(--line)!important;color:var(--ink)!important;
}
html[data-palette="mauve"] .badge.good{
 background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;
 border-color:var(--ux-accent-border)!important;
}
html[data-theme="light"][data-palette="mauve"] .badge.good{color:#70415d!important}
html[data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] b,
html[data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] small{color:var(--ink)!important}

/* Mauveine balance pass: keep the pink identity, but let quiet neutral surfaces dominate.
   The map retains its own real-world landcover colours. */
html[data-theme="light"][data-palette="mauve"]{
 --bg:#f6f4f3;--panel:#fffdfa;--soft:#efedeb;--line:#dfdad9;
 --ink:#302b2d;--mut:#655d60;--dark:#292327;
 --ux-accent:#8a687f;--ux-accent-ink:#65485d;--ux-accent-soft:#eee5eb;--ux-accent-border:#d8c7d1;
 --ux-pick:#815c70;--ux-pick-soft:#eee5eb;--ux-pick-border:#d4c0cb;
 --green:#52645a;--blue:#52645a;
}
html[data-theme="dark"][data-palette="mauve"]{
 --bg:#1d1b20;--panel:#29272d;--soft:#343138;--line:#49444d;
 --ink:#f2eef0;--mut:#c7c0c5;--dark:#141216;
 --ux-accent:#bd98b2;--ux-accent-ink:#e1c9da;--ux-accent-soft:#3b303b;--ux-accent-border:#665364;
 --ux-pick:#ad849f;--ux-pick-soft:#39303a;--ux-pick-border:#6b5365;
 --green:#c5b7c1;--blue:#c5b7c1;
}
html[data-palette="mauve"] .placement,
html[data-palette="mauve"] .reco,
html[data-palette="mauve"] .card,
html[data-palette="mauve"] .shortlist-toolbar,
html[data-palette="mauve"] .uxLocationPanel{
 background:var(--panel)!important;border-color:var(--line)!important;
}
html[data-palette="mauve"] .placement .salary-value,
html[data-palette="mauve"] .salary-value{color:var(--ink)!important}
html[data-palette="mauve"] .placement .btn.primary,
html[data-palette="mauve"] .placement [data-action="prefer"]{
 background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;
 border-color:var(--ux-accent-border)!important;
}
html[data-palette="mauve"] .placement .btn.selected,
html[data-palette="mauve"] .decisionPicker summary,
html[data-palette="mauve"] .decision-quick .selected{
 background:var(--ux-pick-soft)!important;color:var(--ink)!important;border-color:var(--ux-pick-border)!important;
}
html[data-palette="mauve"] .shortlist-toolbar .btn.primary,
html[data-palette="mauve"] .tab.active{
 background:var(--ux-accent-soft)!important;color:var(--ux-accent-ink)!important;border-color:var(--ux-accent-border)!important;
}
html[data-theme="dark"][data-palette="mauve"] .placement .btn.primary,
html[data-theme="dark"][data-palette="mauve"] .placement [data-action="prefer"]{
 background:#76596f!important;color:#fff7fb!important;border-color:#94758d!important;
}
html[data-theme="light"][data-palette="mauve"] .placement .btn.primary,
html[data-theme="light"][data-palette="mauve"] .placement [data-action="prefer"]{
 background:#806174!important;color:#fff!important;border-color:#806174!important;
}
html[data-palette="mauve"] .badge,
html[data-palette="mauve"] .chip,
html[data-palette="mauve"] .decisionPicker,
html[data-palette="mauve"] .uxWorkSchedule{
 filter:saturate(.78);
}
html[data-theme="dark"][data-palette="mauve"] .uxPaletteOption[aria-pressed="true"]{
 background:#493b49!important;color:#f6edf4!important;border-color:#866d83!important;
}
html[data-theme="dark"][data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] b,
html[data-theme="dark"][data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] small{color:inherit!important}


/* Final audit polish: date layout, fit-panel proportions, accessible palette contrast and restrained Mauveine. */
/* Programme detail: give the fit score real room; keep the two explanation cards compact at the top. */
.placement .fit.fitExpanded.uxFitWithLocation{
  grid-template-columns:minmax(185px,220px) minmax(260px,1fr) minmax(250px,340px);
  gap:12px;align-items:start;
}
.placement .fit.fitExpanded.uxFitWithLocation .score{
  min-width:185px;min-height:174px;padding:18px 16px;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitBreakdown{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  align-self:start;gap:9px;width:100%;min-width:0;padding:0;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn{
  width:max-content;min-width:min(225px,100%);max-width:min(100%,360px);
  min-height:0;height:auto;flex:0 0 auto;align-self:center;justify-self:center;
  padding:11px 15px;text-align:center;
  background:var(--soft);border:1px solid var(--line);box-shadow:none;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn .fitLabel{
  margin:0 0 6px;color:var(--ux-accent-ink);font-size:12px;line-height:1.3;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn.caution .fitLabel{color:var(--ux-pick)}
.placement .fit.fitExpanded.uxFitWithLocation .fitPoint{
  max-width:34ch;margin:2px auto;color:var(--ink);font-size:13px;line-height:1.45;text-align:center;
}
.placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{
  width:100%;max-width:340px;justify-self:end;min-width:0;
}
@media(max-width:1100px){
  .placement .fit.fitExpanded.uxFitWithLocation{
    grid-template-columns:minmax(175px,205px) minmax(230px,1fr) minmax(235px,300px);
    gap:9px;
  }
}
@media(max-width:850px){
  .placement .fit.fitExpanded.uxFitWithLocation{grid-template-columns:minmax(170px,200px) minmax(0,1fr)}
  .placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{grid-column:1/-1;max-width:100%;justify-self:stretch}
}
@media(max-width:610px){
  .placement .fit.fitExpanded.uxFitWithLocation{grid-template-columns:minmax(0,1fr)}
  .placement .fit.fitExpanded.uxFitWithLocation .score{min-width:0;min-height:145px}
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn{min-width:min(240px,100%)}
  .placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{grid-column:auto}
}
/* The pharmacy mark is a neutral line symbol, not an emoji or a coloured tile. */
html .logo{
  width:46px;height:46px;min-width:46px;padding:0;
  background:transparent!important;color:var(--mut)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
html .logo svg{display:block;width:42px;height:42px;color:currentColor;stroke:currentColor}
html[data-theme="dark"] .logo,html[data-theme="dark"] .logo svg{color:var(--ink)!important}
/* Keep the forest palette's selected swatch dark and readable in dark mode. */
html[data-theme="dark"][data-palette="forest"] .uxPaletteOption[aria-pressed="true"]{
  background:#344538!important;border-color:#718875!important;color:#f3f4ed!important;
}
html[data-theme="dark"][data-palette="forest"] .uxPaletteOption[aria-pressed="true"] b,
html[data-theme="dark"][data-palette="forest"] .uxPaletteOption[aria-pressed="true"] small{color:inherit!important}
/* Mauveine: charcoal-plum surfaces first, dusty mauve only for selection and small accents. */
html[data-theme="dark"][data-palette="mauve"]{
  --bg:#1d1b20;--panel:#29282d;--soft:#353238;--line:#4a454c;
  --ink:#f2eef1;--mut:#c7c0c5;--dark:#151318;
  --ux-accent:#a887a0;--ux-accent-ink:#d8c6d3;--ux-accent-soft:#39323b;--ux-accent-border:#665363;
  --ux-pick:#9b788b;--ux-pick-soft:#393239;--ux-pick-border:#65505e;
  --green:var(--ink);--blue:var(--ink);
}
html[data-palette="mauve"] .placement .salary,
html[data-palette="mauve"] .placement .salary-value{color:var(--ink)!important}
html[data-palette="mauve"] .placement .hourly,
html[data-palette="mauve"] .placement .uxTakeHome{color:var(--mut)!important}
html[data-palette="mauve"] .placement .btn.selected,
html[data-palette="mauve"] .placement .decisionPicker summary,
html[data-palette="mauve"] .placement .decision-quick .selected{
  background:var(--soft)!important;color:var(--ink)!important;border-color:var(--ux-pick-border)!important;
}
html[data-palette="mauve"] .uxDrawerLauncher{
  background:#795d70!important;border-color:#96798c!important;color:#fff!important;
}
html[data-theme="dark"][data-palette="mauve"] .uxPaletteOption[aria-pressed="true"]{
  background:#493b49!important;color:#f6edf4!important;border-color:#866d83!important;
}
html[data-theme="dark"][data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] b,
html[data-theme="dark"][data-palette="mauve"] .uxPaletteOption[aria-pressed="true"] small{color:inherit!important}
/* The programme date row is a real grid, so its date and duration can never run together. */
html .programmeDates{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px 10px;min-width:0}
html .programmeDates .dateStart{justify-self:start}
html .programmeDates .dateEnd{text-align:right;justify-self:end}
html .programmeDates .dateBasis{grid-column:1/-1;margin:0;white-space:normal;overflow-wrap:anywhere}


/* Primary actions in Mauveine should read as muted wine, not bright pink. */
html[data-theme="dark"][data-palette="mauve"] .btn.primary,
html[data-theme="dark"][data-palette="mauve"] .placement .btn.primary{
  background:#574451!important;color:#f5edf2!important;border-color:#796273!important;
}
html[data-theme="light"][data-palette="mauve"] .btn.primary,
html[data-theme="light"][data-palette="mauve"] .placement .btn.primary{
  background:#806174!important;color:#fff!important;border-color:#806174!important;
}


/* Methadone Forest keeps its olive light mode; its dark companion is burgundy, not green. */
html[data-theme="dark"][data-palette="forest"]{
  --bg:#1b171b;--panel:#29232a;--soft:#372f37;--line:#4c414b;
  --ink:#f2edf0;--mut:#c8bec6;--dark:#130f13;
  --ux-accent:#b08b9e;--ux-accent-ink:#e2cdd9;--ux-accent-soft:#42333e;--ux-accent-border:#725968;
  --ux-pick:#9b6e80;--ux-pick-soft:#3b2d35;--ux-pick-border:#6d4c5a;
  --green:var(--ux-accent-ink);--blue:var(--ux-accent-ink);
}
html[data-theme="dark"][data-palette="forest"] .btn.primary{color:#fff!important}


/* Mauveine badge balance: keep sector blue/industry plum and sponsorship warnings distinct;
   neutralise the repeated green GP/community/location/hour chips. */
html[data-palette="mauve"] .placement .badges .badge:not(.badge-hospital):not(.badge-industry):not(.badge-sponsorship-warning):not(.badge-specialist),
html[data-palette="mauve"] .placement .badges .badge-gp,
html[data-palette="mauve"] .placement .badges .badge-community{
  background:var(--soft)!important;color:var(--ink)!important;border-color:var(--line)!important;
}


/* Cohesive select controls: the closed field matches the rounded desk; option colours
   follow the selected palette wherever the browser exposes option styling. */
html select:not([multiple]){
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
  padding-right:34px;cursor:pointer;
}
html select option{background:var(--panel);color:var(--ink)}
html select option:checked{background:var(--ux-accent-soft);color:var(--ux-accent-ink)}
html select:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}

/* Final programme-detail composition: preserve the familiar cards, give each a deliberate width. */
/* Desktop: score and map are the wide cards; the two explanatory cards share a narrower middle column. */
.placement .fit.fitExpanded.uxFitWithLocation{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(190px,.82fr) minmax(300px,1.1fr);
  gap:12px;
  align-items:stretch;
  justify-content:stretch;
}
.placement .fit.fitExpanded.uxFitWithLocation .score{
  width:100%;
  min-width:0;
  min-height:174px;
  align-self:stretch;
  box-sizing:border-box;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitBreakdown{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:stretch;
  align-self:stretch;
  width:100%;
  min-width:0;
  min-height:0;
  gap:9px;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:none;
  min-height:0;
  height:auto;
  align-self:stretch;
  justify-self:stretch;
  flex:1 1 0;
  padding:13px 15px;
  text-align:left;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn:first-child{flex:1.15 1 0}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn:last-child{flex:.85 1 0}
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn .fitLabel,
.placement .fit.fitExpanded.uxFitWithLocation .fitColumn.caution .fitLabel{
  margin:0 0 7px;
  color:var(--ux-accent-ink)!important;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}
.placement .fit.fitExpanded.uxFitWithLocation .fitPoint{
  max-width:none;
  margin:3px 0;
  color:var(--ink)!important;
  font-size:13px;
  line-height:1.5;
  text-align:left;
  overflow-wrap:anywhere;
}
.placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{
  display:flex;
  width:100%;
  max-width:none;
  min-width:0;
  align-self:stretch;
  justify-self:stretch;
  box-sizing:border-box;
}
/* Forest's explanation headings use a clear, deeper green; dark mode uses a readable sage. */
html[data-theme="light"][data-palette="forest"] .placement .fit.fitExpanded.uxFitWithLocation .fitColumn .fitLabel,
html[data-theme="light"][data-palette="forest"] .placement .fit.fitExpanded.uxFitWithLocation .fitColumn.caution .fitLabel{
  color:#31563a!important;
}
html[data-theme="dark"][data-palette="forest"] .placement .fit.fitExpanded.uxFitWithLocation .fitColumn .fitLabel,
html[data-theme="dark"][data-palette="forest"] .placement .fit.fitExpanded.uxFitWithLocation .fitColumn.caution .fitLabel{
  color:#c5d9c6!important;
}
/* An expanded grid card takes the full row, so its detail columns never spill over neighbours. */
html[data-layout="grid"] .placement.uxExpanded{
  grid-column:1/-1!important;
  position:relative;
  z-index:2;
  width:100%;
}
html[data-layout="grid"] .placement.uxExpanded .fit.fitExpanded.uxFitWithLocation{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(190px,.82fr) minmax(300px,1.1fr);
}
html[data-layout="grid"] .placement.uxExpanded .fit.fitExpanded.uxFitWithLocation .fitBreakdown{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
}
html[data-layout="grid"] .placement.uxExpanded .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{display:flex}
/* Tablet: retain the familiar score → paired explanations → location sequence. */
@media(max-width:850px){
  .placement .fit.fitExpanded.uxFitWithLocation{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .placement .fit.fitExpanded.uxFitWithLocation .score{
    min-height:110px;
    align-items:flex-start;
    text-align:left;
    padding:15px 17px;
  }
  .placement .fit.fitExpanded.uxFitWithLocation .fitBreakdown{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-self:auto;
    min-height:0;
    height:auto;
    gap:9px;
  }
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn,
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn:first-child,
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn:last-child{
    flex:initial;
    min-height:112px;
    width:100%;
  }
  .placement .fit.fitExpanded.uxFitWithLocation .uxLocationPanel{
    grid-column:1/-1;
    max-width:none;
  }
}
@media(max-width:480px){
  .placement .fit.fitExpanded.uxFitWithLocation .fitBreakdown{grid-template-columns:minmax(0,1fr)}
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn,
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn:first-child,
  .placement .fit.fitExpanded.uxFitWithLocation .fitColumn:last-child{min-height:0}
}

/* Final UX pass: real viewport-aware zoom, visible controls, commute guidance and a left-aligned fit score. */
:root{--ux-shell-width:100%;--ux-shell-max-width:1540px}
html .shell{
  width:var(--ux-shell-width,100%);
  max-width:var(--ux-shell-max-width,1540px);
}
/* This dock sits outside the zoomed shell, so it stays fixed to the viewport. */
.uxPageZoomDock{
  position:fixed;left:16px;bottom:16px;z-index:1400;
  display:flex;align-items:center;gap:4px;
  padding:5px;border:1px solid var(--line);border-radius:15px;
  background:var(--panel);color:var(--ink);
  box-shadow:0 8px 26px #0003;
}
.uxPageZoomDock .btn{
  display:grid;place-items:center;
  width:35px;height:35px;min-height:35px;min-width:35px;
  padding:0;border:0;border-radius:10px;
  background:var(--soft);color:var(--ink);font-size:19px;font-weight:750;
}
.uxPageZoomDock .btn:hover{background:var(--ux-accent-soft);color:var(--ux-accent-ink)}
.uxPageZoomDock .btn:disabled{opacity:.38;cursor:not-allowed}
.uxPageZoomDock output{
  min-width:43px;text-align:center;font-size:11px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--mut);
}
.uxNoBreak{white-space:nowrap;display:inline-block}
.productIntro h2 .uxNoBreak{white-space:nowrap}
@media(max-width:600px){
  .uxPageZoomDock{left:10px;bottom:10px;padding:4px;gap:2px}
  .uxPageZoomDock .btn{width:32px;height:32px;min-width:32px;min-height:32px}
  .uxPageZoomDock output{min-width:38px}
}
/* Keep the score panel's contents left-aligned, as in the original card design. */
.placement .fit.fitExpanded.uxFitWithLocation .score{
  align-items:flex-start!important;
  text-align:left!important;
}
.placement .fit.fitExpanded.uxFitWithLocation .score>*{text-align:left!important}
@media(max-width:850px){
  .placement .fit.fitExpanded.uxFitWithLocation .score{
    align-items:flex-start!important;
    text-align:left!important;
  }
}
/* The applied quiz profile is visible in Explore without turning soft priorities into hard exclusions. */
.uxProfileApplied{
  margin:0 0 12px;padding:10px 11px;
  border:1px solid var(--line);border-radius:13px;
  background:var(--soft);
}
.uxProfileApplied[hidden]{display:none!important}
.uxProfileAppliedChips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.uxProfileChip{
  display:inline-flex;align-items:center;
  padding:5px 8px;border:1px solid var(--ux-accent-border);
  border-radius:999px;background:var(--ux-accent-soft);
  color:var(--ux-accent-ink);font-size:10px;font-weight:750;line-height:1.35;
}
.uxProfileApplied>p{margin:7px 1px 0;color:var(--mut);font-size:10px;line-height:1.45}
.uxHomePostcodeFilter{
  margin:9px 0 12px;padding:11px;
  border:1px solid var(--line);border-radius:13px;background:var(--soft);
}
.uxHomePostcodeFilter .field{margin-bottom:8px}
.uxHomePostcodeFilter>.btn{width:100%;min-height:34px;padding:8px 10px}
#uxHomePostcodeStatus{margin:7px 1px 0;line-height:1.45}
#uxHomePostcodeStatus.is-error{color:var(--red)!important;font-weight:700}
/* Personal commute assessment is separate from the unchanged training-site map pin. */
.uxCommuteAdvice{
  display:grid;gap:4px;min-width:0;
  padding:10px 11px;border:1px solid var(--line);
  border-radius:11px;background:var(--soft);
  color:var(--ink);font-size:11px;line-height:1.45;
}
.uxCommuteAdvice[hidden]{display:none!important}
.uxCommuteAdvice>strong{font-size:11px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.uxCommuteSummary{font-size:11px;font-weight:700;line-height:1.45}
.uxCommuteDetails{font-size:10px;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
.uxCommuteMeta{font-size:9px;color:var(--mut);line-height:1.4}
.uxCommuteAdvice.is-convenient{background:#edf5ed;border-color:#bfd5c0}
.uxCommuteAdvice.is-convenient>strong{color:#315b3d}
.uxCommuteAdvice.is-not-convenient{background:#f7eee9;border-color:#e2c9bb}
.uxCommuteAdvice.is-not-convenient>strong{color:#875044}
.uxCommuteAdvice.is-unverified{background:var(--soft);border-color:var(--line)}
.uxCommuteAdvice.is-unverified>strong{color:var(--mut)}
html[data-theme="dark"] .uxCommuteAdvice.is-convenient{background:#293e30;border-color:#56745e}
html[data-theme="dark"] .uxCommuteAdvice.is-convenient>strong{color:#c8e4cb}
html[data-theme="dark"] .uxCommuteAdvice.is-not-convenient{background:#49312d;border-color:#80564c}
html[data-theme="dark"] .uxCommuteAdvice.is-not-convenient>strong{color:#f0c2b5}
html[data-theme="dark"] .uxCommuteAdvice.is-unverified{background:var(--soft);border-color:var(--line)}