/* Nordic Homebase Build 012 — Nordic UI Migration */
.nordic-inline-heading{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.nordic-inline-heading .nordic-feature-icon{
  flex:0 0 auto;
}
.nordic-feature-icon--panel{
  width:28px;
  height:28px;
}
.nordic-feature-icon--hero{
  width:46px;
  height:46px;
}
.nordic-feature-icon--bag{
  width:28px;
  height:28px;
}
.finance-today-icon,
.health-today-icon,
.preparedness-bag-icon{
  color:inherit;
}
.finance-today-icon:has(.nordic-feature-icon),
.health-today-icon:has(.nordic-feature-icon),
.preparedness-bag-icon:has(.nordic-feature-icon){
  font-size:0;
}
.preparedness-bag-icon:has(.nordic-feature-icon){
  background:color-mix(in srgb,var(--icon-accent,var(--accent)) 12%,var(--solid));
}
#roleModeToggleIcon,
.developer-return-button>span:first-child{
  display:grid;
  place-items:center;
}
#roleModeToggleIcon .nordic-feature-icon{
  width:18px;
  height:18px;
}
.developer-return-button .nordic-feature-icon{
  width:24px;
  height:24px;
}

/* Nordic Select V2 */
.nordic-select-trigger{
  min-height:42px;
}
.nordic-select-trigger-main,
.nordic-select-option-main{
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
}
.nordic-select-trigger-main .nordic-feature-icon,
.nordic-select-option-main .nordic-feature-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
}
.nordic-select-label,
.nordic-select-option-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nordic-select-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.nordic-select-option-check{
  width:17px;
  height:17px;
  border:1px solid var(--line);
  border-radius:50%;
  flex:0 0 auto;
  opacity:.65;
}
.nordic-select-option.active .nordic-select-option-check{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 72%,transparent);
  opacity:1;
}
select[data-nordic-select]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Nordic File Control */
.nordic-file-control{
  display:grid;
  gap:8px;
}
.nordic-file-control input[type="file"]{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}
.nordic-file-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s;
}
.nordic-file-button:hover{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}
.nordic-file-button:active{
  transform:translateY(1px);
}
.nordic-file-button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 72%,transparent);
  outline-offset:2px;
}
.nordic-file-button .nordic-feature-icon{
  width:20px;
  height:20px;
}
.nordic-file-name{
  color:var(--muted);
  font-size:.84rem;
  overflow-wrap:anywhere;
}
.home-map-upload.nordic-file-control{
  padding:var(--space-m);
}
.home-map-upload.nordic-file-control>span:first-child{
  color:var(--text);
  font-weight:700;
}

/* Nordic toggle refinement */
.role-mode-toggle i{
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent);
}
.role-mode-toggle i::after{
  box-shadow:0 3px 9px rgba(0,0,0,.28);
}
.role-mode-toggle.active i{
  border-color:color-mix(in srgb,var(--accent) 65%,var(--line));
  background:color-mix(in srgb,var(--accent) 58%,var(--surface));
}

/* Native controls are hidden only after enhancement */
html.nordic-ui-v2-ready input[type="checkbox"]:not([data-native-control]),
html.nordic-ui-v2-ready input[type="radio"]:not([data-native-control]){
  accent-color:var(--accent);
}

/* Audit badge */
.ui-migration-audit{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.ui-migration-audit::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}

@media(max-width:620px){
  .nordic-file-button{
    justify-content:flex-start;
  }
}